/**
 * Celestial reader — light Aurikle surface (matches home / Mythiq slip).
 */

body.ak-brand.page-loading {
  background: var(--ak-paper, #f6f3ec) !important;
  color: var(--ak-ink, #2c2824);
}

body.ak-brand.page-loading .mq-art {
  display: none;
}

body.ak-brand .page.mq-shell.cel-surface {
  --cel-ink: var(--ak-ink, #2c2824);
  --cel-ink-soft: var(--ak-ink-soft, #5c564e);
  --cel-ink-muted: var(--ak-ink-muted, #8a8378);
  --cel-accent: var(--ak-accent, #9a7348);
  --cel-accent-light: var(--ak-accent-light, #c4a574);
  --cel-paper: rgba(255, 255, 255, 0.78);
  --cel-line: var(--ak-line-strong, rgba(44, 40, 36, 0.18));
  --cel-gold: #b8924a;
  --cel-gold-dim: rgba(184, 146, 74, 0.35);
  --cel-rose: #9b4d62;
  --cel-crimson: #8b1a1a;

  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(520px, calc(100% - 2.5rem));
  margin: 0.75rem auto 2.5rem;
  padding: 1.15rem 1.1rem 2rem;
  color: var(--cel-ink);
  background: var(--cel-paper);
  border: 1px solid var(--cel-line);
  border-radius: var(--ak-radius-lg, 4px);
  box-shadow: 0 16px 48px rgba(44, 40, 36, 0.08);
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 639px) {
  body.ak-brand .page.mq-shell.cel-surface {
    max-width: calc(100% - 1.25rem);
  }
}

body.ak-brand .page.cel-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 45% at 50% -5%, rgba(196, 165, 116, 0.14), transparent 58%);
}

body.ak-brand .page.cel-surface > * {
  position: relative;
  z-index: 1;
}

body.ak-brand .page.cel-surface a.back {
  color: var(--cel-accent);
  opacity: 0.92;
}

body.ak-brand .page.cel-surface a.back:hover {
  color: var(--cel-ink);
  opacity: 1;
}

body.ak-brand .page.cel-surface h1 {
  font-family: var(--ak-font-serif, "Cormorant Garamond", serif);
  background: none;
  -webkit-text-fill-color: unset;
  color: var(--cel-ink);
  filter: none;
}

body.ak-brand .page.cel-surface .meta {
  color: var(--cel-ink-soft);
  opacity: 1;
}

body.ak-brand .page.cel-surface .variety-callout {
  color: var(--cel-ink-soft);
  background: rgba(255, 255, 255, 0.65);
  border-color: var(--cel-gold-dim);
}

body.ak-brand .page.cel-surface .progress-panel {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--cel-line);
}

body.ak-brand .page.cel-surface .progress-panel.is-complete {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: none;
  pointer-events: none;
  transition: opacity 0.35s ease, max-height 0.35s ease, margin 0.35s ease;
}

body.ak-brand .page.cel-surface .progress-label {
  color: var(--cel-accent);
}

body.ak-brand .page.cel-surface .progress-hint,
body.ak-brand .page.cel-surface .progress-count {
  color: var(--cel-ink-muted);
}

body.ak-brand .page.cel-surface .progress-fill {
  background: linear-gradient(90deg, var(--cel-accent-light), var(--cel-accent));
}

body.ak-brand .page.cel-surface .arc-strip {
  margin: 0.65rem 0 1rem;
}

body.ak-brand .page.cel-surface .strip-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cel-crimson);
  letter-spacing: 0.07em;
  opacity: 1;
}

body.ak-brand .page.cel-surface .strip-hint {
  font-size: 0.8rem;
  color: var(--cel-ink-soft);
  opacity: 1;
  margin-bottom: 0.5rem;
}

body.ak-brand .page.cel-surface .strip-scroll {
  gap: 0.65rem;
  padding: 0.2rem 0.55rem 0.7rem;
  scroll-padding-inline: 0.55rem;
}

body.ak-brand .page.cel-surface .strip-scroll::-webkit-scrollbar-thumb {
  background: rgba(154, 115, 72, 0.35);
}

body.ak-brand .page.cel-surface .strip-scroll::-webkit-scrollbar-track {
  background: rgba(44, 40, 36, 0.06);
}

body.ak-brand .page.cel-surface .strip-fade-right {
  background: linear-gradient(to left, rgba(246, 243, 236, 0.98), transparent);
}

body.ak-brand .page.cel-surface .strip-fade-left {
  background: linear-gradient(to right, rgba(246, 243, 236, 0.95), transparent);
}

body.ak-brand .page.cel-surface .strip-nav {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--cel-line);
  color: var(--cel-accent);
  box-shadow: 0 4px 16px rgba(44, 40, 36, 0.08);
}

body.ak-brand .page.cel-surface .arc-pill {
  background: #fff;
  border: 1.5px solid var(--cel-line);
  color: var(--cel-ink);
  box-shadow: 0 2px 12px rgba(44, 40, 36, 0.07);
}

body.ak-brand .page.cel-surface .arc-pill.is-active {
  border-color: var(--cel-accent);
  border-width: 2px;
  box-shadow: 0 6px 22px rgba(154, 115, 72, 0.18);
}

body.ak-brand .page.cel-surface .arc-pill.is-ready {
  border-color: rgba(90, 143, 122, 0.5);
}

body.ak-brand .page.cel-surface .arc-pill.is-loading {
  border-color: rgba(155, 77, 98, 0.45);
}

body.ak-brand .page.cel-surface .pill-name {
  color: var(--cel-ink);
  font-size: 0.94rem;
  -webkit-text-fill-color: unset;
}

body.ak-brand .page.cel-surface .arc-pill.is-active .pill-name {
  color: #6b1818;
}

body.ak-brand .page.cel-surface .pill-sub {
  color: var(--cel-ink-soft);
  font-size: 0.78rem;
  opacity: 1;
}

body.ak-brand .page.cel-surface .pill-icon {
  color: var(--cel-accent);
  font-size: 1.4rem;
}

body.ak-brand .page.cel-surface .pill-status {
  font-size: 0.7rem;
}

body.ak-brand .page.cel-surface .strip-nav:hover {
  background: var(--cel-accent);
  color: #fff;
  border-color: var(--cel-accent);
}

body.ak-brand .page.cel-surface .arc-complete-banner {
  font-size: 0.84rem;
  padding: 0.55rem 0.75rem;
}

body.ak-brand .page.cel-surface .arc-writing-banner,
body.ak-brand .page.cel-surface .arc-complete-banner {
  color: var(--cel-ink-soft);
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed var(--cel-line);
}

body.ak-brand .page.cel-surface .arc-complete-banner {
  color: var(--cel-accent);
  border-style: solid;
  background: rgba(196, 165, 116, 0.12);
}

body.ak-brand .page.cel-surface .card,
body.ak-brand .page.cel-surface .reader-card {
  background: linear-gradient(180deg, #fffdf9 0%, #f8f3ea 100%);
  color: var(--cel-ink);
  border: 1px solid var(--cel-line);
  box-shadow: 0 10px 28px rgba(44, 40, 36, 0.06);
}

body.ak-brand .page.cel-surface .card-dossier h2 {
  color: var(--cel-crimson);
}

body.ak-brand .page.cel-surface .reader-head h2 {
  color: #6b1818;
}

body.ak-brand .page.cel-surface .arc-teaser {
  background: rgba(139, 26, 26, 0.06);
  border-left-color: var(--cel-accent-light);
  color: var(--cel-ink-soft);
}

body.ak-brand .page.cel-surface .scene h3 {
  color: #6b1818;
}

body.ak-brand .page.cel-surface .scene .body {
  color: var(--cel-ink);
}

body.ak-brand .page.cel-surface .scene .hook {
  color: var(--cel-crimson);
}

body.ak-brand .page.cel-surface .reader-loading-label {
  color: var(--cel-rose);
}

body.ak-brand .page.cel-surface .head-spinner,
body.ak-brand .page.cel-surface .banner-spin,
body.ak-brand .page.cel-surface .badge-spin {
  border-color: var(--cel-line);
  border-top-color: var(--cel-accent);
}

body.ak-brand .page.cel-surface .reader-card.is-loading .reader-head {
  border-bottom-color: var(--cel-line);
}

body.ak-brand .page.cel-surface .sk-label {
  color: var(--cel-ink-muted);
}

body.ak-brand .page.cel-surface .locked {
  color: var(--cel-ink-soft);
}

body.ak-brand .page.cel-surface .locked a {
  color: var(--cel-accent);
}