:root {
  --theme-primary: #1f1f1f;
  --theme-surface: #2b2b2b;
  --theme-accent: #ffbf00;
  --theme-soft: #fff6d6;
  --theme-text: #ffffff;
  --theme-accent-text: #1f1f1f;
  --theme-accent-rgb: 255, 191, 0;

  --background: #1f1f1f;
  --card: #2b2b2b;
  --accent: #ffbf00;

  --page-background: #f4f4f5;
  --white: #ffffff;
  --black: #111111;
  --ink: #19191c;
  --muted: #71717a;
  --soft-muted: #a1a1aa;
  --line: #e4e4e7;
  --danger: #d92d20;
  --success: #18864b;

  --shadow-small:
    0 8px 24px
    rgba(0, 0, 0, 0.09);

  --shadow-medium:
    0 16px 42px
    rgba(0, 0, 0, 0.14);

  --shadow-large:
    0 30px 80px
    rgba(0, 0, 0, 0.24);
}

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

html {
  width: 100%;
  min-height: 100%;
  margin: 0;

  background:
    var(
      --theme-primary,
      #1f1f1f
    );

  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;

  color:
    var(
      --ink,
      #19191c
    );

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    var(
      --page-background,
      #f4f4f5
    );

  overflow-x: hidden;
}

body,
button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color:
    transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

#app {
  display: block;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

[hidden] {
  display: none !important;
}

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

.primary-button,
.secondary-button,
.danger-button,
.text-button {
  display: inline-flex;
  min-height: 46px;

  align-items: center;
  justify-content: center;

  padding: 12px 20px;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;

  border-radius: 14px;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

.primary-button {
  color:
    var(
      --theme-accent-text,
      #1f1f1f
    );

  background:
    var(
      --theme-accent,
      #ffbf00
    );

  border:
    1px solid
    var(
      --theme-accent,
      #ffbf00
    );

  box-shadow:
    0 12px 28px
    rgba(
      var(
        --theme-accent-rgb,
        255,
        191,
        0
      ),
      0.24
    );
}

.secondary-button {
  color:
    var(
      --ink,
      #19191c
    );

  background: #ffffff;

  border:
    1px solid
    var(
      --line,
      #e4e4e7
    );
}

.danger-button {
  color:
    var(
      --danger,
      #d92d20
    );

  background: #fff1f0;

  border:
    1px solid
    #ffd0cc;
}

.text-button {
  min-height: auto;
  padding: 4px;

  color:
    var(
      --theme-accent,
      #ffbf00
    );

  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

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

.primary-button:active,
.secondary-button:active,
.danger-button:active {
  transform:
    translateY(0);
}

.full-width-button {
  width: 100%;
}

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

.form-field {
  display: grid;
  gap: 8px;
}

.form-field label {
  color:
    var(
      --ink,
      #19191c
    );

  font-size: 13px;
  font-weight: 800;
}

.form-input {
  display: block;
  width: 100%;
  min-height: 52px;

  padding: 13px 15px;

  color:
    var(
      --ink,
      #19191c
    );

  font-size: 16px;

  background: #ffffff;

  border:
    1px solid
    var(
      --line,
      #e4e4e7
    );

  border-radius: 14px;
  outline: none;

  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.form-input::placeholder {
  color: #a1a1aa;
}

.form-input:focus {
  border-color:
    var(
      --theme-accent,
      #ffbf00
    );

  box-shadow:
    0 0 0 4px
    rgba(
      var(
        --theme-accent-rgb,
        255,
        191,
        0
      ),
      0.16
    );
}

/* =========================================================
   INITIAL LOADER
   ========================================================= */

.initial-loader {
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding:
    calc(
      36px +
      env(
        safe-area-inset-top
      )
    )
    24px
    calc(
      36px +
      env(
        safe-area-inset-bottom
      )
    );

  color: #ffffff;
  text-align: center;

  background:
    radial-gradient(
      circle at top,
      rgba(
        var(
          --theme-accent-rgb,
          255,
          191,
          0
        ),
        0.2
      ),
      transparent 38%
    ),
    var(
      --theme-primary,
      #1f1f1f
    );
}

.initial-loader__mark {
  display: flex;
  width: 76px;
  height: 76px;

  align-items: center;
  justify-content: center;

  margin-bottom: 22px;

  color:
    var(
      --theme-accent-text,
      #1f1f1f
    );

  font-size: 30px;
  font-weight: 900;

  background:
    var(
      --theme-accent,
      #ffbf00
    );

  border-radius: 24px;

  box-shadow:
    var(
      --shadow-large
    );
}

.initial-loader__mark sup {
  position: relative;
  top: -0.35em;

  margin-left: 1px;

  font-size: 0.5em;
}

.initial-loader h1 {
  margin: 0 0 9px;

  font-size: 30px;
  line-height: 1.15;
}

.initial-loader p {
  max-width: 420px;
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  font-size: 15px;
  line-height: 1.55;
}

.loader-retry-button {
  width: auto;
  min-width: 160px;
  margin-top: 24px;
}

.noscript-page {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;

  align-items: center;
  justify-content: center;

  padding: 32px;

  color: #ffffff;
  text-align: center;

  background:
    var(
      --theme-primary,
      #1f1f1f
    );
}

/* =========================================================
   TOAST
   ========================================================= */

#toast {
  position: fixed;
  left: 50%;
  bottom:
    calc(
      28px +
      env(
        safe-area-inset-bottom
      )
    );

  z-index: 100000;

  width: auto;
  max-width:
    calc(
      100% - 40px
    );

  padding: 13px 18px;

  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;

  pointer-events: none;

  background:
    rgba(
      20,
      20,
      22,
      0.96
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );

  border-radius: 14px;

  box-shadow:
    var(
      --shadow-medium
    );

  visibility: hidden;
  opacity: 0;

  transform:
    translate(
      -50%,
      18px
    );

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease;
}

#toast.show {
  visibility: visible;
  opacity: 1;

  transform:
    translate(
      -50%,
      0
    );
}

/* =========================================================
   AUTHENTICATION PAGE
   ========================================================= */

.auth-page {
  position: relative;
  isolation: isolate;

  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  align-items: stretch;

  overflow: hidden;

  color: #ffffff;

  background:
    radial-gradient(
      circle at top left,
      rgba(
        var(
          --theme-accent-rgb,
          255,
          191,
          0
        ),
        0.18
      ),
      transparent 42%
    ),
    var(
      --theme-primary,
      #1f1f1f
    );
}

.auth-page-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      135deg,
      rgba(
        0,
        0,
        0,
        0.06
      ),
      rgba(
        0,
        0,
        0,
        0.36
      )
    );

  pointer-events: none;
}

.auth-layout {
  display: grid;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  grid-template-columns:
    minmax(
      0,
      1.1fr
    )
    minmax(
      420px,
      0.9fr
    );
}

.auth-brand-panel {
  display: flex;
  min-width: 0;

  align-items: center;
  justify-content: center;

  padding:
    calc(
      54px +
      env(
        safe-area-inset-top
      )
    )
    7vw
    calc(
      54px +
      env(
        safe-area-inset-bottom
      )
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        0,
        0,
        0,
        0.18
      ),
      rgba(
        0,
        0,
        0,
        0.56
      )
    );
}

.auth-brand-content {
  width: 100%;
  max-width: 660px;
}

.auth-brand-logo {
  display: block;
  width: auto;
  max-width: 100%;
  margin-bottom: 30px;

  object-fit: contain;
  object-position: left center;

  filter:
    drop-shadow(
      0 15px 30px
      rgba(
        0,
        0,
        0,
        0.34
      )
    );
}

.auth-brand-mark {
  display: flex;
  width: 86px;
  height: 86px;

  align-items: center;
  justify-content: center;

  margin-bottom: 25px;

  color:
    var(
      --theme-accent-text,
      #1f1f1f
    );

  font-size: 34px;
  font-weight: 900;

  background:
    var(
      --theme-accent,
      #ffbf00
    );

  border-radius: 25px;

  box-shadow:
    var(
      --shadow-large
    );
}

.auth-brand-mark sup {
  position: relative;
  top: -0.35em;

  font-size: 0.52em;
}

.auth-brand-content h1 {
  margin: 0 0 18px;

  font-size:
    clamp(
      42px,
      6vw,
      78px
    );

  line-height: 0.98;
  letter-spacing: -0.045em;
}

.auth-brand-tagline {
  max-width: 620px;
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.9
    );

  font-size:
    clamp(
      19px,
      2vw,
      27px
    );

  line-height: 1.4;
}

.auth-brand-divider {
  width: 80px;
  height: 4px;

  margin: 30px 0;

  background:
    var(
      --theme-accent,
      #ffbf00
    );

  border-radius: 999px;
}

.auth-brand-message {
  max-width: 560px;
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.68
    );

  font-size: 16px;
  line-height: 1.65;
}

.auth-form-panel {
  display: flex;
  min-width: 0;

  align-items: center;
  justify-content: center;

  padding:
    calc(
      44px +
      env(
        safe-area-inset-top
      )
    )
    clamp(
      28px,
      5vw,
      72px
    )
    calc(
      44px +
      env(
        safe-area-inset-bottom
      )
    );

  background:
    rgba(
      255,
      255,
      255,
      0.97
    );

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.auth-card {
  width: 100%;
  max-width: 470px;

  color:
    var(
      --ink,
      #19191c
    );
}

.auth-card-header {
  margin-bottom: 28px;
}

.auth-eyebrow {
  display: block;

  margin-bottom: 12px;

  color:
    var(
      --theme-accent,
      #ffbf00
    );

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.auth-card-header h2 {
  margin: 0 0 12px;

  font-size:
    clamp(
      32px,
      4vw,
      46px
    );

  line-height: 1.05;
  letter-spacing: -0.035em;
}

.auth-card-header p {
  margin: 0;

  color:
    var(
      --muted,
      #71717a
    );

  font-size: 15px;
  line-height: 1.6;
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-submit-button {
  width: 100%;
  min-height: 54px;
  margin-top: 4px;

  font-size: 16px;
}

.auth-card-footer {
  display: grid;
  gap: 14px;

  margin-top: 25px;

  color:
    var(
      --muted,
      #71717a
    );

  font-size: 14px;
  text-align: center;
}

.auth-card-footer p {
  margin: 0;
}

.auth-forgot-link {
  justify-self: center;
}

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

.member-app-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  color:
    var(
      --ink,
      #19191c
    );

  background:
    var(
      --page-background,
      #f4f4f5
    );
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  border-bottom:
    1px solid
    rgba(
      228,
      228,
      231,
      0.9
    );

  background:
    rgba(
      255,
      255,
      255,
      0.94
    );

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.app-header-inner {
  display: flex;
  width: 100%;
  max-width: 1440px;

  align-items: center;
  justify-content: space-between;

  margin: 0 auto;
  padding:
    calc(
      12px +
      env(
        safe-area-inset-top
      )
    )
    28px
    12px;
}

.app-header-left,
.app-header-actions {
  display: flex;
  gap: 12px;

  align-items: center;
}

.mobile-menu-button {
  display: none;
  width: 44px;
  height: 44px;

  align-items: center;
  justify-content: center;

  color:
    var(
      --ink,
      #19191c
    );

  font-size: 21px;

  background: #ffffff;

  border:
    1px solid
    var(
      --line,
      #e4e4e7
    );

  border-radius: 13px;
}

.app-brand-button {
  display: inline-flex;
  min-width: 0;

  align-items: center;

  padding: 0;

  color:
    var(
      --ink,
      #19191c
    );

  background: transparent;
  border: 0;
}

.app-header-logo,
.app-wordmark-image {
  width: auto;
  max-width: 190px;
  max-height: 46px;

  object-fit: contain;
}

.app-brand-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;

  align-items: center;
  justify-content: center;

  margin-right: 10px;

  color:
    var(
      --theme-accent-text,
      #1f1f1f
    );

  font-size: 18px;
  font-weight: 900;

  background:
    var(
      --theme-accent,
      #ffbf00
    );

  border-radius: 13px;
}

.app-brand-icon sup {
  position: relative;
  top: -0.3em;

  font-size: 0.5em;
}

.app-brand-name {
  font-size: 18px;
  font-weight: 900;
}

.app-desktop-nav {
  display: flex;
  gap: 6px;

  align-items: center;
}

.app-nav-button {
  display: inline-flex;
  gap: 7px;

  min-height: 42px;

  align-items: center;
  justify-content: center;

  padding: 10px 14px;

  color:
    var(
      --muted,
      #71717a
    );

  font-size: 13px;
  font-weight: 800;

  background: transparent;
  border: 0;
  border-radius: 12px;
}

.app-nav-button:hover,
.app-nav-button.active {
  color:
    var(
      --theme-accent-text,
      #1f1f1f
    );

  background:
    var(
      --theme-accent,
      #ffbf00
    );
}

.app-nav-icon {
  font-size: 16px;
}

.profile-button {
  display: flex;
  width: 44px;
  height: 44px;

  align-items: center;
  justify-content: center;

  color:
    var(
      --theme-accent-text,
      #1f1f1f
    );

  font-size: 15px;
  font-weight: 900;

  background:
    var(
      --theme-accent,
      #ffbf00
    );

  border: 0;
  border-radius: 50%;
}

.admin-link-button {
  min-height: 42px;
  padding: 10px 15px;
}

.member-main {
  width: 100%;
  max-width: 1440px;

  margin: 0 auto;
}

/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1990;

  visibility: hidden;
  opacity: 0;

  background:
    rgba(
      0,
      0,
      0,
      0.58
    );

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.mobile-nav-overlay.show {
  visibility: visible;
  opacity: 1;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;

  z-index: 2000;

  display: flex;
  width:
    min(
      340px,
      88vw
    );

  flex-direction: column;

  padding:
    calc(
      20px +
      env(
        safe-area-inset-top
      )
    )
    18px
    calc(
      20px +
      env(
        safe-area-inset-bottom
      )
    );

  color:
    var(
      --ink,
      #19191c
    );

  background: #ffffff;

  box-shadow:
    20px 0 60px
    rgba(
      0,
      0,
      0,
      0.2
    );

  transform:
    translateX(-105%);

  transition:
    transform 220ms ease;
}

.mobile-nav-drawer.open {
  transform:
    translateX(0);
}

.mobile-nav-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding-bottom: 18px;

  border-bottom:
    1px solid
    var(
      --line,
      #e4e4e7
    );
}

.mobile-nav-brand {
  display: flex;
  min-width: 0;

  align-items: center;
}

.mobile-nav-brand
  .app-header-logo,
.mobile-nav-brand
  .app-wordmark-image {
  max-width: 165px;
  max-height: 42px;
}

.mobile-nav-close {
  display: flex;
  width: 42px;
  height: 42px;

  align-items: center;
  justify-content: center;

  color:
    var(
      --ink,
      #19191c
    );

  font-size: 27px;

  background: #f4f4f5;
  border: 0;
  border-radius: 13px;
}

.mobile-nav-list {
  display: grid;
  gap: 7px;

  padding: 20px 0;
}

.mobile-nav-list
  .app-nav-button {
  width: 100%;

  justify-content: flex-start;

  padding: 13px 15px;
}

.mobile-nav-footer {
  display: grid;
  gap: 12px;

  margin-top: auto;
}

.mobile-member-summary {
  display: grid;
  gap: 3px;

  padding: 14px;

  background: #f4f4f5;
  border-radius: 14px;
}

.mobile-member-summary strong {
  font-size: 14px;
}

.mobile-member-summary span {
  overflow: hidden;

  color:
    var(
      --muted,
      #71717a
    );

  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   GENERAL MEMBER PAGE
   ========================================================= */

.member-page {
  width: 100%;

  padding:
    40px
    28px
    calc(
      54px +
      env(
        safe-area-inset-bottom
      )
    );
}

.member-eyebrow {
  display: block;

  margin-bottom: 10px;

  color:
    var(
      --theme-accent,
      #ffbf00
    );

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.page-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

.page-heading h1 {
  margin: 0 0 12px;

  color:
    var(
      --ink,
      #19191c
    );

  font-size:
    clamp(
      34px,
      5vw,
      54px
    );

  line-height: 1.04;
  letter-spacing: -0.035em;
}

.page-heading p {
  margin: 0;

  color:
    var(
      --muted,
      #71717a
    );

  font-size: 16px;
  line-height: 1.65;
}

.content-section {
  margin-top: 44px;
}

.section-heading {
  display: flex;
  gap: 18px;

  align-items: flex-end;
  justify-content: space-between;

  margin-bottom: 20px;
}

.section-heading span {
  display: block;

  margin-bottom: 5px;

  color:
    var(
      --theme-accent,
      #ffbf00
    );

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.section-heading h2 {
  margin: 0;

  color:
    var(
      --ink,
      #19191c
    );

  font-size:
    clamp(
      24px,
      4vw,
      34px
    );

  line-height: 1.12;
}

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

.member-hero {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(
      0,
      1.35fr
    )
    minmax(
      260px,
      0.65fr
    );

  gap: 30px;

  align-items: center;

  min-height: 360px;

  padding:
    clamp(
      32px,
      6vw,
      72px
    );

  overflow: hidden;

  color: #ffffff;

  background:
    radial-gradient(
      circle at top right,
      rgba(
        var(
          --theme-accent-rgb,
          255,
          191,
          0
        ),
        0.32
      ),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      var(
        --theme-primary,
        #1f1f1f
      ),
      var(
        --theme-surface,
        #2b2b2b
      )
    );

  border-radius: 30px;

  box-shadow:
    var(
      --shadow-medium
    );
}

.member-hero-copy {
  position: relative;
  z-index: 2;
}

.member-hero h1 {
  max-width: 760px;
  margin: 0 0 17px;

  font-size:
    clamp(
      38px,
      6vw,
      72px
    );

  line-height: 0.98;
  letter-spacing: -0.05em;
}

.member-hero p {
  max-width: 620px;
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.76
    );

  font-size: 17px;
  line-height: 1.6;
}

.member-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 26px;
}

.member-hero
  .secondary-button {
  color: #ffffff;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.25
    );
}

.member-hero-panel {
  position: relative;
  z-index: 2;
}

.member-status-card {
  display: grid;
  gap: 10px;

  padding: 26px;

  background:
    rgba(
      255,
      255,
      255,
      0.1
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.2
    );

  border-radius: 22px;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.member-status-card span {
  color:
    rgba(
      255,
      255,
      255,
      0.65
    );

  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.member-status-card strong {
  font-size: 27px;
  text-transform: capitalize;
}

.member-status-card small {
  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  line-height: 1.5;
}

/* =========================================================
   BOOK GRID AND CARDS
   ========================================================= */

.book-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap: 22px;
}

.book-card {
  min-width: 0;
  overflow: hidden;

  background: #ffffff;

  border:
    1px solid
    var(
      --line,
      #e4e4e7
    );

  border-radius: 20px;

  box-shadow:
    var(
      --shadow-small
    );

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.book-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    var(
      --shadow-medium
    );
}

.book-cover-button {
  position: relative;

  display: block;
  width: 100%;
  padding: 0;

  background: #ececef;
  border: 0;
}

.book-cover-image {
  width: 100%;
  aspect-ratio: 0.7;

  object-fit: cover;
}

.book-lock-badge,
.book-featured-badge {
  position: absolute;
  top: 12px;

  padding: 7px 10px;

  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;

  border-radius: 999px;
}

.book-lock-badge {
  right: 12px;

  color: #ffffff;

  background:
    rgba(
      0,
      0,
      0,
      0.72
    );
}

.book-featured-badge {
  left: 12px;

  color:
    var(
      --theme-accent-text,
      #1f1f1f
    );

  background:
    var(
      --theme-accent,
      #ffbf00
    );
}

.book-card-body {
  display: grid;
  gap: 7px;

  padding: 17px;
}

.book-tier-label {
  color:
    var(
      --theme-accent,
      #ffbf00
    );

  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.book-card h3 {
  display: -webkit-box;
  min-height: 44px;

  margin: 0;

  overflow: hidden;

  color:
    var(
      --ink,
      #19191c
    );

  font-size: 18px;
  line-height: 1.25;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.book-author {
  margin: 0;

  color:
    var(
      --muted,
      #71717a
    );

  font-size: 13px;
}

.book-card-button {
  width: 100%;
  margin-top: 8px;
}

.book-progress {
  display: grid;
  gap: 6px;

  margin-top: 7px;
}

.book-progress-track {
  height: 6px;

  overflow: hidden;

  background: #ececef;
  border-radius: 999px;
}

.book-progress-track span {
  display: block;
  height: 100%;

  background:
    var(
      --theme-accent,
      #ffbf00
    );

  border-radius: inherit;
}

.book-progress small {
  color:
    var(
      --muted,
      #71717a
    );

  font-size: 11px;
}

.empty-state {
  display: flex;
  min-height: 300px;

  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 38px;

  color:
    var(
      --muted,
      #71717a
    );

  text-align: center;

  background: #ffffff;

  border:
    1px dashed
    #d4d4d8;

  border-radius: 22px;
}

.empty-state-icon {
  margin-bottom: 14px;

  color:
    var(
      --theme-accent,
      #ffbf00
    );

  font-size: 44px;
}

.empty-state h2,
.empty-state h3 {
  margin: 0 0 10px;

  color:
    var(
      --ink,
      #19191c
    );
}

.empty-state p {
  max-width: 460px;
  margin: 0 0 20px;

  line-height: 1.6;
}

/* =========================================================
   PRICING PAGE
   ========================================================= */

.pricing-page {
  max-width: none;

  color: #ffffff;

  background:
    var(
      --theme-primary,
      #1f1f1f
    );

  border-radius: 0;
}

.pricing-hero {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1.3fr
    )
    minmax(
      260px,
      0.7fr
    );

  gap: 40px;

  align-items: center;

  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 0;
}

.pricing-hero-copy h1 {
  max-width: 850px;
  margin: 0 0 18px;

  font-size:
    clamp(
      38px,
      6vw,
      68px
    );

  line-height: 0.99;
  letter-spacing: -0.045em;
}

.pricing-hero-copy p {
  max-width: 720px;
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.74
    );

  font-size: 17px;
  line-height: 1.65;
}

.pricing-hero-image-wrap {
  display: flex;
  justify-content: center;
}

.pricing-hero-image {
  width: 100%;
  max-width: 420px;
  max-height: 320px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 24px 45px
      rgba(
        0,
        0,
        0,
        0.38
      )
    );
}

.pricing-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 24px;

  max-width: 1100px;
  margin: 12px auto 0;
}

.pricing-card {
  position: relative;

  overflow: hidden;

  color:
    var(
      --ink,
      #19191c
    );

  background:
    rgba(
      255,
      255,
      255,
      0.98
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.32
    );

  border-radius: 28px;

  box-shadow:
    var(
      --shadow-large
    );
}

.pricing-card.featured {
  outline:
    3px solid
    var(
      --theme-accent,
      #ffbf00
    );

  transform:
    translateY(-7px);
}

.pricing-card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;

  padding: 7px 11px;

  color:
    var(
      --theme-accent-text,
      #1f1f1f
    );

  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;

  background:
    var(
      --theme-accent,
      #ffbf00
    );

  border-radius: 999px;
}

.pricing-card-image-wrap {
  height: 190px;
  overflow: hidden;
}

.pricing-card-image {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.pricing-card-content {
  padding: 28px;
}

.pricing-plan-name {
  display: block;

  margin-bottom: 10px;

  color:
    var(
      --theme-accent,
      #ffbf00
    );

  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.pricing-card h2 {
  margin: 0 0 12px;

  font-size: 29px;
  line-height: 1.12;
}

.pricing-plan-description {
  min-height: 48px;

  margin: 0;

  color:
    var(
      --muted,
      #71717a
    );

  line-height: 1.55;
}

.pricing-price {
  display: flex;
  gap: 10px;

  align-items: flex-end;

  margin: 24px 0;
}

.pricing-price strong {
  font-size: 46px;
  line-height: 1;
}

.pricing-price span {
  padding-bottom: 6px;

  color:
    var(
      --muted,
      #71717a
    );

  font-size: 13px;
}

.pricing-feature-list {
  display: grid;
  gap: 12px;

  padding: 0;
  margin: 0 0 26px;

  list-style: none;
}

.pricing-feature-list li {
  display: flex;
  gap: 10px;

  align-items: flex-start;

  color: #4b4b52;
  line-height: 1.45;
}

.pricing-check {
  display: flex;
  flex: 0 0 24px;

  width: 24px;
  height: 24px;

  align-items: center;
  justify-content: center;

  color:
    var(
      --theme-accent,
      #ffbf00
    );

  font-size: 12px;
  font-weight: 900;

  background:
    rgba(
      var(
        --theme-accent-rgb,
        255,
        191,
        0
      ),
      0.13
    );

  border-radius: 50%;
}

.pricing-footer {
  max-width: 900px;

  margin: 0 auto;
  padding: 38px 10px 10px;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  text-align: center;
}

.pricing-footer p {
  margin: 0 0 8px;
}

.pricing-footer small {
  font-size: 13px;
}

/* =========================================================
   ACCOUNT PAGE
   ========================================================= */

.account-layout {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      0.85fr
    )
    minmax(
      0,
      1.15fr
    );

  gap: 24px;
}

.account-profile-card,
.account-details-card {
  padding: 28px;

  background: #ffffff;

  border:
    1px solid
    var(
      --line,
      #e4e4e7
    );

  border-radius: 22px;

  box-shadow:
    var(
      --shadow-small
    );
}

.account-profile-card {
  display: flex;
  gap: 18px;

  align-items: center;
}

.account-avatar {
  display: flex;
  flex: 0 0 72px;

  width: 72px;
  height: 72px;

  align-items: center;
  justify-content: center;

  color:
    var(
      --theme-accent-text,
      #1f1f1f
    );

  font-size: 25px;
  font-weight: 900;

  background:
    var(
      --theme-accent,
      #ffbf00
    );

  border-radius: 50%;
}

.account-profile-copy {
  min-width: 0;
}

.account-profile-copy h2 {
  margin: 0 0 6px;

  font-size: 24px;
}

.account-profile-copy p {
  margin: 0;

  overflow: hidden;

  color:
    var(
      --muted,
      #71717a
    );

  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-details-card {
  display: grid;
  gap: 0;
}

.account-detail-row {
  display: flex;
  gap: 16px;

  align-items: center;
  justify-content: space-between;

  padding: 17px 0;

  border-bottom:
    1px solid
    var(
      --line,
      #e4e4e7
    );
}

.account-detail-row span {
  color:
    var(
      --muted,
      #71717a
    );
}

.status-text.active {
  color:
    var(
      --success,
      #18864b
    );
}

.status-text.inactive {
  color:
    var(
      --danger,
      #d92d20
    );
}

.account-actions {
  display: grid;
  gap: 11px;

  padding-top: 22px;
}

/* =========================================================
   READER
   ========================================================= */

.reader-page {
  background: #f5efe6;
}

.reader-header {
  display: flex;
  gap: 18px;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 28px;
}

.reader-book-heading {
  display: flex;
  flex: 1;
  gap: 18px;

  align-items: center;
}

.reader-book-cover {
  width: 72px;
  height: 102px;

  object-fit: cover;

  border-radius: 10px;

  box-shadow:
    var(
      --shadow-small
    );
}

.reader-book-heading h1 {
  margin: 0 0 6px;

  font-size:
    clamp(
      26px,
      4vw,
      40px
    );

  line-height: 1.06;
}

.reader-book-heading p {
  margin: 0;

  color:
    var(
      --muted,
      #71717a
    );
}

.reader-layout {
  display: grid;

  grid-template-columns:
    260px
    minmax(
      0,
      1fr
    );

  gap: 24px;

  align-items: start;
}

.reader-section-sidebar {
  position: sticky;
  top: 92px;

  padding: 20px;

  background:
    rgba(
      255,
      255,
      255,
      0.82
    );

  border:
    1px solid
    rgba(
      0,
      0,
      0,
      0.08
    );

  border-radius: 18px;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.reader-section-sidebar h2 {
  margin: 0 0 14px;

  font-size: 17px;
}

.reader-section-list {
  display: grid;
  gap: 7px;
}

.reader-section-button {
  width: 100%;

  padding: 11px 12px;

  color: #4f4b47;
  text-align: left;

  background: transparent;

  border:
    1px solid
    transparent;

  border-radius: 10px;
}

.reader-section-button:hover,
.reader-section-button.active {
  color:
    var(
      --theme-accent-text,
      #1f1f1f
    );

  font-weight: 800;

  background:
    var(
      --theme-accent,
      #ffbf00
    );
}

.reader-content {
  min-width: 0;

  padding:
    clamp(
      28px,
      5vw,
      62px
    );

  color: #302a24;

  background:
    rgba(
      255,
      255,
      255,
      0.9
    );

  border:
    1px solid
    rgba(
      0,
      0,
      0,
      0.07
    );

  border-radius: 22px;

  box-shadow:
    var(
      --shadow-small
    );
}

.reader-content-header {
  margin-bottom: 28px;
}

.reader-content-header h2 {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      29px,
      4vw,
      44px
    );

  line-height: 1.15;
}

.reader-prose {
  max-width: 820px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      18px,
      2.1vw,
      21px
    );

  line-height: 1.85;
}

.reader-prose p {
  margin: 0 0 1.4em;
}

.reader-pagination {
  display: flex;
  gap: 16px;

  align-items: center;
  justify-content: space-between;

  margin-top: 36px;
  padding-top: 24px;

  border-top:
    1px solid
    rgba(
      0,
      0,
      0,
      0.1
    );
}

.reader-document-link {
  display: grid;
  justify-items: start;
  gap: 12px;
}

/* =========================================================
   AUDIOBOOK PLAYER
   ========================================================= */

.listen-page {
  background:
    radial-gradient(
      circle at top,
      rgba(
        var(
          --theme-accent-rgb,
          255,
          191,
          0
        ),
        0.13
      ),
      transparent 38%
    ),
    var(
      --page-background,
      #f4f4f5
    );
}

.listen-header {
  display: flex;
  gap: 14px;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 24px;
}

.listen-layout {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    340px;

  gap: 24px;

  align-items: start;
}

.listen-player-card,
.audio-chapter-card {
  background: #ffffff;

  border:
    1px solid
    var(
      --line,
      #e4e4e7
    );

  border-radius: 24px;

  box-shadow:
    var(
      --shadow-medium
    );
}

.listen-player-card {
  display: grid;
  justify-items: center;

  padding:
    clamp(
      26px,
      5vw,
      50px
    );

  text-align: center;
}

.listen-cover {
  width:
    min(
      320px,
      72vw
    );

  aspect-ratio: 1;

  object-fit: cover;

  border-radius: 25px;

  box-shadow:
    0 25px 58px
    rgba(
      0,
      0,
      0,
      0.22
    );
}

.listen-book-copy {
  margin-top: 25px;
}

.listen-book-copy h1 {
  margin: 0 0 7px;

  font-size:
    clamp(
      28px,
      4vw,
      42px
    );

  line-height: 1.08;
}

.listen-book-copy p {
  margin: 0 0 15px;

  color:
    var(
      --muted,
      #71717a
    );
}

.listen-book-copy strong {
  display: block;

  color:
    var(
      --theme-accent,
      #ffbf00
    );

  font-size: 14px;
}

.audio-progress-wrap {
  width: 100%;
  max-width: 650px;

  margin-top: 30px;
}

.audio-progress-range {
  width: 100%;

  accent-color:
    var(
      --theme-accent,
      #ffbf00
    );
}

.audio-time-row {
  display: flex;
  justify-content: space-between;

  margin-top: 6px;

  color:
    var(
      --muted,
      #71717a
    );

  font-size: 12px;
}

.audio-controls {
  display: flex;
  gap: 12px;

  align-items: center;
  justify-content: center;

  margin: 22px 0;
}

.audio-control-button {
  display: flex;
  width: 50px;
  height: 50px;

  align-items: center;
  justify-content: center;

  color:
    var(
      --ink,
      #19191c
    );

  font-size: 18px;

  background: #f4f4f5;

  border:
    1px solid
    var(
      --line,
      #e4e4e7
    );

  border-radius: 50%;
}

.audio-control-button.primary {
  width: 72px;
  height: 72px;

  color:
    var(
      --theme-accent-text,
      #1f1f1f
    );

  font-size: 25px;

  background:
    var(
      --theme-accent,
      #ffbf00
    );

  border-color:
    var(
      --theme-accent,
      #ffbf00
    );

  box-shadow:
    0 15px 34px
    rgba(
      var(
        --theme-accent-rgb,
        255,
        191,
        0
      ),
      0.28
    );
}

.audio-speed-control {
  display: grid;
  gap: 7px;

  width: 100%;
  max-width: 220px;

  margin-top: 3px;

  text-align: left;
}

.audio-speed-control label {
  font-size: 12px;
  font-weight: 800;
}

.audio-chapter-card {
  position: sticky;
  top: 94px;

  max-height:
    calc(
      100vh - 120px
    );

  overflow: hidden;

  padding: 22px;
}

.audio-chapter-card h2 {
  margin: 0 0 16px;

  font-size: 21px;
}

.audio-chapter-list {
  display: grid;
  gap: 8px;

  max-height:
    calc(
      100vh - 200px
    );

  overflow-y: auto;
}

.audio-chapter-button {
  display: flex;
  gap: 12px;

  align-items: center;

  width: 100%;

  padding: 12px;

  color:
    var(
      --ink,
      #19191c
    );

  text-align: left;

  background: #f7f7f8;

  border:
    1px solid
    transparent;

  border-radius: 13px;
}

.audio-chapter-button span {
  display: flex;
  flex: 0 0 30px;

  width: 30px;
  height: 30px;

  align-items: center;
  justify-content: center;

  color:
    var(
      --muted,
      #71717a
    );

  font-size: 12px;

  background: #ffffff;
  border-radius: 50%;
}

.audio-chapter-button strong {
  overflow: hidden;

  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-chapter-button.active {
  color:
    var(
      --theme-accent-text,
      #1f1f1f
    );

  background:
    var(
      --theme-accent,
      #ffbf00
    );
}

.audio-chapter-button.active span {
  color:
    var(
      --theme-accent-text,
      #1f1f1f
    );
}

/* =========================================================
   TABLET
   ========================================================= */

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

  .app-desktop-nav {
    display: none;
  }

  .mobile-menu-button {
    display: flex;
  }

  .member-hero {
    grid-template-columns:
      1fr;
  }

  .member-hero-panel {
    max-width: 500px;
  }

  .listen-layout {
    grid-template-columns:
      1fr;
  }

  .audio-chapter-card {
    position: static;
    max-height: none;
  }

  .audio-chapter-list {
    max-height: none;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {
  body {
    background:
      var(
        --page-background,
        #f4f4f5
      );
  }

  .auth-page {
    overflow-y: auto;
  }

  .auth-layout {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .auth-brand-panel {
    min-height: 36vh;

    align-items: flex-end;
    justify-content: flex-start;

    padding:
      calc(
        36px +
        env(
          safe-area-inset-top
        )
      )
      24px
      34px;

    background:
      linear-gradient(
        180deg,
        rgba(
          0,
          0,
          0,
          0.24
        ),
        rgba(
          0,
          0,
          0,
          0.62
        )
      );
  }

  .auth-brand-content {
    max-width: 100%;
  }

  .auth-brand-logo {
    max-width: 86vw;
    max-height: 130px;
    margin-bottom: 20px;

    object-position: left center;
  }

  .auth-brand-mark {
    width: 64px;
    height: 64px;

    margin-bottom: 16px;

    font-size: 25px;
    border-radius: 19px;
  }

  .auth-brand-content h1 {
    margin-bottom: 11px;

    font-size: 40px;
  }

  .auth-brand-tagline {
    font-size: 17px;
  }

  .auth-brand-divider {
    display: none;
  }

  .auth-brand-message {
    display: none;
  }

  .auth-form-panel {
    min-height: 64vh;

    align-items: flex-start;

    padding:
      34px
      22px
      calc(
        40px +
        env(
          safe-area-inset-bottom
        )
      );

    border-radius:
      28px
      28px
      0
      0;

    box-shadow:
      0 -12px 38px
      rgba(
        0,
        0,
        0,
        0.16
      );
  }

  .auth-card-header {
    margin-bottom: 23px;
  }

  .auth-card-header h2 {
    font-size: 34px;
  }

  .auth-card-header p {
    font-size: 14px;
  }

  .app-header-inner {
    padding:
      calc(
        10px +
        env(
          safe-area-inset-top
        )
      )
      16px
      10px;
  }

  .app-header-logo,
  .app-wordmark-image {
    max-width: 142px;
    max-height: 40px;
  }

  .app-brand-name {
    display: none;
  }

  .app-brand-icon {
    margin-right: 0;
  }

  .admin-link-button {
    display: none;
  }

  .member-page {
    padding:
      24px
      16px
      calc(
        38px +
        env(
          safe-area-inset-bottom
        )
      );
  }

  .member-hero {
    min-height: auto;

    padding: 30px 22px;

    border-radius: 23px;
  }

  .member-hero h1 {
    font-size: 42px;
  }

  .member-hero p {
    font-size: 15px;
  }

  .member-hero-actions {
    display: grid;
  }

  .member-hero-actions
    .primary-button,
  .member-hero-actions
    .secondary-button {
    width: 100%;
  }

  .section-heading {
    align-items: center;
  }

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

    gap: 13px;
  }

  .book-card {
    border-radius: 16px;
  }

  .book-card-body {
    padding: 13px;
  }

  .book-card h3 {
    min-height: 38px;

    font-size: 15px;
  }

  .book-author {
    font-size: 11px;
  }

  .book-card-button {
    min-height: 41px;
    padding: 10px 8px;

    font-size: 12px;
  }

  .pricing-page {
    padding-top: 28px;
  }

  .pricing-hero {
    grid-template-columns: 1fr;

    gap: 24px;

    padding: 10px 0 30px;
  }

  .pricing-hero-copy h1 {
    font-size: 42px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card.featured {
    transform: none;
  }

  .pricing-card-content {
    padding: 23px;
  }

  .account-layout {
    grid-template-columns: 1fr;
  }

  .account-profile-card,
  .account-details-card {
    padding: 22px;
  }

  .reader-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .reader-book-heading {
    width: 100%;
  }

  .reader-layout {
    grid-template-columns: 1fr;
  }

  .reader-section-sidebar {
    position: static;
  }

  .reader-section-list {
    display: flex;
    gap: 8px;

    overflow-x: auto;
  }

  .reader-section-button {
    width: auto;
    min-width: max-content;
  }

  .reader-content {
    padding: 25px 20px;
  }

  .reader-pagination {
    gap: 10px;
  }

  .reader-pagination
    .primary-button,
  .reader-pagination
    .secondary-button {
    padding: 11px 13px;

    font-size: 12px;
  }

  .listen-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .listen-header
    .secondary-button {
    width: 100%;
  }

  .listen-player-card {
    padding: 25px 17px;
  }

  .audio-controls {
    gap: 7px;
  }

  .audio-control-button {
    width: 43px;
    height: 43px;

    font-size: 15px;
  }

  .audio-control-button.primary {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 390px) {
  .auth-brand-panel {
    min-height: 32vh;
  }

  .auth-form-panel {
    min-height: 68vh;
  }

  .auth-card-header h2 {
    font-size: 30px;
  }

  .book-grid {
    gap: 10px;
  }

  .book-card-body {
    padding: 11px;
  }

  .audio-control-button {
    width: 40px;
    height: 40px;
  }

  .audio-control-button.primary {
    width: 58px;
    height: 58px;
  }
}