:root { color-scheme: dark; }
body.mcs-reader-page{
  margin:0; background:#0b0b0b; color:#fff;
  font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* TOPBAR */
.mcsr-topbar{
  position: fixed; inset: 0 0 auto 0; height: 52px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: rgba(10,10,10,.95); backdrop-filter: blur(6px);
  padding: 0 14px; z-index: 20; border-bottom: 1px solid #1e1e1e;
}
.mcsr-back{ color:#fff; text-decoration:none; opacity:.85; }
.mcsr-title{ justify-self:center; font-weight:700; opacity:.9; }

/* STAGE */
.mcsr-stage{ position: fixed; inset: 52px 0 0 0; overflow:auto; -webkit-overflow-scrolling:touch; cursor: grab; }
.mcsr-stage:active{ cursor: grabbing; }
body.mcsr-head-hidden .mcsr-topbar{ display:none; }
body.mcsr-head-hidden .mcsr-stage{ inset: 0; }

/* STRIP */
.mcsr-strip{
  width: min(var(--page-width, 1200px), 98vw);
  margin: 20px auto; display:flex; gap:16px;
}
.mcsr-strip.vertical{ flex-direction: column; }
.mcsr-strip.horizontal{ flex-direction: row; }
.mcsr-page{
  width:100%; height:auto; display:block; border-radius:12px; background:#111;

  /* Важные оптимизации отрисовки */
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
  -webkit-user-drag: none;
  user-select: none;
}

/* RIGHT TOOLBAR */
.mcsr-toolbar{
  position: fixed; right: 18px; top: 100px; display:flex; flex-direction:column; gap:12px; z-index:30;
}
.mcsr-chip{
  background:#151515; color:#ddd; border:1px solid #2a2a2a; border-radius:10px;
  padding:6px 10px; font-weight:600; font-size:13px; text-align:center;
}
.mcsr-fab{
  width:56px; height:56px; border-radius:14px; background:#1c1c1c; color:#fff;
  border:1px solid #2e2e2e; display:grid; place-items:center; font-size:20px; cursor:pointer;
}
.mcsr-fab:hover{ background:#232323; }

/* MODALS */
.mcsr-modal[hidden]{ display:none; }
.mcsr-modal{
  position: fixed; inset:0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
  display:grid; place-items:center; z-index:50;
}
.mcsr-dialog{
  width:min(92vw, 640px); background:#121212; border:1px solid #2a2a2a; border-radius:14px;
  padding:18px 18px 20px; color:#ddd; position:relative;
}
.mcsr-dialog h3{ margin:0 0 12px; }
.mcsr-close{ position:absolute; right:10px; top:8px; width:36px; height:36px; border-radius:9px; border:1px solid #2a2a2a; background:#1b1b1b; color:#fff; font-size:18px; }
.mcsr-btn{ border:1px solid #2a2a2a; background:#1b1b1b; color:#fff; border-radius:10px; padding:8px 12px; cursor:pointer; }
.mcsr-btn.blk{ width:100%; }
.mcsr-form-row{ margin:14px 0; }
.mcsr-form-row label{ display:block; margin-bottom:6px; opacity:.85; }
.mcsr-layout-sel{ display:flex; gap:10px; }
.mcsr-range-wrap{ display:flex; align-items:center; gap:12px; }
.mcsr-size-range{ width:260px; }
.mcsr-range-val{ opacity:.8; min-width:70px; text-align:right; }

/* Login form */
.mcsr-login-form input[type="text"], .mcsr-login-form input[type="password"]{
  width:100%; padding:10px; background:#0e0e0e; border:1px solid #2a2a2a; border-radius:10px; color:#fff; margin:6px 0;
}
.mcsr-login-form .button, .mcsr-login-form input[type="submit"]{
  background:#ff1744; border:none; border-radius:10px; color:#fff; padding:10px 12px; cursor:pointer;
}

/* Pointer Events drag state */
.mcsr-stage.dragging{
  cursor: grabbing;
  user-select: none;
}
.mcsr-stage{
  touch-action: none;
}

.mcsr-fab.is-active{ color:#ee2447; border-color:#ee2447; }