:root {
  color-scheme: dark;
  --ink: #f4edf1;
  --muted: #b7a9b0;
  --line: rgba(244, 237, 241, .12);
  --line-strong: rgba(244, 237, 241, .2);
  --paper: #121016;
  --panel: #1a171e;
  --panel-soft: #201b24;
  --field: #131116;
  --accent: #d96f9f;
  --accent-strong: #f09abe;
  --warn: #d0a25f;
  --bad: #f17b9e;
  --good: #86c891;
  --radius: 7px;
  --control-h: 38px;
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --motion-fast: 140ms ease;
  --motion-med: 220ms cubic-bezier(.2, .8, .2, 1);
  --unicode-font: "Kailasa", "Noto Sans Tibetan", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", "Segoe UI Symbol", "Arial Unicode MS", "DejaVu Sans", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--unicode-font);
  --mono-font: ui-monospace, SFMono-Regular, Menlo, Consolas, Monaco, "Liberation Mono", "Courier New", var(--unicode-font);
}

/* Base */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--ui-font);
  color: var(--ink);
  background: var(--paper);
}
body:not(.login-body) { overflow: hidden; }
body.limited-access .system-nav { display: none !important; }
body.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(217, 111, 159, .11), transparent 34%),
    linear-gradient(315deg, rgba(125, 211, 252, .08), transparent 38%),
    #0d1014;
}
button, input, textarea, select { font: inherit; }
button {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink);
  border-radius: var(--radius);
  min-height: var(--control-h);
  padding: 0 12px;
  cursor: pointer;
  transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}
button:not(:disabled):hover { border-color: var(--line-strong); background: #251f29; transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(0); }
button:disabled { opacity: .48; cursor: not-allowed; }
button.primary {
  border-color: var(--accent-strong);
  background: var(--accent);
  color: #160d13;
  font-weight: 800;
}

/* Shell and navigation */
.shell {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
}
.sidebar {
  border-right: 1px solid var(--line);
  background: #17141a;
  padding: var(--gap-lg);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  height: 100vh;
  min-height: 0;
  overflow: auto;
}
.brand {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--accent);
  color: #160d13;
  font-weight: 800;
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 19px; line-height: 1.2; }
h2 { font-size: 21px; line-height: 1.2; }
h3 { font-size: 15px; margin-top: 18px; }
p, .meta { color: var(--muted); }
.logout-link {
  display: grid;
  place-items: center;
  min-height: var(--control-h);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--accent-strong);
  background: var(--panel-soft);
  text-decoration: none;
  font-weight: 700;
  transition: background-color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.logout-link:hover { border-color: var(--line-strong); background: #251f29; transform: translateY(-1px); }
.nav-tree {
  display: grid;
  gap: var(--gap-md);
  padding: 4px 0;
}
.tree-group {
  position: relative;
  display: grid;
  gap: 3px;
  padding-left: 16px;
}
.tree-group::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 12px;
  left: 4px;
  border-left: 1px solid var(--line);
}
.tree-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.tab, .dataset-tab {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  min-height: 32px;
  padding-left: 12px;
  background: transparent;
  transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.tab::before, .dataset-tab::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  width: 10px;
  border-top: 1px solid var(--line);
}
.tab.active, .dataset-tab.active {
  border-color: rgba(217, 111, 159, .55);
  color: var(--accent-strong);
  background: rgba(217, 111, 159, .08);
  font-weight: 700;
}
.tab:hover, .dataset-tab:hover {
  background: rgba(255,255,255,.035);
  border-color: var(--line-strong);
}
.tree-children {
  display: grid;
  gap: 3px;
  margin: 0 0 2px 12px;
  padding-left: 10px;
  opacity: .88;
}
.dataset-tab {
  min-height: 28px;
  color: var(--muted);
  font-size: 12px;
  display: grid;
  gap: 2px;
  align-content: center;
}
.dataset-tab::before {
  left: -10px;
  width: 8px;
}
.tree-meta {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}
.tree-loading {
  color: var(--accent-strong);
  font-size: 13px;
  padding: 6px 0 6px 12px;
}

/* Cards, forms, and lists */
.side-panel, .file-heading, .health-card, .copy, .login-card, .config-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.side-panel, .file-heading, .health-card, .copy, .config-section,
.home-card, .file-item, .user-item, .view-card, .announcement-card,
.channel-option, .mini-list div, .bot-control-card, .bot-console-card, .bot-error-item {
  transition: background-color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}
.home-card:hover, .file-item:hover, .user-item:hover, .view-card:hover,
.announcement-card:hover, .channel-option:hover, .mini-list div:hover,
.health-card:hover, .config-section:hover, .bot-control-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.side-panel { padding: var(--gap-md); }
.side-panel h3 { margin-top: 0; margin-bottom: 6px; }
.side-panel p { font-size: 13px; line-height: 1.45; }
.search {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.search input, .search select, .field-row input, .field-row textarea, .login-form input, .user-form input, .user-form textarea, .user-form select, .inline-tools input, .timer-edit-row input, .role-edit-row input, #managedFileText {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  padding: 8px 10px;
  min-height: var(--control-h);
  transition: background-color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.search input:focus, .search select:focus, .field-row input:focus, .field-row textarea:focus,
.login-form input:focus, .user-form input:focus, .user-form textarea:focus,
.user-form select:focus, .inline-tools input:focus, .timer-edit-row input:focus,
.role-edit-row input:focus, #managedFileText:focus {
  outline: none;
  border-color: rgba(217, 111, 159, .62);
  box-shadow: 0 0 0 3px rgba(217, 111, 159, .12);
}
.search input { min-height: var(--control-h); }
.user-rail .search,
.member-rail .search,
.user-rail .inline-tools,
.member-rail .inline-tools {
  width: 260px;
  max-width: 100%;
  justify-self: start;
}
.file-list, .user-list {
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  gap: var(--gap-sm);
  padding-right: 8px;
  min-width: 0;
  scrollbar-gutter: stable;
}
.file-item, .user-item, .loading-card {
  display: grid;
  gap: 5px;
  text-align: left;
  width: 100%;
  min-height: 76px;
  padding: 10px;
  background: var(--panel-soft);
  min-width: 0;
  box-sizing: border-box;
}
.file-item {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: var(--gap-sm);
}
.user-item {
  min-height: 78px;
  padding: 10px;
  align-content: start;
}
.user-rail .user-list,
.member-rail .user-list {
  width: 100%;
  max-width: 100%;
  justify-self: start;
}
.user-rail .user-item,
.member-rail .user-item {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.loading-card {
  min-height: 44px;
  align-items: center;
  color: var(--accent-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--panel-soft), rgba(217, 111, 159, .08), var(--panel-soft));
  background-size: 220% 100%;
  animation: loadingSweep 1.4s ease-in-out infinite;
}
.home-loading {
  color: var(--muted);
  font-size: .92em;
}
.file-item.active, .user-item.active { border-color: rgba(217, 111, 159, .58); box-shadow: inset 3px 0 0 rgba(217, 111, 159, .8); }
.file-name {
  font-family: var(--mono-font);
  font-size: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
  grid-column: 1;
  grid-row: 1;
}
.file-purpose {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}
.file-item > .file-purpose {
  grid-column: 1;
  grid-row: 2;
}
.status-pill {
  justify-self: start;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  color: #10140f;
  background: var(--good);
  line-height: 1.3;
  white-space: nowrap;
}
.file-item > .status-pill {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
}
.status-pill.bad { color: #1c0d13; background: var(--bad); }

/* Main panels */
.main {
  min-width: 0;
  min-height: 0;
  height: 100vh;
  overflow: auto;
}
.panel { display: none; min-height: 100%; padding: var(--gap-lg); }
.active-panel {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: var(--gap-md);
  animation: panelIn var(--motion-med);
}
#home.active-panel {
  height: auto;
  min-height: 100%;
  align-content: start;
  overflow: visible;
}
#view.active-panel {
  height: 100vh;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
}
#messagesLeaderboard.active-panel {
  height: 100vh;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
}
#botManager.active-panel {
  height: 100vh;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
}
#fileManager.active-panel {
  height: 100vh;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
}
#users.active-panel, #members.active-panel {
  height: 100vh;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap-lg);
  min-height: 46px;
}
.topbar p {
  margin-top: 3px;
  font-size: 13px;
}
.actions { display: flex; gap: var(--gap-sm); flex-wrap: wrap; justify-content: flex-end; }
.message {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--panel);
}
.message.error { border-left-color: var(--bad); color: var(--bad); }
.message.hidden { display: none; }
.hidden { display: none !important; }
.config-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap-md);
}
.config-section {
  padding: var(--gap-md);
  flex: 1 1 300px;
}
.config-section-header {
  padding-bottom: var(--gap-sm);
  margin-bottom: var(--gap-sm);
  border-bottom: 1px solid var(--line);
}
.config-section-header h3 { margin-top: 0; }
.shop-item-row {
  flex: 1 1 420px;
}
.shop-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
}
.shop-item-header h3 {
  margin: 0;
}
.field-row {
  display: grid;
  gap: 4px;
  margin-top: var(--gap-sm);
}
.field-row:first-of-type { margin-top: 0; }
.field-row label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.lookup-row {
  display: grid;
  position: relative;
}
.lookup-row input {
  padding-right: 34px;
  background:
    linear-gradient(45deg, transparent 50%, var(--accent-strong) 50%) calc(100% - 18px) 52% / 7px 7px no-repeat,
    linear-gradient(135deg, var(--accent-strong) 50%, transparent 50%) calc(100% - 13px) 52% / 7px 7px no-repeat,
    var(--field);
}
.lookup-row input:focus {
  border-color: rgba(217, 111, 159, .9);
  box-shadow: 0 0 0 3px rgba(217, 111, 159, .14);
  outline: none;
}
.lookup-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #18131c;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .38);
  padding: 6px;
}
.lookup-option {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.lookup-option:hover,
.lookup-option:focus {
  background: rgba(217, 111, 159, .14);
  outline: none;
}
.lookup-option strong {
  font-size: 13px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lookup-option span {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.lookup-option.role-lookup-option {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}
.role-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1;
}
.role-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.role-icon .role-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--role-color, var(--accent-strong));
}
.role-option-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.shop-role-lookup {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  min-height: var(--control-h);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  padding: 0 8px;
}
.shop-selected-role-icon {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  pointer-events: none;
}
.shop-role-lookup input {
  grid-column: 2;
  grid-row: 1;
  min-height: calc(var(--control-h) - 2px);
  border: 0;
  background: transparent;
  padding: 8px 6px;
  box-shadow: none;
}
.lookup-row.shop-role-lookup input,
.lookup-row.shop-role-lookup input:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.shop-role-lookup:focus-within {
  border-color: rgba(217, 111, 159, .62);
  box-shadow: 0 0 0 3px rgba(217, 111, 159, .12);
}
.shop-role-lookup .lookup-menu {
  grid-column: 1 / -1;
}
.lookup-empty {
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
}
.field-row textarea {
  min-height: 112px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}
.field-help { color: var(--muted); font-size: 12px; }
.accent-meta {
  color: var(--accent-strong);
  font-size: 12px;
  min-height: 16px;
}
.inline-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gap-sm);
}
.user-workspace, .member-workspace, .file-manager-workspace {
  min-height: 0;
  height: 100%;
  display: grid;
  gap: var(--gap-md);
}
.file-manager-workspace { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
.user-workspace, .member-workspace { grid-template-columns: 286px minmax(0, 1fr); }
.user-rail, .member-rail, .file-manager-rail {
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #17141a;
  padding: 10px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--gap-sm);
  overflow-x: hidden;
}
.file-manager-rail {
  grid-template-rows: auto minmax(0, 1fr);
}
.user-rail, .member-rail {
  width: 286px;
  justify-self: start;
}
.user-editor, .member-editor, .file-manager-editor {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: var(--gap-sm);
}
.file-manager-editor {
  grid-template-rows: auto minmax(0, 1fr);
}
.file-manager-path-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap-sm);
  align-items: end;
}
.file-manager-path-row button {
  min-width: 58px;
}
.file-item.file-dir .status-pill {
  color: #111318;
  background: #7dd3fc;
}
.file-item.file-binary .status-pill {
  color: #101318;
  background: #c4b5fd;
}
.managed-file-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}
#managedFileText {
  width: 100%;
  height: 100%;
  min-height: 560px;
  resize: none;
  font: 13px/1.45 var(--mono-font);
  background: #0d0b10;
  color: #f4edf1;
  tab-size: 2;
}
#managedFileText:disabled {
  opacity: .7;
}
.user-editor, .member-editor {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
  height: 100%;
}
.user-form, .member-detail {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}
.file-heading { padding: var(--gap-md); }
.file-heading h3 { margin-top: 0; }
.user-form {
  display: grid;
  gap: var(--gap-sm);
  grid-auto-rows: max-content;
  align-content: start;
  align-self: start;
}
.user-form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--gap-md);
}
.user-form:empty { display: none; }
.user-form.user-form-raw {
  align-self: stretch;
  height: calc(100vh - 176px);
  max-height: calc(100vh - 176px);
  min-height: 420px;
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
}
.user-field {
  display: grid;
  gap: 5px;
}
.user-form-raw .user-field {
  min-height: 0;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.user-field label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.user-form textarea {
  min-height: 220px;
  resize: vertical;
  font: 13px/1.45 var(--mono-font);
}
.user-form-raw textarea {
  min-height: 0;
  height: 100%;
  resize: none;
  overflow: auto;
}
.user-name { min-width: 0; font-weight: 750; overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; }
.user-id { min-width: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; }
.change-preview {
  color: var(--accent-strong);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-line;
}
.fixed-value {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  padding: 9px 10px;
  min-height: 40px;
  display: grid;
  align-items: center;
}
.level-result {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  padding: 10px 12px;
  color: var(--accent-strong);
  font-weight: 750;
  line-height: 1.45;
  white-space: pre-line;
}
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap-md);
}
.home-grid, .member-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-md);
  overflow: visible;
}
.member-cards {
  align-items: start;
}
.member-cards .home-card {
  align-self: start;
  padding: var(--gap-sm);
}
#messagesLeaderboardContent {
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
#botManagerContent {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--gap-md);
}
.bot-control-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap-sm);
}
.bot-control-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 10px 11px;
}
.bot-control-card h3 {
  margin: 0 0 5px;
  font-size: 12px;
  color: var(--muted);
}
.bot-control-card p {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
.bot-console-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 0.9fr);
  gap: var(--gap-md);
}
.bot-performance-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}
.bot-performance-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.bot-performance-heading h3 {
  margin: 0;
  font-size: 13px;
}
.bot-performance-heading span {
  color: var(--muted);
  font-size: 12px;
}
#botPerformanceGraph {
  width: 100%;
  height: 150px;
  border-radius: var(--radius);
  background: #101419;
}
.bot-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.bot-graph-legend span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 99px;
  margin-right: 5px;
  background: currentColor;
}
.bot-graph-legend .metric-cpu {
  color: #7dd3fc;
}
.bot-graph-legend .metric-ram {
  color: #86efac;
}
.bot-graph-legend .metric-bot-cpu {
  color: #fda4af;
}
.bot-graph-legend .metric-latency {
  color: #fcd34d;
}
.bot-graph-legend .metric-messages {
  color: #c4b5fd;
}
.bot-console-panel,
.bot-side-panel {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--gap-md);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--gap-sm);
}
.bot-side-panel {
  grid-template-rows: auto minmax(0, 0.65fr) auto minmax(0, 1fr);
}
.bot-command-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  gap: var(--gap-sm);
  align-items: end;
}
.bot-command-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}
.bot-command-row input {
  min-height: var(--control-h);
}
.bot-console {
  min-height: 0;
  overflow: auto;
  white-space: normal;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.22;
  border-radius: var(--radius);
  background: #101419;
  color: #dbe7ef;
  padding: 12px;
}
.bot-log-line {
  margin: 0;
  padding: 0;
}
.bot-log-line.info { color: #b7e3f7; }
.bot-log-line.warning { color: #ffe08a; }
.bot-log-line.error { color: #ff9aa7; }
.bot-log-time { color: #81909d; }
.bot-json,
.bot-error-list {
  min-height: 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  border-radius: var(--radius);
  background: var(--panel-soft);
  padding: 10px;
}
.bot-error-list {
  display: grid;
  align-content: start;
  gap: var(--gap-sm);
}
.bot-error-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  background: rgba(255,255,255,0.03);
}
.bot-error-item strong {
  color: var(--bad);
  display: block;
  margin-bottom: 4px;
}
.bot-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}
.bot-switch input {
  width: 16px;
  height: 16px;
}

/* Home cards and leaderboards */
.home-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--gap-md);
  display: grid;
  gap: 5px;
  align-content: start;
}
.home-card h3 { margin: 0 0 2px; }
.home-card p { margin: 0; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.home-card p:first-of-type { color: var(--ink); font-weight: 750; }
.home-card-wide { grid-column: 1 / -1; }
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: 4px;
}
.progress-track {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
}
.progress-track div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width .25s ease;
}
.danger-text { color: var(--bad) !important; }
.mini-list {
  display: grid;
  gap: 6px;
}
.leaderboard-scroll {
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}
.leaderboard-page-grid {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
}
.leaderboard-page-grid .leaderboard-scroll {
  max-height: none;
  min-height: 0;
  height: 100%;
}
.leaderboard-actions {
  align-items: end;
}
.leaderboard-channel-control {
  position: relative;
  width: 150px;
  min-height: 58px;
  display: grid;
  gap: 6px;
  align-items: end;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
}
.compact-search {
  width: min(360px, 46vw);
  text-align: left;
}
.compact-select {
  width: 150px;
  text-align: left;
}
.compact-search input {
  min-height: var(--control-h);
}
.compact-select select {
  min-height: var(--control-h);
}
.mini-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gap-md);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  padding: 9px 10px;
}
.mini-list span { overflow-wrap: anywhere; }
.mini-list strong { color: var(--accent-strong); font-size: 12px; }
.muted-inline { color: var(--muted); font-size: 11px; }
.channel-option-list {
  display: grid;
  gap: var(--gap-sm);
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
}
.channel-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--gap-sm);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  padding: 9px 10px;
}
.channel-option input {
  width: 16px;
  height: 16px;
}
.channel-option span { overflow-wrap: anywhere; }
.channel-option code { color: var(--muted); font-size: 11px; }
.message-channel-menu {
  position: relative;
  width: 100%;
}
.message-channel-menu summary {
  width: 100%;
  min-height: var(--control-h);
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  padding: 7px 10px;
  cursor: pointer;
  font-weight: 500;
  list-style-position: inside;
  white-space: nowrap;
}
.message-channel-menu.disabled {
  min-height: var(--control-h);
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--muted);
  padding: 7px 10px;
}
.channel-menu-popover {
  margin-top: 10px;
}
.leaderboard-channel-control .message-channel-menu[open] .channel-menu-popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  width: min(340px, 86vw);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #18131c;
  box-shadow: 0 16px 38px rgba(0,0,0,.35);
  padding: 10px;
}
.channel-menu-actions {
  display: flex;
  gap: var(--gap-sm);
  margin: 10px 0;
}
.channel-menu-actions button {
  min-height: 32px;
  padding: 5px 9px;
}
.message-channel-list {
  max-height: 220px;
}
.message-channel-list .channel-option {
  background: var(--field);
  min-height: 38px;
  padding: 8px 9px;
}
.message-channel-list .channel-option code {
  color: var(--muted);
}
.role-user-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}
.role-user-list span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--ink);
  padding: 5px 8px;
  font-size: 12px;
}

/* Data views */
.announcement-sections {
  display: grid;
  gap: var(--gap-lg);
  overflow: visible;
}
.announcement-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--gap-md);
  display: grid;
  gap: var(--gap-md);
  overflow: visible;
}
.announcement-view,
.announcement-view .actions {
  overflow: visible;
}
.announcement-card h3,
.announcement-card p {
  margin: 0;
}
.announcement-card p,
.announcement-card small {
  color: var(--muted);
}
.announcement-card .user-form {
  overflow: visible;
}
.announcement-card textarea {
  min-height: 86px;
}
.announcement-template textarea {
  min-height: 220px;
  font-family: var(--mono-font);
}
.multi-picker {
  position: relative;
  display: grid;
  gap: var(--gap-sm);
  overflow: visible;
}
.multi-picker-selected {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  padding: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.multi-chip {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--ink);
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.multi-chip button {
  min-height: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent-strong);
  padding: 0 2px;
}
.multi-picker input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--ink);
  padding: 9px 10px;
  min-height: var(--control-h);
}
.multi-picker input:focus {
  border-color: rgba(217, 111, 159, .9);
  box-shadow: 0 0 0 3px rgba(217, 111, 159, .14);
  outline: none;
}
.multi-picker-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 35;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #18131c;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .38);
  padding: 6px;
  margin-bottom: 16px;
}
.multi-option {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.multi-option:hover,
.multi-option:focus {
  background: rgba(217, 111, 159, .14);
  outline: none;
}
.multi-option strong {
  font-size: 13px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multi-option span {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.guild-card {
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
}
.guild-thumb {
  width: 58px;
  height: 58px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--accent);
  color: #160d13;
  display: grid;
  place-items: center;
  font-weight: 800;
}
.member-detail {
  display: grid;
  gap: var(--gap-md);
}
.member-detail pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.45 var(--mono-font);
}
.view-grid {
  display: grid;
  gap: var(--gap-sm);
  min-height: 0;
}
.data-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.data-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1fr);
  gap: var(--gap-md);
  padding: 9px 11px;
  border-top: 1px solid var(--line);
  align-items: center;
}
.data-row:first-child { border-top: 0; }
.data-row.three { grid-template-columns: minmax(120px, .8fr) minmax(180px, 1fr) minmax(120px, .7fr); }
.timer-edit-row { grid-template-rows: auto auto; }
.timer-preview {
  grid-column: 1 / -1;
}
.data-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.view-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--gap-md);
  display: grid;
  gap: var(--gap-sm);
}
.view-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.view-card h3 { margin-top: 0; }
.view-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap-sm);
  margin: 0;
}
.view-card dl div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  padding: 8px;
}
.view-card dt { color: var(--muted); font-size: 12px; font-weight: 800; }
.view-card dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.timer-edit-row input { min-height: var(--control-h); }
.timer-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gap-sm);
  align-items: center;
}
.lfg-view {
  grid-template-rows: auto minmax(0, 1fr);
}
.lfg-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) minmax(130px, 160px);
  gap: var(--gap-sm);
}
.lfg-post-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: var(--gap-sm);
  padding-right: 4px;
}
.health-card, .copy { padding: var(--gap-md); }
.health-card code, .copy code {
  background: var(--field);
  padding: 2px 5px;
  border-radius: 5px;
}
.copy {
  max-width: 820px;
  line-height: 1.55;
}

/* Login */
.login-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.login-backdrop::before,
.login-backdrop::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 72px);
  transform: rotate(-7deg) scale(1.08);
  animation: loginGridDrift 18s linear infinite;
}
.login-backdrop::after {
  opacity: .28;
  transform: rotate(12deg) scale(1.2);
  animation-duration: 26s;
  animation-direction: reverse;
}
.login-scan {
  position: absolute;
  inset: -30% 0;
  background: linear-gradient(180deg, transparent 0%, rgba(240, 154, 190, .055) 48%, rgba(125, 211, 252, .055) 50%, transparent 56%);
  animation: loginScan 7s ease-in-out infinite;
}
.login-grid-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 24%, rgba(240,154,190,.22), transparent 24%),
    radial-gradient(circle at 82% 72%, rgba(134,239,172,.10), transparent 26%),
    radial-gradient(circle at 58% 48%, rgba(125,211,252,.12), transparent 30%);
  filter: blur(28px);
  opacity: .48;
  animation: loginGlowShift 9s ease-in-out infinite alternate;
}
.login-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  display: grid;
  align-items: stretch;
}
.login-card {
  display: grid;
  gap: var(--gap-lg);
  padding: 24px;
  align-content: center;
  min-height: 430px;
  border-color: rgba(255,255,255,.14);
  background: rgba(27, 23, 31, .88);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .42);
  backdrop-filter: blur(14px);
}
.login-brand {
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: 16px;
}
.login-brand .brand-mark {
  background: var(--accent);
  box-shadow: 0 0 24px rgba(240, 154, 190, .18);
}
.login-brand h1 {
  font-size: 24px;
}
.login-form { display: grid; gap: 13px; }
.login-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.login-form input {
  background: rgba(13, 16, 20, .72);
  border-color: rgba(255,255,255,.13);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-form input:focus {
  outline: none;
  border-color: rgba(125, 211, 252, .8);
  box-shadow: 0 0 0 3px rgba(125, 211, 252, .16);
  background: rgba(13, 16, 20, .92);
}
.login-submit {
  min-height: 44px;
  background: var(--accent);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 10px 26px rgba(217, 111, 159, .18);
}
.login-error {
  border: 1px solid rgba(241, 123, 158, .35);
  border-left: 4px solid var(--bad);
  border-radius: 7px;
  padding: 10px 12px;
  color: var(--bad);
  background: rgba(241, 123, 158, .12);
}
.login-error.hidden { display: none; }

@keyframes loginGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 92px 0, 0 72px; }
}
@keyframes loginScan {
  0%, 100% { transform: translateY(-28%); opacity: .28; }
  50% { transform: translateY(28%); opacity: .7; }
}
@keyframes loginGlowShift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1%, 0) scale(1.04); }
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes loadingSweep {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@media (max-width: 860px) {
  body:not(.login-body) { overflow: auto; }
  .shell { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .sidebar { height: auto; min-height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .main { height: auto; overflow: visible; }
  .user-workspace, .member-workspace, .file-manager-workspace { grid-template-columns: 1fr; }
  .user-rail, .member-rail { width: 100%; }
  .file-list, .user-list { max-height: 260px; }
  .topbar { flex-direction: column; }
  .actions { justify-content: flex-start; }
  .lfg-filters { grid-template-columns: 1fr; }
  .data-row, .data-row.three { grid-template-columns: 1fr; }
  #view.active-panel, #users.active-panel, #members.active-panel { height: auto; min-height: 100vh; }
  .user-form, .member-detail { overflow: visible; }
  .user-form.user-form-raw { height: 65vh; max-height: none; min-height: 360px; }
  #managedFileText { min-height: 460px; }
  .login-shell {
    width: min(100%, 430px);
    grid-template-columns: 1fr;
  }
  .login-card {
    min-height: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .login-backdrop::before,
  .login-backdrop::after,
  .login-scan,
  .login-grid-glow {
    animation: none;
  }
}