:root {
  --red: #cf0a0a;
  --red-dark: #a50808;
  --ink: #1a1a1a;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #f3f4f6;
  --panel: #ffffff;
  --accent: #0a7d2c;
  --shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.hidden { display: none !important; }
kbd {
  background: #fff; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; font-size: 12px; font-family: inherit;
}

/* ===== Top bar ===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel); border-bottom: 3px solid var(--red);
  padding: 8px 16px; box-shadow: var(--shadow); z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
a.brand { cursor: pointer; }

/* ===== Edition / site switcher (next to the logo) ===== */
.edition-switch { position: relative; flex: 0 0 auto; margin-left: 18px; }
.edition-switch > summary {
  list-style: none; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 14px; color: var(--ink);
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.edition-switch > summary::-webkit-details-marker { display: none; }
.edition-switch > summary:hover { border-color: var(--red); }
.edition-switch .ed-caret { color: var(--muted); font-size: 12px; transition: transform .15s; }
.edition-switch[open] > summary .ed-caret { transform: rotate(180deg); }
.edition-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px; z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 6px; display: flex; flex-direction: column;
}
.edition-menu a {
  padding: 9px 12px; border-radius: 7px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600;
}
.edition-menu a:hover { background: #f3f4f6; }
.edition-menu a.active { color: var(--red); }
@media (max-width: 560px) {
  .edition-switch { margin-left: 10px; }
  .edition-switch > summary { font-size: 12.5px; padding: 5px 8px; }
  .edition-menu { min-width: 160px; }
}
.logo {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--red); color: #fff; font-weight: 800; font-size: 22px;
  border-radius: 8px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
/* newspaper-masthead treatment for the site name (shown when no logo / "show name" is on) */
.brand-text strong {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 900; font-size: 19px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--ink); line-height: 1;
}
.brand-text small { color: var(--muted); font-size: 12px; }
.top-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }

/* social icons (reader header) */
.social-icons { display: flex; align-items: center; gap: 8px; }
.social-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.social-ic svg { width: 16px; height: 16px; display: block; }
.social-ic.fb { background: #1877f2; }
.social-ic.tw { background: #000000; }
.social-ic.ig { background: #e1306c; }
.social-ic.yt { background: #ff0000; }
.social-ic.wa { background: #25d366; }
.social-ic:hover { opacity: .85; }

/* Header advertisement slot */
.header-ad { flex: 1; display: flex; justify-content: center; align-items: center; margin: 0 16px; min-width: 0; }
.header-ad img { max-height: 60px; max-width: 100%; object-fit: contain; }
.ad-slot {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #c4c4c4;
  border: 1px dashed var(--line); border-radius: 6px; padding: 14px 48px; white-space: nowrap;
}
@media (max-width: 760px) { .header-ad { display: none; } }

/* reader header ad slider (auto-rotating) */
.ad-slider { position: relative; width: 100%; max-width: 728px; height: 56px; }
.ad-item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.ad-item.active { opacity: 1; pointer-events: auto; }
.ad-item img { max-height: 56px; max-width: 100%; object-fit: contain; }

/* admin ads grid */
.ads-list { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.ad-card { width: 200px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fff; }
.ad-card img { width: 100%; height: 72px; object-fit: contain; background: #f3f4f6; border-radius: 4px; }
.ad-card .ad-link { display: block; font-size: 11px; color: var(--muted); word-break: break-all; margin: 6px 0; min-height: 13px; }
.ad-card .btn { width: 100%; }

/* ===== Buttons ===== */
.btn {
  font: inherit; cursor: pointer; border: 1px solid var(--line);
  background: #fff; color: var(--ink); border-radius: 6px;
  padding: 6px 12px; transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: #f7f7f7; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; padding: 10px 22px; }
.btn-primary:hover { background: var(--red-dark); }
.btn-ghost { background: transparent; }
.btn-icon { padding: 6px 10px; min-width: 36px; }
.btn-cut { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-cut.active { background: #084e1c; box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--accent); }

/* ===== Dropzone ===== */
.dropzone { flex: 1; display: grid; place-items: center; padding: 24px; }
.dropzone.dragover .dropzone-inner { border-color: var(--red); background: #fff5f5; }
.dropzone-inner {
  text-align: center; background: var(--panel); border: 2px dashed var(--line);
  border-radius: 16px; padding: 48px 56px; max-width: 560px; box-shadow: var(--shadow);
}
.dz-icon { font-size: 44px; }
.dropzone-inner h2 { margin: 8px 0 6px; }
.dropzone-inner p { color: var(--muted); margin: 6px 0 18px; }
.dz-hint { font-size: 12px; margin-top: 18px !important; }

/* ===== App layout ===== */
.app { flex: 1; display: grid; grid-template-columns: 180px 1fr; min-height: 0; }
/* readers can collapse the page thumbnails (toggle in the toolbar) */
.app.thumbs-hidden { grid-template-columns: 1fr; }
.app.thumbs-hidden .thumbs { display: none; }
#toggleThumbs[aria-pressed="true"] { background: #fdecec; color: var(--red); border-color: var(--red); }
.thumbs, .clips { background: var(--panel); overflow-y: auto; }
.thumbs { border-right: 1px solid var(--line); }
.clips { border-left: 1px solid var(--line); }
.panel-title {
  position: sticky; top: 0; background: var(--panel); z-index: 2;
  padding: 10px 12px; font-weight: 700; font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.badge { background: var(--red); color: #fff; border-radius: 20px; padding: 1px 8px; font-size: 12px; }

/* Thumbnails */
.thumbs-list { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.thumb {
  border: 2px solid var(--line); border-radius: 6px; cursor: pointer; overflow: hidden;
  background: #fff; position: relative; transition: border-color .15s;
}
.thumb:hover { border-color: #c9c9c9; }
.thumb.active { border-color: var(--red); }
.thumb canvas, .thumb img { display: block; width: 100%; }
.thumb .thumb-num {
  position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
  background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 2px;
}

/* ===== Stage ===== */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

/* transparent page-flip arrows overlaying the page, always vertically centered */
.page-nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(20, 20, 20, .38); color: #fff;
  display: grid; place-items: center;
  transition: background .15s, opacity .15s; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.page-nav-arrow:hover { background: rgba(20, 20, 20, .65); }
.page-nav-arrow:active { transform: translateY(-50%) scale(.94); }
.page-nav-arrow.prev { left: 16px; }
.page-nav-arrow.next { right: 16px; }
.page-nav-arrow svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .page-nav-arrow { width: 38px; height: 38px; }
  .page-nav-arrow svg { width: 20px; height: 20px; }
  .page-nav-arrow.prev { left: 8px; }
  .page-nav-arrow.next { right: 8px; }
}
.toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #fafafa; border-bottom: 1px solid var(--line); padding: 8px 12px;
}
.tb-group { display: flex; align-items: center; gap: 6px; }
.page-indicator { font-size: 14px; color: var(--ink); white-space: nowrap; }
.page-indicator input {
  width: 48px; text-align: center; font: inherit; padding: 4px;
  border: 1px solid var(--line); border-radius: 5px;
}
.zoom-label { min-width: 46px; text-align: center; font-size: 13px; color: var(--muted); }
.page-select { display: none; font: inherit; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }

.clip-hint {
  background: #eafbef; color: #084e1c; border-bottom: 1px solid #bfe6cb;
  padding: 8px 14px; font-size: 13px;
}

.canvas-area {
  flex: 1; overflow: auto; position: relative;
  background: #d7d9dd; padding: 24px; text-align: center;
}
.page-wrap {
  display: inline-block; position: relative; line-height: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,.25); background: #fff;
}
.page-wrap.clip-mode { cursor: crosshair; }
#pageCanvas { display: block; }

.selection {
  position: absolute; border: 2px dashed var(--red);
  background: rgba(207,10,10,.12); pointer-events: none; z-index: 3;
}

/* ===== Reader scrolls as a normal page (header & footer NOT pinned) =====
   By default the reader is locked to one screen with the page image scrolling
   inside its own frame, which keeps the masthead + footer permanently on screen.
   On the reader page we let the document grow with its content instead, so the
   header scrolls away at the top and the footer sits below the page image.
   The footer is NOT sticky: it follows the content directly instead of being
   pushed to the bottom of the viewport when the page is short. */
body.reader-doc { height: auto; min-height: 0; }
body.reader-doc .app    { flex: 0 0 auto; min-height: auto; }
body.reader-doc .stage  { min-height: auto; }
body.reader-doc .canvas-area { flex: 0 0 auto; min-height: auto; overflow: visible; }
/* page-flip arrows stay centered in the viewport while the page scrolls */
body.reader-doc .page-nav-arrow { position: fixed; }
/* desktop only: align both columns to the top and keep the page-thumbnail rail
   in view while the long page scrolls past it (on mobile the thumbnails are a
   horizontal filmstrip on top, handled by the responsive rules below). */
@media (min-width: 821px) {
  body.reader-doc .app    { align-items: start; }
  body.reader-doc .thumbs { position: sticky; top: 0; max-height: 100vh; }
}

/* ===== Reader responsive (tablet / mobile) ===== */
@media (max-width: 820px) {
  /* stack filmstrip + stage as two rows; cap the stage to the remaining height
     so the page scrolls inside its frame instead of stretching the whole page */
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .app.thumbs-hidden { grid-template-rows: 1fr; }
  /* page thumbnails become a horizontal filmstrip on top */
  .thumbs {
    border-right: 0; border-bottom: 1px solid var(--line);
    overflow-x: auto; overflow-y: hidden; max-height: 112px;
  }
  .thumbs .panel-title { display: none; }
  .thumbs-list { flex-direction: row; padding: 8px; gap: 8px; }
  .thumb { flex: 0 0 auto; width: 66px; }
  .canvas-area { padding: 12px; }
  /* one single-line toolbar that scrolls sideways if it can't all fit */
  .toolbar { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 8px 10px; -webkit-overflow-scrolling: touch; }
  .toolbar::-webkit-scrollbar { height: 5px; }
  .toolbar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
  .tb-group, .tb-editions { flex: 0 0 auto; }
  .tb-editions { border-right: 0; padding-right: 0; }
  .tb-editions .edition-pick select { width: auto; max-width: 118px; }
}
@media (max-width: 640px) {
  /* mobile toolbar: "Edition" / "Week" tap to open dropdown (no icons), page dropdown, icon-only zoom/cut/download */
  .toolbar, .toolbar .btn, .edition-pick, .page-select { font-size: 13px; line-height: 1.3; }
  .tb-editions { display: flex; border: 0; padding: 0; gap: 8px; flex: 0 0 auto; }
  .edition-pick {
    position: relative; font-size: 13px; color: var(--ink); gap: 0;
    border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; background: #fff; white-space: nowrap;
  }
  .edition-pick::after { content: '▾'; margin-left: 5px; color: var(--muted); }
  .tb-editions .edition-pick select {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
    opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer; background-image: none;
  }
  #firstBtn, #prevBtn, #nextBtn, #lastBtn, .page-indicator { display: none; }
  .page-select { display: inline-block; }
  .zoom-label { display: none; }
  .btn-label { display: none; }
  /* keep the whole toolbar on ONE line on mobile; allow sideways scroll as a
     safety net so the last control is never permanently clipped */
  .toolbar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; justify-content: center; gap: 4px; padding: 8px 6px; }
  .toolbar::-webkit-scrollbar { height: 0; }
  .toolbar .tb-group { flex: 0 0 auto; }
  /* hide Fit + Cut (✂) on mobile */
  #fitBtn, #clipBtn { display: none; }
  /* let the e-paper page cover the full screen width — no left/right gutter */
  .canvas-area { padding: 0; }
  .page-wrap { box-shadow: none; }
}
@media (max-width: 560px) {
  /* center the masthead/logo; the Login button moves down into the footer (footer.js) */
  .topbar { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; justify-content: center; }
  .brand { gap: 6px; flex: 0 1 auto; min-width: 0; justify-content: center; text-align: center; }
  .brand-img { max-height: 26px; max-width: 33vw; height: auto; }
  .logo { width: 30px; height: 30px; font-size: 18px; }
  .top-meta { display: none; }                /* social icons + login no longer in the header on mobile */
  #readerAccount .btn { padding: 5px 9px; font-size: 12px; white-space: nowrap; }
  /* tighten the remaining toolbar controls */
  /* shrink every toolbar control so the whole bar fits on one line without clipping */
  .toolbar { gap: 3px; padding: 8px 5px; }
  .toolbar .btn { padding: 5px 6px; font-size: 12px; }
  .toolbar .btn-icon { padding: 5px 5px; min-width: 24px; }
  .edition-pick { padding: 4px 6px; font-size: 11.5px; }
  .edition-pick::after { margin-left: 3px; }
  .page-select { padding: 4px 5px; font-size: 11.5px; }
  #toggleThumbs { padding: 5px 5px; }
}
@media (max-width: 380px) {
  .brand-img { max-width: 26vw; }
  .social-ic { width: 21px; height: 21px; }
  .social-ic svg { width: 11px; height: 11px; }
  #readerAccount .btn { padding: 4px 7px; font-size: 11.5px; }
}

/* reader article zones (cuttings) — hover shows a 10% color overlay */
.article-zones { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.article-zone { position: absolute; cursor: pointer; pointer-events: auto; transition: background .15s; }
.article-zone:hover { background: rgba(207,10,10,.10); }
.page-wrap.clip-mode .article-zone { pointer-events: none; }

/* article lightbox + share */
.share-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 20px; }
.share-card { background: #fff; border-radius: 12px; padding: 16px; max-width: 92vw; max-height: 92vh; overflow: auto; box-shadow: 0 12px 48px rgba(0,0,0,.4); position: relative; text-align: center; }
.share-img { max-width: min(760px, 86vw); max-height: 68vh; width: auto; display: block; margin: 0 auto 12px; border: 1px solid var(--line); border-radius: 6px; }
.share-x { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; }
.share-title { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.share-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.share-b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 0; cursor: pointer; text-decoration: none; }
.share-b svg { width: 17px; height: 17px; }
.share-b.fb { background: #1877f2; }
.share-b.tw { background: #000000; }
.share-b.wa { background: #25d366; }
.share-b.tg { background: #0088cc; }
.share-b.cp { background: #6b7280; font-size: 14px; }
.share-b.dl { background: var(--red); font-size: 15px; }
.share-b.sh { background: var(--accent); font-size: 16px; }
.share-b:hover { opacity: .88; }

.loading { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(215,217,221,.6); }
.spinner {
  width: 38px; height: 38px; border: 4px solid #fff; border-top-color: var(--red);
  border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Clips panel ===== */
.clips-list { padding: 10px; display: flex; flex-direction: column; gap: 12px; }
.clips-empty { color: var(--muted); font-size: 13px; padding: 8px; }
.clip-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.clip-card img { display: block; width: 100%; background: #fff; }
.clip-card .clip-meta { padding: 6px 8px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
.clip-actions { display: flex; gap: 6px; padding: 6px 8px; }
.clip-actions .btn { padding: 4px 8px; font-size: 12px; flex: 1; }
.btn-danger { color: var(--red); border-color: #f0c2c2; }
.btn-danger:hover { background: #fff5f5; }


/* Toast (clip-saved confirmation) */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px);
  background: #084e1c; color: #fff; padding: 10px 18px; border-radius: 8px;
  font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.3); z-index: 50;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Edition selector (reader top bar) ===== */
.edition-pick { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.edition-pick select {
  font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--ink); max-width: 260px;
}
/* edition pickers moved into the toolbar */
.tb-editions { padding-right: 0; }
.tb-editions .edition-pick select { max-width: 190px; }

/* ===== Admin panel ===== */
.muted { color: var(--muted); }
.admin-center { flex: 1; display: grid; place-items: center; padding: 24px; }
.admin-wrap { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; max-width: 920px; width: 100%; margin: 0 auto; }

/* Admin sidebar layout */
.admin-shell { flex: 1; display: grid; grid-template-columns: 220px 1fr; min-height: 0; }
.admin-side { background: var(--panel); border-right: 1px solid var(--line); padding: 16px 12px; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 16px; }
.admin-nav-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  padding: 4px 12px 8px; font-weight: 700;
}
.admin-nav-title:not(:first-child) { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.admin-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font: inherit; cursor: pointer; background: transparent; border: 0; border-radius: 8px;
  padding: 10px 12px; color: var(--ink); text-decoration: none;
}
.admin-nav-item span { width: 18px; text-align: center; }
.admin-nav-item:hover { background: #f3f4f6; }
.admin-nav-item.active { background: #fdecec; color: var(--red); font-weight: 600; }
.admin-nav-item[draggable="true"] { cursor: grab; }
.admin-nav-item[draggable="true"]:active { cursor: grabbing; }
.admin-nav-item.dragging { opacity: .45; background: #eef2ff; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.admin-nav-item.danger { color: var(--red); margin-top: 8px; }
.admin-content {
  overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px;
  width: 100%;
}
/* a section made of several stacked cards (e.g. Settings) */
.section-stack { display: flex; flex-direction: column; gap: 20px; }

/* dashboard */
.dash-head { margin-bottom: 4px; }
.stat-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.stat-card {
  border: none; border-radius: 12px; color: #fff; text-align: center;
  padding: 12px 8px; box-shadow: var(--shadow);
}
.stat-card.clickable { cursor: pointer; transition: transform .1s, box-shadow .15s; }
.stat-card.clickable:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.stat-ic { font-size: 19px; line-height: 1; }
.stat-v { font-size: 24px; font-weight: 800; margin-top: 4px; letter-spacing: -.02em; }
.stat-k { font-size: 11px; color: rgba(255,255,255,.92); margin-top: 2px; line-height: 1.2; }

/* colorful per-card backgrounds (order matches the 8 dashboard cards) */
.stat-grid .stat-card:nth-child(1) { background: linear-gradient(135deg,#2563eb,#1d4ed8); }
.stat-grid .stat-card:nth-child(2) { background: linear-gradient(135deg,#0891b2,#0e7490); }
.stat-grid .stat-card:nth-child(3) { background: linear-gradient(135deg,#7c3aed,#6d28d9); }
.stat-grid .stat-card:nth-child(4) { background: linear-gradient(135deg,#16a34a,#15803d); }
.stat-grid .stat-card:nth-child(5) { background: linear-gradient(135deg,#f59e0b,#d97706); }
.stat-grid .stat-card:nth-child(6) { background: linear-gradient(135deg,#db2777,#be185d); }
.stat-grid .stat-card:nth-child(7) { background: linear-gradient(135deg,#4f46e5,#4338ca); }
.stat-grid .stat-card:nth-child(8) { background: linear-gradient(135deg,#0d9488,#0f766e); }
.stat-grid .stat-card:nth-child(9)  { background: linear-gradient(135deg,#0ea5e9,#0369a1); } /* files / inodes */
.stat-grid .stat-card:nth-child(10) { background: linear-gradient(135deg,#475569,#334155); } /* storage */
.stat-grid .stat-card:nth-child(11) { background: linear-gradient(135deg,#c026d3,#a21caf); } /* bandwidth */

.stat-card.alert { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f59e0b, var(--shadow); }
.stat-card.alert .stat-v { color: #fff; }

/* keep one row on desktop; gracefully fall back on smaller screens */
@media (max-width: 1000px) { .stat-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 540px)  { .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---- pagination (shared across editions / payments / ads / plans) ---- */
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.pager:empty { display: none; }
.pg-btn {
  min-width: 32px; height: 32px; padding: 0 9px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 7px; font-size: 14px; cursor: pointer; transition: border-color .15s, background .15s;
}
.pg-btn:hover:not(:disabled):not(.active) { border-color: var(--red); }
.pg-btn.active { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; cursor: default; }
.pg-btn:disabled { opacity: .4; cursor: default; }
.pg-gap { padding: 0 2px; color: var(--muted); }
.pg-info { margin-left: auto; font-size: 12px; color: var(--muted); }

/* ---- payment request rows ---- */
.pay-shot { width: 46px; height: 46px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.pay-contact { font-size: 11px; }
.pay-badge { font-weight: 600; }
.pay-badge.pending  { color: #9a6700; }
.pay-badge.approved { color: var(--accent); }
.pay-badge.rejected { color: #9b1c1c; }

/* hamburger (mobile only) */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: 4px; font-size: 20px;
  background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink);
}

@media (max-width: 760px) {
  body.admin-active .nav-toggle { display: inline-flex; }
  .admin-shell { grid-template-columns: 1fr; position: relative; }
  .admin-side {
    position: fixed; top: 0; left: 0; bottom: 0; width: 250px; z-index: 60;
    padding: 16px 12px; overflow-y: auto; border-right: 1px solid var(--line);
    transform: translateX(-100%); transition: transform .25s ease;
  }
  .admin-shell.nav-open .admin-side { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .admin-shell.nav-open::before {
    content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55;
  }
  .admin-nav { position: static; }
  .admin-content { padding: 16px; }
  .admin-card { padding: 18px 16px; }
  /* drawer already has Open Reader + Log out — hide the redundant topbar buttons */
  body.admin-active .top-meta { display: none; }
  body.admin-active .brand-text small { display: none; }
  /* wide tables scroll horizontally instead of overflowing */
  .editions-table { display: block; overflow-x: auto; white-space: nowrap; }
}
.admin-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; box-shadow: var(--shadow); }
.admin-card h2 { margin: 0 0 14px; font-size: 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; }
.card-head h2 { margin: 0; }

.login-card { width: 360px; max-width: 90vw; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.login-card h2 { margin: 0; }
.login-card .muted { margin: 0; font-size: 13px; }
.login-card input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }

.upload-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: start; }
.upload-form .field { display: flex; flex-direction: column; gap: 6px; }
.upload-form .field-file { grid-column: 1 / -1; }
.upload-form label { font-size: 13px; color: var(--muted); font-weight: 600; }
.upload-form input,
.upload-form select {
  font: inherit; width: 100%; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.upload-form select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.upload-form input:focus,
.upload-form select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(207,10,10,.12); }
.upload-form #publishBtn { grid-column: 1 / -1; justify-self: start; }
.week-range { font-size: 12px; color: var(--accent); font-weight: 600; min-height: 15px; margin-top: 2px; }

/* Edition-names master (chips) */
.master-block > label { font-size: 13px; color: var(--muted); font-weight: 600; display: block; }
.master-hint { font-size: 12px; margin: 4px 0 10px; }
.card-sep { border: 0; border-top: 1px solid var(--line); margin: 18px 0 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; min-height: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; background: #f3f4f6;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 6px 5px 14px; font-size: 13px;
}
.chip button {
  border: 0; background: #e5e7eb; color: var(--muted); width: 18px; height: 18px;
  border-radius: 50%; cursor: pointer; line-height: 1; font-size: 11px; display: grid; place-items: center;
}
.chip button:hover { background: var(--red); color: #fff; }
.add-row { display: flex; gap: 8px; max-width: 420px; }
.add-row input { flex: 1; font: inherit; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; }
.add-row input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(207,10,10,.12); }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* Brand logo (header) */
.brand-img { height: 36px; width: auto; max-width: 170px; display: block; border-radius: 6px; object-fit: contain; }
/* Logo on login card + reader empty state */
.login-logo { max-height: 46px; max-width: 200px; object-fit: contain; align-self: flex-start; }
.empty-logo { max-height: 64px; max-width: 230px; object-fit: contain; display: block; margin: 0 auto 10px; }

/* Logo upload block */
.logo-block > label { font-size: 13px; color: var(--muted); font-weight: 600; display: block; }
.logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-preview { height: 42px; max-width: 170px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 3px; object-fit: contain; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal-card { background: #fff; border-radius: 12px; padding: 22px 24px; width: 480px; max-width: 95vw; box-shadow: 0 12px 48px rgba(0,0,0,.3); }
.modal-card h3 { margin: 0 0 16px; font-size: 18px; }
.modal-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* checkbox field */
.field-check { justify-content: center; }
.check-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); font-weight: 500; cursor: pointer; }
.check-label input { width: auto; }

/* subscription modal */
.sub-card { text-align: center; max-width: 440px; position: relative; }
.sub-x { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; }
.sub-tabs { display: flex; gap: 6px; justify-content: center; margin: 12px 0 14px; }
.sub-tab { border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 6px 20px; cursor: pointer; font: inherit; }
.sub-tab.active { background: var(--red); border-color: var(--red); color: #fff; }
.sub-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.sub-form input { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.sub-form .form-error { text-align: center; }
.plan-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0 14px; }
.plan-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; width: 130px; }
.plan-name { font-weight: 700; }
.plan-meta { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.plan-price { font-size: 22px; font-weight: 800; color: var(--red); margin-bottom: 10px; }
#subWho { margin: 0 0 12px; }

/* payment view */
.pay-methods { display: flex; flex-direction: column; gap: 10px; text-align: left; margin: 8px 0 14px; }
.pay-block { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.pay-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.pay-val { font-size: 15px; font-weight: 600; word-break: break-all; }
.pay-qr { width: 160px; max-width: 100%; height: auto; display: block; margin: 0 auto; }
.pay-wa-note { background: #eafbef; border: 1px solid #bfe6cb; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #084e1c; text-align: left; }
.pay-wa-note a { color: #084e1c; }
.pay-upload { text-align: left; margin: 6px 0 12px; }
.pay-up-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.pay-upload input { display: block; margin-bottom: 10px; }
.sub-icon { font-size: 34px; }
.sub-card h3 { margin: 6px 0; }
.sub-card > p.muted { margin: 0 0 10px; }
.sub-price { font-size: 30px; font-weight: 800; color: var(--red); margin: 6px 0 16px; }
.sub-price small { font-size: 13px; color: var(--muted); font-weight: 500; }
.sub-card .modal-actions { justify-content: center; }
.sub-note { font-size: 11px; margin: 14px 0 0; }

/* manage-pages modal */
.pages-card { width: 740px; max-width: 96vw; max-height: 86vh; overflow-y: auto; text-align: left; }

/* Page editor — Title / Type / Slug (or URL) on ONE row; content edit-area full width */
#pageEditModal .modal-card { width: 940px; }
#pageEditForm { grid-template-columns: 1fr 1fr 1fr; }
#pageEditForm #pageEditContentField,
#pageEditForm .field-check,
#pageEditForm .modal-actions { grid-column: 1 / -1; }
@media (max-width: 720px) {
  #pageEditForm { grid-template-columns: 1fr; }
}
.pages-grid { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.page-card { width: 150px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fff; }
.page-no { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.page-card img { width: 100%; height: 110px; object-fit: contain; background: #f3f4f6; border-radius: 4px; }
.page-ctrls { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.page-ctrls .btn { padding: 3px 6px; font-size: 12px; flex: 1; min-width: 28px; }
.page-ctrls .js-prep { flex-basis: 100%; }
.pages-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* article-zones editor (admin) */
.zone-card { width: 780px; max-width: 96vw; max-height: 90vh; overflow: auto; text-align: left; }
.zone-stage { position: relative; display: inline-block; line-height: 0; max-width: 100%; border: 1px solid var(--line); }
#zoneImg { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.zone-overlay { position: absolute; inset: 0; cursor: crosshair; }
.zone-box { position: absolute; border: 2px solid var(--red); background: rgba(207,10,10,.12); box-sizing: border-box; cursor: move; }
.zone-temp { background: rgba(207,10,10,.22); cursor: crosshair; }
/* resize handles on each zone box (admin editor) */
.zone-handle { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid var(--red); border-radius: 3px; box-sizing: border-box; z-index: 2; }
.zh-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.zh-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.zh-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.zh-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.zh-n { top: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.zh-s { bottom: -6px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.zh-w { left: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.zh-e { right: -6px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.zone-del {
  position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: var(--red); color: #fff; cursor: pointer; font-size: 11px; line-height: 1;
  display: grid; place-items: center;
}

.upload-status { margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-size: 14px; background: #f3f4f6; }
.upload-status.ok  { background: #eafbef; color: #084e1c; border: 1px solid #bfe6cb; }
.upload-status.err { background: #fff1f1; color: #9b1c1c; border: 1px solid #f3c2c2; }
.form-error { color: var(--red); font-size: 13px; margin: 4px 0 0; }

.editions-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.editions-table th, .editions-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.editions-table .row-actions { justify-content: flex-end; }
.editions-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.editions-table tr:last-child td { border-bottom: none; }
.ed-thumb-cell { width: 56px; }
.ed-thumb { width: 44px; height: auto; display: block; border: 1px solid var(--line); border-radius: 4px; }
.row-actions { display: flex; gap: 8px; }
.btn-sm { padding: 4px 10px; font-size: 13px; }

@media (max-width: 640px) {
  .upload-form { grid-template-columns: 1fr; }
}

/* ===== Public visitor counter (reader / content pages) ===== */
.visit-counter { flex: 0 0 auto; background: var(--panel); border-top: 1px solid var(--line); padding: 8px 12px; text-align: center; }
.vc-title { font-weight: 700; color: var(--ink); font-size: 11px; margin-bottom: 5px; }
.vc-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.vc-item {
  display: flex; flex-direction: column; align-items: center;
  min-width: 52px; padding: 3px 7px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px;
}
.vc-n { font-weight: 800; font-size: 13px; color: var(--red); font-variant-numeric: tabular-nums; }
.vc-l { font-size: 8px; color: var(--muted); margin-top: 1px; text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 560px) {
  .visit-counter { padding: 6px 8px; }
  .vc-row { gap: 4px; }
  .vc-item { min-width: 0; flex: 1 1 28%; padding: 3px 4px; }
  .vc-n { font-size: 12px; }
  .vc-l { font-size: 7px; }
}

/* ===== Site footer (reader / admin / page views) — single compact line ===== */
.site-footer { flex: 0 0 auto; background: var(--ink); color: #cbd2dd; }
.footer-inner {
  max-width: 1100px; margin: 0 auto; padding: 8px 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.footer-link { color: #e5e7eb; text-decoration: none; font-size: 12px; }
.footer-link:hover { color: #fff; text-decoration: underline; }
.footer-copy { margin-left: auto; font-size: 11px; color: #9aa3b2; white-space: nowrap; }

/* relocated Login / account button (footer.js moves it here on mobile) */
.footer-account { display: none; }            /* empty on desktop — button lives in the header */
.footer-account .btn {
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.28); border-bottom-width: 1px;
}
.footer-account .btn:hover { background: rgba(255,255,255,.20); }
@media (max-width: 560px) {
  .footer-account { display: flex; justify-content: center; width: 100%; order: -1; }
}
.footer-powered { color: #cbd2dd; text-decoration: none; font-weight: 600; }
.footer-powered:hover { color: #fff; text-decoration: underline; }
.admin-content .footer-powered { color: var(--ink); }

/* mobile: show the page names as distinct rounded chips, centered */
@media (max-width: 600px) {
  .footer-inner { flex-direction: column; align-items: center; gap: 12px; padding: 14px; }
  .footer-links { justify-content: center; gap: 8px; }
  .footer-link {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    padding: 7px 14px; border-radius: 999px; font-size: 12.5px; line-height: 1;
  }
  .footer-link:hover, .footer-link:active { background: rgba(255, 255, 255, .18); color: #fff; text-decoration: none; }
  .footer-copy { margin-left: 0; text-align: center; white-space: normal; }
  /* the admin footer is light, so give it dark chips instead */
  .admin-content .footer-link { background: #f3f4f6; border-color: var(--line); }
  .admin-content .footer-link:active, .admin-content .footer-link:hover { background: #e5e7eb; color: var(--ink); }
}

/* admin footer sits inside the scrollable content → keep it light, not a dark bar */
.admin-content .site-footer { background: transparent; border-top: 1px solid var(--line); }
.admin-content .footer-inner { padding: 12px 0 0; }
.admin-content .footer-link { color: var(--ink); }
.admin-content .footer-copy { color: var(--muted); }

/* ===== Public content page (page.php) — normal document flow, NOT a sticky footer ===== */
body.page-doc { display: block; height: auto; min-height: 100%; }
body.page-doc .page-view { overflow: visible; }
.page-view { flex: 1; background: var(--bg); padding: 24px 16px; overflow-y: auto; }
.page-content {
  max-width: 820px; margin: 0 auto; padding: 28px 32px 40px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
/* special "masthead" treatment for the page title + section headings */
.page-content h1, .page-content h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 800; font-size: 30px; line-height: 1.15; color: var(--ink);
  margin: 0 0 20px; padding-bottom: 12px; position: relative;
}
.page-content h1::after, .page-content h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 64px; height: 4px; background: var(--red); border-radius: 2px;
}
.page-content h3 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: var(--red); font-size: 19px; font-weight: 700; margin: 26px 0 8px;
}
.page-content p, .page-content li { line-height: 1.75; color: #333; }
@media (max-width: 600px) { .page-content h1, .page-content h2 { font-size: 24px; } }
.page-content img { max-width: 100%; height: auto; }
.page-content a { color: var(--red); }
@media (max-width: 600px) { .page-content { padding: 20px 18px 32px; } }

/* ===== Pages manager (admin) ===== */
.pg-type { font-size: 11px; padding: 2px 9px; border-radius: 20px; font-weight: 600; }
.pg-type.page { background: #e0e7ff; color: #3730a3; }
.pg-type.link { background: #fef3c7; color: #92400e; }
.pg-target { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-target a { color: var(--muted); font-size: 12px; }

/* show/hide toggle switch */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #cbd5e1; border-radius: 20px; cursor: pointer; transition: background .2s; }
.switch span::before {
  content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s;
}
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { transform: translateX(16px); }

/* ---- Clip preview fullscreen zoom (click the cutting → 1.5×→2×→3×→4×→1×) ---- */
.share-img { cursor: zoom-in; }
.clip-zoom { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000;
  background: rgba(0,0,0,.93); overflow: auto; cursor: zoom-out;
  -webkit-overflow-scrolling: touch; }
/* margin:auto centres the cutting when it fits, but lets it overflow & scroll fully when zoomed */
.clip-zoom-img { display: block; margin: 0 auto; cursor: grab; user-select: none;
  box-shadow: 0 0 40px rgba(0,0,0,.6); background: #fff; }
.clip-zoom-badge { position: fixed; top: 14px; left: 14px; background: rgba(0,0,0,.6);
  color: #fff; font: 700 14px system-ui, sans-serif; padding: 6px 13px; border-radius: 20px; pointer-events: none; }
.clip-zoom-x { position: fixed; top: 10px; right: 14px; width: 42px; height: 42px; border: 0;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }