/* XIRA — panel kendali.
   Bahasa visual: katalog perpustakaan malam. Tinta biru-gelap, aksen kuningan,
   nomor katalog monospace. Angka dan label teknis pakai IBM Plex Mono;
   judul pakai Fraunces supaya terasa katalog cetak, bukan konsol admin generik. */

:root {
  --ink: #12151c;
  --ink-raised: #191d26;
  --ink-sunken: #0d1015;
  --rule: #262b36;
  --rule-soft: #1f242d;
  --paper: #e8e4da;
  --muted: #8b9099;
  --muted-dim: #5e646e;
  --brass: #c89b3c;
  --brass-dim: #8a6c2a;
  --jade: #4fa88a;
  --rust: #c9584a;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --gap: 1.5rem;
  --radius: 3px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brass);
}

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

/* ── Tipografi bersama ─────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin: 0 0 0.35rem;
}

.page-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  letter-spacing: -0.015em;
  margin: 0 0 0.25rem;
}

.page-lede {
  color: var(--muted);
  margin: 0 0 var(--gap);
  max-width: 60ch;
}

/* Member Status Board: one operational strip first, then the controls that
   shape it. The thin brass signal line is deliberately reserved for this live
   view, echoing a channel meter without competing with the dashboard chrome. */
.papan-live {
  display: grid;
  grid-template-columns: minmax(13rem, 1.25fr) repeat(3, minmax(4.6rem, 0.42fr));
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass);
  background: linear-gradient(100deg, rgba(200, 155, 60, 0.08), transparent 42%), var(--ink-raised);
}

.papan-live-lead,
.papan-metrics > div,
.papan-channel-ledger {
  padding: 1rem 1.1rem;
  border-right: 1px solid var(--rule-soft);
}

.papan-live-lead {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.papan-live-icon {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--brass);
  border: 1px solid rgba(200, 155, 60, 0.45);
  background: rgba(200, 155, 60, 0.08);
}

.papan-live-icon svg { width: 1.05rem; }

.papan-kicker {
  margin: 0 0 0.18rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  color: var(--muted-dim);
  text-transform: uppercase;
}

.papan-live-lead strong,
.papan-live-lead span { display: block; min-width: 0; }
.papan-live-lead strong { font-weight: 500; }
.papan-live-lead > div > span { overflow: hidden; color: var(--muted); font-family: var(--mono); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }

.papan-metrics {
  display: contents;
  margin: 0;
}

.papan-metrics > div { display: flex; flex-direction: column; justify-content: center; }
.papan-metrics dt { color: var(--muted-dim); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.papan-metrics dd { margin: 0.1rem 0 0; color: var(--paper); font-family: var(--display); font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1; }

.papan-channel-ledger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  border-right: 0;
}

.papan-channel-ledger span,
.papan-installations span { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted-dim); font-family: var(--mono); font-size: 0.67rem; }
.papan-channel-ledger .is-present { color: var(--jade); }
.papan-channel-ledger svg,
.papan-installations svg { width: 0.82rem; height: 0.82rem; }

.papan-settings { padding-top: 1.1rem; }
.papan-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 0.65rem; }
.papan-section-head .panel-title { margin: 0; }
.papan-section-head > span { max-width: 26rem; color: var(--muted-dim); font-size: 0.76rem; text-align: right; }
.papan-section-head--secondary { margin-top: 1.55rem; padding-top: 1.15rem; border-top: 1px solid var(--rule); }

.papan-installations { display: flex; flex-wrap: wrap; gap: 0.45rem 1.15rem; margin-top: 1.15rem; padding: 0.8rem 0.9rem; border: 1px solid var(--rule-soft); background: var(--ink-sunken); }
.papan-installations span { color: var(--muted); }
.papan-installations svg { color: var(--brass-dim); }

@media (max-width: 760px) {
  .papan-live { grid-template-columns: 1fr 1fr 1fr; }
  .papan-live-lead { grid-column: 1 / -1; border-bottom: 1px solid var(--rule-soft); }
  .papan-metrics > div:last-child { border-right: 0; }
  .papan-channel-ledger { display: none; }
  .papan-section-head { align-items: flex-start; flex-direction: column; gap: 0.3rem; }
  .papan-section-head > span { text-align: left; }
}

/* Overview treats service state as an operational register: every row answers
   the same three questions — which service, where or how it runs, and whether
   it is currently active. */
.service-summary {
  margin-bottom: var(--gap);
}

.service-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.service-summary-head .hint {
  margin: -0.35rem 0 0;
}

.service-summary-count {
  margin: 0;
  color: var(--muted-dim);
  font-family: var(--mono);
  font-size: 0.7rem;
  white-space: nowrap;
}

.service-summary-count strong {
  color: var(--brass);
  font-size: 0.92rem;
}

.service-summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-soft);
}

.service-summary-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 4rem;
  padding: 0.65rem 0.35rem;
  border-bottom: 1px solid var(--rule-soft);
}

.service-summary-copy {
  display: grid;
  min-width: 0;
}

.service-summary-copy strong {
  font-size: 0.86rem;
  font-weight: 500;
}

.service-summary-copy span {
  overflow: hidden;
  color: var(--muted-dim);
  font-size: 0.72rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.service-summary-state {
  color: var(--muted-dim);
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .service-summary-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
}

.app-loading {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.loading-note {
  font-family: var(--mono);
  color: var(--muted-dim);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

/* ── Layar login ───────────────────────────────────────── */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  /* Cahaya lampu baca tunggal di ruang gelap. */
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(200, 155, 60, 0.09), transparent 65%),
    var(--ink);
}

.login-card {
  width: min(30rem, 100%);
  text-align: center;
}

.wordmark {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3.6rem, 12vw, 5.4rem);
  letter-spacing: 0.16em;
  line-height: 1;
  margin: 0;
  padding-left: 0.16em;
  color: var(--paper);
}

.wordmark-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-dim), transparent);
  margin: 1.4rem 0 1.1rem;
}

.login-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 2.2rem;
}

.login-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 1.6rem auto 0;
  max-width: 34ch;
}

/* ── Tombol ────────────────────────────────────────────── */
.btn {
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.62rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--ink-raised);
  color: var(--paper);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover {
  border-color: var(--brass-dim);
}

.btn-primary {
  background: var(--brass);
  border-color: var(--brass);
  color: #17130a;
  font-weight: 600;
}

.btn-primary:hover {
  background: #d8ab4b;
  border-color: #d8ab4b;
}

.btn-lg {
  font-size: 1rem;
  padding: 0.85rem 1.6rem;
}

.btn-ghost {
  background: transparent;
}

.btn-danger:hover {
  border-color: var(--rust);
  color: var(--rust);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Kerangka aplikasi ─────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: 16.5rem 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--ink-sunken);
  border-right: 1px solid var(--rule);
  /* Padding atas dipindah ke `.sidebar-head`. Sticky tidak boleh naik melewati
     batas atas containing block-nya — yaitu content box sidebar ini — jadi
     selama padding atasnya masih di sini, kepala sidebar tertahan sejauh
     padding itu dan tidak pernah benar-benar menempel di tepi. */
  padding: 0 1.25rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/*
 * Kepala sidebar — nama bot dan pemilih server — menempel di atas.
 *
 * Margin negatif di kiri-kanan menarik kotak ini sampai ke tepi sidebar, lalu
 * paddingnya dipasang lagi di dalam. Tanpa itu latarnya berhenti di batas
 * padding, dan menu yang lewat di belakangnya menyembul di sela kiri-kanan.
 *
 * Padding atasnya ada di sini, bukan di `.sidebar` — lihat alasannya di sana.
 */
.sidebar-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 0 -1.25rem;
  padding: 1.6rem 1.25rem 1.1rem;
  background: var(--ink-sunken);
  border-bottom: 1px solid var(--rule-soft);
}

.sidebar-brand {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.7rem;
  letter-spacing: 0.14em;
  margin: 0;
  padding-left: 0.14em;
}

.sidebar-tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin: 0.15rem 0 0;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  /* Ruang scrollbar dibuat stabil agar posisi menu tidak bergeser. */
  scrollbar-gutter: stable;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  color: var(--muted);
  font-family: var(--body);
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  stroke-width: 1.8;
}

.nav-item:hover {
  color: var(--paper);
}

.nav-item[aria-current="true"] {
  color: var(--paper);
  border-left-color: var(--brass);
  animation: nav-item-terpilih 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Shell digambar ulang saat menu berpindah, jadi transition biasa tidak punya
   elemen lama untuk dianimasikan. Keyframe ini memberi penanda aktif rasa
   "datang" dari kiri tanpa menggeser daftar menu di sekitarnya. */
@keyframes nav-item-terpilih {
  from {
    color: var(--muted);
    border-left-color: transparent;
    opacity: 0.58;
    transform: translateX(-0.35rem);
  }

  to {
    color: var(--paper);
    border-left-color: var(--brass);
    opacity: 1;
    transform: translateX(0);
  }
}

.nav-num {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--muted-dim);
}

.nav-item[aria-current="true"] .nav-num {
  color: var(--brass);
}

.sidebar-block {
  border-top: 1px solid var(--rule-soft);
  padding-top: 1.1rem;
}

/* Label yang ditemani tombol "i". Labelnya sendiri block, jadi tanpa pembungkus
   ini tombolnya jatuh ke baris berikutnya. Jarak bawahnya pindah ke pembungkus
   supaya tombolnya sejajar betul dengan tulisan labelnya. */
.label-with-tip {
  display: flex;
  align-items: center;
  margin-bottom: 0.45rem;
}

.label-with-tip .field-label {
  margin-bottom: 0;
}

.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 0.45rem;
}

.sidebar-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-top: 1px solid var(--rule-soft);
  padding-top: 1.1rem;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}

.user-name {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.link-quiet {
  background: none;
  border: 0;
  color: var(--muted-dim);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}

.link-quiet:hover {
  color: var(--rust);
}

.main {
  padding: 2.4rem clamp(1.25rem, 3.5vw, 3rem) 4rem;
}

/* The overview opens as a control-room readout: server identity on the left,
   operational health on the right, then the detail register below. */
.overview-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.4rem;
  padding: 0.3rem 0 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.overview-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 1rem;
}

.overview-guild-mark {
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--brass-dim);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #303746, var(--ink-raised) 68%);
  color: var(--brass);
  font-family: var(--display);
  font-size: 1.8rem;
}

.overview-guild-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overview-hero .page-lede {
  margin-bottom: 0;
}

.overview-health {
  width: min(14rem, 34vw);
  flex: 0 0 auto;
  padding-left: 1.3rem;
  border-left: 2px solid var(--brass-dim);
}

.overview-health > p:not(.eyebrow) {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.15rem 0 0.55rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.overview-health strong {
  color: var(--paper);
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
}

.overview-health-bar {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ink-sunken);
}

.overview-health-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--jade);
  transition: width 280ms ease;
}

/* ── Rel statistik: deret label/nilai berpemisah garis ──── */
.stat-rail {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--ink-raised);
  margin-bottom: 2.2rem;
}

.stat {
  flex: 1 1 8rem;
  padding: 1rem 1.2rem;
  border-right: 1px solid var(--rule-soft);
}

.stat:last-child {
  border-right: 0;
}

.stat-value {
  font-family: var(--mono);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.stat-value.is-on {
  color: var(--jade);
}

.stat-value.is-off {
  color: var(--muted-dim);
}

.stat-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-top: 0.3rem;
}

/* ── Panel ─────────────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--gap);
}

.overview-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.75fr);
  gap: var(--gap);
  align-items: start;
}

.overview-catalogue {
  display: grid;
  gap: var(--gap);
}

@media (max-width: 900px) {
  .overview-content-grid {
    grid-template-columns: 1fr;
  }

  .overview-catalogue {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .overview-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.25rem;
  }

  .overview-guild-mark {
    width: 3.5rem;
    height: 3.5rem;
  }

  .overview-health {
    width: 100%;
  }

  .overview-catalogue {
    grid-template-columns: 1fr;
  }
}

.panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--ink-raised);
  padding: 1.3rem 1.4rem;
}

.panel-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 1rem;
  letter-spacing: 0.01em;
}

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

.tally li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.tally li:last-child {
  border-bottom: 0;
}

.tally-count {
  font-family: var(--mono);
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

/* ── Katalog resource ──────────────────────────────────── */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}

.input,
.textarea,
.select {
  font-family: var(--body);
  font-size: 0.9rem;
  color: var(--paper);
  background: var(--ink-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  width: 100%;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--muted-dim);
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--brass-dim);
  outline: none;
}

.textarea {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 8rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.form-row {
  margin-bottom: 0.9rem;
}

/* Kartu katalog: nomor di kolom kiri, isi di kanan. */
.card-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule-soft);
}

.card {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 0.95rem 0.2rem;
  border-bottom: 1px solid var(--rule-soft);
}

/* Grafik bukan item papan peringkat: jangan pakai grid tiga kolom `.card`,
   karena itu menyempitkan dan menutupi kontrol filternya. */
.playtime-chart-card {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--ink-raised);
}

.playtime-chart-header {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 1.5rem;
}

.playtime-chart-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.playtime-chart-title-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.playtime-chart-filter {
  width: auto;
  flex: 0 0 auto;
  cursor: pointer;
  pointer-events: auto;
}

#onlineUserFilter {
  max-width: 14rem;
}

.online-member-filter {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.online-member-chips {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 0.3rem;
  width: 100%;
}

.online-member-chips:empty {
  display: none;
}

.online-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  max-width: 8.8rem;
  overflow: hidden;
  padding: 0.32rem 0.48rem;
  color: var(--brass);
  background: color-mix(in srgb, var(--brass) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--brass) 42%, var(--rule));
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.65rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-member-chip:hover {
  color: var(--paper);
  border-color: var(--brass);
}

.online-member-chip span {
  flex: 0 0 auto;
  font-size: 0.9rem;
  line-height: 0.6;
}

.playtime-chart-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 620px) {
  .playtime-chart-controls,
  .playtime-chart-filter {
    width: 100%;
  }

  .playtime-chart-title-controls {
    align-items: flex-start;
    flex-direction: column;
  }

  #onlineUserFilter {
    max-width: none;
  }

  .online-member-filter {
    width: 100%;
    flex-wrap: wrap;
  }

  .online-member-filter #onlineUserFilter {
    flex: 1 1 12rem;
  }
}


/* ── Blok gelar di halaman Level ──────────────────────────────────
   Dulu seluruh bagian ini digaya lewat atribut `style` inline, termasuk garis
   pemisahnya — yang memakai `var(--border)`, variabel yang tidak pernah ada.
   Satu var yang tak terdefinisi membatalkan seluruh shorthand `border-top`,
   jadi pemisahnya tidak pernah tergambar sama sekali. */
.gelar-blok {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.gelar-judul {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.gelar-blok > .hint,
.gelar-blok > .warn,
.gelar-blok > .switch-row,
.gelar-blok > .actions {
  margin-bottom: 1rem;
}

.gelar-daftar {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.title-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: 0.5rem;
}

@media (max-width: 620px) {
  .title-row {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  }
}

/* Jawaban prompt uji. `pre-wrap` supaya baris baru dari model tetap terlihat —
   jawaban berisi daftar atau potongan kode sebelumnya menggumpal jadi satu
   paragraf, dan itu justru bentuk yang paling ingin diperiksa saat menguji. */
.ai-jawaban {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


/* Panel usulan ringkasan. Diberi garis kuningan supaya terbaca sebagai
   sesuatu yang menunggu keputusan, bukan sebagai isi halaman yang sudah tetap. */
.ringkasan-panel {
  margin-bottom: 1.2rem;
  border-color: var(--brass-dim);
}

/* Angka yang melewati batas: servernya akan menolak, jadi katakan sekarang. */
.ringkasan-lebih {
  color: var(--rust);
  font-weight: 600;
}

/* ── Online Tracker ─────────────────────────────────────────────── */
.card-online {
  align-items: start;
}

.online-member {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

/* Sebaran status di dalam batang: proporsi online, idle, dan dnd terhadap
   seluruh waktu hadir orang itu. Warnanya mengikuti warna status Discord supaya
   tidak perlu dihafal. Jalur dan batangnya sendiri memakai `.share-bar-track`
   dan `.share-bar` milik halaman Playtime — persoalannya sama, jadi tidak perlu
   dua kelas yang berbeda tipis. */
.online-seg {
  flex-shrink: 1;
  min-width: 2px;
  border-radius: 999px;
}

.online-seg-online {
  background: var(--jade);
}

.online-seg-idle {
  background: var(--brass);
}

.online-seg-dnd {
  background: var(--rust);
}

.online-legends {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
}

.online-legend {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: var(--muted-dim);
  font-family: var(--mono);
  font-size: 0.66rem;
}

.online-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
}

@media (max-width: 48rem) {
  .card-online {
    grid-template-columns: 2.4rem 1fr;
  }
}


/* ── Kartu papan playtime ─────────────────────────────────────────
   Tiga kolom: peringkat, orangnya, lalu durasinya. Durasi punya kolom sendiri
   karena angka itulah yang mengurutkan seluruh papan — sebagai chip kecil di
   tengah baris, angka terpenting di halaman ini justru jadi teks paling kecil
   di kartunya. */
.playtime-member {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

/* Tiga teratas saja yang berwarna: kalau semua nomor menyala, tidak ada yang
   menyala. Sisanya diredupkan sekalian — beda kuningan tua dan kuningan terang
   terlalu tipis untuk terbaca sebagai dua tingkat. */
.card-playtime .card-num {
  color: var(--muted-dim);
}

.card-playtime .card-num.is-podium {
  color: var(--brass);
}

/* Batang sebaran, dua tingkat. Jalurnya selebar kolom dan menandai "sebesar
   apa papan ini"; batang di dalamnya sepanjang waktu orang itu dibanding yang
   teratas, lalu dibagi jadi satu segmen per game. Satu elemen, dua fakta:
   panjangnya besaran, isinya komposisi. */
.share-bar-track {
  /* Jangkar untuk tooltip rincian yang menggantung di atasnya. */
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--ink-sunken);
}

/* Setinggi 4px dan sewarna — segmennya menjawab "terpusat atau tersebar",
   bukan "game apa", jadi ia harus terbaca dari sudut mata dan berhenti di situ.
   Warna kategori sudah dipakai grafik di atas untuk menandai orang. */
.share-bar {
  display: flex;
  gap: 2px;
  height: 100%;
  min-width: 6px;
  overflow: hidden;
  border-radius: 999px;
}

/* Tooltip rincian per segmen. Dibuat sendiri karena `title=` bawaan browser
   lambat muncul, tidak bisa disentuh di ponsel, dan cuma memuat teks polos satu
   baris. `pointer-events: none` supaya ia tidak merebut hover dari segmen yang
   memunculkannya. */
.share-tip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 6;
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--ink-raised);
  box-shadow: 0 10px 26px rgb(0 0 0 / 50%);
  pointer-events: none;
  white-space: nowrap;
}

/* Atribut `hidden` kalah dari `display: grid` di atas, jadi disebut ulang. */
.share-tip[hidden] {
  display: none;
}

.share-tip-head {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.15rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--paper);
  font-size: 0.8rem;
}

.share-tip-row {
  display: flex;
  gap: 1.4rem;
  justify-content: space-between;
  color: var(--muted-dim);
  font-family: var(--mono);
  font-size: 0.67rem;
}

.share-tip-row strong {
  color: var(--paper);
  font-weight: 500;
}

/* Yang tersemat diberi tanda: tanpa itu tidak ada bedanya antara tooltip yang
   menempel karena diklik dan yang cuma sedang disorot. */
.share-segment.is-pinned {
  outline: 1px solid var(--paper);
  outline-offset: 1px;
}

.share-segment {
  cursor: pointer;
  flex-grow: 0;
  flex-shrink: 1;
  /* Game bermenit-menit tetap menyisakan garis tipis, bukan hilang sama sekali:
     yang dihitung papan ini adalah waktu, dan waktu sekecil apa pun tetap ada. */
  min-width: 2px;
  border-radius: 999px;
  background: var(--brass);
}

/* ── Rincian game di kartu playtime ───────────────────────────────
   Berkolom, bukan chip: durasi dan persentase tiap game berdiri lurus, jadi
   terbaca sebagai rincian yang bisa dibandingkan — bukan sebagai deretan label
   yang panjangnya kebetulan berbeda-beda. */
/* Tiga kolom. Satu kolom membuat kartu tumbuh sepanjang jumlah game orangnya,
   dan papan berisi belasan anggota jadi terlalu panjang untuk dibandingkan.
   Tiga kolom juga menyelesaikan sendiri masalah yang dulu ditambal
   `max-width`: selnya memang sempit, jadi durasi dan persentase tetap dekat
   dengan nama yang dijelaskannya. */
.game-list,
.game-more-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem 1.4rem;
}

.game-row {
  display: grid;
  grid-template-columns: 1.05rem minmax(0, 1fr) auto 2.1rem;
  gap: 0.4rem;
  align-items: center;
}

.game-name {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.game-duration {
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.game-percent {
  color: var(--muted-dim);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Sisanya diluncurkan dengan `grid-template-rows` 0fr → 1fr. Itu satu-satunya
   cara menganimasikan tinggi otomatis: `height: auto` tidak bisa ditransisikan,
   dan tinggi yang dipatok angka akan memotong daftar yang panjang. */
.game-more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 260ms cubic-bezier(0.3, 0, 0.2, 1),
    opacity 180ms ease,
    margin-top 260ms cubic-bezier(0.3, 0, 0.2, 1);
}

.game-more-inner {
  overflow: hidden;
  min-height: 0;
}

.game-more.is-open {
  grid-template-rows: 1fr;
  margin-top: 0.3rem;
  opacity: 1;
}

.game-toggle {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  justify-self: start;
  padding: 0.15rem 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 140ms ease;
}

.game-toggle:hover,
.game-toggle:focus-visible {
  color: var(--brass);
}

.game-toggle-chevron {
  transition: transform 260ms cubic-bezier(0.3, 0, 0.2, 1);
}

.game-toggle[aria-expanded='true'] .game-toggle-chevron {
  transform: rotate(180deg);
}

/* Yang meminta gerakan seperlunya tetap dapat buka-tutupnya, tanpa luncuran. */
@media (prefers-reduced-motion: reduce) {
  .game-more,
  .game-toggle-chevron {
    transition: none;
  }
}

.playtime-total {
  display: grid;
  justify-items: end;
  gap: 0.1rem;
  text-align: right;
}

.playtime-total-value {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.playtime-total-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--muted-dim);
  white-space: nowrap;
}

/* Sel bertiga jadi terlalu sempit untuk nama game sebelum layarnya sesempit
   ponsel, jadi turunnya bertahap: tiga, dua, lalu satu. */
@media (max-width: 900px) {
  .game-list,
  .game-more-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .game-list,
  .game-more-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .card-playtime {
    grid-template-columns: 2.4rem 1fr;
  }

}

/* Di 48rem ada aturan lama yang meruntuhkan kolom ketiga `.card`, jadi totalnya
   turun ke baris berikutnya. Tanpa pasangan aturan di lebar yang sama persis, ia
   mendarat di kolom nomor — terbaca seperti bagian dari peringkat, bukan seperti
   durasi milik orang di sebelahnya. */
@media (max-width: 48rem) {
  .playtime-total {
    grid-column: 2;
    justify-items: start;
    margin-top: 0.2rem;
    text-align: left;
  }
}


/* ── Logo activity ────────────────────────────────────────────────
   Huruf awal namanya digambar duluan, logonya menimpa di atasnya. Kalau
   <img>-nya dicabut karena URL-nya mati, hurufnya yang tersisa — kotaknya
   berukuran tetap, jadi barisnya tidak bergeser saat ada satu game yang
   logonya tidak ketahuan. */
.activity-logo {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ink-sunken);
  vertical-align: -0.2em;
}

.activity-logo-letter {
  font-family: var(--body);
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--muted-dim);
}

.activity-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Filter aktivitas ─────────────────────────────────────────────
   <option> tidak bisa memuat gambar, jadi daftarnya digambar sendiri. */
.activity-filter {
  position: relative;
  flex: 0 0 auto;
}

.activity-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
}

.activity-filter-selected {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.activity-filter-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.3rem);
  right: 0;
  min-width: 100%;
  max-height: 15rem;
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--ink-raised);
  box-shadow: 0 12px 28px rgb(0 0 0 / 45%);
}

.activity-filter-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
  cursor: pointer;
}

.activity-filter-item:hover,
.activity-filter-item:focus-visible {
  outline: none;
  background: var(--ink-sunken);
  color: var(--paper);
}

.activity-filter-item[aria-selected='true'] {
  color: var(--brass);
}

@media (max-width: 620px) {
  .activity-filter {
    width: 100%;
  }
}

.playtime-chart-canvas {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 250px;
}

/* Grafik kehadiran menampung banyak garis anggota sekaligus; tinggi ekstra
   membuat jarak antar tren dan tooltip tetap terbaca tanpa memperbesar grafik
   Playtime yang lebih ringkas. */
.online-chart-canvas {
  height: 360px;
}

.online-chart-tooltip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 205px;
  max-width: calc(100% - 16px);
  padding: 0.7rem 0.8rem 0.7rem 0.65rem;
  color: var(--paper);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--online-chart-color, var(--brass)) 18%, transparent), transparent 52%),
    rgba(20, 21, 23, 0.97);
  border: 1px solid color-mix(in srgb, var(--online-chart-color, var(--brass)) 68%, var(--rule));
  border-left: 3px solid var(--online-chart-color, var(--brass));
  border-radius: 0.7rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(10px);
  pointer-events: none;
  transform: translate(12px, calc(-100% - 12px));
}

.online-chart-tooltip-portrait {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

.online-chart-tooltip-avatar,
.online-chart-tooltip-fallback {
  width: 38px;
  height: 38px;
  box-sizing: border-box;
  border: 2px solid var(--online-chart-color, var(--brass));
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.online-chart-tooltip-avatar {
  object-fit: cover;
}

.online-chart-tooltip-fallback {
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--online-chart-color, var(--brass));
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
}

.online-chart-tooltip-copy {
  min-width: 0;
  flex: 1;
}

.online-chart-tooltip-kicker {
  display: block;
  margin-bottom: 0.12rem;
  color: var(--online-chart-color, var(--brass));
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.online-chart-tooltip-name {
  display: block;
  overflow: hidden;
  font-size: 0.85rem;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-chart-tooltip-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.online-chart-tooltip-value {
  font-size: 0.8rem;
  color: var(--online-chart-color, var(--brass));
  font-family: var(--mono);
  font-weight: 700;
}

.online-chart-tooltip-time {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  white-space: nowrap;
}

/* Inactive Members: a quiet review ledger, not a destructive moderation list. */
.inactive-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(12rem, auto);
  gap: 1px;
  margin-bottom: var(--gap);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--rule);
}

.inactive-summary > div,
.inactive-window {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 5.3rem;
  padding: 0.9rem 1.1rem;
  background: var(--ink-raised);
}

.inactive-summary-label,
.inactive-window > span,
.inactive-member-age span {
  color: var(--muted-dim);
  font-family: var(--mono);
  font-size: 0.61rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.inactive-summary strong {
  margin-top: 0.25rem;
  color: var(--brass);
  font-family: var(--mono);
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}

.inactive-window {
  align-items: flex-start;
  gap: 0.38rem;
}

.inactive-window .input {
  width: 100%;
  min-width: 10rem;
}

.inactive-panel {
  padding: 0 1.35rem 1.2rem;
}

.inactive-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0 0.8rem;
  border-bottom: 1px solid var(--rule-soft);
}

.inactive-panel-head .panel-title {
  margin: 0;
}

.inactive-panel-head > span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.inactive-list {
  display: flex;
  flex-direction: column;
}

.inactive-member {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.78rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.inactive-member-avatar,
.inactive-member-avatar .avatar,
.inactive-member-avatar span {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
}

.inactive-member-avatar span {
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--brass-dim);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
}

.inactive-member-copy {
  min-width: 0;
}

.inactive-member-copy strong,
.inactive-member-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inactive-member-copy strong {
  color: var(--text);
  font-size: 0.9rem;
}

.inactive-member-copy span {
  margin-top: 0.17rem;
  color: var(--muted);
  font-size: 0.74rem;
}

.inactive-member-age {
  min-width: 3.2rem;
  text-align: right;
}

.inactive-member-age strong {
  display: block;
  color: var(--brass);
  font-family: var(--mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.inactive-note {
  margin: 1rem 0 0;
}

@media (max-width: 620px) {
  .online-chart-canvas {
    height: 300px;
  }

  .inactive-summary {
    grid-template-columns: 1fr 1fr;
  }

  .inactive-window {
    grid-column: 1 / -1;
  }
}

.card-num {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--brass-dim);
  padding-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}

.card-title {
  font-weight: 500;
  margin: 0;
}

.card-title a {
  text-decoration: none;
  color: var(--paper);
  border-bottom: 1px solid var(--brass-dim);
}

.card-title a:hover {
  color: var(--brass);
}

.card-note {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0.2rem 0 0;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.chip {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}

.chip-cat {
  color: var(--brass);
  border-color: var(--brass-dim);
}

.empty {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 2.2rem 1.5rem;
  text-align: center;
  color: var(--muted);
}

/* ── Editor sambutan + pratinjau ───────────────────────── */
.editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

.preview-col {
  position: sticky;
  top: 2.4rem;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.switch-row:last-of-type {
  border-bottom: 0;
}

/* Hanya anak langsung: yang jadi blok adalah label sakelarnya. Sebelumnya
   aturan ini juga kena <strong> di dalam keterangannya — satu angka yang
   ditebalkan di tengah kalimat memecah kalimat itu jadi tiga baris. */
.switch-copy > strong {
  font-weight: 500;
  display: block;
}

.switch-copy span {
  color: var(--muted);
  font-size: 0.83rem;
}

.switch {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--ink-sunken);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted-dim);
  transition: transform 0.15s ease, background 0.15s ease;
}

.switch[aria-checked="true"] {
  background: rgba(79, 168, 138, 0.2);
  border-color: var(--jade);
}

.switch[aria-checked="true"]::after {
  transform: translateX(18px);
  background: var(--jade);
}

.placeholder-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

.ph {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--brass);
  background: rgba(200, 155, 60, 0.08);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius);
  padding: 0.12rem 0.42rem;
  cursor: pointer;
}

.ph:hover {
  background: rgba(200, 155, 60, 0.18);
}

/* Tiruan embed Discord — ini yang bikin efek perubahan langsung kelihatan. */
.discord-frame {
  background: #313338;
  border-radius: 8px;
  padding: 1rem;
  font-family: "gg sans", var(--body);
}

.discord-line {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}

.discord-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
}

.discord-author {
  font-weight: 600;
  font-size: 0.9rem;
  color: #f2f3f5;
}

.discord-bot {
  font-size: 0.62rem;
  background: #5865f2;
  color: #fff;
  border-radius: 3px;
  padding: 0 0.28rem;
  margin-left: 0.35rem;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

.discord-mention {
  color: #c9cdfb;
  background: rgba(88, 101, 242, 0.3);
  border-radius: 3px;
  padding: 0 2px;
}

.discord-embed {
  border-left: 4px solid var(--brass);
  background: #2b2d31;
  border-radius: 4px;
  padding: 0.8rem 1rem;
  margin-left: 2.9rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.9rem;
  color: #dbdee1;
  font-size: 0.88rem;
}

.discord-embed-title {
  color: #f2f3f5;
  font-weight: 600;
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.discord-embed-desc {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.discord-fields {
  display: flex;
  gap: 1.6rem;
  margin-top: 0.7rem;
}

.discord-field-name {
  color: #f2f3f5;
  font-weight: 600;
  font-size: 0.78rem;
}

.discord-field-value {
  font-size: 0.85rem;
}

.discord-thumb {
  width: 62px;
  height: 62px;
  border-radius: 4px;
}

/* Perpisahan pakai warna netral supaya beda jelas dari sambutan. */
.discord-embed-abu {
  border-left-color: var(--muted);
}

.discord-image {
  grid-column: 1 / -1;
  width: 100%;
  max-height: 20rem;
  object-fit: cover;
  border-radius: 4px;
  margin-top: 0.7rem;
}

/* Ringkasan gambar yang sedang terpasang, di panel pengaturan. */
.gambar-status {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--ink-sunken);
  padding: 0.7rem 0.8rem;
}

.gambar-status > div {
  flex: 1;
  min-width: 0;
}

.gambar-preview {
  width: 68px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  flex-shrink: 0;
}

.discord-footer {
  margin-top: 0.7rem;
  font-size: 0.72rem;
  color: #949ba4;
  grid-column: 1 / -1;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.hint {
  color: var(--muted-dim);
  font-size: 0.8rem;
  margin: 0.5rem 0 0;
}

.warn {
  color: var(--brass);
  font-size: 0.84rem;
  margin: 0.6rem 0 0;
}

/* Baris papan peringkat: avatar di kiri, detail di kanan. */
.peringkat-orang {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

/* ── Pemutar musik ─────────────────────────────────────── */
.pemutar {
  margin-bottom: var(--gap);
}

.pemutar-atas {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.pemutar-sampul {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  flex-shrink: 0;
}

.pemutar-info {
  min-width: 0;
}

.pemutar-judul {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0.1rem 0 0.2rem;
  overflow-wrap: anywhere;
}

.bar-luar {
  height: 4px;
  background: var(--ink-sunken);
  border-radius: 999px;
  overflow: hidden;
}

.bar-isi {
  height: 100%;
  background: var(--brass);
  transition: width 0.6s linear;
}

.bar-waktu {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted-dim);
  margin-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.kendali {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0 1rem;
}

.volume-baris {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.volume-baris input[type="range"] {
  flex: 1;
  accent-color: var(--brass);
  background: transparent;
}

.volume-nilai {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--brass);
  min-width: 3.2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.antrean-kepala {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
}

.antrean-aksi {
  display: flex;
  gap: 0.3rem;
}

.antrean-aksi .btn {
  padding: 0.3rem 0.55rem;
  font-size: 0.85rem;
  line-height: 1;
}

/* ── Toast ─────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translate(-50%, 1.5rem);
  background: var(--ink-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 0.7rem 1.1rem;
  font-size: 0.88rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: min(30rem, calc(100vw - 2rem));
  z-index: 50;
}

.toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast.is-error {
  border-left-color: var(--rust);
}

/* ── Responsif ─────────────────────────────────────────── */
@media (max-width: 60rem) {
  .editor {
    grid-template-columns: 1fr;
  }

  .preview-col {
    position: static;
  }
}

@media (max-width: 48rem) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .nav {
    overflow-y: visible;
    overscroll-behavior-y: auto;
    scrollbar-gutter: auto;
  }

  .main {
    padding: 1.75rem 1.25rem 3rem;
  }

  .card {
    grid-template-columns: 2.6rem 1fr;
  }

  .card > .btn {
    grid-column: 2;
    justify-self: start;
  }

  .discord-embed {
    margin-left: 0;
  }
}

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

  .nav-item[aria-current="true"] {
    animation: none;
  }

  .rarity-4 .waifu-card-art::after,
  .rarity-5 .waifu-card-art::after,
  .waifu-card-modal.rarity-4 .waifu-modal-art::after,
  .waifu-card-modal.rarity-5 .waifu-modal-art::after {
    animation: none;
  }
}

/* Pemisah antar bagian dalam satu halaman — dipakai di halaman AI untuk
   menandai batas antara pengaturan provider dan daftar ingatan. */
.seksi-pemisah {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  border-top: 1px solid var(--rule);
  margin-top: 2.4rem;
  padding-top: 1.2rem;
}

/* Tabel peluang gacha. Sengaja bukan <table>: isinya empat kolom tetap dengan
   lebar yang ditentukan desain, bukan data tabular yang perlu header. */
.gacha-table {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.gacha-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto auto;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.gacha-row:last-child {
  border-bottom: 0;
}

.gacha-star {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.gacha-name {
  color: var(--paper);
  font-weight: 500;
}

.gacha-rate {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--brass);
}

.gacha-count {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted-dim);
  min-width: 7.5rem;
  text-align: right;
}

.waifu-gallery-panel {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--ink-raised);
  overflow: hidden;
}

.waifu-gallery-toolbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rule-soft);
}

.waifu-gallery-select {
  width: min(22rem, 100%);
}

.waifu-gallery-pages {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.waifu-html-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  min-height: 16rem;
  padding: clamp(0.8rem, 2vw, 1.5rem);
  background: var(--ink-sunken);
}

.waifu-html-card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 263 / 318;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1.5px solid var(--waifu-rarity);
  border-radius: 8px;
  background: #0d1015;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.waifu-html-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.8rem 1.6rem color-mix(in srgb, var(--waifu-rarity) 30%, transparent);
}

.waifu-card-art {
  display: block;
  flex: 0 0 63.84%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #252b37, #0d1015);
}

.waifu-card-art::before,
.waifu-modal-art::before {
  position: absolute;
  z-index: 0;
  inset: -10%;
  content: '';
  background: var(--waifu-art) center / cover no-repeat;
  filter: blur(18px) brightness(0.58);
  transform: scale(1.08);
}

.waifu-card-art img,
.waifu-modal-art img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.waifu-card-placeholder,
.waifu-modal-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: repeating-linear-gradient(135deg, #1f242d 0 8px, #171b22 8px 16px);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.waifu-card-index,
.waifu-card-count {
  position: absolute;
  top: 0.55rem;
  padding: 0.18rem 0.42rem;
  border-radius: 4px;
  background: rgba(13, 16, 21, 0.82);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.waifu-card-index { left: 0.55rem; }
.waifu-card-count { right: 0.55rem; color: var(--brass); }

.waifu-card-info {
  display: grid;
  gap: 0.18rem;
  flex: 1;
  padding: 0.55rem 0.6rem 0.65rem;
  border-top: 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--waifu-rarity) 17%, #0d1015), #0d1015 68%);
}

.waifu-card-stars { color: var(--waifu-rarity); font-size: 0.77rem; }
.waifu-card-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.waifu-card-meta, .waifu-card-stats { color: var(--muted); font-family: var(--mono); font-size: 0.67rem; }

/* Variasi rarity mengikuti generator Discord: polos, foil, kilap, lalu holo. */
.rarity-1 { border-color: #5e646e; }
.rarity-2 { border-width: 2.5px; border-color: #d8dee6; }
.rarity-2 .waifu-card-art::after,
.rarity-3 .waifu-card-art::after,
.rarity-4 .waifu-card-art::after,
.rarity-5 .waifu-card-art::after {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  z-index: 2;
}
.rarity-2 .waifu-card-art::after { background: linear-gradient(135deg, rgba(255,255,255,.24), transparent 35%, rgba(255,255,255,.18)); }
.rarity-3 { border-width: 3px; box-shadow: 0 0 .5rem color-mix(in srgb, var(--waifu-rarity) 35%, transparent); }
.rarity-3 .waifu-card-art::after { background: linear-gradient(115deg, transparent 24%, rgba(255,255,255,.28) 48%, transparent 68%); }
.rarity-4, .rarity-5 { border-color: #f4e86c; background: linear-gradient(135deg, #ff4d6d, #ffb03a, #4be08a, #3fc9f0, #7a6bf5, #e15bf0) border-box; }
.rarity-4 { border-width: 3.5px; box-shadow: 0 0 1rem color-mix(in srgb, var(--waifu-rarity) 46%, transparent); }
.rarity-5 { border-width: 5px; box-shadow: 0 0 1.65rem color-mix(in srgb, var(--waifu-rarity) 70%, transparent); }
.rarity-4 .waifu-card-art::after, .rarity-5 .waifu-card-art::after { background: linear-gradient(125deg, rgba(255,77,109,.18), rgba(255,176,58,.14), rgba(75,224,138,.16), rgba(122,107,245,.18)); mix-blend-mode: screen; }
.waifu-card-modal.rarity-4 .waifu-modal-art::after, .waifu-card-modal.rarity-5 .waifu-modal-art::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: '';
  pointer-events: none;
  mix-blend-mode: screen;
}
.rarity-4 .waifu-card-art::after, .rarity-5 .waifu-card-art::after,
.waifu-card-modal.rarity-4 .waifu-modal-art::after, .waifu-card-modal.rarity-5 .waifu-modal-art::after {
  background-image:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.34) 50%, transparent 70%),
    linear-gradient(125deg, rgba(255,77,109,.18), rgba(255,176,58,.14), rgba(75,224,138,.16), rgba(122,107,245,.18));
  background-position: -130% 0, 0 0;
  background-repeat: no-repeat;
  background-size: 220% 100%, 100% 100%;
  animation: waifu-kilau-jalan 1.5s linear infinite;
}
.rarity-5 .waifu-card-info { background: linear-gradient(120deg, color-mix(in srgb, var(--waifu-rarity) 30%, #0d1015), #0d1015 72%); }

@keyframes waifu-kilau-jalan {
  from { background-position: -130% 0, 0 0; }
  to { background-position: 130% 0, 0 0; }
}

@media (max-width: 900px) {
  .waifu-html-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.waifu-card-modal {
  width: min(697px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  outline: 3px solid var(--waifu-rarity);
  border-radius: 3px;
  background: #0d1015;
  color: var(--paper);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.65), 0 0 2rem color-mix(in srgb, var(--waifu-rarity) 42%, transparent);
}

.waifu-card-modal::backdrop { background: rgba(5, 7, 10, 0.78); backdrop-filter: blur(3px); }
.waifu-card-modal[open] { display: flex; flex-direction: column; }
.waifu-modal-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; min-height: 92px; padding: 20px 26px; border-bottom: 0; color: var(--muted); font: 0.72rem var(--mono); letter-spacing: .08em; }
.waifu-modal-owner { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.waifu-modal-owner > img, .waifu-modal-owner > span:first-child { width: 3rem; height: 3rem; flex: 0 0 3rem; border-radius: 50%; object-fit: cover; background: var(--ink-sunken); }
.waifu-modal-owner > span:first-child { display: grid; place-items: center; color: var(--jade); }
.waifu-modal-owner > span:last-child { display: grid; gap: .1rem; min-width: 0; }
.waifu-modal-owner small { color: var(--jade); font: .62rem var(--mono); letter-spacing: .18em; }
.waifu-modal-owner strong { overflow: hidden; color: var(--paper); font: 600 1rem var(--body); text-overflow: ellipsis; white-space: nowrap; }
.waifu-modal-art { position: relative; flex: 1 1 auto; min-height: 0; aspect-ratio: 645 / 666; margin: 0 26px; overflow: hidden; border: 2px solid var(--waifu-rarity); border-radius: 12px; background: var(--ink-sunken); }
.waifu-modal-copy { flex: 0 0 auto; padding: 30px 26px 26px; background: linear-gradient(120deg, color-mix(in srgb, var(--waifu-rarity) 18%, #0d1015), #0d1015 68%); }
.waifu-modal-copy h3 { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.1; }
.waifu-modal-stars { margin: 0 0 .35rem; color: var(--waifu-rarity); font-size: 1.25rem; }
.waifu-modal-meta { margin: .5rem 0 0; color: var(--muted); font: .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.waifu-modal-note { margin: .4rem 0 0; color: var(--brass); font: .76rem var(--mono); }
.waifu-modal-close { position: absolute; z-index: 1; top: 0.7rem; right: 0.7rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(13,16,21,0.86); color: var(--paper); cursor: pointer; font-size: 1.35rem; }
.waifu-modal-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 1.45rem 0 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.waifu-modal-stats div { padding: .7rem .35rem; text-align: center; }
.waifu-modal-stats div + div { border-left: 1px solid var(--rule-soft); }
.waifu-modal-stats dt { color: var(--muted-dim); font: .62rem var(--mono); letter-spacing: .12em; }
.waifu-modal-stats dd { margin: .18rem 0 0; font: 600 1.32rem var(--mono); }

.waifu-card-modal.rarity-1 .waifu-modal-art { border-width: 2.5px; border-color: #5e646e; }
.waifu-card-modal.rarity-2 .waifu-modal-art { border-width: 3.5px; border-color: #d8dee6; }
.waifu-card-modal.rarity-3 .waifu-modal-art { border-width: 4px; box-shadow: 0 0 1rem color-mix(in srgb, var(--waifu-rarity) 44%, transparent); }
.waifu-card-modal.rarity-4 .waifu-modal-art { border-width: 4.5px; border-color: #f4e86c; box-shadow: 0 0 1.7rem color-mix(in srgb, var(--waifu-rarity) 58%, transparent); }
.waifu-card-modal.rarity-5 .waifu-modal-art { border-width: 6px; border-color: #f4e86c; box-shadow: 0 0 2.5rem color-mix(in srgb, var(--waifu-rarity) 82%, transparent); }

@media (max-width: 620px) {
  .gacha-row {
    grid-template-columns: 4.5rem 1fr auto;
  }

  .gacha-count {
    display: none;
  }

  .waifu-gallery-pages {
    width: 100%;
    margin-left: 0;
  }

  .waifu-html-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .waifu-card-info { padding: 0.45rem 0.48rem; }
  .waifu-card-stars { font-size: 0.65rem; }
  .waifu-card-name { font-size: 0.78rem; }
  .waifu-card-meta, .waifu-card-stats { font-size: 0.55rem; }


  .waifu-modal-art {
    min-height: 0;
  }

  .waifu-modal-copy {
    padding: 1.3rem;
  }
}

/* ── Halaman Integrasi ─────────────────────────────────── */
/* Tiga kartu keadaan di kepala halaman: sesi X, penerusan, pelacak. */
.status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.stat-tile {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--ink-raised);
  padding: 1rem 1.1rem;
}

.stat-nilai {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-size: 1.15rem;
  margin: 0 0 0.25rem;
}

.stat-catatan {
  margin: 0;
}

/* Titik keadaan: hijau berjalan, kuningan setengah siap, merah mati. */
.titik {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--muted-dim);
  flex: none;
}

.titik-hidup {
  background: var(--jade);
}

.titik-jeda {
  background: var(--brass);
}

.titik-mati {
  background: var(--rust);
}

/* Kolom yang berisi beberapa panel bertumpuk. */
.tumpuk {
  display: grid;
  gap: var(--gap);
  align-content: start;
}

.form-row-atas {
  margin-top: 1.1rem;
}

.warn-kaki {
  margin-top: 0.9rem;
}

/* Bagian yang jarang disentuh, dilipat supaya tidak memanjangkan panel. */
details.lipat {
  border-top: 1px solid var(--rule-soft);
  margin-top: 1.1rem;
  padding-top: 0.85rem;
}

/* Warnanya `--muted`, bukan `--muted-dim`: ini tombol, bukan keterangan. Yang
   redup terbaca sebagai label bagian, dan isi yang terlipat di belakangnya
   dikira memang tidak ada. */
details.lipat summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  list-style: none;
}

details.lipat summary::-webkit-details-marker {
  display: none;
}

details.lipat summary::before {
  content: '▸ ';
}

details.lipat[open] summary::before {
  content: '▾ ';
}

details.lipat summary:hover {
  color: var(--brass);
}

/* ── Tombol keterangan ─────────────────────────────────── */
/*
 * Lingkaran "i" yang memunculkan keterangan saat dihover atau difokus.
 *
 * Keterangannya `position: absolute` di dalam tombolnya sendiri, jadi lebarnya
 * tidak ikut mendorong apa pun di sekitarnya — itu inti gunanya: kalimat
 * panjang yang jarang dibaca tidak perlu menghabiskan ruang tiap saat.
 */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-left: 0.4em;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: none;
  color: var(--muted-dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}

.info-tip:hover,
.info-tip:focus-visible {
  color: var(--paper);
  border-color: var(--brass-dim);
  outline: none;
}

.info-tip-isi {
  position: absolute;
  bottom: calc(100% + 0.55rem);
  /* Ditambatkan ke tepi kiri tombolnya, bukan dipusatkan padanya. Yang
     dipusatkan menjorok setengah lebarnya ke kiri, dan tombol ini hampir selalu
     duduk di awal baris — di panel sempit ujungnya keluar layar. Ke kanan
     selalu ada ruang, karena di sanalah isi halaman membentang. */
  left: -0.35rem;
  width: 22rem;
  max-width: min(70vw, 26rem);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--ink-sunken);
  box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
  color: var(--muted);
  /* Dikembalikan ke bentuk kalimat biasa: pemakainya sering duduk di dalam
     judul yang huruf besar dan berjarak lebar. */
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  /* pre-line, bukan normal: sebagian keterangan memuat daftar pendek yang tiap
     barisnya harus berdiri sendiri. Spasi tetap diciutkan seperti biasa. */
  white-space: pre-line;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
  z-index: 5;
}

.info-tip:hover .info-tip-isi,
.info-tip:focus-visible .info-tip-isi {
  opacity: 1;
  visibility: visible;
}

/* ── Antrean & log pelacak suka X ──────────────────────── */
.antrean-daftar,
.log-daftar {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.85rem;
}

.log-daftar {
  max-height: 24rem;
  overflow-y: auto;
}

.antrean-judul {
  margin-top: 1rem;
}

.antrean-judul:first-child {
  margin-top: 0;
}

.antrean-baris {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.antrean-baris:last-child {
  border-bottom: 0;
}

.antrean-tanda {
  flex: none;
  width: 1.1rem;
}

.antrean-jenis {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.antrean-pesan {
  color: var(--rust);
  font-size: 0.78rem;
}

/* Yang sedang dikerjakan diberi tepi kuningan supaya langsung ketemu mata. */
.antrean-proses {
  border-left: 2px solid var(--brass);
  padding-left: 0.6rem;
  margin-left: -0.6rem;
}

.antrean-gagal .nomor,
.antrean-gagal a {
  color: var(--rust);
}

.nomor {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted-dim);
  flex: none;
}

.log-daftar li {
  display: flex;
  gap: 0.6rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--rule-soft);
  line-height: 1.45;
}

.log-daftar li:last-child {
  border-bottom: 0;
}

.log-jam {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted-dim);
  flex: none;
  padding-top: 0.1rem;
}

.log-warn > span:last-child {
  color: var(--brass);
}

.log-error > span:last-child {
  color: var(--rust);
}

/* Tombol kecil di dalam baris daftar — mis. "Kirim" pada hasil intip berita. */
.btn-kecil {
  font-size: 0.75rem;
  padding: 0.28rem 0.7rem;
  margin-left: auto;
  flex: none;
}

/* Pratinjau maskot kartu naik level — kecil, cukup untuk mengenali gambarnya. */
.maskot-pratinjau {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--ink-sunken);
  flex: none;
}

/* Judul kelompok di sidebar — penanda bagian, bukan tombol. */
.nav-grup {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin: 1.1rem 0 0.3rem 0.6rem;
}

.nav-grup:first-child {
  margin-top: 0.4rem;
}

/* ── Scrollbar sidebar ─────────────────────────────────── */
/*
 * Sidebar memanjang sejak navigasinya dikelompokkan, dan pada layar pendek ia
 * ikut menggulir. Scrollbar bawaan Windows tampil sebagai pita kelabu terang
 * selebar 17 px — sepotong sistem operasi yang menempel di panel bertinta
 * gelap, dan cukup lebar untuk mendorong teks navigasinya.
 *
 * Dibuat tipis dan senada: alur setransparan tinta, gagang kuningan redup yang
 * baru menyala saat disentuh — tanda yang sama dengan penanda halaman aktif.
 */
.nav {
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.nav::-webkit-scrollbar {
  width: 6px;
}

.nav::-webkit-scrollbar-track {
  background: transparent;
}

.nav::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 3px;
}

.nav::-webkit-scrollbar-thumb:hover {
  background: var(--brass-dim);
}

/* Alur baru terlihat saat kursor ada di sidebar — selagi tidak, tepiannya
   bersih dan lebar navigasinya tidak berubah sedikit pun. */
.nav:hover {
  scrollbar-color: var(--brass-dim) var(--rule-soft);
}

.nav:hover::-webkit-scrollbar-track {
  background: var(--rule-soft);
}

/* Daftar panjang di isi halaman — log pelacak, antrean — dapat perlakuan sama
   supaya tidak ada satu pun pita kelabu bawaan sistem yang tersisa. */
.log-daftar,
.antrean-daftar,
.textarea,
.main {
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.log-daftar::-webkit-scrollbar,
.antrean-daftar::-webkit-scrollbar,
.textarea::-webkit-scrollbar {
  width: 6px;
}

.log-daftar::-webkit-scrollbar-track,
.antrean-daftar::-webkit-scrollbar-track,
.textarea::-webkit-scrollbar-track {
  background: transparent;
}

.log-daftar::-webkit-scrollbar-thumb,
.antrean-daftar::-webkit-scrollbar-thumb,
.textarea::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 3px;
}

.log-daftar::-webkit-scrollbar-thumb:hover,
.antrean-daftar::-webkit-scrollbar-thumb:hover,
.textarea::-webkit-scrollbar-thumb:hover {
  background: var(--brass-dim);
}

/* ── Animasi tarikan gacha, satu baris per tingkat ─────── */
.animasi-baris {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 7.5rem;
  gap: 0.8rem;
  align-items: end;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.animasi-baris:last-of-type {
  border-bottom: 0;
}

/* Pratinjau dikunci ukurannya: GIF tarikan berbeda-beda rasionya, dan tanpa
   kotak tetap tiap baris jadi setinggi gambarnya masing-masing. */
.animasi-pratinjau {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--ink-sunken);
  overflow: hidden;
}

.animasi-pratinjau img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.animasi-pratinjau .hint {
  font-size: 0.62rem;
  text-align: center;
}

@media (max-width: 620px) {
  .animasi-baris {
    grid-template-columns: 3.2rem minmax(0, 1fr);
  }

  .animasi-ms {
    grid-column: 2;
  }
}

/* ── Pemilih izin: daftar role bercentang + chip anggota ─────────
   Dipakai panel Roblox di halaman Integrasi. Daftarnya diberi tinggi
   maksimum lalu digulir: server dengan puluhan role tidak boleh mendorong
   tombol Simpan sampai keluar layar. */
.pilih-banyak {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.15rem 0.8rem;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--ink-sunken);
}

.pilih-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.2rem;
  font-size: 0.85rem;
  color: var(--paper);
  cursor: pointer;
  border-radius: var(--radius);
}

.pilih-item:hover {
  background: var(--ink-raised);
}

.pilih-item input {
  accent-color: var(--brass);
  flex: none;
}

.pilih-item span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titik-role {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.chip-hapus {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--body);
  font-size: 0.8rem;
  letter-spacing: normal;
  color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.2rem 0.3rem 0.2rem 0.35rem;
}

.avatar-mini {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

/* Tombol cabut sengaja kecil dan pucat sampai disentuh: ia menghapus izin,
   jadi tidak boleh terlihat seperti tujuan utama chip-nya. */
.chip-x {
  background: none;
  border: none;
  color: var(--muted-dim);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
}

.chip-x:hover {
  color: var(--rust);
}

.form-inline {
  display: flex;
  gap: 0.5rem;
}

.form-inline .input {
  flex: 1;
  min-width: 0;
}

.soundboard-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.soundboard-bank-list {
  display: grid;
  /* Pemutar audio, ikon, dan tombol tambah butuh ruang horizontal yang nyata.
     Kartu 16rem bisa menjadi empat kolom di layar lebar, tetapi kontrol di
     dalamnya lalu saling mendesak. Ambang 21rem menjaga bank paling banyak
     tiga kolom pada dashboard umum dan tetap satu kolom di layar sempit. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 0.7rem;
}

.soundboard-bank-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem;
  border: 1px solid var(--rule-soft);
  background: var(--ink-sunken);
  min-width: 0;
}

.soundboard-bank-item .soundboard-player {
  max-width: none;
}

.soundboard-bank-item .btn {
  white-space: nowrap;
}

/* Isi kartu ditumpuk. Sebelumnya keterangan dan pemutar sama-sama elemen
   inline, jadi keduanya berebut satu baris dan pemutarnya menimpa tulisan
   "Buka sumber audio" sampai terpotong di tengah. */
.soundboard-info {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
  min-width: 0;
}

/* Pemutar bawaan browser. Sengaja bukan tombol buatan sendiri: kontrol bawaan
   sudah membawa seluruh perilaku yang diharapkan — putar, jeda, geser, volume —
   dan itu tidak perlu ditulis ulang untuk mendengarkan audio dua detik.

   `color-scheme: dark` yang membuatnya ikut gelap. Tanpa itu browser menggambar
   kontrolnya dengan palet terang, dan ia jadi benda paling menyala di halaman
   yang seluruhnya gelap. Ini juga alasan tidak dipakai `filter: invert`, yang
   ikut membalik warna ikon di dalamnya. */
.soundboard-player {
  display: block;
  width: 100%;
  max-width: 17rem;
  height: 2rem;
  color-scheme: dark;
}

.soundboard-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--brass-dim);
  border-radius: 50%;
  /* `--accent-dim` tidak pernah ada di `:root`, jadi lingkarannya selama ini
     tak berisi — var yang tak terdefinisi membatalkan deklarasinya. */
  background: var(--ink-sunken);
  color: var(--brass);
  font-size: 1.1rem;
}

/* Tautan sumber dipotong, bukan membungkus: URL panjang mendorong lebar kartu
   dan menggeser tombol hapusnya keluar layar. */
.soundboard-url {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kartunya sejajar di atas: ikon, judul, dan tombol hapus berada di satu garis
   berapa pun tinggi isi tengahnya. */
.soundboard-card {
  align-items: start;
}

/* Redemption desk: a compact ticket ledger. Its serial-number rail makes the
   copy-and-redeem flow scannable without introducing a second visual system. */
.game-code-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.game-code-heading .page-lede { margin-bottom: var(--gap); }

.game-code-ledger {
  max-width: 58rem;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brass);
  background: var(--ink-raised);
}

.game-code-ledger > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 1.15rem;
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(90deg, rgba(13, 16, 21, 0.94) 0%, rgba(13, 16, 21, 0.73) 52%, rgba(13, 16, 21, 0.46) 100%),
    url('https://cdn.oneesports.gg/wp-content/uploads/2023/08/ZenlessZoneZero_MainCharacters_MC_Belle_Wise_CloseUp_Wallpaper.jpg') center / cover;
}

.game-code-ledger--wuwa { margin-top: var(--gap); }
.game-code-ledger--wuwa > header {
  background:
    linear-gradient(90deg, rgba(13, 16, 21, 0.94) 0%, rgba(13, 16, 21, 0.72) 52%, rgba(13, 16, 21, 0.44) 100%),
    url('https://statik.tempo.co/data/2024/05/23/id_1304606/1304606_720.jpg') center / cover;
}

.game-code-ledger--nte { margin-top: var(--gap); }
.game-code-ledger--nte > header {
  background:
    linear-gradient(90deg, rgba(13, 16, 21, 0.94) 0%, rgba(13, 16, 21, 0.72) 52%, rgba(13, 16, 21, 0.44) 100%),
    url('https://ntevmg.perfectworld.com/webops/nte/1920X1080-en.jpg') center / cover;
}

.game-code-ledger--hsr { margin-top: var(--gap); }
.game-code-ledger--hsr > header {
  background:
    linear-gradient(90deg, rgba(13, 16, 21, 0.94) 0%, rgba(17, 34, 59, 0.78) 55%, rgba(15, 48, 83, 0.48) 100%),
    url('https://webstatic.hoyoverse.com/upload/op-public/2023/09/14/3c862d085db721a5625b6e12649399bc_3258945178303034803.png') center / cover;
}

.game-code-ledger--genshin { margin-top: var(--gap); }
.game-code-ledger--genshin > header {
  background:
    linear-gradient(90deg, rgba(13, 16, 21, 0.94) 0%, rgba(27, 45, 42, 0.76) 54%, rgba(68, 93, 61, 0.44) 100%),
    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm4vHdpa3RIn1VjtN3Dh8a8xTCveYPCrDRo4KZVKiknXfMsbrZe_2wBMuPATkjQ5NLAiCm-JuEZgJnSfERChA6LqtkO-n9jJHA6l07wD_TjF2YKWlJS14RWYpIbWHm6iA4R6wHRLql2pw/s1600/images+%25281%2529.jpeg') center / cover;
}

.game-code-ledger--hi3 { margin-top: var(--gap); }
.game-code-ledger--hi3 > header {
  background:
    linear-gradient(90deg, rgba(13, 16, 21, 0.94) 0%, rgba(56, 27, 56, 0.76) 54%, rgba(103, 45, 88, 0.42) 100%),
    url('https://fastcdn.hoyoverse.com/static-resource-v2/2024/02/26/38fb67a9535b8fc8665dbbfb416c07ad_1746331783350114280.png') center / cover;
}

.game-code-ledger--infinity-nikki { margin-top: var(--gap); }
.game-code-ledger--infinity-nikki > header {
  background:
    linear-gradient(90deg, rgba(13, 16, 21, 0.94) 0%, rgba(75, 52, 83, 0.72) 54%, rgba(124, 95, 125, 0.42) 100%),
    url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtRjHQtRQTsHzPHL9z8FjbtA1Fqa5X5iDWxPMoqkF95I2uLvX_wF4WB2l1&s=10') center / cover;
}

.game-code-mark {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  background: rgba(200, 155, 60, 0.08);
}

.game-code-mark svg { width: 1.1rem; }
.game-code-mark--logo { padding: 0.24rem; background: rgba(13, 16, 21, 0.72); }
.game-code-mark--logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.game-code-label { margin: 0; color: var(--muted-dim); font: 0.64rem/1.3 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; }
.game-code-ledger h3 { margin: 0.12rem 0 0; font: 500 1.02rem var(--body); }
.game-code-source { margin: 0; color: var(--muted); font: 0.67rem/1.45 var(--mono); text-align: right; }
.game-code-source strong { color: var(--paper); font-weight: 400; }
.game-code-announce { display: inline-flex; align-items: center; justify-content: end; gap: 0.55rem; color: var(--muted); font: 0.64rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }

.game-code-card {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--ink-raised);
}

.game-code-order { color: var(--brass-dim); font: 0.7rem var(--mono); }
.game-code-copy code { display: block; width: max-content; max-width: 100%; margin: 0.22rem 0 0.3rem; padding: 0.15rem 0; color: var(--paper); background: none; font: 600 1.05rem var(--mono); letter-spacing: 0.055em; overflow-wrap: anywhere; }
.game-code-copy > p:last-child { margin: 0; color: var(--muted); font-size: 0.84rem; }
.game-code-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 0.55rem; }
.game-code-actions .btn { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.game-code-actions svg { width: 0.9rem; }
.game-code-ledger > footer { padding: 0.75rem 1.15rem; color: var(--muted-dim); font-size: 0.75rem; }

.game-code-notifications { max-width: 58rem; margin-bottom: var(--gap); }
.game-code-jump {
  position: sticky;
  z-index: 4;
  top: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: min(58rem, 100%);
  margin: 0 0 var(--gap);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink-raised) 92%, transparent);
  backdrop-filter: blur(12px);
}
.game-code-jump > span { color: var(--muted-dim); font: 0.65rem var(--mono); letter-spacing: 0.11em; text-transform: uppercase; white-space: nowrap; }
.game-code-jump > div { display: flex; gap: 0.4rem; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.game-code-jump__item { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.38rem; min-height: 2rem; padding: 0.3rem 0.55rem; overflow: hidden; border: 1px solid var(--rule); color: var(--paper); font: 0.68rem var(--mono); text-decoration: none; text-shadow: 0 1px 3px #000; background-position: center; background-size: cover; }
.game-code-jump__item::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(8, 10, 14, 0.92), rgba(8, 10, 14, 0.62)); }
.game-code-jump__item img { width: 1.2rem; height: 1.2rem; padding: 0.08rem; object-fit: contain; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(8, 10, 14, 0.72); }
.game-code-jump__item b { position: relative; font: inherit; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.game-code-jump__item:hover, .game-code-jump__item:focus-visible { border-color: var(--brass); color: #fff; }
.game-code-jump__item:hover::before, .game-code-jump__item:focus-visible::before { background: linear-gradient(90deg, rgba(8, 10, 14, 0.78), rgba(8, 10, 14, 0.38)); }
.game-code-jump__item--zzz { background-image: url('https://cdn.oneesports.gg/wp-content/uploads/2023/08/ZenlessZoneZero_MainCharacters_MC_Belle_Wise_CloseUp_Wallpaper.jpg'); }
.game-code-jump__item--wuwa { background-image: url('https://statik.tempo.co/data/2024/05/23/id_1304606/1304606_720.jpg'); }
.game-code-jump__item--nte { background-image: url('https://ntevmg.perfectworld.com/webops/nte/1920X1080-en.jpg'); }
.game-code-jump__item--hsr { background-image: url('https://webstatic.hoyoverse.com/upload/op-public/2023/09/14/3c862d085db721a5625b6e12649399bc_3258945178303034803.png'); }
.game-code-jump__item--genshin { background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm4vHdpa3RIn1VjtN3Dh8a8xTCveYPCrDRo4KZVKiknXfMsbrZe_2wBMuPATkjQ5NLAiCm-JuEZgJnSfERChA6LqtkO-n9jJHA6l07wD_TjF2YKWlJS14RWYpIbWHm6iA4R6wHRLql2pw/s1600/images+%25281%2529.jpeg'); }
.game-code-jump__item--hi3 { background-image: url('https://fastcdn.hoyoverse.com/static-resource-v2/2024/02/26/38fb67a9535b8fc8665dbbfb416c07ad_1746331783350114280.png'); }
.game-code-jump__item--infinity-nikki { background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtRjHQtRQTsHzPHL9z8FjbtA1Fqa5X5iDWxPMoqkF95I2uLvX_wF4WB2l1&s=10'); }
.game-code-ledger { scroll-margin-top: 4.5rem; }
.game-code-settings-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.game-code-settings-head .hint { margin: 0.25rem 0 0; }
.game-code-role-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.45rem; margin-top: 0.7rem; max-height: 14rem; overflow: auto; padding: 0.1rem; }
.game-code-role { display: flex; align-items: center; min-width: 0; gap: 0.5rem; padding: 0.48rem 0.55rem; border: 1px solid var(--rule-soft); color: var(--muted); font-size: 0.82rem; cursor: pointer; }
.game-code-role:has(input:checked) { border-color: var(--brass-dim); color: var(--paper); background: rgba(200, 155, 60, 0.06); }
.game-code-role input { accent-color: var(--brass); }
.game-code-role span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-code-role--everyone { border-color: rgba(200, 155, 60, 0.42); color: var(--paper); }

@media (max-width: 620px) {
  .game-code-heading { align-items: stretch; flex-direction: column; }
  .game-code-heading > .btn { align-self: flex-start; }
  .game-code-ledger > header { grid-template-columns: auto 1fr; }
  .game-code-source { grid-column: 1 / -1; text-align: left; }
  .game-code-announce { grid-column: 1 / -1; justify-content: start; }
  .game-code-card { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.65rem; }
  .game-code-actions { grid-column: 2; justify-content: start; }
  .game-code-settings-head { align-items: stretch; flex-direction: column; }
}
.chat-ai-rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}