:root {
  color-scheme: dark;
  --text: light-dark(#23221e, #eeeae1);
  --page-background: light-dark(#f8f6f0, #191a1e);
  --surface: light-dark(#fffefa, #222329);
  --border: light-dark(#dfd9c9, #414148);
  --panel-shadow: light-dark(#40300c0a, #00000033);
  --muted: light-dark(#5d5544, #bcb5a6);
  --secondary-text: light-dark(#675e4c, #bcb5a6);
  --focus: light-dark(#986500, #e7bd5c);
  --notice-background: light-dark(#fff3cd, #43351b);
  --notice-text: light-dark(#513600, #f7dda0);
  --input-border: light-dark(#aaa18f, #62606a);
  --hover-background: light-dark(#f3efe4, #303139);
  --disabled-background: light-dark(#efede7, #292a30);
  --disabled-text: light-dark(#6a6459, #9b968d);
  --link: light-dark(#54452c, #dbc8a0);
  --navigation-text: light-dark(#352500, #e8ddc5);
  --selected-background: light-dark(#f8de8d, #665122);
  --header-border: light-dark(#dac28b, #7c642d);
  font-family: system-ui, sans-serif;
  color: var(--text);
  background: var(--page-background);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
[hidden] { display: none !important; }
.theme-toggle { flex: none; padding: .5rem .65rem; font-size: .8125rem; }
.panel-brand, .member-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.panel-brand { justify-content: space-between; }
.member-header-actions { min-width: 0; margin-left: auto; justify-content: flex-end; }

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
}

.gate {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
}

.panel {
  width: min(100%, 32rem);
  padding: clamp(1.5rem, 6vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: 0 12px 48px var(--panel-shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 650;
}

.brand-icon {
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

h1 {
  margin: 1.5rem 0 .5rem;
  font-family: Georgia, serif;
  font-size: clamp(2.65rem, 8vw, 4rem);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: 1;
}

.intro { margin: 0; color: var(--muted); line-height: 1.55; }
.notice {
  margin: 1.25rem 0 0;
  padding: .75rem 1rem;
  border-left: .2rem solid var(--focus);
  background: var(--notice-background);
  color: var(--notice-text);
  line-height: 1.4;
}

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
button, .button {
  display: inline-block;
  padding: .72rem 1.05rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.secondary { background: var(--surface); color: var(--text); border-color: var(--input-border); }
.secondary:hover { background: var(--hover-background); }
button:disabled { background: var(--disabled-background); color: var(--disabled-text); border-color: var(--border); cursor: default; }
.text-button { color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
.sign-out { margin-top: 1rem; }
.text-button { padding-inline: 0; background: transparent; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.member-layout {
  display: grid;
  grid-template-columns: clamp(6.75rem, 24vw, 15rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}

.member-sidebar {
  grid-row: 1 / -1;
  padding: clamp(.75rem, 3vw, 1.75rem);
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.member-sidebar .brand { flex-wrap: wrap; }
.member-nav { display: grid; gap: .5rem; margin-top: 1.75rem; }
.member-nav a, .member-nav button, .member-nav summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .6rem;
  border-radius: .5rem;
  text-align: left;
  font-size: .875rem;
  font-weight: 650;
}

.nav-icon { width: 1rem; height: 1rem; flex: none; }
.member-nav a > span, .member-nav button > span, .member-nav summary > span { min-width: 0; overflow-wrap: anywhere; }

.member-nav a { color: var(--navigation-text); text-decoration: none; }
.member-nav a[aria-current="page"] { background: var(--selected-background); }
.member-nav .sign-out { margin: 0; }
.member-nav a:not([aria-current]):hover, .member-nav button:hover, .member-nav summary:hover { background: var(--hover-background); }

.admin-menu > summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .4rem;
  list-style: none;
  cursor: pointer;
}

.admin-menu > summary::-webkit-details-marker { display: none; }
.admin-menu > summary::after { content: "›"; margin-left: auto; font-size: 1.15rem; }
.admin-menu[open] > summary { background: var(--hover-background); }
.admin-menu[open] > summary::after { transform: rotate(90deg); }
.admin-submenu {
  display: grid;
  gap: .3rem;
  margin: .4rem 0 .2rem .6rem;
  padding-left: .45rem;
  border-left: 1px solid var(--border);
}

.member-nav .admin-submenu a { font-size: .8125rem; overflow-wrap: anywhere; }

.member-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  min-height: 5.125rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 2px solid var(--header-border);
  background: var(--surface);
}

.member-header-context { display: grid; gap: .35rem; min-width: 0; }
.member-eyebrow {
  margin: 0;
  color: var(--secondary-text);
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.member-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  font-size: .875rem;
  overflow-wrap: anywhere;
}

.member-breadcrumb a { color: var(--secondary-text); text-decoration: none; }
.member-breadcrumb a:hover { text-decoration: underline; text-underline-offset: .2em; }
.member-breadcrumb [aria-hidden] { color: var(--secondary-text); }

.member-profile {
  display: flex;
  align-items: center;
  gap: .65rem;
  max-width: min(12rem, 100%);
  min-width: 0;
  margin: 0 0 0 auto;
  text-align: left;
  font-size: .8125rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.member-profile figcaption {
  display: grid;
  justify-items: start;
  gap: .15rem;
  min-width: 0;
}

.profile-role {
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--hover-background);
  color: var(--link);
  font-size: .75rem;
}

.member-avatar {
  flex: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--hover-background);
  object-fit: cover;
}

.member-content { min-width: 0; padding: clamp(1.25rem, 5vw, 3rem); }
.member-content h1 { margin-top: 0; font-size: clamp(2rem, 5vw, 4rem); overflow-wrap: anywhere; }
.welcome-message { white-space: pre-wrap; overflow-wrap: anywhere; }

.admin-form {
  display: grid;
  gap: .75rem;
  max-width: 38rem;
  margin-top: 1.5rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--surface);
}

.admin-form h2 { margin: 0; font-size: 1.25rem; }
.admin-form .notice { margin: 0; }
.admin-form label { font-weight: 650; }
.admin-form input, .admin-form textarea {
  min-width: 0;
  padding: .65rem .75rem;
  border: 1px solid var(--input-border);
  border-radius: .5rem;
  background: var(--surface);
  color: inherit;
  font: inherit;
}

.admin-form textarea { resize: vertical; }
.admin-form button { justify-self: start; }

.event-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-top: 1.5rem; }
.event-filters label { display: grid; gap: .4rem; min-width: 0; flex: 1 1 10rem; font-size: .8125rem; font-weight: 650; }
.event-filters .event-search { flex: 2 1 14rem; }
.event-filters input, .event-filters select {
  width: 100%;
  min-width: 0;
  padding: .65rem .75rem;
  border: 1px solid var(--input-border);
  border-radius: .5rem;
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-weight: 400;
}
.event-clear { padding: .72rem .25rem; color: var(--link); text-underline-offset: .2em; }
.event-table-wrapper { margin-top: 1.5rem; overflow-x: auto; }
.event-table { width: 100%; min-width: 34rem; border-collapse: collapse; text-align: left; }
.event-table th, .event-table td { padding: .9rem .75rem; border-bottom: 1px solid var(--border); }
.event-table th { color: var(--secondary-text); font-size: .8125rem; font-weight: 650; }
.event-table th:first-child, .event-table td:first-child { padding-left: 0; }
.event-user { display: flex; align-items: center; gap: .75rem; overflow-wrap: anywhere; }
.event-avatar { flex: none; border-radius: 50%; object-fit: cover; }
.event-time { font-size: .875rem; font-variant-numeric: tabular-nums; }
.event-empty { margin-top: 1.5rem; color: var(--secondary-text); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.import-steps { padding-left: 1.25rem; line-height: 1.7; color: var(--secondary-text); max-width: 52rem; }
.preset-character { margin: 2rem 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); }
.preset-character h2 { margin: 0 0 .5rem; }
.preset-stats { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.preset-stats dt { font-size: .8125rem; color: var(--secondary-text); }
.preset-stats dd { margin: .25rem 0 0; font-weight: 650; }
.preset-model { margin-top: 1.5rem; }
.preset-model > summary { cursor: pointer; text-transform: capitalize; font-weight: 650; }
.character-picker { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }
.character-picker label { display: grid; gap: .5rem; flex: 1 1 16rem; max-width: 38rem; font-weight: 650; }
.character-picker select { width: 100%; min-height: 2.75rem; padding: .5rem .75rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; font: inherit; }
.character-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.character-tool { display: grid; text-align: left; gap: .5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); color: var(--text); }
.character-tool strong { font-size: 1.125rem; }
.character-tool span, .data-note, .data-empty { color: var(--secondary-text); font-size: .875rem; }
.character-dialog { box-sizing: border-box; width: min(70rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); color: var(--text); box-shadow: 0 1rem 5rem #0006; }
.character-dialog::backdrop { background: #0009; backdrop-filter: blur(3px); }
.dialog-heading { position: sticky; top: 0; z-index: 1; background: var(--surface); display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1.5rem; border-bottom: 1px solid var(--border); }
.dialog-heading h2 { margin: 0 0 .4rem; font-size: 1.75rem; }
.dialog-heading p { margin: 0; color: var(--secondary-text); }
.dialog-heading form { flex: none; }
.dialog-content { padding: 1.5rem; }
.dialog-content h3 { margin-top: 1.5rem; }
.dialog-content .event-table-wrapper { margin-top: .75rem; }
.modal-filter { display: grid; gap: .5rem; max-width: 28rem; margin: 1rem 0; font-weight: 650; }
.modal-filter select { min-width: 0; width: 100%; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface); color: inherit; font: inherit; }
body.dialog-open { overflow: hidden; }
.preset-number { padding: .2rem .35rem; border: 0; border-radius: .25rem; background: transparent; color: var(--link); font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: .2em; }
.preset-number:hover { background: var(--hover-background); }

.visibility-form { position: relative; margin: 0 0 0 auto; }
.visibility-toggle { display: grid; place-items: center; padding: .4rem; border: 1px solid var(--border); background: transparent; color: var(--secondary-text); border-radius: .5rem; }
.visibility-toggle[aria-pressed="true"] { background: var(--selected-background); color: var(--navigation-text); }
.visibility-tooltip { display: none; position: absolute; right: 0; bottom: calc(100% + .5rem); z-index: 5; width: min(18rem, 70vw); padding: .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface); color: var(--text); box-shadow: 0 .3rem 1rem #0003; font-size: .75rem; line-height: 1.5; }
.visibility-form:hover .visibility-tooltip, .visibility-form:focus-within .visibility-tooltip { display: block; }
.shared-pickers { display: flex; flex-wrap: wrap; gap: 0 2rem; }
.shared-pickers .character-picker { flex: 1 1 20rem; }
.shared-owner { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; }
.shared-owner img { border-radius: 50%; }
.character-tabs { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0 1.5rem; border-bottom: 1px solid var(--border); }
.character-tabs a { padding: .75rem 0; color: var(--secondary-text); text-decoration: none; border-bottom: 2px solid transparent; }
.character-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--focus); font-weight: 650; }
.importer-changelog { margin-top: 2.5rem; max-width: 55rem; }
.importer-changelog ol { list-style: none; padding: 0; }
.importer-changelog li { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.importer-changelog li > div { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.importer-changelog time { color: var(--secondary-text); font-size: .875rem; }
.importer-changelog p { margin: .5rem 0 0; }
@media (max-width: 700px) {
  .characters-layout { grid-template-columns: minmax(0, 1fr); }
  .characters-layout .member-sidebar { grid-row: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 1rem; }
  .characters-layout .member-nav { grid-template-columns: minmax(5.5rem, 1fr) minmax(0, 2fr) minmax(5.5rem, 1fr); margin-top: 1rem; align-items: start; }
  .characters-layout .member-sidebar .brand { flex-wrap: nowrap; }
}
@media (max-width: 380px) {
  .characters-layout .member-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .characters-layout .optimizer-menu { grid-row: 2; grid-column: 1 / -1; }
  .characters-layout .member-nav > .sign-out { grid-row: 1; grid-column: 2; }
}

.character-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; position: relative; margin-bottom: .5rem; }
.character-heading h2 { margin: 0; overflow-wrap: anywhere; }
.character-heading .visibility-form { margin: 0; position: static; }
.character-heading .visibility-tooltip { left: 0; right: auto; max-width: 100%; }