.theme-nav-glyph,
.theme-navigation,
.theme-notification-link,
.theme-rail-footer,
.theme-topbar {
  display: none;
}

html[data-theme="midnight"] {
  --rf-sidebar: 230px;
  --rf-topbar: 74px;
  --rf-content-max: 1530px;
  --rf-radius: 18px;
  --rf-line: color-mix(in srgb, var(--rf-text) 8%, transparent);
  --rf-shadow: 0 16px 42px rgba(0, 0, 0, .24);
}

html[data-theme="midnight"] body {
  color: var(--rf-text);
  background:
    radial-gradient(circle at 72% 8%, color-mix(in srgb, var(--rf-secondary) 5%, transparent), transparent 28rem),
    radial-gradient(circle at 18% 80%, color-mix(in srgb, var(--rf-primary) 7%, transparent), transparent 34rem),
    color-mix(in srgb, var(--rf-bg) 96%, #000713) !important;
  font-family: var(--rf-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

html[data-theme="midnight"] body::before {
  opacity: .16;
  background-image:
    linear-gradient(color-mix(in srgb, var(--rf-text) 2.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--rf-text) 2.5%, transparent) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

html[data-theme="midnight"] h1,
html[data-theme="midnight"] h2,
html[data-theme="midnight"] h3 {
  letter-spacing: -.025em;
}

html[data-theme="midnight"] h1 {
  font-size: clamp(1.85rem, 2.7vw, 2.45rem);
}

html[data-theme="midnight"] h2 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

html[data-theme="midnight"] .rf-dashboard-welcome h1 {
  font-size: clamp(1.55rem, 1.8vw, 2rem);
}

html[data-theme="midnight"] .rf-home-section-heading h2 {
  font-size: .97rem;
}

html[data-theme="midnight"] .owner-command-dock {
  display: none;
}

html[data-theme="midnight"] .shell {
  width: min(var(--rf-content-max), calc(100% - 60px));
}

html[data-theme="midnight"] .section {
  padding-block: clamp(42px, 6vw, 74px);
}

html[data-theme="midnight"] .section-sm {
  padding-block: 34px;
}

html[data-theme="midnight"] .site-main > .auth-page {
  width:min(var(--rf-content-max),calc(100% - 60px));
  min-height:calc(100vh - var(--rf-topbar));
  margin-inline:auto;
  padding-block:34px;
}

html[data-theme="midnight"] .site-main > .series-page,
html[data-theme="midnight"] .site-main > .profile-page {
  min-height:calc(100vh - var(--rf-topbar));
}

html[data-theme="midnight"] .eyebrow {
  margin-bottom: 10px;
  color: color-mix(in srgb, var(--rf-primary) 76%, #fff);
  font-size: .66rem;
  letter-spacing: .13em;
}

html[data-theme="midnight"] .eyebrow::before {
  width: 16px;
  height: 1px;
  box-shadow: none;
}

html[data-theme="midnight"] .kicker {
  font-size: clamp(.95rem, 1.6vw, 1.08rem);
  line-height: 1.6;
}

html[data-theme="midnight"] .section-heading {
  align-items: center;
  margin-bottom: 18px;
}

html[data-theme="midnight"] .panel {
  border-color: var(--rf-line);
  border-radius: var(--rf-radius);
  background: linear-gradient(145deg, color-mix(in srgb, var(--rf-surface) 93%, #07101f), color-mix(in srgb, var(--rf-surface) 87%, #030914)) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .018);
}

html[data-theme="midnight"] .panel::after {
  opacity: .12;
  background: linear-gradient(115deg, color-mix(in srgb, var(--rf-primary) 10%, transparent), transparent 31%);
}

html[data-theme="midnight"] .panel-body {
  padding: clamp(18px, 2.6vw, 26px);
}

html[data-theme="midnight"] .panel-title {
  margin-bottom: 17px;
}

html[data-theme="midnight"] .button,
html[data-theme="midnight"] button.button {
  min-height: 40px;
  border-color: color-mix(in srgb, var(--rf-primary) 62%, transparent);
  border-radius: 8px;
  padding: 8px 15px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--rf-primary) 88%, #fff), var(--rf-primary));
  box-shadow: 0 9px 24px color-mix(in srgb, var(--rf-primary) 18%, transparent);
  font-size: .78rem;
}

html[data-theme="midnight"] .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 27px color-mix(in srgb, var(--rf-primary) 26%, transparent);
}

html[data-theme="midnight"] .button.ghost {
  border-color: var(--rf-line);
  color: var(--rf-text);
  background: color-mix(in srgb, var(--rf-surface) 91%, var(--rf-text) 3%) !important;
  box-shadow: none;
}

html[data-theme="midnight"] .button.secondary {
  border-color: color-mix(in srgb, var(--rf-secondary) 34%, var(--rf-line));
  background: color-mix(in srgb, var(--rf-secondary) 9%, var(--rf-surface));
  box-shadow: none;
}

html[data-theme="midnight"] .button.danger {
  border-color: color-mix(in srgb, var(--rf-danger) 36%, var(--rf-line));
  background: color-mix(in srgb, var(--rf-danger) 12%, var(--rf-surface));
  box-shadow: none;
}

html[data-theme="midnight"] input,
html[data-theme="midnight"] textarea,
html[data-theme="midnight"] select {
  border-color: var(--rf-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--rf-bg) 70%, var(--rf-surface)) !important;
}

html[data-theme="midnight"] input:focus,
html[data-theme="midnight"] textarea:focus,
html[data-theme="midnight"] select:focus {
  border-color: color-mix(in srgb, var(--rf-primary) 66%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-primary) 10%, transparent);
}

html[data-theme="midnight"] .toggle-row,
html[data-theme="midnight"] .stat-card {
  border-color: var(--rf-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--rf-surface) 91%, var(--rf-text) 2%);
}

html[data-theme="midnight"] .progress-track {
  height: 6px;
  background: color-mix(in srgb, var(--rf-text) 7%, transparent);
}

html[data-theme="midnight"] .progress-track > span,
html[data-theme="midnight"] .progress-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rf-primary), color-mix(in srgb, var(--rf-primary) 66%, var(--rf-secondary)));
  box-shadow: 0 0 12px color-mix(in srgb, var(--rf-primary) 30%, transparent);
}

html[data-theme="midnight"] .tag,
html[data-theme="midnight"] .status-pill,
html[data-theme="midnight"] .type-pill {
  border-radius: 6px;
  padding: 4px 8px;
}

html[data-theme="midnight"] .table-wrap,
html[data-theme="midnight"] .empty-state {
  border-radius: 11px;
}

html[data-theme="midnight"] .flash {
  top: calc(var(--rf-topbar) + 14px);
  border-radius: 9px;
  background: color-mix(in srgb, var(--rf-surface) 96%, black);
}

html[data-theme="midnight"] .card-grid {
  grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
  gap: 14px;
}

html[data-theme="midnight"] .series-card {
  min-height: 310px;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}

html[data-theme="midnight"] .series-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--rf-primary) 54%, white);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .32), 0 0 24px color-mix(in srgb, var(--rf-primary) 10%, transparent);
}

html[data-theme="midnight"] .series-card-content {
  padding: 15px;
}

html[data-theme="midnight"] .site-footer {
  color: color-mix(in srgb, var(--rf-muted) 85%, transparent);
}

html[data-theme="midnight"] .auth-card,
html[data-theme="midnight"] .library-card,
html[data-theme="midnight"] .shop-card,
html[data-theme="midnight"] .friend-card,
html[data-theme="midnight"] .reader-result,
html[data-theme="midnight"] .profile-library-card,
html[data-theme="midnight"] .catalog-controls,
html[data-theme="midnight"] .catalog-card,
html[data-theme="midnight"] .quest-card,
html[data-theme="midnight"] .achievement-card,
html[data-theme="midnight"] .inventory-card,
html[data-theme="midnight"] .guild-card,
html[data-theme="midnight"] .profile-card,
html[data-theme="midnight"] .leaderboard-card,
html[data-theme="midnight"] .library-filter-bar,
html[data-theme="midnight"] .settings-nav,
html[data-theme="midnight"] .settings-save,
html[data-theme="midnight"] .admin-tabs {
  border-color: var(--rf-line) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--rf-surface) 91%, #020713) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18) !important;
}

html[data-theme="midnight"] .catalog-card,
html[data-theme="midnight"] .library-card,
html[data-theme="midnight"] .shop-card,
html[data-theme="midnight"] .friend-card,
html[data-theme="midnight"] .quest-card,
html[data-theme="midnight"] .achievement-card {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

html[data-theme="midnight"] .catalog-card:hover,
html[data-theme="midnight"] .library-card:hover,
html[data-theme="midnight"] .shop-card:hover,
html[data-theme="midnight"] .friend-card:hover,
html[data-theme="midnight"] .quest-card:hover,
html[data-theme="midnight"] .achievement-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--rf-primary) 45%, var(--rf-line)) !important;
  box-shadow: 0 17px 38px rgba(0, 0, 0, .26) !important;
}

html[data-theme="midnight"] .settings-nav a:hover,
html[data-theme="midnight"] .settings-nav a:focus-visible {
  color: var(--rf-text);
  background: color-mix(in srgb, var(--rf-primary) 11%, transparent);
}

html[data-theme="midnight"] .theme-mode-option {
  border-radius: 10px;
  background: color-mix(in srgb, var(--rf-surface) 91%, var(--rf-text) 2%);
}

html[data-theme="midnight"] .readerflow-web-dialog-9f3a,
html[data-theme="midnight"] .review-dialog {
  border-radius: 12px;
  background: color-mix(in srgb, var(--rf-surface) 95%, #020713);
  box-shadow: 0 28px 72px rgba(0, 0, 0, .62), 0 0 0 1px color-mix(in srgb, var(--rf-primary) 10%, transparent);
}

html[data-theme="midnight"] .owner-command-trigger,
html[data-theme="midnight"] .owner-command-menu,
html[data-theme="midnight"] .account-popover {
  border-radius: 11px;
  background: color-mix(in srgb, var(--rf-surface) 95%, #020713) !important;
}

html[data-theme="midnight"] .home-hero {
  padding-top: clamp(34px, 5vw, 64px);
}

html[data-theme="midnight"] .hero-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  gap: clamp(28px, 5vw, 70px);
}

html[data-theme="midnight"] .hero-copy h1 {
  margin-bottom: 12px;
}

html[data-theme="midnight"] .hero-actions {
  margin: 22px 0;
}

html[data-theme="midnight"] .hero-stats {
  padding-top: 16px;
  border-top: 1px solid var(--rf-line);
}

html[data-theme="midnight"] .hero-panels {
  min-height: 450px;
}

html[data-theme="midnight"] .hero-panel {
  border-width: 1px;
  border-radius: 10px;
}

html[data-theme="midnight"] .hero-signal {
  border-radius: 8px;
  background: color-mix(in srgb, var(--rf-surface) 92%, transparent);
}

html[data-theme="midnight"] .home-reader-card {
  border-radius: 12px;
  background: color-mix(in srgb, var(--rf-surface) 92%, #020713);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
}

html[data-theme="midnight"] .continue-spotlight {
  width: min(1080px, calc(100% - 38px));
  border-radius: 12px;
  box-shadow: 0 17px 42px rgba(0, 0, 0, .24);
}

html[data-theme="midnight"] .continue-resume {
  border-radius: 7px;
  color: #fff;
  background: var(--rf-primary);
  box-shadow: none;
}

html[data-theme="midnight"] .continue-resume i {
  border-radius: 5px;
  background: color-mix(in srgb, var(--rf-primary) 70%, black);
}

html[data-theme="midnight"] .continue-resume:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--rf-primary) 20%, transparent);
}

@media (min-width: 981px) {
  html[data-theme="midnight"] .site-header {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 8000;
    width: var(--rf-sidebar);
    min-height: 100vh;
    height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-items: stretch;
    gap: 12px;
    overflow: visible;
    border: 0;
    border-right: 1px solid var(--rf-line);
    border-radius: 0;
    padding: 19px 13px 14px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--rf-bg) 94%, #020817), color-mix(in srgb, var(--rf-bg) 97%, #02040b)) !important;
    box-shadow: 10px 0 35px rgba(0, 0, 0, .12);
  }

  html[data-theme="midnight"] .brand {
    width: 100%;
    min-height: 48px;
    gap: 12px;
    padding: 3px 9px 12px;
    font-size: 1.12rem;
  }

  html[data-theme="midnight"] .brand strong {
    color: var(--rf-secondary);
  }

  html[data-theme="midnight"] .brand > span:last-child {
    display: block;
    white-space: nowrap;
  }

  html[data-theme="midnight"] .brand small {
    display: none;
  }

  html[data-theme="midnight"] .brand-mark {
    width: 32px;
    height: 30px;
    transform: none;
  }

  html[data-theme="midnight"] .brand-mark i {
    top: 4px;
    width: 15px;
    height: 22px;
    border: 2px solid color-mix(in srgb, var(--rf-primary) 82%, #fff);
    border-radius: 2px 2px 7px 2px;
    background: color-mix(in srgb, var(--rf-primary) 32%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--rf-primary) 26%, transparent);
  }

  html[data-theme="midnight"] .brand-mark i:nth-child(1) {
    left: 1px;
    transform: skewY(18deg);
  }

  html[data-theme="midnight"] .brand-mark i:nth-child(2) {
    top: 4px;
    right: 1px;
    transform: skewY(-18deg);
  }

  html[data-theme="midnight"] .brand-mark i:nth-child(3) {
    top: 3px;
    left: 15px;
    width: 2px;
    height: 25px;
    border: 0;
    border-radius: 2px;
    background: color-mix(in srgb, var(--rf-primary) 82%, #fff);
    transform: none;
  }

  html[data-theme="midnight"] .site-nav {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    overflow: visible;
    padding: 0 0 4px;
  }

  html[data-theme="midnight"] .site-nav > a,
  html[data-theme="midnight"] .nav-more-popover a {
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 9px 11px;
    color: color-mix(in srgb, var(--rf-muted) 92%, white 8%);
    background: transparent !important;
    font-size: .79rem;
    font-weight: 700;
  }

  html[data-theme="midnight"] .site-nav > a:hover,
  html[data-theme="midnight"] .site-nav > a.active,
  html[data-theme="midnight"] .nav-more-popover a:hover,
  html[data-theme="midnight"] .nav-more-popover a.active {
    border-color: color-mix(in srgb, var(--rf-primary) 45%, var(--rf-line));
    color: #fff;
    background: linear-gradient(90deg, color-mix(in srgb, var(--rf-primary) 22%, transparent), color-mix(in srgb, var(--rf-primary) 10%, transparent)) !important;
  }

  html[data-theme="midnight"] .site-nav > a.active::after {
    inset: 7px auto 7px 0;
    width: 2px;
    height: auto;
    border-radius: 0 3px 3px 0;
    background: color-mix(in srgb, var(--rf-primary) 78%, #fff);
    box-shadow: 0 0 10px var(--rf-primary);
  }

  html[data-theme="midnight"] .theme-nav-glyph {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--rf-muted) 75%, #fff);
    font: 700 1rem/1 var(--rf-font);
  }

  html[data-theme="midnight"] a.active .theme-nav-glyph,
  html[data-theme="midnight"] a:hover .theme-nav-glyph {
    color: color-mix(in srgb, var(--rf-primary) 72%, #fff);
  }

  html[data-theme="midnight"] .nav-more {
    display: grid;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
  }

  html[data-theme="midnight"] .nav-more::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  html[data-theme="midnight"] .nav-more-trigger {
    display: none;
  }

  html[data-theme="midnight"] .nav-more-popover {
    position: static;
    width: auto;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 3px;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-theme="midnight"] .site-nav > .nav-cta {
    margin: 4px 0 0;
    justify-content: center;
    color: #fff;
    background: var(--rf-primary) !important;
  }

  html[data-theme="midnight"] .nav-coin-balance {
    position: fixed;
    z-index: 8102;
    top: 18px;
    right: 190px;
    min-height: 36px;
    margin: 0;
    border-color: rgba(255, 213, 104, .18);
    border-radius: 8px;
    padding: 7px 10px;
    background: color-mix(in srgb, var(--rf-surface) 88%, transparent) !important;
  }

  html[data-theme="midnight"] .account-menu {
    position: fixed;
    z-index: 8103;
    top: 15px;
    right: 20px;
    margin: 0;
  }

  html[data-theme="midnight"] .account-trigger {
    min-width: 154px;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    background: transparent !important;
  }

  html[data-theme="midnight"] .account-trigger::after {
    content: "⌄";
    margin-left: auto;
    color: var(--rf-muted);
  }

  html[data-theme="midnight"] .account-popover {
    top: calc(100% + 12px);
  }

  html[data-theme="midnight"] .locale-switcher {
    width: 100%;
    margin: 0;
    padding: 0 4px;
  }

  html[data-theme="midnight"] .locale-switcher select {
    width: 100%;
    max-width: none;
    min-height: 34px;
  }

  html[data-theme="midnight"] .theme-rail-footer {
    position: relative;
    min-height: 0;
    display: block;
    border-radius: 10px;
    overflow: hidden;
  }

  html[data-theme="midnight"] .theme-support-card {
    position: relative;
    z-index: 5;
    display: grid;
    gap: 4px;
    margin: 0 7px 7px;
    border: 1px solid color-mix(in srgb, var(--rf-primary) 25%, var(--rf-line));
    border-radius: 9px;
    padding: 11px;
    color: var(--rf-text);
    background: rgba(3, 6, 15, .84);
    text-decoration: none;
  }

  html[data-theme="midnight"] .theme-support-card span {
    font-size: .72rem;
    font-weight: 800;
  }

  html[data-theme="midnight"] .theme-support-card small {
    color: var(--rf-muted);
    font-size: .61rem;
    line-height: 1.35;
  }

  html[data-theme="midnight"] .theme-support-card strong {
    margin-top: 5px;
    border-radius: 6px;
    padding: 7px;
    text-align: center;
    color: #fff;
    background: var(--rf-primary);
    font-size: .65rem;
  }

  html[data-theme="midnight"] .theme-topbar {
    position: fixed;
    z-index: 7990;
    top: 0;
    right: 0;
    left: var(--rf-sidebar);
    height: var(--rf-topbar);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--rf-line);
    padding: 0 380px 0 28px;
    background: color-mix(in srgb, var(--rf-bg) 94%, #020713);
  }

  html[data-theme="midnight"][data-auth="guest"] .theme-topbar {
    padding-right: 28px;
  }

  html[data-theme="midnight"] .theme-topbar form {
    width: min(590px, 100%);
    min-height: 38px;
    display: grid;
    grid-template-columns: 22px auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: auto;
    border: 1px solid var(--rf-line);
    border-radius: 8px;
    padding: 4px 8px 4px 11px;
    background: color-mix(in srgb, var(--rf-surface) 63%, transparent);
  }

  html[data-theme="midnight"] .theme-topbar form:focus-within {
    border-color: color-mix(in srgb, var(--rf-primary) 55%, white);
  }

  html[data-theme="midnight"] .theme-topbar-icon {
    position: relative;
    width: 13px;
    height: 13px;
    display: flex;
    align-items:center;
    gap:9px;
    border: 2px solid var(--rf-muted);
    border-radius: 50%;
    padding: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
  }

  html[data-theme="midnight"] .theme-topbar-icon::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -3px;
    width: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--rf-muted);
    transform: rotate(45deg);
  }

  html[data-theme="midnight"] .theme-topbar input {
    min-width: 0;
    width: 100%;
    min-height: 28px;
    height: 28px;
    border: 0 !important;
    outline: 0;
    padding: 4px 2px;
    color: var(--rf-text);
    background: transparent !important;
    box-shadow: none !important;
    font-size: .76rem;
  }

  html[data-theme="midnight"] .theme-search-type {
    width: auto;
    min-width: 82px;
    min-height: 28px;
    height: 28px;
    appearance: none;
    -webkit-appearance: none;
    border: 0 !important;
    border-radius: 0;
    outline: 0 !important;
    padding: 2px 20px 2px 2px;
    color: color-mix(in srgb,var(--rf-text) 86%,var(--rf-muted));
    background-color: transparent !important;
    background-image:
      linear-gradient(45deg,transparent 50%,var(--rf-muted) 50%),
      linear-gradient(135deg,var(--rf-muted) 50%,transparent 50%) !important;
    background-position:
      calc(100% - 9px) 12px,
      calc(100% - 5px) 12px !important;
    background-repeat: no-repeat !important;
    background-size: 4px 4px,4px 4px !important;
    box-shadow: none !important;
    font-size: .68rem;
    font-weight: 700;
  }

  html[data-theme="midnight"] .theme-search-type:hover,
  html[data-theme="midnight"] .theme-search-type:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  html[data-theme="midnight"] .theme-topbar kbd {
    min-width: 22px;
    display: grid;
    place-items: center;
    border: 1px solid var(--rf-line);
    border-radius: 5px;
    color: var(--rf-muted);
    background: color-mix(in srgb, var(--rf-surface) 90%, white 2%);
    font-size: .64rem;
  }

  html[data-theme="midnight"] .site-search-dock {
    display: none;
  }

  html[data-theme="midnight"] .site-main {
    min-height: calc(100vh - var(--rf-topbar));
    margin-left: var(--rf-sidebar);
    padding-top: var(--rf-topbar);
  }

  html[data-theme="midnight"] .site-footer {
    width: auto;
    margin: 40px 28px 0 calc(var(--rf-sidebar) + 28px);
  }

  html[data-theme="midnight"] .flash {
    left: calc(50% + var(--rf-sidebar) / 2);
  }

  html[data-theme="midnight"] .owner-command-dock {
    right: 22px;
    bottom: 22px;
  }
}

/* Template-matched desktop shell */
@media (min-width: 981px) {
  html[data-theme="midnight"] .site-header {
    grid-template-rows: auto minmax(0,1fr) auto;
    grid-template-columns: minmax(0,1fr);
    gap: 4px;
    padding: 16px 12px 12px;
    background: linear-gradient(180deg,#07101c 0%,#050b15 66%,#070913 100%) !important;
    box-shadow: none;
  }

  html[data-theme="midnight"] .brand {
    min-height: 58px;
    padding: 3px 17px 12px;
    font-size: 1.14rem;
  }

  html[data-theme="midnight"] .brand-mark {
    width: 34px;
    height: 31px;
  }

  html[data-theme="midnight"] .theme-navigation {
    width: auto;
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 3px 0;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  html[data-theme="midnight"] .theme-navigation::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  html[data-theme="midnight"] .theme-navigation > a {
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 13px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 13px;
    color: #d5d9e2;
    text-decoration: none;
    font-size: .81rem;
    font-weight: 560;
    transition: color .16s ease,border-color .16s ease,background .16s ease;
  }

  html[data-theme="midnight"] .theme-navigation > a:hover,
  html[data-theme="midnight"] .theme-navigation > a.active {
    border-color: color-mix(in srgb,var(--rf-primary) 52%,transparent);
    color: #fff;
    background: linear-gradient(90deg,color-mix(in srgb,var(--rf-primary) 24%,transparent),color-mix(in srgb,var(--rf-primary) 12%,transparent));
  }

  html[data-theme="midnight"] .theme-navigation > a.active {
    box-shadow: inset 3px 0 0 color-mix(in srgb,var(--rf-primary) 78%,#fff),0 0 22px color-mix(in srgb,var(--rf-primary) 5%,transparent);
  }

  html[data-theme="midnight"] .theme-nav-icon {
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    color: #c9ced8;
  }

  html[data-theme="midnight"] .theme-nav-icon svg {
    width: 22px;
    height: 22px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html[data-theme="midnight"] .theme-navigation > a:hover .theme-nav-icon,
  html[data-theme="midnight"] .theme-navigation > a.active .theme-nav-icon {
    color: color-mix(in srgb,var(--rf-primary) 72%,#fff);
  }

  html[data-theme="midnight"] .site-nav {
    position: absolute;
    width: 0;
    height: 0;
    min-height: 0;
    overflow: visible;
    padding: 0;
  }

  html[data-theme="midnight"] .site-nav > a,
  html[data-theme="midnight"] .site-nav > .nav-more,
  html[data-theme="midnight"] .site-nav > .nav-coin-balance {
    display: none !important;
  }

  html[data-theme="midnight"] .locale-switcher {
    display: none;
  }

  html[data-theme="midnight"] .theme-rail-footer {
    width: var(--rf-sidebar);
    min-height: 0;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }

  html[data-theme="midnight"] .theme-support-card {
    max-width: calc(100% - 4px);
    box-sizing: border-box;
    margin: 0 2px;
    border-color: rgba(255,255,255,.11);
    border-radius: 9px;
    padding: 12px 13px;
    background: rgba(4,8,17,.91);
  }

  html[data-theme="midnight"] .theme-support-card span::before {
    content: "♛";
    margin-right: 8px;
    color: #ffb326;
    font-size: .92rem;
  }

  html[data-theme="midnight"] .theme-support-card strong {
    padding: 8px;
    background: linear-gradient(90deg,#702bd4,#5a23b7);
  }

  html[data-theme="midnight"] .theme-topbar {
    height: 74px;
    padding: 0 245px 0 30px;
    background: rgba(5,12,22,.96);
    backdrop-filter: blur(14px);
  }

  html[data-theme="midnight"] .theme-topbar form {
    position:absolute;
    left:50%;
    width:min(640px,calc(100% - 430px));
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    margin:0;
    border-color: rgba(255,255,255,.075);
    background: rgba(13,22,36,.72);
    transform:translateX(-50%);
  }

  html[data-theme="midnight"] .theme-topbar input,
  html[data-theme="midnight"] .theme-search-type {
    min-height: 28px;
    height: 28px;
  }

  html[data-theme="midnight"] .notification-menu {
    position: fixed;
    z-index: 8101;
    top: 22px;
    right: 194px;
  }

  html[data-theme="midnight"] .theme-notification-link {
    position: relative;
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border:0;
    color: #d9dde5;
    background:transparent;
    text-decoration: none;
    cursor:pointer;
  }

  html[data-theme="midnight"] .theme-notification-link > i {
    position: relative;
    width: 15px;
    height: 15px;
    border: 1.7px solid currentColor;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    border-bottom: 0;
  }

  html[data-theme="midnight"] .theme-notification-link > i::before {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: -4px;
    height: 5px;
    border: 1.7px solid currentColor;
    border-top: 0;
    border-radius: 0 0 8px 8px;
  }

  html[data-theme="midnight"] .theme-notification-link > i::after {
    content: "";
    position: absolute;
    left: 5px;
    bottom: -8px;
    width: 4px;
    height: 2px;
    border-radius: 50%;
    background: currentColor;
  }

  html[data-theme="midnight"] .theme-notification-link > b {
    position: absolute;
    top: -3px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border: 2px solid #07101c;
    border-radius: 99px;
    padding: 0 3px;
    color: #fff;
    background: #ef315b;
    font-size: .52rem;
  }

  html[data-theme="midnight"] .theme-notification-link > b[hidden] {
    display:none;
  }

  html[data-theme="midnight"] .notification-popover {
    top:calc(100% + 13px);
    right:-14px;
  }

  html[data-theme="midnight"] .account-menu {
    top: 15px;
    right: 20px;
  }

  html[data-theme="midnight"] .account-trigger {
    width: 158px;
    min-width: 158px;
    min-height: 44px;
    gap: 9px;
    padding: 3px 0;
  }

  html[data-theme="midnight"] .account-trigger .avatar {
    width: 40px;
    height: 40px;
    border: 2px solid color-mix(in srgb,var(--rf-primary) 70%,#ff3f9f);
  }

  html[data-theme="midnight"] .account-trigger-copy {
    max-width: 80px;
    line-height: 1.15;
  }

  html[data-theme="midnight"] .account-trigger-copy strong {
    color: #f0f2f6;
    font-size: .78rem;
  }

  html[data-theme="midnight"] .account-trigger-copy small {
    color: #8f98a9;
    font-size: .62rem;
  }

  html[data-theme="midnight"] .account-trigger::after {
    content: "⌄";
    margin-left: auto;
    color: #8790a0;
    font-size: .85rem;
  }

}

/* Midnight application pages
   --------------------------
   Home already owns a purpose-built dashboard. Every other route uses this
   compact application workspace, while Studio keeps the original layouts. */
html[data-theme="midnight"] body:not(.page-home) .site-main {
  position: relative;
  isolation: isolate;
}

html[data-theme="midnight"] body:not(.page-home) .site-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 0, color-mix(in srgb, var(--rf-primary) 8%, transparent), transparent 26rem),
    radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--rf-secondary) 4%, transparent), transparent 30rem);
  mask-image: linear-gradient(#000 0 72%, transparent);
}

html[data-theme="midnight"] body:not(.page-home) .site-main > .section-sm,
html[data-theme="midnight"] body:not(.page-home) .site-main > .section {
  padding-block: 28px 54px;
}

html[data-theme="midnight"] body:not(.page-home) .site-main > .auth-page {
  padding-block: 28px 48px;
}

html[data-theme="midnight"] body:not(.page-home) .site-main .shell {
  width: min(var(--rf-content-max), calc(100% - 60px));
}

html[data-theme="midnight"] body:not(.page-home) :is(
  .dashboard-head,
  .catalog-hero,
  .notifications-hero,
  .stats-hero,
  .search-hero,
  .leaderboard-hero,
  .public-library-hero,
  .section-heading
) {
  margin-bottom: 18px;
}

html[data-theme="midnight"] body:not(.page-home) :is(
  .dashboard-head,
  .catalog-hero,
  .notifications-hero,
  .stats-hero,
  .leaderboard-hero,
  .public-library-hero
) {
  min-height: 92px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 18px;
  padding: 18px 20px;
  background:
    linear-gradient(125deg, color-mix(in srgb, var(--rf-primary) 8%, transparent), transparent 35%),
    linear-gradient(145deg, rgba(15, 22, 36, .98), rgba(10, 17, 29, .96));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .12);
}

html[data-theme="midnight"] body:not(.page-home) :is(
  .dashboard-head,
  .catalog-hero,
  .notifications-hero,
  .stats-hero,
  .leaderboard-hero,
  .public-library-hero,
  .search-hero,
  .section-heading
) h1 {
  margin: 2px 0 5px;
  color: #f7f7fb;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.12;
}

html[data-theme="midnight"] body:not(.page-home) :is(
  .dashboard-head,
  .catalog-hero,
  .notifications-hero,
  .stats-hero,
  .leaderboard-hero,
  .public-library-hero,
  .search-hero,
  .section-heading
) .kicker {
  max-width: 780px;
  margin: 0;
  color: #929cad;
  font-size: .82rem;
  line-height: 1.5;
}

html[data-theme="midnight"] body:not(.page-home) :is(
  .panel,
  .auth-card,
  .library-card,
  .shop-card,
  .friend-card,
  .reader-result,
  .profile-library-card,
  .public-library-card,
  .quest-card,
  .achievement-card,
  .inventory-card,
  .guild-card,
  .search-result-grid > a,
  .stats-summary-grid > article
) {
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(15, 22, 36, .98), rgba(10, 17, 29, .96)) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .12) !important;
}

html[data-theme="midnight"] body:not(.page-home) :is(
  .catalog-controls,
  .library-filter-bar,
  .public-library-controls,
  .inventory-toolbar,
  .achievement-tabs,
  .rank-tabs,
  .category-tabs,
  .settings-nav,
  .admin-tabs
) {
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 12px !important;
  background: rgba(10, 17, 29, .92) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}

html[data-theme="midnight"] body:not(.page-home) :is(
  .stats-grid,
  .stats-summary-grid,
  .admin-stat-grid,
  .level-stats
) {
  gap: 10px;
}

html[data-theme="midnight"] body:not(.page-home) :is(
  .stat-card,
  .stats-summary-grid > article,
  .admin-stat-grid > div,
  .level-stats > span
) {
  min-height: 92px;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 12px !important;
  background: #0b1320 !important;
  box-shadow: none !important;
}

html[data-theme="midnight"] body:not(.page-home) :is(
  .stat-card,
  .stats-summary-grid > article,
  .admin-stat-grid > div
) strong {
  color: #f4f6fa;
}

html[data-theme="midnight"] body:not(.page-home) :is(
  .panel-title,
  .catalog-group-heading,
  .rf-home-section-heading
) {
  min-height: 34px;
  align-items: center;
  margin-bottom: 13px;
}

html[data-theme="midnight"] body:not(.page-home) .panel-title h2 {
  color: #f4f5f8;
  font-size: 1.02rem;
  letter-spacing: -.015em;
}

html[data-theme="midnight"] body:not(.page-home) :is(
  .library-card,
  .shop-card,
  .friend-card,
  .quest-card,
  .achievement-card,
  .inventory-card,
  .guild-card,
  .public-library-card,
  .search-result-grid > a
):hover {
  border-color: color-mix(in srgb, var(--rf-primary) 52%, rgba(255, 255, 255, .075)) !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .22) !important;
}

html[data-theme="midnight"] body.page-dashboard .library-grid,
html[data-theme="midnight"] body.page-library .library-grid,
html[data-theme="midnight"] body.page-bookmarks .library-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

html[data-theme="midnight"] body:is(.page-dashboard, .page-library, .page-bookmarks) .library-card {
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 100%;
}

html[data-theme="midnight"] body:is(.page-dashboard, .page-library, .page-bookmarks) .library-card-body {
  align-content: start;
  gap: 12px;
  padding: 18px;
}

html[data-theme="midnight"] body:is(.page-dashboard, .page-library, .page-bookmarks) .library-card-title h2 {
  font-size: 1.08rem;
}

html[data-theme="midnight"] body.page-settings .settings-layout {
  grid-template-columns: 245px minmax(0, 1fr);
  align-items: start;
}

html[data-theme="midnight"] body.page-settings .settings-content,
html[data-theme="midnight"] body.page-admin .settings-content {
  gap: 14px;
}

html[data-theme="midnight"] body.page-catalog .catalog-controls {
  top: calc(var(--rf-topbar) + 12px);
}

html[data-theme="midnight"] body.page-catalog .catalog-grid {
  gap: 12px;
}

html[data-theme="midnight"] body.page-profile .profile-page,
html[data-theme="midnight"] body.page-series .series-page {
  padding-bottom: 54px;
}

html[data-theme="midnight"] body.page-series .series-hero,
html[data-theme="midnight"] body.page-profile .profile-shell {
  border-radius: 18px;
}

html[data-theme="midnight"] body:is(.page-login, .page-register) .auth-page {
  grid-template-columns: minmax(280px, .8fr) minmax(360px, .62fr);
  gap: clamp(28px, 6vw, 84px);
}

html[data-theme="midnight"] body:is(.page-login, .page-register) .auth-art {
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 48px);
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--rf-primary) 16%, transparent), transparent 48%),
    #0a111d;
}

@media (max-width: 1220px) {
  html[data-theme="midnight"] body.page-dashboard .library-grid,
  html[data-theme="midnight"] body.page-library .library-grid,
  html[data-theme="midnight"] body.page-bookmarks .library-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  html[data-theme="midnight"] body:not(.page-home) .site-main > .section-sm,
  html[data-theme="midnight"] body:not(.page-home) .site-main > .section {
    padding-block: 20px 38px;
  }

  html[data-theme="midnight"] body:not(.page-home) :is(
    .dashboard-head,
    .catalog-hero,
    .notifications-hero,
    .stats-hero,
    .leaderboard-hero,
    .public-library-hero
  ) {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  html[data-theme="midnight"] body.page-settings .settings-layout,
  html[data-theme="midnight"] body:is(.page-login, .page-register) .auth-page {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 981px) and (max-height: 800px) {
  html[data-theme="midnight"] .theme-rail-footer {
    min-height: 0;
  }

  html[data-theme="midnight"] .theme-support-card {
    margin-top: 0;
  }
}

@media (min-width: 981px) and (max-height: 620px) {
  html[data-theme="midnight"] .theme-rail-footer {
    min-height: 92px;
  }

  html[data-theme="midnight"] .theme-support-card small {
    display: none;
  }

  html[data-theme="midnight"] .theme-support-card {
    margin: 0 7px 7px;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  html[data-theme="midnight"] {
    --rf-sidebar: 214px;
  }

  html[data-theme="midnight"] .theme-topbar {
    padding-right: 350px;
    padding-left: 20px;
  }
}

@media (max-width: 980px) {
  html[data-theme="midnight"] {
    --rf-topbar: 0px;
  }

  html[data-theme="midnight"] .site-header {
    border-radius: 11px;
    background: color-mix(in srgb, var(--rf-bg) 94%, #020713) !important;
  }

  html[data-theme="midnight"] .brand-mark {
    width: 32px;
    height: 30px;
    transform: none;
  }

  html[data-theme="midnight"] .brand-mark i {
    top: 4px;
    width: 15px;
    height: 22px;
    border: 2px solid color-mix(in srgb, var(--rf-primary) 82%, #fff);
    border-radius: 2px 2px 7px 2px;
    background: color-mix(in srgb, var(--rf-primary) 32%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--rf-primary) 26%, transparent);
  }

  html[data-theme="midnight"] .brand-mark i:nth-child(1) {
    left: 1px;
    transform: skewY(18deg);
  }

  html[data-theme="midnight"] .brand-mark i:nth-child(2) {
    top: 4px;
    right: 1px;
    transform: skewY(-18deg);
  }

  html[data-theme="midnight"] .brand-mark i:nth-child(3) {
    top: 3px;
    left: 15px;
    width: 2px;
    height: 25px;
    border: 0;
    border-radius: 2px;
    background: color-mix(in srgb, var(--rf-primary) 82%, #fff);
    transform: none;
  }

  html[data-theme="midnight"] .theme-nav-glyph {
    width: 22px;
    display: inline-grid;
    place-items: center;
    margin-right: 8px;
    color: color-mix(in srgb, var(--rf-primary) 74%, #fff);
  }

  html[data-theme="midnight"] .theme-topbar,
  html[data-theme="midnight"] .theme-rail-footer {
    display: none;
  }

  html[data-theme="midnight"] .site-main {
    margin-left: 0;
    padding-top: 0;
  }

  html[data-theme="midnight"] .home-hero {
    padding-top: 42px;
  }

  html[data-theme="midnight"] .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-theme="midnight"] .hero-panels {
    width: min(580px, 100%);
    margin-inline: auto;
  }

  html[data-theme="midnight"] .site-search-dock {
    display: none;
  }

  html[data-theme="midnight"] .theme-topbar {
    position: relative;
    inset: auto;
    width: min(720px, calc(100% - 24px));
    height: auto;
    display: block;
    margin: 10px auto 0;
    border: 0;
    padding: 0;
    background: transparent;
  }

  html[data-theme="midnight"] .theme-topbar form {
    position:static;
    flex:1;
    width:auto;
    min-height: 48px;
    display: grid;
    grid-template-columns: 22px auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--rf-line);
    border-radius: 9px;
    padding: 5px 8px 5px 12px;
    background: color-mix(in srgb, var(--rf-surface) 91%, #020713);
    transform:none;
  }

  html[data-theme="midnight"] .notification-menu {
    position:relative;
    inset:auto;
    z-index:100;
  }

  html[data-theme="midnight"] .theme-notification-link {
    position:relative;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid var(--rf-line);
    border-radius:9px;
    color:var(--rf-text);
    background:color-mix(in srgb,var(--rf-surface) 91%,#020713);
  }

  html[data-theme="midnight"] .notification-popover {
    position:absolute;
    top:calc(100% + 8px);
    right:0;
  }

  html[data-theme="midnight"] .theme-topbar-icon {
    position: relative;
    width: 13px;
    height: 13px;
    display: block;
    border: 2px solid var(--rf-muted);
    border-radius: 50%;
    padding: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
  }

  html[data-theme="midnight"] .theme-topbar-icon::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -3px;
    width: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--rf-muted);
    transform: rotate(45deg);
  }

  html[data-theme="midnight"] .theme-topbar input {
    min-width: 0;
    width: 100%;
    min-height: 0;
    height: 28px;
    border: 0 !important;
    outline: 0;
    padding: 5px;
    color: var(--rf-text);
    background: transparent !important;
    box-shadow: none !important;
    font-size: .72rem;
  }

  html[data-theme="midnight"] .theme-topbar kbd {
    min-width: 22px;
    display: grid;
    place-items: center;
    border: 1px solid var(--rf-line);
    border-radius: 5px;
    color: var(--rf-muted);
    font-size: .62rem;
  }
}

/* Keep the ReaderFlow mark identical across Midnight, Studio, and custom palettes. */
html[data-theme="midnight"] .brand-mark {
  width: 31px;
  height: 36px;
  transform: skewY(-7deg);
}
html[data-theme="midnight"] .brand-mark i {
  width: 19px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rf-primary), var(--rf-secondary));
  box-shadow: none;
  transform: none;
}
html[data-theme="midnight"] .brand-mark i:nth-child(1) { top: 4px; left: 0; }
html[data-theme="midnight"] .brand-mark i:nth-child(2) { top: 14px; right: 0; }
html[data-theme="midnight"] .brand-mark i:nth-child(3) { top: 24px; left: 3px; width: 19px; height: 6px; }

@media (max-width: 640px) {
  html[data-theme="midnight"] .shell {
    width: min(100% - 24px, 1320px);
  }

  html[data-theme="midnight"] .section-heading {
    align-items: flex-start;
  }

  html[data-theme="midnight"] .panel-body {
    padding: 17px;
  }

  html[data-theme="midnight"] .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  html[data-theme="midnight"] .series-card {
    min-height: 275px;
  }

  html[data-theme="midnight"] .continue-spotlight {
    width: calc(100% - 24px);
  }
}

/* Keep the compact search control on one visual baseline at every breakpoint.
   Global form styles otherwise force the native select outside the search rail. */
html[data-theme="midnight"] .theme-search-type {
  width:auto !important;
  min-width:82px;
  min-height:28px !important;
  height:28px !important;
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  padding:2px 20px 2px 2px;
  background-color:transparent !important;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--rf-muted) 50%),
    linear-gradient(135deg,var(--rf-muted) 50%,transparent 50%) !important;
  background-position:
    calc(100% - 9px) 12px,
    calc(100% - 5px) 12px !important;
  background-repeat:no-repeat !important;
  background-size:4px 4px,4px 4px !important;
  box-shadow:none !important;
}

html[data-theme="midnight"] .theme-search-type:hover,
html[data-theme="midnight"] .theme-search-type:focus {
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

html[data-theme="midnight"] .theme-topbar input {
  min-height:28px !important;
  height:28px !important;
}

@media (max-width:980px) {
  html[data-theme="midnight"] .theme-topbar {
    display:flex;
    align-items:center;
    gap:8px;
  }
}

@media (max-width: 420px) {
  html[data-theme="midnight"] .card-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="midnight"] *,
  html[data-theme="midnight"] *::before,
  html[data-theme="midnight"] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Production visual baseline */
html[data-theme="midnight"] {
  --rf-radius: 8px;
}

html[data-theme="midnight"] body {
  background: color-mix(in srgb, var(--rf-bg) 97%, #000) !important;
}

html[data-theme="midnight"] body::before,
html[data-theme="midnight"] body:not(.page-home) .site-main::before,
html[data-theme="midnight"] .panel::after {
  display: none;
}

html[data-theme="midnight"] h1,
html[data-theme="midnight"] h2,
html[data-theme="midnight"] h3,
html[data-theme="midnight"] body:not(.page-home) .panel-title h2 {
  letter-spacing: 0;
}

html[data-theme="midnight"] .panel,
html[data-theme="midnight"] body:not(.page-home) :is(
  .panel,
  .auth-card,
  .library-card,
  .shop-card,
  .friend-card,
  .reader-result,
  .profile-library-card,
  .public-library-card,
  .quest-card,
  .achievement-card,
  .inventory-card,
  .guild-card,
  .search-result-grid > a,
  .stats-summary-grid > article
) {
  border-color: var(--rf-line) !important;
  border-radius: 8px !important;
  background: var(--rf-surface) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14) !important;
}

html[data-theme="midnight"] .button,
html[data-theme="midnight"] button.button {
  background: var(--rf-primary);
  box-shadow: none;
}

html[data-theme="midnight"] .button:hover,
html[data-theme="midnight"] .continue-resume:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

html[data-theme="midnight"] .progress-track > span,
html[data-theme="midnight"] .progress-track > i {
  background: var(--rf-primary);
  box-shadow: none;
}

html[data-theme="midnight"] .series-card:hover {
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}

html[data-theme="midnight"] .readerflow-web-dialog-9f3a,
html[data-theme="midnight"] .review-dialog {
  border-radius: 8px;
  background: var(--rf-surface);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .5);
}

html[data-theme="midnight"] body:not(.page-home) :is(
  .dashboard-head,
  .catalog-hero,
  .notifications-hero,
  .stats-hero,
  .leaderboard-hero,
  .public-library-hero
) {
  border-color: var(--rf-line);
  border-radius: 8px;
  background: var(--rf-surface);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

html[data-theme="midnight"] body:not(.page-home) :is(
  .catalog-controls,
  .library-filter-bar,
  .public-library-controls,
  .inventory-toolbar,
  .achievement-tabs,
  .rank-tabs,
  .category-tabs,
  .settings-nav,
  .admin-tabs
) {
  border-radius: 8px !important;
  background: var(--rf-surface) !important;
  backdrop-filter: none;
}

html[data-theme="midnight"] body:is(.page-login, .page-register) .auth-art {
  border-color: var(--rf-line);
  border-radius: 8px;
  background: var(--rf-surface);
}

@media (min-width: 981px) {
  html[data-theme="midnight"] .site-header,
  html[data-theme="midnight"] .theme-topbar {
    background: color-mix(in srgb, var(--rf-bg) 96%, #000) !important;
    backdrop-filter: none;
  }

  html[data-theme="midnight"] .brand-mark i,
  html[data-theme="midnight"] .site-nav > a.active::after {
    box-shadow: none;
  }

  html[data-theme="midnight"] .site-nav > a:hover,
  html[data-theme="midnight"] .site-nav > a.active,
  html[data-theme="midnight"] .nav-more-popover a:hover,
  html[data-theme="midnight"] .nav-more-popover a.active {
    background: color-mix(in srgb, var(--rf-primary) 14%, transparent) !important;
  }

  html[data-theme="midnight"] .theme-support-card strong {
    background: var(--rf-primary);
  }
}

@media (max-width: 980px) {
  html[data-theme="midnight"] .brand-mark i {
    box-shadow: none;
  }
}