:root {
  --ink: #08171b;
  --paper: #eaf1f3;
  --cream: #f8fbfc;
  --clay: #42b9d0;
  --clay-dark: #16758a;
  --muted: #64777c;
  --line: rgba(8, 23, 27, .14);
  --shadow: 0 22px 70px rgba(5, 24, 29, .24);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}
button, a { font: inherit; }
button { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.topbar {
  height: 72px;
  padding: 0 26px;
  background: var(--ink);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.12);
  position: relative;
  z-index: 30;
}
.brand { color: inherit; text-decoration: none; display: flex; flex-direction: column; letter-spacing: .16em; line-height: 1; }
.brand span { font-size: 1.02rem; font-weight: 760; }
.brand small { font-size: .48rem; margin-top: 6px; letter-spacing: .23em; opacity: .64; }
.catalog-name { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: baseline; gap: 9px; letter-spacing: .04em; }
.catalog-name b { color: var(--clay); font-size: 1rem; }
.catalog-name span { color: rgba(255,255,255,.68); font-size: .74rem; }
.top-actions, .view-actions { display: flex; align-items: center; gap: 10px; }
.text-button, .primary-button, .quiet-button, .icon-button {
  border: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.text-button { color: rgba(255,255,255,.78); padding: 10px 12px; font-size: .86rem; }
.text-button:hover { color: white; }
.primary-button { background: var(--clay); color: white; padding: 11px 16px; border-radius: 3px; font-size: .86rem; font-weight: 650; }
.primary-button:hover { background: #55c7dd; transform: translateY(-1px); }
.icon-button { width: 42px; height: 42px; border-radius: 50%; background: transparent; }
.icon-button:hover { background: rgba(0,0,0,.07); }
.topbar .icon-button:hover { background: rgba(255,255,255,.1); }

.catalog-shell { height: calc(100vh - 72px); display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.sidebar {
  background: var(--cream);
  border-right: 1px solid var(--line);
  padding: 30px 24px 22px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 25;
}
.sidebar-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.eyebrow { color: var(--clay); font-size: .68rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
h1, h2 { margin: 5px 0 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.6rem; }
.sections { display: grid; gap: 3px; }
.section-link {
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: #4f4942;
  text-align: left;
  cursor: pointer;
  font-size: .86rem;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.section-link span:last-child { color: #9a9288; font-variant-numeric: tabular-nums; }
.section-link:hover { color: var(--ink); background: rgba(66,185,208,.08); }
.section-link.active { color: var(--clay-dark); border-left-color: var(--clay); background: rgba(66,185,208,.13); font-weight: 680; }
.sidebar-footer { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 7px; }
.sidebar-footer span { border: 1px solid var(--line); border-radius: 99px; padding: 6px 9px; color: var(--muted); font-size: .67rem; }

.viewer { min-width: 0; display: grid; grid-template-rows: 58px minmax(0,1fr); background: #cddadd; position: relative; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; background: rgba(255,255,255,.62); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.quiet-button { gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255,255,255,.6); font-size: .8rem; font-weight: 620; }
.quiet-button:hover { background: white; }
.quiet-button svg { width: 17px; }
.page-status { display: flex; align-items: baseline; gap: 5px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.page-status strong { color: var(--ink); font-size: 1rem; }
.page-stage { min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 28px 76px 38px; outline: none; overflow: auto; }
.page-frame { position: relative; max-width: 100%; max-height: 100%; box-shadow: var(--shadow); background: white; flex: 0 0 auto; }
.page-frame img { display: block; max-width: 100%; max-height: calc(100vh - 196px); width: auto; height: auto; user-select: none; }
.page-stage.width-mode { align-items: flex-start; justify-content: flex-start; padding: 24px; }
.page-stage.width-mode .page-frame, .page-stage.width-mode img { width: 100%; max-height: none; }
.loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: #e8f0f2; color: var(--muted); font-size: .8rem; }
.loading.visible { display: flex; }
.page-arrow { position: fixed; top: 50%; width: 48px; height: 72px; border: 0; background: rgba(23,19,15,.82); color: white; cursor: pointer; display: grid; place-items: center; border-radius: 3px; z-index: 4; }
.page-arrow:hover { background: var(--clay); }
.page-arrow:disabled { opacity: .2; cursor: default; }
.page-arrow.previous { left: 286px; }
.page-arrow.next { right: 22px; }
.mobile-controls { display: none; }

.overlay { position: fixed; inset: 0; background: rgba(14,11,8,.54); backdrop-filter: blur(3px); z-index: 39; }
.thumbnail-panel { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(680px, 92vw); background: var(--cream); transform: translateX(102%); transition: transform .26s ease; box-shadow: -20px 0 70px rgba(0,0,0,.24); padding: 26px; overflow-y: auto; }
.thumbnail-panel.open { transform: translateX(0); }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.thumbnail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.thumbnail { border: 1px solid var(--line); background: white; padding: 0; cursor: pointer; text-align: left; position: relative; overflow: hidden; }
.thumbnail img { width: 100%; display: block; }
.thumbnail span { position: absolute; right: 7px; bottom: 7px; min-width: 28px; padding: 5px 7px; background: rgba(23,19,15,.82); color: white; text-align: center; font-size: .68rem; }
.thumbnail:hover, .thumbnail.active { outline: 2px solid var(--clay); outline-offset: 2px; }
.mobile-only { display: none; }

@media (max-width: 820px) {
  body { overflow: hidden; }
  .topbar { height: 62px; padding: 0 12px; }
  .mobile-only { display: inline-flex; }
  .brand { margin-right: auto; margin-left: 8px; }
  .brand span { font-size: .9rem; }
  .brand small { display: none; }
  .catalog-name { display: none; }
  .top-actions .text-button { display: none; }
  .primary-button { padding: 9px 11px; font-size: .74rem; }
  .catalog-shell { height: calc(100vh - 62px); display: block; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 88vw); transform: translateX(-102%); transition: transform .26s ease; box-shadow: 20px 0 70px rgba(0,0,0,.2); }
  .sidebar.open { transform: translateX(0); }
  .viewer { height: 100%; grid-template-rows: 52px minmax(0,1fr) 58px; }
  .viewer-toolbar { padding: 0 12px; }
  .page-stage { padding: 14px 8px; }
  .page-frame img { max-height: calc(100vh - 196px); width: 100%; }
  .page-arrow { display: none; }
  .mobile-controls { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(255,255,255,.7); border-top: 1px solid var(--line); font-size: .78rem; font-variant-numeric: tabular-nums; }
  .mobile-controls .quiet-button { min-width: 84px; }
  .thumbnail-panel { padding: 20px 14px; }
  .thumbnail-grid { gap: 10px; }
}

@media (max-width: 430px) {
  .topbar .primary-button, .print-button { display: none; }
  .thumbnail-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}