/* Shared page theme for public pages.
   Keep player.html separate: it intentionally uses its own menu/player layout. */
:root{
  color-scheme: light;
  --site-page-max: 1180px;
  --site-bg: #f6f7fb;
  --site-bg-soft: #eef3ff;
  --site-surface: #ffffff;
  --site-surface-soft: #f8fafc;
  --site-text: #111827;
  --site-muted: #6b7280;
  --site-line: #e5e7eb;
  --site-line-strong: #d1d5db;
  --site-accent: #2563eb;
  --site-accent-soft: #dbeafe;
  --site-success: #065f46;
  --site-success-bg: #d1fae5;
  --site-danger: #9f1239;
  --site-danger-bg: #fff1f2;
  --site-danger-line: #fecdd3;
  --site-shadow: 0 18px 50px rgba(17,24,39,.10);
  --site-shadow-soft: 0 10px 28px rgba(17,24,39,.07);
  --site-radius: 24px;
  --site-radius-sm: 16px;
  --site-focus: 0 0 0 4px rgba(37,99,235,.12);

  /* Map older per-page variables to one shared palette. */
  --bg: var(--site-bg);
  --fg: var(--site-text);
  --text: var(--site-text);
  --surface: var(--site-surface);
  --surface-soft: var(--site-surface-soft);
  --panel: var(--site-surface);
  --panel-strong: var(--site-surface-soft);
  --card: var(--site-surface);
  --border: var(--site-line);
  --line: var(--site-line);
  --muted: var(--site-muted);
  --brand: var(--site-text);
  --accent: var(--site-accent);
  --accent-soft: var(--site-accent-soft);
  --success: var(--site-success);
  --success-bg: var(--site-success-bg);
  --shadow: var(--site-shadow);
  --radius: var(--site-radius);
  --focus: var(--site-focus);
  --max: var(--site-page-max);
}

*{ box-sizing: border-box; }

html,
body{
  margin:0;
  min-height:100%;
  background:var(--site-bg);
  color:var(--site-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

body:not(.page-player){
  min-height:100svh;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(37,99,235,.12), transparent 62%),
    radial-gradient(700px 420px at 94% 2%, rgba(99,102,241,.10), transparent 58%),
    linear-gradient(180deg, #f9fbff 0%, #f6f7fb 48%, #f3f4f6 100%);
}

a{ color:inherit; text-decoration:none; }

body:not(.page-player) a:focus-visible,
body:not(.page-player) button:focus-visible,
body:not(.page-player) input:focus-visible{
  outline:none;
  box-shadow:var(--site-focus);
}

.site-page,
.page,
.wrap{
  width:min(var(--site-page-max), calc(100vw - 32px)) !important;
  margin:0 auto !important;
  padding:18px 0 48px !important;
}

.site-main{
  width:100%;
}

.page-about .site-main{
  width:100%;
  margin:0 auto;
  padding:0;
}

/* Shared content rhythm */
.page-home .hero,
.page-catalog .hero,
.page-about .card,
.page-book .panel,
.page-book .coverCard,
.page-book .sectionCard,
.page-book .loadingBox,
.page-book .errorBox,
.page-book .notFound,
.page-library .note,
.page-account .note{
  background:var(--site-surface) !important;
  border:1px solid var(--site-line) !important;
  border-radius:var(--site-radius) !important;
  box-shadow:var(--site-shadow) !important;
}

.page-home .hero,
.page-catalog .hero{
  background:
    radial-gradient(800px 420px at 8% 0%, rgba(37,99,235,.10), transparent 62%),
    linear-gradient(135deg, #ffffff, #f3f7ff) !important;
}

.page-home .heroInner{
  padding:36px !important;
}

.page-catalog header:not(.site-header){
  padding:16px 0 24px !important;
}

.page-catalog .hero,
.page-book .panel{
  padding:30px !important;
}

.page-about .card,
.page-library .note,
.page-account .note{
  padding:24px !important;
}

.page-home .imageCard,
.page-home .infoCard,
.page-catalog .card,
.page-catalog .empty,
.page-about .linkRow,
.page-about .status{
  background:var(--site-surface) !important;
  border:1px solid var(--site-line) !important;
  border-radius:var(--site-radius-sm) !important;
  box-shadow:var(--site-shadow-soft) !important;
}

.page-catalog .card,
.page-home .infoCard{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.page-catalog .card:hover,
.page-home .infoCard:hover{
  transform:translateY(-3px);
  border-color:var(--site-line-strong) !important;
  box-shadow:0 18px 42px rgba(17,24,39,.12) !important;
}

.page-home .infoGrid,
.page-catalog .grid,
.page-book .grid{
  gap:20px !important;
}

h1,
.page-home .title,
.page-catalog .title,
.page-book .sectionTitle{
  color:var(--site-text) !important;
  letter-spacing:-.035em;
}

.page-home .title,
.page-catalog h1,
.page-book h1,
.page-about h1{
  margin-top:0 !important;
  font-size:clamp(32px, 5vw, 54px) !important;
  line-height:1.04 !important;
}

.page-home .title{
  max-width:12ch;
}

.page-home .sub,
.page-catalog .hero p,
.page-book .salesCopy,
.page-book .microcopy,
.page-about .p,
.page-home .infoCard p,
.page-catalog .desc,
.page-book .notFound p,
.page-book .errorBox p,
.page-book .loadingBox p{
  color:var(--site-muted) !important;
  line-height:1.68 !important;
}

.page-book .salesCopy,
.page-catalog .desc{
  font-size:15px !important;
}

.eyebrow,
.badge,
.chip,
.tag,
.saleBadge,
.salePill,
.page-home .badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px !important;
  border:1px solid rgba(37,99,235,.14) !important;
  background:var(--site-accent-soft) !important;
  color:var(--site-accent) !important;
  font-weight:800 !important;
  letter-spacing:.01em;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.08em;
}

.tag,
.chip{
  background:var(--site-surface-soft) !important;
  border-color:var(--site-line) !important;
  color:#374151 !important;
}

.saleBadge,
.salePill{
  background:var(--site-success-bg) !important;
  border-color:rgba(6,95,70,.14) !important;
  color:var(--site-success) !important;
}

.btn,
a.btn,
button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  border-radius:14px !important;
  border:1px solid var(--site-line) !important;
  background:var(--site-surface) !important;
  color:var(--site-text) !important;
  font-family:inherit;
  font-weight:800 !important;
  line-height:1.15;
  text-align:center;
  text-decoration:none;
  min-width:0;
  max-width:100%;
  padding-inline:16px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  box-shadow:var(--site-shadow-soft);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.btn:hover,
a.btn:hover,
button.btn:hover{
  transform:translateY(-1px);
  border-color:var(--site-line-strong) !important;
  box-shadow:0 14px 32px rgba(17,24,39,.11);
}

.btn-primary,
.page-home .ctaRow .btn:first-child,
.page-book .btn-primary{
  background:var(--site-accent) !important;
  border-color:var(--site-accent) !important;
  color:#ffffff !important;
}

.btn-secondary,
.btn-soft,
.secondary{
  background:var(--site-surface) !important;
  color:var(--site-text) !important;
}

.page-catalog .actions .btn{
  width:100%;
}

.search input{
  width:100%;
  border:1px solid var(--site-line) !important;
  background:var(--site-surface) !important;
  color:var(--site-text) !important;
  border-radius:14px !important;
  padding:14px 16px !important;
  font:inherit;
  box-shadow:var(--site-shadow-soft);
}

.search input:focus{
  border-color:rgba(37,99,235,.45) !important;
  box-shadow:var(--site-focus), var(--site-shadow-soft) !important;
}

.page-catalog .toolbar{
  margin:20px 0 24px !important;
}

.price,
.page-catalog .price,
.page-book .price{
  color:var(--site-text) !important;
  letter-spacing:-.03em;
}

.oldPrice,
.count,
.meta,
.submeta,
.detailLabel,
footer,
.page-home .footer,
.page-home .mediaSub,
.page-about code,
.page-library pre,
.page-account pre{
  color:var(--site-muted) !important;
}

.page-library pre,
.page-account pre{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size:14px !important;
  line-height:1.7 !important;
}

.error,
.errorBox{
  background:var(--site-danger-bg) !important;
  border-color:var(--site-danger-line) !important;
  color:var(--site-danger) !important;
}

.page-about .sec{
  border-top:1px solid var(--site-line) !important;
}

.page-book .detailItem{
  border-bottom-color:var(--site-line) !important;
}

@media (max-width: 980px){
  .page-home .heroInner,
  .page-book .hero{
    grid-template-columns:1fr !important;
  }

  .page-home .title{
    max-width:none;
  }
}

@media (max-width: 720px){
  .site-page,
  .page,
  .wrap,
  .page-about .site-main{
    width:min(var(--site-page-max), calc(100vw - 20px)) !important;
    padding-top:10px !important;
  }

  .page-home .heroInner,
  .page-catalog .hero,
  .page-book .panel,
  .page-about .card,
  .page-library .note,
  .page-account .note{
    padding:20px !important;
  }

  .page-home .title,
  .page-catalog h1,
  .page-book h1,
  .page-about h1{
    font-size:clamp(28px, 10vw, 42px) !important;
  }
}