:root { --ink:#171717; --paper:#f4f2ee; --red:#c51f2c; --line:#d8d5cf; --muted:#686868; }
* { box-sizing:border-box; letter-spacing:0; }
body { margin:0; color:var(--ink); background:#fff; font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; }
.site-header { background:#171717; border-bottom:3px solid var(--red); }
.navbar { min-height:70px; }
.navbar-brand { display:flex; align-items:center; gap:10px; }
.navbar-brand strong,.navbar-brand small { display:block; line-height:1; }
.navbar-brand small { margin-top:5px; font-size:10px; font-weight:700; color:#bfbfbf; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; background:var(--red); color:white; font-family:Georgia,serif; font-size:25px; font-weight:700; }
.admin-link { color:#ffb2b8!important; }
.alerts-wrap { padding-top:18px; }
.section-kicker { display:block; margin-bottom:10px; color:var(--red); font-size:12px; font-weight:800; }
.edition-band { padding:46px 0 56px; background:var(--paper); border-bottom:1px solid var(--line); }
.edition-heading,.page-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:32px; }
.edition-heading h1,.page-heading h1,.empty-state h1 { margin:0; font-family:Georgia,serif; font-size:clamp(34px,5vw,62px); line-height:1; }
.edition-heading p,.page-heading p { margin:12px 0 0; color:var(--muted); }
.front-layout { display:grid; grid-template-columns:minmax(300px,520px) 1fr; gap:42px; align-items:start; }
.front-page { display:block; background:white; box-shadow:0 12px 34px rgba(0,0,0,.16); }
.front-page img { display:block; width:100%; height:auto; }
.page-browser { min-width:0; }
.page-browser-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:2px solid var(--ink); }
.page-browser-head h2 { margin:0; font-family:Georgia,serif; font-size:25px; }
.page-browser-head span { color:var(--muted); font-size:12px; }
.page-grid { display:grid; grid-template-columns:repeat(4,minmax(90px,1fr)); gap:14px; padding-top:18px; }
.page-tile { min-width:0; text-decoration:none; background:white; border:1px solid var(--line); transition:transform .15s,border-color .15s; }
.page-tile:hover { transform:translateY(-2px); border-color:var(--red); }
.page-tile img,.locked-preview { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; }
.locked-preview { display:grid; place-items:center; background:#dedbd5; color:#555; font-size:24px; }
.page-tile strong { display:block; padding:9px; font-size:12px; }
.archive-section,.account-section,.admin-section { padding:52px 0 72px; }
.section-title { margin-bottom:24px; }
.section-title h2 { margin:0; font-family:Georgia,serif; font-size:34px; }
.archive-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }
.archive-item { display:grid; grid-template-columns:66px 1fr auto; align-items:center; gap:18px; padding:22px 14px; text-decoration:none; border-bottom:1px solid var(--line); }
.archive-item:nth-child(odd) { border-right:1px solid var(--line); }
.archive-item time { color:var(--red); font-weight:800; }
.archive-item h3 { margin:0 0 5px; font-family:Georgia,serif; font-size:20px; }
.archive-item p { margin:0; color:var(--muted); font-size:13px; }
.archive-item:hover h3 { color:var(--red); }
.empty-state { min-height:420px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.auth-section { min-height:calc(100vh - 140px); display:grid; place-items:center; padding:48px 16px; background:var(--paper); }
.auth-panel { width:min(100%,440px); padding:36px; background:white; border-top:4px solid var(--red); box-shadow:0 10px 30px rgba(0,0,0,.09); }
.auth-panel h1 { margin:0 0 8px; font-family:Georgia,serif; font-size:36px; }
.auth-panel>p { margin-bottom:28px; color:var(--muted); }
.form-control,.form-select { min-height:46px; border-radius:3px; }
.btn { border-radius:3px; font-weight:700; }
.btn-danger { background:var(--red); border-color:var(--red); }
.auth-links { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:22px; font-size:13px; }
.auth-links a { color:var(--red); font-weight:700; }
.reader-page { background:#262626; min-height:calc(100vh - 70px); color:white; }
.reader-toolbar { position:sticky; top:70px; z-index:10; padding:10px 0; background:#111; border-bottom:1px solid #444; }
.reader-toolbar strong,.reader-toolbar small { display:block; }
.reader-toolbar small { color:#aaa; font-size:11px; }
.reader-actions { display:flex; align-items:center; gap:8px; }
.icon-btn { width:36px; height:36px; padding:0; border:1px solid #555; background:#222; color:white; font-size:20px; }
.reader-actions span { width:48px; text-align:center; font-size:12px; }
.reader-shell { display:grid; grid-template-columns:112px minmax(0,1fr); min-height:70vh; }
.thumb-strip { max-height:calc(100vh - 130px); overflow:auto; padding:12px; background:#181818; }
.thumb-strip a { display:grid; grid-template-columns:1fr; gap:4px; margin-bottom:12px; padding:5px; color:white; text-align:center; text-decoration:none; border:2px solid transparent; }
.thumb-strip a.active { border-color:var(--red); }
.thumb-strip img,.mini-lock { width:100%; aspect-ratio:3/4; object-fit:cover; background:#555; }
.mini-lock { display:grid; place-items:center; }
.paper-stage { overflow:auto; padding:28px; text-align:center; }
.paper-stage img { display:block; width:100%; max-width:1050px; height:auto; margin:auto; transform-origin:top center; transition:width .15s; }
.paper-stage:fullscreen { background:#222; }
.reader-pager { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:18px; background:#111; }
.reader-pager a:last-child { justify-self:end; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px; }
.stats-grid>div { padding:22px; background:var(--paper); border-left:3px solid var(--red); }
.stats-grid span,.stats-grid strong { display:block; }
.stats-grid span { color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; }
.stats-grid strong { margin-top:5px; font-family:Georgia,serif; font-size:35px; }
.admin-table-wrap { border:1px solid var(--line); }
.admin-table-wrap .table { margin:0; }
.admin-table-wrap th { padding:14px; background:#222; color:white; font-size:12px; text-transform:uppercase; }
.admin-table-wrap td { padding:15px 14px; }
.admin-table-wrap td small { display:block; color:var(--muted); }
.admin-actions { display:flex; justify-content:flex-end; gap:7px; }
.status { display:inline-block; padding:5px 9px; border-radius:2px; font-size:11px; font-weight:800; text-transform:uppercase; }
.status-published,.status-active { background:#d9f0df; color:#17632d; }
.status-draft,.status-blocked { background:#f1dddd; color:#8d2028; }
.upload-form { padding:34px; border:1px solid var(--line); background:var(--paper); }
.file-drop { display:grid; place-items:center; min-height:190px; padding:25px; text-align:center; border:2px dashed #999; background:white; cursor:pointer; }
.file-drop:hover { border-color:var(--red); }
.file-drop span { margin-top:7px; color:var(--muted); font-size:13px; }
.file-drop input { position:absolute; width:1px; height:1px; opacity:0; }
.selected-file { margin-top:8px; color:var(--muted); font-size:13px; }
.form-submit { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.form-submit p { max-width:520px; margin:0; color:var(--muted); font-size:13px; }
.edition-list { border-top:2px solid var(--ink); }
.edition-list>a { display:grid; grid-template-columns:130px 1fr auto; gap:20px; padding:22px 8px; text-decoration:none; border-bottom:1px solid var(--line); }
.edition-list strong,.edition-list span { display:block; }
.edition-list span { margin-top:4px; color:var(--muted); font-size:13px; }
.error-page { min-height:65vh; display:grid; place-content:center; justify-items:center; padding:30px; text-align:center; }
.error-page>strong { color:var(--red); font-family:Georgia,serif; font-size:80px; line-height:1; }
.site-footer { padding:22px 0; background:#171717; color:#aaa; font-size:12px; }

/* Professional newspaper reader */
.pro-reader { --command-height:64px; --navigation-height:58px; position:relative; min-height:calc(100vh - 70px); background:#343536; color:#fff; overflow:hidden; }
.reader-commandbar { position:sticky; top:70px; z-index:30; height:var(--command-height); display:flex; align-items:stretch; justify-content:space-between; gap:18px; padding:0 18px; background:#f8f8f8; color:#222; border-bottom:1px solid #c8c8c8; box-shadow:0 2px 8px rgba(0,0,0,.13); }
.reader-publication,.reader-tools,.zoom-control,.page-stepper,.view-switch { display:flex; align-items:center; }
.reader-publication { min-width:0; gap:12px; }
.reader-home-button { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; color:#fff; background:var(--red); text-decoration:none; border-radius:3px; }
.reader-home-button svg { width:23px; height:23px; }
.reader-selectors { display:flex; min-width:0; gap:8px; }
.reader-selectors label { min-width:0; margin:0; }
.reader-selectors label>span { display:block; margin-bottom:2px; color:#777; font-size:9px; font-weight:800; text-transform:uppercase; }
.reader-select { width:170px; height:32px; padding:3px 30px 3px 8px; border:1px solid #c9c9c9; border-radius:3px; background:#fff; font-size:12px; font-weight:700; }
.reader-selectors label:last-child .reader-select { width:145px; }
.reader-tools { justify-content:flex-end; gap:3px; }
.tool-button,.zoom-value { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:38px; padding:0 10px; border:1px solid transparent; border-radius:3px; background:transparent; color:#333; text-decoration:none; font-size:11px; font-weight:700; white-space:nowrap; }
.tool-button:hover,.tool-button:focus,.zoom-value:hover { color:var(--red); background:#ececec; border-color:#d3d3d3; }
.tool-button.icon-only { width:38px; padding:0; }
.tool-button svg,.nav-command svg,.nav-icon svg,.dropdown-item svg,.clip-modal .btn svg { width:18px; height:18px; stroke-width:1.8; }
.zoom-control { height:40px; border:1px solid #d3d3d3; border-radius:3px; }
.zoom-control .tool-button { border:0; }
.zoom-value { width:52px; padding:0; border-width:0 1px; border-color:#d3d3d3; border-radius:0; font-size:10px; }
.share-menu { min-width:190px; padding:6px; border-radius:4px; }
.share-menu .dropdown-item { display:flex; align-items:center; gap:9px; padding:9px; border-radius:2px; font-size:13px; }
.reader-canvas-shell { height:calc(100vh - 70px - var(--command-height) - var(--navigation-height)); min-height:440px; }
.paper-viewport { width:100%; height:100%; overflow:auto; padding:24px 30px 45px; cursor:grab; overscroll-behavior:contain; scrollbar-color:#777 #2d2e2f; }
.paper-viewport.is-dragging { cursor:grabbing; user-select:none; }
.paper-spread { display:flex; align-items:flex-start; justify-content:center; gap:10px; width:max-content; min-width:100%; margin:auto; transform-origin:top center; }
.paper-image { display:block; width:min(900px, calc(100vw - 150px)); max-width:none; height:auto; background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.38); user-select:none; }
.second-paper { display:none; }
.paper-spread[data-mode="double"] .paper-image { width:min(720px, calc((100vw - 150px) / 2)); }
.paper-spread[data-mode="double"] .second-paper { display:block; }
.reader-navigation { position:sticky; bottom:0; z-index:31; height:var(--navigation-height); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:0 18px; color:#222; background:#fff; border-top:1px solid #c8c8c8; box-shadow:0 -2px 9px rgba(0,0,0,.14); }
.nav-command,.nav-icon { display:inline-flex; align-items:center; justify-content:center; border:1px solid #d2d2d2; border-radius:3px; background:#f7f7f7; color:#222; text-decoration:none; }
.nav-command { justify-self:start; gap:8px; height:38px; padding:0 13px; font-size:12px; font-weight:700; }
.nav-command:hover,.nav-icon:hover,.nav-icon.active { color:#fff; background:var(--red); border-color:var(--red); }
.nav-icon { width:36px; height:36px; padding:0; }
.nav-icon.disabled,.nav-icon:disabled { opacity:.35; pointer-events:none; }
.page-stepper { justify-content:center; gap:8px; }
.page-jump { display:flex; align-items:center; gap:7px; margin:0; font-size:11px; font-weight:700; }
.page-jump input { width:52px; height:34px; padding:4px; text-align:center; border:1px solid #bbb; border-radius:3px; font-weight:800; }
.view-switch { justify-self:end; gap:4px; }
.pages-drawer { width:min(440px, 94vw)!important; }
.offcanvas-header { border-bottom:1px solid var(--line); }
.offcanvas-header h2 { margin:0; font-family:Georgia,serif; font-size:26px; }
.drawer-kicker { display:block; margin-bottom:4px; color:var(--red); font-size:9px; font-weight:800; }
.drawer-page-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.drawer-page { min-width:0; padding:5px; color:#222; text-align:center; text-decoration:none; border:2px solid transparent; }
.drawer-page:hover,.drawer-page.active { color:var(--red); border-color:var(--red); }
.drawer-thumb { display:grid; place-items:center; width:100%; aspect-ratio:3/4; overflow:hidden; background:#dedede; }
.drawer-thumb img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.drawer-thumb svg { width:22px; }
.drawer-page strong { display:block; padding-top:6px; font-size:11px; }
.search-drawer { width:min(410px, 94vw)!important; }
.reader-search-form label { margin-bottom:7px; font-size:12px; font-weight:700; }
.reader-search-form .btn { display:grid; place-items:center; width:48px; }
.reader-search-form svg { width:18px; }
.search-status { padding:20px 0 12px; color:#777; font-size:12px; }
.search-result { display:block; padding:14px 4px; color:#222; text-decoration:none; border-top:1px solid var(--line); }
.search-result strong { display:block; margin-bottom:5px; color:var(--red); font-size:12px; }
.search-result p { margin:0; color:#555; font-size:12px; line-height:1.55; }
.clip-workspace { max-height:68vh; overflow:auto; padding:12px; text-align:center; background:#252627; }
.clip-workspace canvas { display:block; max-width:100%; height:auto; margin:auto; cursor:crosshair; touch-action:none; }
.clip-help { margin:10px 0 0; color:#666; font-size:12px; }
.clip-modal .modal-footer .btn { display:inline-flex; align-items:center; gap:7px; }
.reader-toast { position:fixed; right:20px; bottom:78px; z-index:1090; max-width:320px; padding:11px 15px; color:#fff; background:#171717; border-left:3px solid var(--red); border-radius:3px; opacity:0; pointer-events:none; transform:translateY(8px); transition:.18s; }
.reader-toast.show { opacity:1; transform:translateY(0); }
.pro-reader:fullscreen { min-height:100vh; }
.pro-reader:fullscreen .reader-commandbar { top:0; }
.pro-reader:fullscreen .reader-canvas-shell { height:calc(100vh - var(--command-height) - var(--navigation-height)); }

@media print {
  .site-header,.site-footer,.reader-commandbar,.reader-navigation,.offcanvas,.modal,.reader-toast { display:none!important; }
  .pro-reader,.reader-canvas-shell,.paper-viewport { height:auto!important; min-height:0; padding:0; overflow:visible; background:#fff; }
  .paper-spread { display:block; width:100%; min-width:0; }
  .paper-image { width:100%!important; max-width:100%; box-shadow:none; }
  .second-paper { display:none!important; }
}
@media (max-width:991px) { .front-layout{grid-template-columns:minmax(260px,42%) 1fr;gap:25px}.page-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:767px) {
  .edition-band{padding:28px 0 38px}.edition-heading,.page-heading{align-items:flex-start;flex-direction:column}.edition-heading h1,.page-heading h1{font-size:38px}
  .front-layout{grid-template-columns:1fr}.front-page{max-width:480px;margin:auto}.page-grid{grid-template-columns:repeat(3,1fr)}
  .archive-grid{grid-template-columns:1fr}.archive-item:nth-child(odd){border-right:0}.stats-grid{grid-template-columns:repeat(2,1fr)}
  .reader-shell{grid-template-columns:1fr}.thumb-strip{display:flex;max-height:none;overflow:auto}.thumb-strip a{flex:0 0 70px}.paper-stage{padding:12px}
  .reader-toolbar{top:69px}.reader-pager{grid-template-columns:1fr auto 1fr;font-size:12px}.upload-form{padding:20px}
  .pro-reader { --command-height:108px; --navigation-height:58px; }
  .reader-commandbar { top:69px; height:var(--command-height); flex-direction:column; gap:5px; padding:7px 10px; overflow:hidden; }
  .reader-publication { width:100%; }
  .reader-home-button { flex-basis:36px; width:36px; height:36px; }
  .reader-selectors { flex:1; }
  .reader-selectors label { flex:1; }
  .reader-select,.reader-selectors label:last-child .reader-select { width:100%; }
  .reader-tools { width:100%; justify-content:flex-start; overflow-x:auto; padding-bottom:3px; }
  .tool-button { flex:0 0 auto; }
  .tool-button span { display:none; }
  .reader-canvas-shell { min-height:360px; }
  .paper-viewport { padding:14px 12px 30px; }
  .paper-image { width:calc(100vw - 24px); }
  .paper-spread[data-mode="double"] .paper-image { width:calc((100vw - 34px) / 2); }
  .reader-navigation { grid-template-columns:auto 1fr auto; gap:7px; padding:0 8px; }
  .nav-command { width:38px; padding:0; }
  .nav-command span { display:none; }
  .page-stepper { gap:4px; }
  .page-jump label { display:none; }
  .page-jump input { width:43px; }
  .drawer-page-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:420px) { .page-grid{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:1fr 1fr}.auth-panel{padding:25px}.form-submit{align-items:stretch;flex-direction:column}.form-submit .btn{width:100%} }