:root {
  /* Webby palette — Midnight Glass Fantasy */
  --bg-deep: #030914;
  --bg-navy: #061426;
  --surface-glass: rgba(8, 27, 51, 0.68);
  --surface-glass-heavy: rgba(7, 23, 44, 0.84);
  --surface-hover: rgba(25, 66, 110, 0.36);
  --border-glass: rgba(135, 192, 255, 0.22);
  --border-bright: rgba(105, 194, 255, 0.55);

  --text-primary: #eef5ff;
  --text-secondary: #b5c4da;
  --text-muted: #7187a3;

  --blue: #48a9ff;
  --cyan: #55dcff;
  --violet: #8774ff;
  --gold: #e1bc72;
  --rose: #ff849b;

  /* Glass strengths */
  --glass-1: rgba(6, 22, 42, 0.46);
  --glass-2: rgba(7, 27, 51, 0.68);
  --glass-3: rgba(5, 20, 39, 0.88);
  --rail-bg: rgba(4, 17, 34, 0.72);
  --hairline: rgba(142, 187, 230, 0.12);
  --glass-reflection: inset 0 1px rgba(255, 255, 255, 0.06), 0 18px 50px rgba(0, 0, 0, 0.22);

  /* Typography */
  --font-display: "Cinzel", "Cormorant Garamond", "Marcellus", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-ui: "Inter", "Geist", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --rail-width: 84px;
  --header-height: 84px;
  --content-max: 1380px;

  /* Legacy aliases so every existing component inherits the new theme */
  --bg: var(--bg-deep);
  --panel: var(--surface-glass);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --primary: var(--blue);
  --primary-soft: rgba(72, 169, 255, 0.16);
  --accent: var(--cyan);
  --accent-soft: rgba(85, 220, 255, 0.16);
  --danger: #ff7a8a;
  --danger-soft: rgba(255, 122, 138, 0.14);
  --warning: var(--gold);
  --warning-soft: rgba(225, 188, 114, 0.14);
  --info: var(--cyan);
  --info-soft: rgba(85, 220, 255, 0.14);

  --border: var(--border-glass);
  --border-strong: rgba(135, 192, 255, 0.34);

  --radius: 10px;
  --radius-lg: 14px;

  --shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.24);

  --glow: 0 0 0 3px rgba(85, 220, 255, 0.18);
}

/* =========================================================
   BASE
========================================================= */

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

:root[data-background-mode="plain"] body {
  background: var(--surface-glass);
}

:root[data-background-mode="contrast"] body {
  background: rgba(135, 192, 255, 0.14);
}

/* =========================================================
   GLOBAL LAYOUT ROOT
========================================================= */

#app {
  min-height: 100vh;
}

/* =========================================================
   BUTTONS
========================================================= */

button {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  transition: 0.15s ease;
  font: inherit;
  font-weight: 700;
}

button:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

button.primary {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-soft);
}

button.primary:hover {
  filter: brightness(1.05);
}

button:disabled,
.button-primary:disabled,
.button-secondary:disabled,
.button-danger:disabled,
.button-ghost:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  filter: none;
}

/* =========================================================
   INPUTS
========================================================= */

input,
select,
textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  outline: none;
  background: var(--surface-glass);
  color: var(--text);
  font: inherit;
  box-sizing: border-box;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  box-shadow: var(--glow);
  border-color: var(--primary);
}

/* =========================================================
   DESIGN SYSTEM
========================================================= */

.app-shell {
  min-height: 100vh;
  background: transparent;
}

.page-shell,
.cms-page {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.page-header,
.account-heading,
.forum-header,
.blog-header,
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.page-title,
.page-header h1,
.account-heading h1,
.forum-header h1,
.blog-header h1,
.calendar-header h1 {
  margin: 0 0 4px 0;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.08;
  letter-spacing: 0;
}

.page-subtitle,
.page-header p,
.account-heading p,
.forum-header p,
.blog-header p,
.calendar-header p {
  margin: 0;
  color: var(--muted);
  max-width: 760px;
}

.section-grid,
.cms-grid,
.auth-grid,
.account-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.panel,
.auth-card,
.profile-card,
.blog-editor,
.calendar-editor {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.panel-header,
.blog-post-topline,
.forum-thread-topline,
.calendar-event-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.panel-title,
.panel h2,
.auth-card h2,
.blog-editor h2,
.calendar-editor h2 {
  margin: 0 0 8px 0;
  font-size: 19px;
  line-height: 1.25;
}

.card,
.cms-card,
.blog-post-card,
.forum-thread-card,
.calendar-event-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.card-muted,
.forum-reply-card,
.notification-item,
.activity-item,
.search-result {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(9, 30, 55, 0.5);
  padding: 12px;
}

.action-bar,
.blog-action-bar,
.forum-action-bar,
.calendar-action-bar,
.notification-actions,
.reaction-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.button-primary,
button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: var(--shadow-soft);
}

.button-secondary {
  background: rgba(9, 30, 55, 0.5);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

.button-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}

.button-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.button-primary:hover,
.button-secondary:hover,
.button-danger:hover,
.button-ghost:hover {
  transform: translateY(-1px);
}

.button-secondary:hover,
.button-ghost:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.button-danger:hover {
  background: #b23a48;
  color: #ffffff;
}

.badge,
.blog-badge,
.forum-badge,
.calendar-badge,
.role-badge,
.capability-chip,
.moderation-badge,
.reputation-badge,
.trust-level {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(9, 30, 55, 0.5);
  color: var(--text-secondary);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.badge-success,
.blog-badge-published,
.calendar-badge-published,
.role-user,
.reputation-badge {
  background: rgba(70, 210, 160, 0.14);
  color: #7de0b4;
  border-color: rgba(70, 210, 160, 0.4);
}

.badge-warning,
.blog-badge-featured,
.forum-badge-pinned,
.calendar-badge-featured,
.role-moderator,
.moderation-badge {
  background: rgba(225, 188, 114, 0.14);
  color: var(--gold);
  border-color: rgba(225, 188, 114, 0.42);
}

.badge-danger,
.calendar-badge-cancelled {
  background: rgba(255, 122, 138, 0.13);
  color: #ff9aa8;
  border-color: rgba(255, 122, 138, 0.38);
}

.badge-info,
.role-admin,
.trust-level {
  background: rgba(41, 128, 220, 0.16);
  color: #83c9ff;
  border-color: rgba(101, 177, 255, 0.4);
}

.form-stack,
.auth-card form,
.blog-editor form,
.calendar-editor form,
.forum-reply-form {
  display: grid;
  gap: 12px;
}

.form-row {
  display: grid;
  gap: 6px;
}

.form-row label,
.form-row span {
  font-weight: 700;
  color: var(--text-secondary);
}

.input-field,
.textarea-field,
.select-field,
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
}

.empty-state,
.blog-empty,
.forum-empty,
.calendar-empty,
.media-empty,
.search-empty,
.taxonomy-empty,
.builder-empty {
  border: 1px dashed rgba(100, 116, 139, 0.35);
  border-radius: var(--radius);
  background: rgba(248, 250, 252, 0.78);
  color: var(--muted);
  padding: 14px;
  line-height: 1.5;
}

.alert,
.account-alert,
.blog-alert,
.forum-alert,
.calendar-alert,
.media-alert {
  border: 1px solid rgba(101, 177, 255, 0.4);
  border-radius: var(--radius);
  background: rgba(41, 128, 220, 0.16);
  color: #83c9ff;
  padding: 10px 12px;
  line-height: 1.4;
}

.alert-success,
.alert[data-tone="success"],
.account-alert[data-tone="success"],
.blog-alert[data-tone="success"],
.forum-alert[data-tone="success"],
.calendar-alert[data-tone="success"] {
  border-color: rgba(70, 210, 160, 0.4);
  background: rgba(70, 210, 160, 0.14);
  color: #7de0b4;
}

.alert-warning,
.alert[data-tone="warning"],
.account-alert[data-tone="warning"],
.blog-alert[data-tone="warning"],
.forum-alert[data-tone="warning"],
.calendar-alert[data-tone="warning"] {
  border-color: rgba(225, 188, 114, 0.42);
  background: rgba(225, 188, 114, 0.14);
  color: var(--gold);
}

.alert-danger,
.alert[data-tone="error"],
.account-alert[data-tone="error"],
.blog-alert[data-tone="error"],
.forum-alert[data-tone="error"],
.calendar-alert[data-tone="error"] {
  border-color: rgba(255, 122, 138, 0.38);
  background: rgba(255, 122, 138, 0.13);
  color: #ff9aa8;
}

.loading-state {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.loading-state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 14px 0 0 rgba(37, 99, 235, 0.45), 28px 0 0 rgba(37, 99, 235, 0.2);
}

.toolbar,
.search-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.module-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 8px;
  box-shadow: var(--shadow-soft);
}

.module-subnav button {
  min-height: 38px;
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}

.module-subnav button.active {
  border-color: rgba(101, 177, 255, 0.4);
  background: rgba(41, 128, 220, 0.16);
  color: #83c9ff;
}

.module-card,
.module-empty-state,
.portal-empty-state {
  border-radius: var(--radius);
}

.section-eyebrow {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.module-empty-state,
.portal-empty-state {
  display: grid;
  gap: 8px;
  border: 1px dashed rgba(100, 116, 139, 0.35);
  background: rgba(248, 250, 252, 0.82);
  color: var(--muted);
  padding: 14px;
}

.module-empty-state strong,
.portal-empty-state strong {
  color: var(--text-secondary);
}

.module-empty-state p,
.portal-empty-state p {
  margin: 0;
}

.link-button {
  display: inline;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  font: inherit;
  font-weight: inherit;
}

.link-button:hover {
  background: transparent;
  color: var(--primary);
  text-decoration: underline;
}

.table-clean {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.table-clean th,
.table-clean td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  text-align: left;
  vertical-align: top;
}

.table-clean th {
  color: rgba(181, 196, 218, 0.75);
  background: rgba(15, 23, 42, 0.55);
  font-weight: 800;
}

.mobile-stack {
  display: flex;
  gap: 10px;
}

/* =========================================================
   LAYOUT BASE
========================================================= */

.layout {
  min-height: 100vh;
}

/* =========================================================
   DEFAULT LAYOUT
========================================================= */

.layout-default header {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

/* =========================================================
   MODULE CARDS
========================================================= */

.module {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.module .features {
  display: flex;
  gap: 10px;
}

.module .content {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

/* =========================================================
   ADMIN MODAL
========================================================= */

#adminLoginModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
}

#adminLoginModal > div {
  background: var(--surface-glass);
  padding: 20px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  width: 280px;
}

/* =========================================================
   UTILITIES
========================================================= */

.muted {
  color: var(--muted);
}

/* =========================================================
   SOCIAL FOUNDATION
========================================================= */

.notification-list,
.activity-feed {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.notification-item,
.activity-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(9, 30, 55, 0.5);
  padding: 12px;
  line-height: 1.45;
}

.notification-item p,
.activity-item p {
  margin: 4px 0;
  color: var(--text-secondary);
}

.notification-unread {
  border-color: rgba(101, 177, 255, 0.4);
  background: rgba(41, 128, 220, 0.16);
}

.notification-actions,
.reaction-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.reaction-button,
.bookmark-button {
  border: 1px solid var(--border);
  background: rgba(9, 30, 55, 0.5);
  color: var(--text-secondary);
  font-weight: 700;
}

.reaction-button:hover,
.bookmark-button:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.reaction-button.active,
.bookmark-button.active {
  border-color: var(--border-bright);
  background: rgba(72, 169, 255, 0.18);
  color: #83c9ff;
}

.reaction-button:disabled,
.bookmark-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.social-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 0 6px;
}

.inbox-shell {
  display: grid;
  gap: 12px;
}

.conversation-list,
.message-thread {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.message-thread {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(9, 30, 55, 0.5);
  padding: 12px;
}

.message-bubble {
  max-width: 78%;
  justify-self: start;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-glass);
  padding: 10px 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.message-bubble small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.message-own {
  justify-self: end;
  background: rgba(72, 169, 255, 0.18);
  border-color: rgba(101, 177, 255, 0.4);
}

.moderation-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.moderation-report {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(225, 188, 114, 0.14);
  color: var(--text-secondary);
  padding: 12px;
}

.moderation-report p {
  margin: 4px 0 8px 0;
}

.moderation-badge,
.reputation-badge,
.trust-level {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.moderation-badge {
  background: rgba(225, 188, 114, 0.42);
  color: var(--gold);
  border-color: #fdba74;
}

.reputation-badge {
  background: rgba(70, 210, 160, 0.14);
  color: #7de0b4;
  border-color: rgba(70, 210, 160, 0.4);
}

.trust-level {
  background: rgba(41, 128, 220, 0.16);
  color: #83c9ff;
  border-color: rgba(101, 177, 255, 0.4);
}

.user-reputation {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}

.reputation-summary {
  display: grid;
  gap: 10px;
}

.user-warning,
.suspension-alert {
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.45;
  margin-top: 8px;
}

.user-warning {
  border: 1px solid rgba(225, 188, 114, 0.42);
  background: rgba(225, 188, 114, 0.14);
  color: var(--gold);
}

.suspension-alert {
  border: 1px solid rgba(255, 122, 138, 0.38);
  background: rgba(255, 122, 138, 0.13);
  color: #ff9aa8;
  font-weight: 700;
}

/* =========================================================
   MEDIA FOUNDATION
========================================================= */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.media-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
  box-shadow: var(--shadow-soft);
  overflow-wrap: anywhere;
}

.media-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(9, 30, 55, 0.5);
}

.media-upload {
  border: 1px dashed rgba(100, 116, 139, 0.35);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.75);
  padding: 10px;
}

.avatar-image {
  object-fit: cover;
}

.cover-image {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 14px;
  background: rgba(9, 30, 55, 0.5);
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.attachment-image {
  width: min(180px, 100%);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(9, 30, 55, 0.5);
}

.media-empty,
.media-alert {
  border: 1px dashed rgba(100, 116, 139, 0.35);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.7);
  color: var(--muted);
  padding: 14px;
  line-height: 1.5;
}

.media-alert {
  border-style: solid;
  border-color: rgba(101, 177, 255, 0.4);
  background: rgba(41, 128, 220, 0.16);
  color: #83c9ff;
}

/* =========================================================
   ADVANCED CMS DISCOVERY
========================================================= */

.search-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.search-tools input,
.search-tools select {
  min-width: 180px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface-glass);
}

.search-results {
  display: grid;
  gap: 8px;
}

/* The trigger element carries the `hidden` attribute until it has matches, but
   the panel's own `display` rule outranks the UA `[hidden]` style, which left
   an empty results box parked under the search field. */
.search-results[hidden] {
  display: none;
}

.search-result {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(9, 30, 55, 0.5);
  color: var(--text);
  padding: 10px 12px;
  text-decoration: none;
}

.search-result span {
  color: var(--muted);
  font-size: 13px;
}

.search-empty,
.taxonomy-empty {
  color: var(--muted);
  border: 1px dashed rgba(100, 116, 139, 0.35);
  border-radius: 8px;
  padding: 12px;
  background: rgba(248, 250, 252, 0.7);
}

.taxonomy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.taxonomy-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(41, 128, 220, 0.16);
  color: #83c9ff;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 800;
}

/* =========================================================
   BUILDER / ADMIN CUSTOMIZATION
========================================================= */

.admin-builder-stack {
  display: grid;
  gap: 10px;
}

.admin-builder-card,
.admin-builder-row {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: rgba(4, 14, 28, 0.78);
  padding: 12px;
}

.admin-builder-row {
  display: grid;
  gap: 10px;
}

.admin-builder-title {
  font-weight: 800;
  margin-bottom: 6px;
}

.admin-builder-note,
.admin-builder-empty {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.admin-builder-fields {
  display: grid;
  gap: 8px;
}

.admin-builder-fields label,
.admin-builder-card label {
  display: grid;
  gap: 5px;
  color: rgba(181, 196, 218, 0.75);
  font-size: 12px;
  font-weight: 700;
}

.admin-builder-fields input,
.admin-builder-fields select,
.admin-builder-fields textarea,
.admin-builder-card input,
.admin-builder-card select,
.admin-builder-card textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  background: rgba(6, 20, 38, 0.84);
  color: var(--text-primary);
  padding: 8px;
}

.admin-builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-builder-actions button,
.admin-builder-card button {
  border: none;
  border-radius: 8px;
  background: var(--blue);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 800;
  padding: 8px 12px;
}

.admin-builder-actions button:hover,
.admin-builder-card button:hover {
  background: rgba(72, 169, 255, 0.85);
  color: var(--text-primary);
}

.admin-builder-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(181, 196, 218, 0.75);
  font-size: 12px;
  font-weight: 700;
}

.admin-builder-check input {
  width: auto;
}

.builder-empty {
  border: 1px dashed rgba(100, 116, 139, 0.35);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.7);
  color: var(--muted);
  padding: 12px;
  line-height: 1.5;
}

.widget-block {
  overflow-wrap: anywhere;
}

.widget-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.7;
}

.widget-list a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.widget-list a:hover {
  text-decoration: underline;
}

.widget-custom {
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (min-width: 720px) {
  .admin-builder-row {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

/* =========================================================
   CMS GATEWAY / MODULE SDK STYLES
========================================================= */

.cms-hero {
  background: linear-gradient(135deg, rgba(41, 128, 220, 0.24), rgba(5, 20, 39, 0.7));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 24px;
}

.cms-kicker {
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cms-hero h1 {
  max-width: 760px;
  font-size: 36px;
  line-height: 1.1;
  margin: 0 0 12px 0;
}

.cms-hero p {
  max-width: 720px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.cms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.cms-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
  color: var(--text);
}

.cms-card:hover {
  background: var(--surface-glass);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.cms-card h3 {
  margin: 0 0 8px 0;
}

.cms-card p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.home-portal {
  display: grid;
  gap: 16px;
}

/* The hero is a full-width page header (same treatment as the module
   headers) with the community stats and highlights stacked beneath it. */
.home-portal-hero {
  display: grid;
  gap: 16px;
}

.home-hero-copy {
  display: grid;
  align-content: center;
}

/* Home sections hold dense feed lists, so they run a slightly tighter
   frame than the generic cms-card. */
.home-section-block {
  padding: 16px;
}

.home-section-header,
.home-feed-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.home-section-header {
  justify-content: space-between;
  margin-bottom: 10px;
}

.home-section-header h3 {
  margin: 0;
  font-size: 17px;
}

.home-section-subtitle {
  margin-top: 4px;
}

.home-section-action {
  border-color: var(--border-strong);
  background: rgba(9, 30, 55, 0.5);
}

.home-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home-hero-stat,
.home-spotlight-card,
.home-quicknav-card {
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
  box-shadow: var(--glass-reflection);
  padding: 14px 16px;
  text-align: left;
}

.home-hero-stat strong {
  display: block;
  font-size: 28px;
  line-height: 1;
}

.home-hero-stat span,
.home-spotlight-card span,
.home-spotlight-card small,
.home-quicknav-copy {
  color: var(--muted);
}

.home-spotlight-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-spotlight-card {
  display: grid;
  gap: 6px;
  min-height: 118px;
  align-content: start;
}

.home-spotlight-card strong,
.home-quicknav-label {
  color: var(--text);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.home-portal-body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: 16px;
  align-items: start;
}

.home-portal-main,
.home-portal-aside {
  display: grid;
  gap: 16px;
}

/* =========================================================
   HOME PORTAL — FEATURED PANEL, EMPTY STATES, ASIDE
========================================================= */

/* Featured & trending renders through SearchCoreSystem.renderResults, whose
   .search-results container is positioned for the topbar palette dropdown
   (absolute, 100% + 10px). Reused inside a section card that lifts the list
   out of flow, which collapsed the card to its header and parked the list
   behind the rest of the page. Restore in-flow layout and give the rows the
   same glass treatment as the other home feeds. */
.home-featured-panel .search-results {
  position: static;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.home-featured-panel .search-result {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  background: var(--glass-1);
  color: var(--text);
  padding: 10px 12px;
  text-decoration: none;
}

.home-featured-panel .search-result:hover {
  border-color: var(--border-bright);
}

.home-featured-panel .search-result strong {
  color: var(--text);
  font-weight: 900;
}

.home-featured-panel .search-result span {
  color: var(--muted);
  font-size: 12.5px;
}

/* A placeholder already sits inside a framed section card, so a second
   dashed frame around it read as a box in a box. Keep it quiet: a
   left-ruled note aligned with the section header. */
:root .home-section-body .portal-empty-state {
  justify-items: start;
  gap: 4px;
  border: 0;
  border-left: 2px solid var(--border-glass);
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 2px 0 2px 12px;
}

:root .home-section-body .portal-empty-state strong {
  font-size: 14px;
}

:root .home-section-body .portal-empty-state p {
  font-size: 13px;
  line-height: 1.5;
}

/* Hold the featured/activity column in view while the feed column scrolls,
   instead of leaving a dead half-page beneath it. */
@media (min-width: 1024px) {
  .home-portal-aside {
    position: sticky;
    top: calc(var(--header-height) + 12px);
  }
}

.home-portal-quicknav,
.home-portal-widgets {
  display: grid;
  gap: 8px;
}

.home-quicknav-grid,
.home-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

/* The Explore cards are a compact directory, so they carry a tighter
   rhythm and no height floor, unlike the hero stats and spotlight tiles
   they share a glass treatment with. */
.home-quicknav-card {
  display: grid;
  gap: 4px;
  min-height: 0;
  padding: 12px 14px;
  align-content: start;
}

.home-quicknav-label {
  font-size: 15px;
  line-height: 1.2;
}

.home-quicknav-copy {
  font-size: 12.5px;
  line-height: 1.4;
}

.home-feed-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-feed-item {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(9, 30, 55, 0.5);
  padding: 10px 12px;
}

.home-feed-meta {
  gap: 6px;
}

.home-feed-badge {
  display: inline-flex;
  border: 1px solid rgba(101, 177, 255, 0.4);
  border-radius: 999px;
  background: rgba(41, 128, 220, 0.16);
  color: #83c9ff;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.4;
}

.home-feed-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  text-decoration: none;
}

.home-feed-title:hover {
  color: var(--primary);
  text-decoration: underline;
}

.home-feed-excerpt {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cms-page {
  max-width: 900px;
}

.cms-page h1 {
  margin-top: 0;
}

.system-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 0;
  z-index: 50;
}

.system-brand {
  display: grid;
  gap: 2px;
}

.system-brand-main {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.system-brand-tagline {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.system-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#layout-slot {
  padding: 18px;
}

:root[data-layout-density="compact"] #layout-slot {
  padding: 12px;
}

:root[data-layout-density="spacious"] #layout-slot {
  padding: 28px;
}

:root[data-layout-density="compact"] .cms-card,
:root[data-layout-density="compact"] .auth-card,
:root[data-layout-density="compact"] .profile-card,
:root[data-layout-density="compact"] .forum-thread-card,
:root[data-layout-density="compact"] .blog-post-card,
:root[data-layout-density="compact"] .calendar-event-card {
  padding: 14px;
}

:root[data-layout-density="spacious"] .cms-card,
:root[data-layout-density="spacious"] .auth-card,
:root[data-layout-density="spacious"] .profile-card,
:root[data-layout-density="spacious"] .forum-thread-card,
:root[data-layout-density="spacious"] .blog-post-card,
:root[data-layout-density="spacious"] .calendar-event-card {
  padding: 22px;
}

:root[data-nav-style="underline"] .system-actions button {
  border-radius: 0;
  border-bottom: 2px solid transparent;
}

:root[data-nav-style="underline"] .system-actions button:hover {
  background: transparent;
  border-bottom-color: var(--primary);
}

:root[data-nav-style="compact"] .system-actions {
  gap: 4px;
}

:root[data-nav-style="compact"] .system-actions button {
  padding: 4px 7px;
  font-size: 13px;
}

/* =========================================================
   ACCOUNT MODULE
========================================================= */

.account-shell {
  max-width: 1040px;
  display: grid;
  gap: 16px;
}

.account-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.account-heading h1 {
  margin-bottom: 6px;
}

.auth-grid,
.account-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.auth-card,
.profile-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.auth-card h2 {
  margin: 0 0 6px 0;
  font-size: 20px;
}

.auth-card p {
  line-height: 1.5;
}

.auth-card form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.profile-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
}

.profile-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.profile-card-side {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.profile-avatar {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(6, 20, 38, 0.84);
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.12);
}

.profile-name {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.profile-meta {
  color: var(--muted);
  margin-top: 4px;
}

.profile-bio {
  grid-column: 1 / -1;
  line-height: 1.55;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  padding-top: 12px;
  overflow-wrap: anywhere;
}

.role-badge,
.capability-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.role-badge {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.role-guest {
  background: rgba(9, 30, 55, 0.5);
  color: var(--text-muted);
}

.role-user {
  background: rgba(70, 210, 160, 0.14);
  color: #7de0b4;
}

.role-moderator {
  background: rgba(225, 188, 114, 0.14);
  color: var(--gold);
}

.role-admin {
  background: rgba(41, 128, 220, 0.16);
  color: #83c9ff;
}

.capability-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.capability-chip {
  background: rgba(9, 30, 55, 0.5);
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.account-alert {
  border: 1px solid rgba(101, 177, 255, 0.4);
  border-radius: 8px;
  background: rgba(41, 128, 220, 0.16);
  color: #83c9ff;
  padding: 10px 12px;
  line-height: 1.4;
}

.account-alert[data-tone="error"] {
  border-color: rgba(255, 122, 138, 0.38);
  background: rgba(255, 122, 138, 0.13);
  color: #ff9aa8;
}

.account-alert[hidden] {
  display: none;
}

.form-row {
  display: grid;
  gap: 6px;
}

.form-row label {
  font-weight: 700;
  color: var(--text-secondary);
}

.form-row input,
.form-row textarea {
  width: 100%;
  box-sizing: border-box;
}

.account-status-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 0 0;
}

.account-status-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.account-status-list dt {
  color: var(--muted);
  font-weight: 700;
}

.account-status-list dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.account-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.account-overview-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.account-overview-card span,
.account-overview-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.account-overview-card strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .account-heading,
  .profile-card,
  .account-status-list div {
    grid-template-columns: 1fr;
  }

  .account-heading,
  .account-status-list div {
    align-items: stretch;
  }

  .profile-card-side {
    justify-content: flex-start;
  }
}

/* =========================================================
   FORUM MODULE
========================================================= */

.forum-shell {
  max-width: 1120px;
  display: grid;
  gap: 16px;
}

.forum-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.forum-header h1 {
  margin-bottom: 4px;
}

.forum-thread-list {
  display: grid;
  gap: 12px;
}

.forum-index-list {
  gap: 10px;
}

.forum-index-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 12px;
  align-items: start;
}

.forum-index-card .forum-action-bar {
  grid-column: 1 / -1;
}

.forum-index-excerpt {
  margin: 10px 0 0 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.forum-index-stats {
  display: grid;
  gap: 4px;
  border-left: 1px solid var(--border);
  padding-left: 14px;
  color: var(--muted);
  text-align: right;
}

.forum-index-stats strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.1;
}

.forum-index-stats span {
  font-size: 12px;
  font-weight: 800;
}

.forum-back-button {
  justify-self: start;
  margin-bottom: 4px;
}

.forum-thread-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.forum-thread-card h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.forum-thread-card h3 {
  margin: 10px 0 6px 0;
  font-size: 15px;
}

.forum-thread-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.forum-thread-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.forum-body {
  margin-top: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.forum-badge-row {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.forum-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(9, 30, 55, 0.5);
  color: var(--text-secondary);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.forum-badge-pinned {
  background: rgba(225, 188, 114, 0.14);
  color: var(--gold);
  border-color: rgba(225, 188, 114, 0.42);
}

.forum-badge-closed {
  background: rgba(12, 36, 64, 0.6);
  color: var(--text-muted);
  border-color: rgba(135, 192, 255, 0.24);
}

.forum-replies {
  display: grid;
  gap: 10px;
}

.forum-reply-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(9, 30, 55, 0.5);
  padding: 12px;
}

.forum-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.forum-action-bar button {
  background: rgba(12, 36, 64, 0.6);
}

.forum-action-bar button:hover {
  background: var(--primary-soft);
}

.forum-reply-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.forum-empty {
  border: 1px dashed rgba(100, 116, 139, 0.35);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.7);
  color: var(--muted);
  padding: 14px;
  line-height: 1.5;
}

.forum-alert {
  border: 1px solid rgba(101, 177, 255, 0.4);
  border-radius: 8px;
  background: rgba(41, 128, 220, 0.16);
  color: #83c9ff;
  padding: 10px 12px;
  line-height: 1.4;
}

.forum-alert[data-tone="error"] {
  border-color: rgba(255, 122, 138, 0.38);
  background: rgba(255, 122, 138, 0.13);
  color: #ff9aa8;
}

@media (max-width: 720px) {
  .forum-header,
  .forum-thread-topline {
    flex-direction: column;
  }

  .forum-badge-row {
    justify-content: flex-start;
  }
}

/* =========================================================
   BLOG MODULE
========================================================= */

.blog-shell {
  max-width: 1080px;
  display: grid;
  gap: 16px;
}

.blog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.blog-header h1 {
  margin-bottom: 4px;
}

.blog-post-list {
  display: grid;
  gap: 12px;
}

.blog-editorial-layout,
.blog-post-grid {
  display: grid;
  gap: 12px;
}

.blog-post-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.blog-post-card,
.blog-editor {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.blog-post-card h2,
.blog-editor h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.editorial-featured-card {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: start;
}

.editorial-featured-card .cover-image,
.editorial-featured-card .cover-placeholder {
  margin-bottom: 0;
  min-height: 220px;
}

.cover-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 170px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(135, 116, 255, 0.18);
  color: #a79bff;
  margin-bottom: 12px;
}

.cover-placeholder span {
  font-size: 42px;
  font-weight: 900;
}

.cover-image-compact,
.cover-placeholder-compact {
  max-height: 180px;
  min-height: 160px;
}

.blog-editor form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.blog-post-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.blog-excerpt {
  margin: 12px 0 0 0;
  color: var(--text-muted);
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.blog-body {
  margin-top: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.blog-badge-row,
.blog-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-badge-row {
  justify-content: flex-end;
}

.blog-tag-row {
  margin-top: 12px;
}

.blog-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(9, 30, 55, 0.5);
  color: var(--text-secondary);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.blog-badge-draft {
  background: rgba(12, 36, 64, 0.6);
  color: var(--text-muted);
  border-color: rgba(135, 192, 255, 0.24);
}

.blog-badge-published {
  background: rgba(70, 210, 160, 0.14);
  color: #7de0b4;
  border-color: rgba(70, 210, 160, 0.4);
}

.blog-badge-featured {
  background: rgba(225, 188, 114, 0.14);
  color: var(--gold);
  border-color: rgba(225, 188, 114, 0.42);
}

.blog-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.blog-action-bar button {
  background: rgba(12, 36, 64, 0.6);
}

.blog-action-bar button:hover {
  background: var(--primary-soft);
}

.blog-empty {
  border: 1px dashed rgba(100, 116, 139, 0.35);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.7);
  color: var(--muted);
  padding: 14px;
  line-height: 1.5;
}

.blog-alert {
  border: 1px solid rgba(101, 177, 255, 0.4);
  border-radius: 8px;
  background: rgba(41, 128, 220, 0.16);
  color: #83c9ff;
  padding: 10px 12px;
  line-height: 1.4;
}

.blog-alert[data-tone="error"] {
  border-color: rgba(255, 122, 138, 0.38);
  background: rgba(255, 122, 138, 0.13);
  color: #ff9aa8;
}

@media (max-width: 720px) {
  .blog-header,
  .blog-post-topline {
    flex-direction: column;
  }

  .blog-badge-row {
    justify-content: flex-start;
  }
}

/* =========================================================
   CALENDAR MODULE
========================================================= */

.calendar-shell {
  max-width: 1080px;
  display: grid;
  gap: 16px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.calendar-header h1 {
  margin-bottom: 4px;
}

.calendar-event-list {
  display: grid;
  gap: 12px;
}

.calendar-event-card,
.calendar-editor {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.calendar-event-card h2,
.calendar-editor h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.calendar-editor form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.calendar-event-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.calendar-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.calendar-body {
  margin-top: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.calendar-badge-row {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(9, 30, 55, 0.5);
  color: var(--text-secondary);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.calendar-badge-published {
  background: rgba(70, 210, 160, 0.14);
  color: #7de0b4;
  border-color: rgba(70, 210, 160, 0.4);
}

.calendar-badge-draft {
  background: rgba(12, 36, 64, 0.6);
  color: var(--text-muted);
  border-color: rgba(135, 192, 255, 0.24);
}

.calendar-badge-cancelled {
  background: rgba(255, 122, 138, 0.13);
  color: #ff9aa8;
  border-color: rgba(255, 122, 138, 0.38);
}

.calendar-badge-featured {
  background: rgba(225, 188, 114, 0.14);
  color: var(--gold);
  border-color: rgba(225, 188, 114, 0.42);
}

.calendar-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.calendar-action-bar button {
  background: rgba(12, 36, 64, 0.6);
}

.calendar-action-bar button:hover {
  background: var(--primary-soft);
}

.calendar-empty {
  border: 1px dashed rgba(100, 116, 139, 0.35);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.7);
  color: var(--muted);
  padding: 14px;
  line-height: 1.5;
}

.calendar-alert {
  border: 1px solid rgba(101, 177, 255, 0.4);
  border-radius: 8px;
  background: rgba(41, 128, 220, 0.16);
  color: #83c9ff;
  padding: 10px 12px;
  line-height: 1.4;
}

.calendar-alert[data-tone="error"] {
  border-color: rgba(255, 122, 138, 0.38);
  background: rgba(255, 122, 138, 0.13);
  color: #ff9aa8;
}

.calendar-month-panel {
  display: grid;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.calendar-month-panel h2 {
  margin: 0 0 4px 0;
  font-size: 20px;
}

.calendar-month-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.calendar-month-weekdays,
.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.calendar-month-weekdays span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.calendar-month-cell {
  min-height: 96px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(9, 30, 55, 0.5);
  padding: 8px;
  overflow: hidden;
}

.calendar-month-empty {
  background: transparent;
  border-color: transparent;
}

.calendar-month-day {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 6px;
}

.calendar-month-event {
  display: block;
  width: 100%;
  margin-top: 5px;
  border: 1px solid rgba(101, 177, 255, 0.4);
  border-radius: 6px;
  background: rgba(41, 128, 220, 0.16);
  color: #83c9ff;
  padding: 5px 6px;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-month-more {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.calendar-agenda-list {
  display: grid;
  gap: 12px;
}

.calendar-agenda-day {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.calendar-agenda-date {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(9, 30, 55, 0.5);
  padding: 12px;
}

.calendar-agenda-date strong {
  color: var(--text);
}

.calendar-agenda-date span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 720px) {
  .calendar-header,
  .calendar-event-topline {
    flex-direction: column;
  }

  .calendar-badge-row {
    justify-content: flex-start;
  }

  .calendar-month-weekdays {
    display: none;
  }

  .calendar-month-grid {
    grid-template-columns: 1fr;
  }

  .calendar-month-empty {
    display: none;
  }

  .calendar-month-cell {
    min-height: 82px;
  }
}

/* =========================================================
   MODULE DENSITY
   Every module page shell (and the home portal) runs the same
   rhythm: 16px between blocks, 16px inside a page header, and
   compact module tabs. These selectors carry an extra class so
   they win over the later Midnight Glass layer, which declares
   the roomier frame these pages used to inherit.
========================================================= */

.page-shell.account-shell,
.page-shell.blog-shell,
.page-shell.forum-shell,
.page-shell.calendar-shell,
.page-shell.community-home-shell {
  gap: 16px;
}

.page-shell .page-header,
.page-shell .account-heading,
.page-shell .forum-header,
.page-shell .blog-header,
.page-shell .calendar-header {
  gap: 16px;
  padding: 8px 0 18px;
}

.module-subnav > button {
  padding: 8px 14px;
}

/* =========================================================
   GLASS PARITY — remaining legacy light surfaces

   Folded in from the former assets/theme-glass-parity.css.
   theme.css's GLASS SYSTEM block migrated the main cards (panels,
   auth cards, blog posts, forum threads, calendar events, overview
   cards), but a set of placeholder, upload, dashboard-tile and
   forum-index surfaces kept the pre-Midnight-Glass near-white fills,
   so they rendered as light boxes on the dark theme.

   Every selector below carries an extra `:root` ancestor. The
   declarations they override sit further down this file — some of
   them past the region this workspace can edit — so the block wins
   on specificity instead of source order, exactly as the separate
   sheet used to by loading last.
========================================================= */

/* Placeholder / empty / upload surfaces.
   These keep a dashed border so they still read as "nothing here yet". */
:root .forum-empty,
:root .blog-empty,
:root .calendar-empty,
:root .media-empty,
:root .media-alert,
:root .media-upload,
:root .search-empty,
:root .taxonomy-empty,
:root .builder-empty,
:root .module-empty-state,
:root .portal-empty-state {
  background: var(--glass-1);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px dashed rgba(135, 192, 255, 0.28);
  box-shadow: var(--glass-reflection);
}

/* The old sheet also re-filled the home dashboard tiles
   (.home-hero-stat / .home-spotlight-card / .home-quicknav-card);
   those take the glass tokens directly in the HOME PORTAL block now,
   so that rule was dropped on the way in.

   Same migration leftover, different symptom: these kept a legacy
   light-theme tint (slate-900 at 4-8%), which on the dark theme is not
   a light box but no fill at all, leaving the count pill and the
   ledger chips looking like bare text. */
:root .social-count,
:root .forum-thread-ledger span,
:root .blog-editorial-ledger span,
:root .calendar-event-ledger span {
  background: var(--glass-1);
}

/* =========================================================
   PAGE HERO ACTIONS

   The hero's right-hand slot ("+ New Thread") is a primary action,
   not a filter control, so it gets the display-grade sizing from the
   spec and keeps the gradient button's glow on hover only.
========================================================= */

:root .hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

:root .hero-actions svg {
  width: 18px;
  height: 18px;
}

:root .hero-actions .button-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 22px;
}

/* =========================================================
   FORUMS — RECENT DISCUSSIONS PANEL

   One glass panel owns the heading, the tools and the rows, so the
   discussion list reads as a single surface instead of a stack of
   separate cards (spec section 10).
========================================================= */

:root .forum-index-panel {
  border-radius: 20px;
  border: 1px solid var(--border-glass);
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
  box-shadow: var(--glass-reflection);
  overflow: hidden;
}

:root .forum-panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--hairline);
}

:root .forum-panel-head .panel-title {
  flex: 1 1 auto;
  margin: 0;
}

:root .forum-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
}

:root .forum-sort select {
  appearance: none;
  height: 38px;
  padding: 0 36px 0 14px;
  border-radius: 11px;
  border: 1px solid var(--border-glass);
  background: rgba(3, 15, 30, 0.52);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

:root .forum-sort::after {
  content: "";
  position: absolute;
  right: 15px;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--text-muted);
  border-bottom: 1.6px solid var(--text-muted);
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none;
}

/* the tools row reuses the panel surface instead of a second card */
:root .forum-index-panel .search-tools {
  margin: 0;
  padding: 14px 22px;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
}

:root .forum-index-panel .search-tools input,
:root .forum-index-panel .search-tools select {
  min-width: 200px;
  height: 40px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid rgba(140, 194, 255, 0.3);
  background: rgba(3, 15, 30, 0.52);
  color: var(--text-primary);
  font-size: 13.5px;
}

/* the list keeps theme.css's hairline rows, only the container drops away */
:root .forum-index-panel .forum-thread-list {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* =========================================================
   FORUMS — INDEX ROWS

   icon tile - title + excerpt - meta cluster (tag, counts, time).
   Rows stay borderless; theme.css supplies the hairline separators.
========================================================= */

:root .forum-index-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 78px;
  padding: 14px 22px;
}

:root .forum-row-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(130, 192, 245, 0.22);
  background: rgba(29, 76, 120, 0.25);
  color: var(--cyan);
}

:root .forum-row-icon svg {
  width: 22px;
  height: 22px;
}

:root .forum-row-icon[data-tone="violet"] {
  border-color: rgba(135, 116, 255, 0.34);
  background: rgba(135, 116, 255, 0.16);
  color: #b9adff;
}

:root .forum-row-icon[data-tone="gold"] {
  border-color: rgba(225, 188, 114, 0.34);
  background: rgba(225, 188, 114, 0.14);
  color: var(--gold);
}

:root .forum-row-main {
  min-width: 0;
}

:root .forum-row-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}

:root .forum-row-title .link-button {
  padding: 0;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: 600;
  text-align: left;
}

:root .forum-row-title .link-button:hover {
  background: transparent;
  color: var(--cyan);
}

:root .forum-row-excerpt {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root .forum-row-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

:root .forum-row-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 42px;
}

:root .forum-row-stat svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

:root .forum-row-stat[data-tone="rose"] {
  color: var(--rose);
}

:root .forum-row-time {
  min-width: 64px;
  text-align: right;
  font-weight: 500;
}

:root .forum-row-chevron {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: color 180ms ease, transform 180ms ease;
}

:root .forum-row-chevron svg {
  width: 18px;
  height: 18px;
}

:root .forum-index-row:hover .forum-row-chevron {
  color: var(--cyan);
  transform: translateX(2px);
}

/* moderation controls keep their own full-width row inside the card */
:root .forum-index-row > .forum-action-bar {
  grid-column: 1 / -1;
  border-top: 0;
  padding-top: 0;
}

/* compact category pills, toned per category (spec section 12) */
:root .forum-tag {
  min-height: 24px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(65, 165, 255, 0.55);
  background: rgba(20, 109, 190, 0.2);
  color: #83c9ff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

:root .forum-tag[data-tone="violet"] {
  border-color: rgba(135, 116, 255, 0.55);
  background: rgba(101, 84, 214, 0.2);
  color: #b9adff;
}

:root .forum-tag[data-tone="gold"] {
  border-color: rgba(225, 188, 114, 0.6);
  background: rgba(225, 188, 114, 0.16);
  color: var(--gold);
}

/* responsive: collapse the metadata cluster before the rail does (spec 15) */
@media (max-width: 900px) {
  :root .forum-row-time {
    display: none;
  }
}

@media (max-width: 768px) {
  :root .forum-index-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 14px 16px;
  }

  :root .forum-row-meta {
    grid-column: 2;
    gap: 12px;
    font-size: 12px;
  }

  :root .forum-row-chevron {
    display: none;
  }

  :root .hero-actions {
    margin-left: 0;
  }
}

/* =========================================================
   ENVIRONMENT SELECTION

   The base environment is the desktop valley. These two rules swap
   in the natively authored compositions that a single artwork cannot
   serve: a wider scene for ultrawide displays, and an alternate
   composition for authentication surfaces.
========================================================= */

/* Ultrawide: at 2200px and up the desktop scene is scaled past its
   native width and cropped, so the citadel drifts out of frame. */
@media (min-width: 2200px) {
  :root .app-background-art {
    background-image: url("./brand/webby-night-ultrawide.svg");
    background-position: center 36%;
  }
}

/* Authentication surface: same world, alternate composition, with the
   crystal architecture held to the right so the sign-in panel sits on
   the near-dark left half.

   Reached by setting data-background-mode="auth" on the document root.
   configLoader.js currently normalises that attribute against
   ["soft", "plain", "contrast"], so this value needs to be added to that
   allowlist (and to the Admin theme select) before it can be selected. */
:root[data-background-mode="auth"] .app-background-art {
  background-image: url("./brand/webby-auth.svg");
  background-position: center 44%;
}

:root[data-background-mode="auth"] .app-background::after {
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(3, 12, 26, 0.1), rgba(1, 6, 12, 0.86) 76%),
    linear-gradient(rgba(1, 6, 12, 0.42), rgba(1, 6, 12, 0.84));
}

/* On small screens the auth composition is cropped to a narrow slice, so
   fall back to the portrait scene and keep the panel legible. */
@media (max-width: 768px) {
  :root[data-background-mode="auth"] .app-background-art {
    background-image: url("./brand/webby-night-portrait.svg");
  }
}

/* =========================================================
   ADMIN CONSOLE FIXUPS

   .admin-button-success writes its border as `border-  color`, an
   invalid property name, so browsers drop that declaration and the
   success button never gets the green outline its siblings carry.
   The broken rule sits past the region this workspace can edit, and
   nothing after it declares a border-color for the class, so the
   intended value is restored from here instead.
========================================================= */

.admin-button-success {
  border-color: #7de0b4;
}

/* =========================================================
   ADMIN / INSPECTOR CONSOLE
========================================================= */

#adminControlPanel {
  position: fixed;
  inset: 0px;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: rgba(6,10,14,0.96);
  color: var(--text-primary);
  border: none;
  border-radius: 0px;
  box-shadow: none;
  z-index: 10010;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  display: none;
  padding: 20px;
}

#adminControlPanel button {
  color: var(--text-primary);
}

/* Admin console layout */
.admin-console {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  height: calc(100vh - 56px);
}

.admin-console-sidebar {
  background: transparent;
  padding: 8px;
  overflow:auto;
}

.admin-console-main {
  background: transparent;
  padding: 8px;
  overflow:auto;
}

.admin-console-category {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(181, 196, 218, 0.75);
  font-weight:700;
}

.admin-console-category.active {  background: rgba(5, 16, 31, 0.8);
  color:var(--text-primary);
}

.admin-console-subnav {
  margin-top:8px;
  display:block;
}

.admin-console-subnav-item {
  display:block;
  padding:6px 10px;
  border-radius:8px;
  color:var(--text-muted);
  cursor:pointer;
}

.admin-console-subnav-item.active {
  color:var(--text-primary);
  background: rgba(6, 20, 38, 0.84);
}

@media (max-width: 860px) {
  .admin-console { grid-template-columns: 1fr; height: auto; }
  #adminControlToggle { bottom: 72px; }
}

/* RuntimeInspector overlay styling */
.inspector-overlay {
  position: fixed;
  inset: 8vh 8vw 8vh 8vw;
  z-index: 10020;
  overflow: auto;
}
.inspector-modal {
  background: rgba(5, 17, 33, 0.8);
  border: 1px solid rgba(148,163,184,0.18);
  padding: 14px;
  border-radius: 10px;
}

#adminControlToggle {
  position: fixed;
  bottom: 12px;
  right: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(72, 169, 255, 0.85);
  color: var(--text-primary);
  cursor: pointer;
  z-index: 10010;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.3);
  font-weight: 800;
}

.admin-console-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  margin-bottom: 12px;
}

.admin-console-title {
  font-size: 17px;
  font-weight: 900;
}

.admin-console-subtitle,
.admin-muted {
  color: var(--text-muted);
  font-size: 12px;
}

.admin-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.admin-tab {
  background: rgba(14, 40, 68, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: var(--text-primary);
}

.admin-tab.active {
  background: var(--blue);
  border-color: var(--border-bright);
}

.admin-status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.admin-status-item,
.admin-panel,
.inspector-card,
.inspector-section {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: rgba(4, 14, 28, 0.78);
  padding: 12px;
}

.admin-panel-title,
.inspector-title,
.inspector-section-title {
  font-weight: 800;
  margin-bottom: 8px;
}

.admin-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.admin-row-list {
  display: grid;
  gap: 10px;
}

.admin-record {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: rgba(4, 14, 28, 0.78);
  padding: 12px;
}

.admin-record-title {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.admin-field,
.admin-builder-fields label,
.admin-builder-card label {
  display: grid;
  gap: 6px;
  color: rgba(181, 196, 218, 0.75);
  font-size: 12px;
  font-weight: 800;
}

.admin-input,
.admin-textarea,
.admin-select,
.admin-field input,
.admin-field select,
.admin-field textarea,
.admin-builder-fields input,
.admin-builder-fields select,
.admin-builder-fields textarea,
.admin-builder-card input,
.admin-builder-card select,
.admin-builder-card textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  background: rgba(6, 20, 38, 0.84);
  color: var(--text-primary);
  padding: 8px;
}

.admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
}

.admin-template-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-template-list {
  display: grid;
  gap: 6px;
}

.admin-template-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(4, 14, 28, 0.78);
  padding: 10px;
  cursor: pointer;
}

.admin-template-list-item.active {
  border-color: var(--border-bright);
  background: rgba(6, 20, 38, 0.84);
}

.admin-template-textarea {
  min-height: 360px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  line-height: 1.45;
  resize: vertical;
}

.admin-button-primary,
.admin-builder-actions button,
.admin-builder-card button {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--text-primary);
}

.admin-button-secondary {
  background: rgba(14, 34, 58, 0.72);
  border-color: rgba(148, 163, 184, 0.28);
  color: var(--text-primary);
}

.admin-button-danger {
  background: #b23a48;
  border-color: #991b1b;
  color: #ffffff;
}

.admin-button-success {
  background: rgba(70, 210, 160, 0.28);
  border-  color: #7de0b4;
  color: #ffffff;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(14, 40, 68, 0.72);
  color: rgba(181, 196, 218, 0.75);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 800;
}

.admin-badge-success {
  background: rgba(21, 128, 61, 0.2);
  color: #7de0b4;
  border-color: rgba(34, 197, 94, 0.28);
}

.admin-badge-warning {
  background: rgba(217, 119, 6, 0.2);
  color: var(--gold);
  border-color: rgba(251, 146, 60, 0.28);
}

.admin-badge-danger {
  background: rgba(220, 38, 38, 0.2);
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.28);
}

.package-list {
  display: grid;
  gap: 10px;
}

.package-card {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 8px;
  background: rgba(4, 14, 28, 0.78);
}

.package-status {
  white-space: nowrap;
}

.package-warning {
  margin-top: 10px;
  color: var(--gold);
}

.package-manifest-view {
  margin-top: 8px;
  max-height: 260px;
  overflow: auto;
}

.admin-empty,
.inspector-empty {
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  color: var(--text-muted);
  padding: 12px;
}

.admin-code-editor {
  width: 100%;
  min-height: 260px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(4, 14, 28, 0.78);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.admin-media-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: rgba(4, 14, 28, 0.78);
  padding: 10px;
}

.admin-media-thumb {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.inspector-card {
  display: grid;
  gap: 12px;
}

.inspector-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.inspector-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.inspector-log-list {
  max-height: 220px;
  overflow: auto;
  display: grid;
  gap: 6px;
}

.inspector-log-item {
  overflow-wrap: anywhere;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  padding-bottom: 6px;
}

.community-home-shell .cms-hero {
  border-left: 4px solid var(--accent);
}

.forum-detail-card,
.editorial-post-card,
.event-calendar-card {
  position: relative;
}

.forum-thread-ledger,
.blog-editorial-ledger,
.calendar-event-ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
  font-size: 12px;
  color: var(--muted);
}

.forum-thread-ledger span,
.blog-editorial-ledger span,
.calendar-event-ledger span {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  background: rgba(15, 23, 42, 0.04);
}

@media (max-width: 760px) {
  #layout-slot {
    padding: 14px;
  }

  .system-header {
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .system-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .system-actions button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .mobile-stack,
  .page-header,
  .account-heading,
  .forum-header,
  .blog-header,
  .calendar-header,
  .panel-header,
  .blog-post-topline,
  .forum-thread-topline,
  .calendar-event-topline,
  .admin-console-header,
  .inspector-header {
    flex-direction: column;
    align-items: stretch;
  }

  .search-tools input,
  .search-tools select,
  .toolbar input,
  .toolbar select {
    width: 100%;
    min-width: 0;
  }

  .profile-card,
  .admin-media-row {
    grid-template-columns: 1fr;
  }

  .profile-card-main {
    align-items: flex-start;
  }

  .message-bubble {
    max-width: 100%;
  }

  .home-portal-hero,
  .home-portal-body,
  .editorial-featured-card,
  .forum-index-card,
  .calendar-agenda-day {
    grid-template-columns: 1fr;
  }

  .home-spotlight-grid {
    grid-template-columns: 1fr;
  }

  .forum-index-stats {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    text-align: left;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 12px;
  }

  .calendar-agenda-date {
    position: static;
  }
}

/* =========================================================
   CATEGORY CARDS — forums browse hero
========================================================= */

.forum-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.forum-category-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  min-height: 118px;
  padding: 16px 18px;
  text-align: left;
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  background: var(--glass-2);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  box-shadow: var(--glass-reflection);
  color: var(--text-primary);
  font-weight: 500;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.forum-category-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-bright);
  background: rgba(25, 66, 110, 0.36);
  color: var(--text-primary);
}

.forum-category-card.is-active {
  border-color: var(--border-bright);
  background: linear-gradient(135deg, rgba(38, 140, 255, 0.18), rgba(7, 27, 51, 0.72));
}

.forum-category-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(130, 192, 245, 0.22);
  background: rgba(29, 76, 120, 0.25);
  color: var(--text-secondary);
}

.forum-category-icon svg {
  width: 22px;
  height: 22px;
}

.forum-category-card[data-tone="cyan"] .forum-category-icon {
  color: var(--cyan);
  box-shadow: inset 0 0 20px rgba(85, 220, 255, 0.16);
}

.forum-category-card[data-tone="violet"] .forum-category-icon {
  color: #a79bff;
  box-shadow: inset 0 0 20px rgba(135, 116, 255, 0.18);
}

.forum-category-card[data-tone="gold"] .forum-category-icon {
  color: var(--gold);
  box-shadow: inset 0 0 20px rgba(225, 188, 114, 0.18);
}

.forum-category-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.forum-category-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.forum-category-desc {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.forum-category-count {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.forum-category-chevron {
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.forum-category-chevron svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 1200px) {
  .forum-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .forum-category-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .forum-category-card {
    min-height: 0;
    padding: 16px 18px;
  }
}

/* =========================================================
   MIDNIGHT GLASS FANTASY
   Webby design system: background → dark overlay → vignette
   → glass interface → content.
========================================================= */

html {
  color-scheme: dark;
  background: var(--bg-deep);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  background: var(--bg-deep);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(85, 220, 255, 0.26);
  color: var(--text-primary);
}

* {
  scrollbar-color: rgba(105, 194, 255, 0.32) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(105, 194, 255, 0.24);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

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

h1, h2, h3,
.panel-title,
.auth-card h2,
.module-empty-state strong {
  color: var(--text-primary);
}

p, dd, li, small, figcaption {
  color: inherit;
}

/* =========================================================
   BACKGROUND LAYER
========================================================= */

.app-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg-deep);
  pointer-events: none;
}

.app-background-art {
  position: absolute;
  inset: 0;
  background-image: url("./brand/webby-night.svg");
  background-size: cover;
  background-position: center 34%;
  background-repeat: no-repeat;
  transform: scale(1.02);
}

/* dark navy wash + soft vignette so text stays readable */
.app-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(3, 12, 26, 0.15), rgba(2, 9, 19, 0.78) 78%),
    linear-gradient(rgba(2, 10, 22, 0.32), rgba(2, 9, 19, 0.72));
}

.app-background-stars {
  position: absolute;
  inset: -20% -10% 0;
  opacity: 0.5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(238, 245, 255, 0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 68% 12%, rgba(200, 228, 255, 0.75), transparent 60%),
    radial-gradient(1.6px 1.6px at 84% 32%, rgba(238, 245, 255, 0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 36% 44%, rgba(181, 214, 255, 0.65), transparent 60%),
    radial-gradient(1px 1px at 52% 26%, rgba(238, 245, 255, 0.6), transparent 60%);
  animation: webby-drift 90s linear infinite;
}

@keyframes webby-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-2%, 6%, 0); }
}

/* =========================================================
   APP SHELL
========================================================= */

#app {
  position: relative;
  z-index: 1;
}

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: 100vh;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#layout-slot {
  position: relative;
  flex: 1 1 auto;
}

/* =========================================================
   NAVIGATION RAIL
========================================================= */

.nav-rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  width: var(--rail-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 18px 0 24px;
  background: var(--rail-bg);
  border-right: 1px solid rgba(120, 180, 235, 0.13);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  z-index: 30;
}

.rail-logo-link {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  transition: background 180ms ease;
}

.rail-logo-link:hover {
  background: var(--surface-hover);
}

.rail-logo img {
  width: 38px;
  height: 38px;
  display: block;
  filter: drop-shadow(0 0 10px rgba(85, 220, 255, 0.35));
}

.rail-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.nav-item {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--text-secondary);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.nav-item .rail-icon {
  width: 24px;
  height: 24px;
}

.nav-item:hover {
  background: var(--surface-hover);
  border-color: var(--border-glass);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.nav-item.is-active {
  background: linear-gradient(90deg, rgba(31, 126, 222, 0.38), rgba(27, 89, 154, 0.12));
  border-left: 2px solid var(--cyan);
  color: var(--text-primary);
  box-shadow: inset 0 0 22px rgba(85, 220, 255, 0.14);
}

.nav-item.is-active .rail-icon {
  filter: drop-shadow(0 0 8px rgba(85, 220, 255, 0.45));
}

/* tooltips (labels are not permanently visible) */
.nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  background: var(--glass-3);
  backdrop-filter: blur(18px);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease 0ms, transform 140ms ease 0ms;
  z-index: 40;
}

.nav-item:hover::after,
.nav-item:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition-delay: 350ms;
}

.rail-divider {
  width: 36px;
  height: 1px;
  margin: 6px 0 2px;
  background: rgba(135, 192, 255, 0.18);
}

/* =========================================================
   HEADER
========================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: var(--header-height);
  padding: 14px 30px;
  background: var(--glass-1);
  border-bottom: 1px solid rgba(120, 180, 235, 0.13);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}

.topbar-brand {
  flex: 0 0 auto;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-primary);
}

.wordmark-mark img {
  display: block;
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 0 8px rgba(85, 220, 255, 0.4));
}

.wordmark-text {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* search */
.search-palette {
  position: relative;
  flex: 1 1 auto;
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 14px 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(140, 194, 255, 0.3);
  background: rgba(3, 15, 30, 0.52);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.search-palette:focus-within {
  border-color: var(--border-bright);
  box-shadow: 0 0 0 4px rgba(85, 220, 255, 0.1);
}

.search-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.search-icon svg {
  width: 20px;
  height: 20px;
}

.search-palette input {
  flex: 1 1 auto;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 14.5px;
}

.search-palette input:focus {
  box-shadow: none;
}

.search-palette input::placeholder {
  color: var(--text-muted);
}

.search-kbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-glass);
  background: rgba(6, 22, 42, 0.6);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
}

.search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--border-glass);
  background: var(--glass-3);
  backdrop-filter: blur(30px) saturate(130%);
  box-shadow: var(--glass-reflection);
  z-index: 40;
}

.search-result {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  text-align: left;
}

.search-result:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.search-empty {
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 13px;
}

/* header actions */
.topbar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 0;
}

.action-button {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
}

.action-button svg {
  width: 22px;
  height: 22px;
}

.action-button:hover {
  background: var(--surface-hover);
  border-color: var(--border-glass);
  color: var(--text-primary);
}

.action-dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(225, 188, 114, 0.7);
}

.topbar-account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px 0 5px;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: rgba(6, 22, 42, 0.46);
  color: var(--text-secondary);
  font-weight: 600;
}

.topbar-account:hover {
  background: var(--surface-hover);
  border-color: var(--border-bright);
  color: var(--text-primary);
}

.topbar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(135, 192, 255, 0.35);
  object-fit: cover;
}

.topbar-name {
  font-size: 13px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-chevron {
  width: 16px;
  height: 16px;
}

/* =========================================================
   PAGE CONTAINER
========================================================= */

.page-shell,
.cms-page {
  width: min(var(--content-max), 100%);
  padding: 28px 40px 48px;
  gap: 22px;
}

/* =========================================================
   HERO
========================================================= */

.page-header,
.account-heading,
.forum-header,
.blog-header,
.calendar-header {
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px 0 22px;
  position: relative;
}

.page-header::after,
.account-heading::after,
.forum-header::after,
.blog-header::after,
.calendar-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(135, 192, 255, 0) 0%, rgba(135, 192, 255, 0.28) 18%, rgba(85, 220, 255, 0.42) 50%, rgba(135, 192, 255, 0.28) 82%, rgba(135, 192, 255, 0) 100%);
}

.page-title,
.page-header h1,
.account-heading h1,
.forum-header h1,
.blog-header h1,
.calendar-header h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 50px);
  font-weight: 500;
  letter-spacing: 0.014em;
  line-height: 1.06;
  color: var(--text-primary);
  text-shadow: 0 18px 40px rgba(2, 8, 18, 0.6);
}

.page-subtitle,
.page-header p,
.account-heading p,
.forum-header p,
.blog-header p,
.calendar-header p {
  color: var(--text-secondary);
  font-size: 15.5px;
}

.section-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--cyan);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* section headings inside glass panels */
.panel-title,
.panel h2,
.auth-card h2,
.blog-editor h2,
.calendar-editor h2,
.forum-thread-card h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* =========================================================
   GLASS SYSTEM
========================================================= */

.glass-subtle {
  background: var(--glass-1);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid var(--border-glass);
}

.glass,
.glass-standard {
  background: var(--glass-2);
  backdrop-filter: blur(22px) saturate(125%);
  border: 1px solid var(--border-glass);
  box-shadow: var(--glass-reflection);
}

.glass-strong {
  background: var(--glass-3);
  backdrop-filter: blur(30px) saturate(130%);
  border: 1px solid var(--border-glass);
  box-shadow: var(--glass-reflection);
}

.panel,
.auth-card,
.profile-card,
.blog-editor,
.calendar-editor,
.card,
.cms-card,
.blog-post-card,
.forum-thread-card,
.calendar-event-card,
.forum-detail-card,
.account-overview-card {
  background: var(--glass-2);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  box-shadow: var(--glass-reflection);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.card,
.forum-index-card,
.account-overview-card,
.blog-post-card,
.calendar-event-card {
  border-radius: 16px;
}

.card:hover,
.forum-index-card:hover,
.account-overview-card:hover,
.blog-post-card:hover,
.calendar-event-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-bright);
}

.card-muted,
.forum-reply-card,
.notification-item,
.activity-item {
  background: rgba(6, 22, 42, 0.46);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

.module-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid var(--border-glass);
  background: rgba(6, 22, 42, 0.5);
  backdrop-filter: blur(16px);
}

.module-subnav button {
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 9px 16px;
}

.module-subnav button:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.module-subnav button.active {
  background: linear-gradient(90deg, rgba(31, 126, 222, 0.42), rgba(27, 89, 154, 0.16));
  border-color: var(--border-bright);
  color: var(--text-primary);
  box-shadow: inset 0 0 18px rgba(85, 220, 255, 0.12);
}

/* =========================================================
   RECENT DISCUSSIONS — one glass container, hairline rows
========================================================= */

.forum-thread-list {
  display: grid;
  gap: 0;
  padding: 6px 0;
  border-radius: 20px;
  border: 1px solid var(--border-glass);
  background: var(--glass-2);
  backdrop-filter: blur(22px) saturate(125%);
  box-shadow: var(--glass-reflection);
  overflow: hidden;
}

.forum-index-list {
  gap: 0;
}

.forum-index-card,
.forum-thread-list > .forum-thread-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
  padding: 16px 20px;
  min-height: 78px;
  align-items: center;
}

.forum-index-card:hover,
.forum-thread-list > .forum-thread-card:hover {
  background: var(--surface-hover);
  transform: none;
  border-color: transparent;
  border-bottom-color: var(--hairline);
}

.forum-index-card:last-child,
.forum-thread-list > .forum-thread-card:last-child {
  border-bottom: 0;
}

.forum-thread-list > .forum-thread-card {
  display: grid;
}

.forum-index-excerpt {
  color: var(--text-muted);
  margin-top: 6px;
}

.forum-index-stats {
  border-left: 1px solid var(--hairline);
  color: var(--text-muted);
}

.forum-index-stats strong {
  color: var(--text-primary);
}

.forum-thread-meta {
  color: var(--text-muted);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}

.forum-body {
  color: var(--text-secondary);
}

/* =========================================================
   TAGS / BADGES
========================================================= */

.forum-badge {
  min-height: 24px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(65, 165, 255, 0.55);
  background: rgba(20, 109, 190, 0.2);
  color: #83c9ff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.forum-badge-pinned {
  border-color: rgba(225, 188, 114, 0.6);
  background: rgba(225, 188, 114, 0.16);
  color: var(--gold);
}

.forum-badge-closed {
  border-color: rgba(255, 122, 138, 0.42);
  background: rgba(255, 122, 138, 0.12);
  color: var(--rose);
}

.capability-chip,
.role-badge {
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: rgba(72, 169, 255, 0.14);
  color: var(--text-secondary);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* =========================================================
   BUTTONS
========================================================= */

button {
  font-family: var(--font-ui);
  border-radius: 10px;
  font-weight: 600;
}

.button-primary,
button.primary {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(135deg, #268cff, #6258ed);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.button-primary:hover,
button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(38, 140, 255, 0.32);
  filter: none;
}

.button-secondary {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  background: rgba(6, 22, 42, 0.5);
  color: var(--text-secondary);
  font-weight: 600;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.button-secondary:hover {
  transform: translateY(-1px);
  border-color: var(--border-bright);
  background: var(--surface-hover);
  color: var(--text-primary);
}

.button-danger {
  border-radius: 12px;
  background: rgba(255, 122, 138, 0.16);
  border-color: rgba(255, 122, 138, 0.42);
  color: #ff9aa8;
}

.button-ghost,
.link-button {
  background: transparent;
  border-color: transparent;
  color: var(--cyan);
}

.button-ghost:hover,
.link-button:hover {
  background: rgba(85, 220, 255, 0.12);
  color: var(--cyan);
  transform: none;
}

.forum-action-bar {
  border-top: 1px solid var(--hairline);
}

.forum-action-bar button {
  background: rgba(6, 22, 42, 0.45);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  border-radius: 10px;
}

.forum-action-bar button:hover {
  background: var(--surface-hover);
  border-color: var(--border-bright);
  color: var(--text-primary);
}

/* =========================================================
   FORMS
========================================================= */

input,
select,
textarea {
  background: rgba(3, 15, 30, 0.52);
  border: 1px solid rgba(140, 194, 255, 0.3);
  border-radius: 12px;
  color: var(--text-primary);
  padding: 10px 12px;
}

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

input:focus,
select:focus,
textarea:focus {
  border-color: var(--border-bright);
  box-shadow: 0 0 0 4px rgba(85, 220, 255, 0.12);
}

label {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

/* =========================================================
   ALERTS / EMPTY STATES
========================================================= */

.forum-alert,
.account-alert {
  border: 1px solid rgba(101, 177, 255, 0.4);
  border-radius: 14px;
  background: rgba(41, 128, 220, 0.16);
  color: #96ccff;
  padding: 12px 14px;
}

.forum-alert[data-tone="error"],
.account-alert[data-tone="error"] {
  border-color: rgba(255, 122, 138, 0.4);
  background: rgba(255, 122, 138, 0.13);
  color: #ff9aa8;
}

.forum-alert[data-tone="success"],
.account-alert[data-tone="success"] {
  border-color: rgba(70, 210, 160, 0.4);
  background: rgba(70, 210, 160, 0.14);
  color: #7de0b4;
}

.forum-empty {
  border: 1px dashed rgba(135, 192, 255, 0.24);
  border-radius: 16px;
  background: rgba(6, 22, 42, 0.42);
  color: var(--text-muted);
  padding: 16px 18px;
}

.module-empty-state {
  border: 1px dashed rgba(135, 192, 255, 0.24);
  border-radius: 20px;
  background-color: rgba(6, 22, 42, 0.42);
  background-image: url("./brand/webby-empty.svg");
  background-repeat: no-repeat;
  background-position: center 26px;
  background-size: 168px auto;
  color: var(--text-muted);
  text-align: center;
  padding: 200px 22px 30px;
}

.module-empty-state strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* =========================================================
   TABLES / CODE
========================================================= */

table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  overflow: hidden;
}

th {
  background: rgba(6, 22, 42, 0.6);
  color: var(--text-secondary);
}

td {
  border-top: 1px solid var(--hairline);
}

pre,
code {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(2, 10, 22, 0.7);
  color: #cfe3ff;
}

/* =========================================================
   MOTION
========================================================= */

.auth-card,
.panel,
.card,
.blog-post-card,
.calendar-event-card,
.nav-item,
.action-button,
.button-primary,
.button-secondary {
  transition-duration: 180ms;
  transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   BOTTOM NAVIGATION (mobile)
========================================================= */

.bottom-nav {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 30;
  justify-content: space-around;
  align-items: center;
  gap: 4px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--rail-bg);
  border-top: 1px solid rgba(120, 180, 235, 0.13);
  backdrop-filter: blur(22px) saturate(120%);
}

.bottom-nav .nav-item {
  width: 52px;
  height: 46px;
  border-radius: 12px;
}

.bottom-nav .nav-item::after {
  display: none;
}

.bottom-nav .rail-divider {
  display: none;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {
  .page-shell,
  .cms-page {
    padding: 24px 26px 42px;
  }

  .search-palette {
    max-width: none;
  }
}

@media (max-width: 1100px) {
  .topbar-name {
    display: none;
  }
}

@media (max-width: 1000px) {
  .forum-index-card,
  .forum-thread-list > .forum-thread-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .forum-index-stats {
    border-left: 0;
    padding-left: 0;
    text-align: left;
    grid-auto-flow: column;
    justify-content: start;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav-rail {
    display: none;
  }

  .bottom-nav {
    display: flex;
  }

  .topbar {
    gap: 12px;
    padding: 12px 16px;
    min-height: 72px;
  }

  .wordmark-text {
    display: none;
  }

  .search-kbd {
    display: none;
  }

  .app-background-art {
    background-image: url("./brand/webby-night-portrait.svg");
    background-position: center 30%;
    opacity: 0.9;
  }

  .page-shell,
  .cms-page {
    padding: 18px 16px 32px;
    gap: 16px;
  }

  .page-title,
  .page-header h1,
  .account-heading h1,
  .forum-header h1,
  .blog-header h1,
  .calendar-header h1 {
    font-size: clamp(28px, 9vw, 38px);
  }

  .forum-index-excerpt,
  .forum-index-stats span,
  .blog-post-excerpt {
    display: none;
  }

  .forum-thread-list > .forum-thread-card,
  .forum-index-card {
    padding: 14px 16px;
    min-height: 0;
  }
}