/* Magazine builder (#/magazine/:id) */
.mb-boot { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 90px 20px; color: var(--mute); }
.mb-pad { padding: 28px; }
.mb { display: flex; flex-direction: column; height: calc(100vh - var(--top-h)); height: calc(100dvh - var(--top-h)); min-height: 480px; background: var(--bg); }
.mb-spacer { flex: 1; }

/* ----- header ----- */
.mb-head { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mb-back { display: inline-flex; align-items: center; gap: 2px; padding: 6px 10px 6px 4px; border-radius: 99px; color: var(--ink-2); font-weight: 600; font-size: 13px; text-decoration: none !important; }
.mb-back:hover { background: var(--panel-3); color: var(--ink); }
.mb-back svg { width: 18px; height: 18px; }
.mb-no { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--acc-2); background: var(--acc-soft); padding: 6px 9px; border-radius: 99px; white-space: nowrap; }
:root[data-theme="dark"] .mb-no { color: var(--acc); }
.mb-title { flex: 1 1 220px; min-width: 140px; max-width: 520px; border: 1px solid transparent; background: transparent; border-radius: var(--r); padding: 4px 10px; font: 500 22px/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); text-overflow: ellipsis; }
.mb-title:hover { border-color: var(--line-2); }
.mb-title:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); background: var(--panel); }
.mb-title::placeholder { color: var(--mute); }
.mb-save { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.mb-save svg { width: 14px; height: 14px; color: var(--ok); }
.mb-save.error { color: var(--danger); }
.mb-save.error svg { color: var(--danger); }
.mb-save .spinner { width: 13px; height: 13px; border-width: 2px; }
.mb-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); animation: mb-pulse 1.2s ease-in-out infinite; }
@keyframes mb-pulse { 50% { opacity: .3; transform: scale(.8); } }

/* ----- split ----- */
.mb-mobile { display: none; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.mb-mobile .seg { width: 100%; }
.mb-mobile .seg button { flex: 1; justify-content: center; }
.mb-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px minmax(0, 1fr); }
.mb-insp { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
.mb-tabs { display: flex; padding: 0 8px; border-bottom: 1px solid var(--line); flex: none; }
.mb-tabs button { flex: 1; border: 0; background: transparent; padding: 12px 6px; font-weight: 600; font-size: 13.5px; color: var(--mute); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.mb-tabs button:hover { color: var(--ink); }
.mb-tabs button[aria-selected="true"] { color: var(--ink); }
.mb-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--acc); }
.mb-n { font: 600 11px/1 var(--sans); background: var(--panel-3); padding: 3px 7px; border-radius: 99px; color: var(--ink-2); }
.mb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.mb-ro { margin: 12px 12px 0; font-size: 13px; }
.mb-panels { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.mb-panel { display: flex; flex-direction: column; gap: 22px; animation: fade .2s var(--ease); }
.mb-panel[hidden] { display: none; }
.mb-sec { display: flex; flex-direction: column; gap: 12px; }
.mb-sec > h3 { margin: 0; font: 700 11px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.mb-sec .hint { font-size: 12.5px; color: var(--mute); margin: 0; }
.mb-sec code { font: 500 12px var(--mono); background: var(--panel-3); padding: 1px 5px; border-radius: 4px; }
.err { color: var(--danger); }
.input.bad { border-color: var(--danger); }

/* ----- stories ----- */
.mb-stories { display: flex; flex-direction: column; gap: 18px; }
.mb-sthead { display: flex; align-items: center; gap: 10px; }
.mb-stat { flex: 1; font-size: 13.5px; color: var(--ink-2); }
.mb-stat b { color: var(--ink); }
.mb-gh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.mb-gh h3 { margin: 0; font: 700 11px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.mb-gh .chip { padding: 2px 7px; }
.mb-gh-hint { font-size: 12px; color: var(--mute); }
.mb-rows { display: flex; flex-direction: column; gap: 6px; min-height: 52px; border-radius: var(--r); }
.mb-empty { margin: 0; padding: 16px; text-align: center; font-size: 13px; color: var(--mute); border: 1.5px dashed var(--line-2); border-radius: var(--r); }
.mb-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); cursor: grab; transition: border-color .15s, box-shadow .2s, background .15s; }
.mb-row:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.mb-row:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.mb-row.hl { border-color: var(--acc); background: var(--acc-soft); animation: mb-flash .9s var(--ease); }
@keyframes mb-flash { 0% { box-shadow: 0 0 0 4px var(--acc-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
.mb-row.missing { border-color: var(--danger); }
.mb-grip { color: var(--mute); display: grid; place-items: center; opacity: .6; flex: none; }
.mb-grip svg { width: 16px; height: 16px; }
.mb-row:hover .mb-grip { opacity: 1; }
.mb-row .mc-thumb { width: 42px; height: 42px; }
.mb-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mb-row-t { font-weight: 600; font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mb-row-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mb-row-meta .chip { font-size: 10.5px; padding: 1px 7px; }
.mb-row-main small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-warn { display: inline-grid; place-items: center; color: var(--warn); }
.mb-warn svg { width: 14px; height: 14px; }
.mb-hint, .mb-hint2 { margin: 0; font-size: 12.5px; color: var(--mute); }
.mb-hint { display: flex; gap: 10px; align-items: flex-start; padding: 12px; background: var(--panel-2); border-radius: var(--r); }
.mb-hint svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* ----- cover tab ----- */
.mb-focal-row { display: flex; gap: 16px; align-items: flex-start; }
.mb-imgwrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mb-focal { position: relative; display: block; width: fit-content; max-width: 100%; border-radius: var(--r); overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; border: 1px solid var(--line-2); line-height: 0; }
.mb-focal img { max-width: 100%; max-height: 250px; width: auto; height: auto; display: block; pointer-events: none; }
.mb-focal:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.mb-cross { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4); pointer-events: none; transition: left .06s linear, top .06s linear; }
.mb-cross::before, .mb-cross::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.mb-cross::before { left: 50%; top: -7px; bottom: -7px; width: 1.5px; margin-left: -.75px; }
.mb-cross::after { top: 50%; left: -7px; right: -7px; height: 1.5px; margin-top: -.75px; }
.mb-cropbox { flex: none; width: 104px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.mb-crop { width: 104px; aspect-ratio: 794 / 1123; background-size: cover; background-repeat: no-repeat; border-radius: 4px; border: 1px solid var(--line-2); box-shadow: var(--shadow-2); background-color: var(--panel-3); }
.mb-crop-l { font-size: 11.5px; line-height: 1.4; color: var(--mute); text-align: center; }
.mb-nopic { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; border: 1.5px dashed var(--line-2); border-radius: var(--r); background: var(--panel-2); color: var(--ink-2); text-align: center; }
.mb-nopic:hover { border-color: var(--acc); background: var(--acc-soft); }
.mb-nopic svg { width: 26px; height: 26px; color: var(--acc); }
.mb-nopic span { font-size: 12.5px; color: var(--mute); }
.mb-imgbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.mb-lines { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mb-line { display: flex; gap: 6px; width: 100%; align-items: center; }
.mb-sw { display: flex; gap: 10px; flex-wrap: wrap; }
.mb-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; background: var(--c); display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 1px var(--line-2); transition: transform .15s var(--ease); }
.mb-swatch:hover { transform: scale(1.1); }
.mb-swatch svg { width: 16px; height: 16px; opacity: 0; stroke-width: 3; }
.mb-swatch[aria-pressed="true"] { border-color: var(--panel); box-shadow: 0 0 0 2px var(--c); }
.mb-swatch[aria-pressed="true"] svg { opacity: 1; }
.mb-hexrow { gap: 10px; }
.mb-hexrow input[type="color"] { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); cursor: pointer; flex: none; }
.mb-hexrow .input { width: 120px; }

/* ----- letter tab ----- */
.mb-paras { display: flex; flex-direction: column; gap: 14px; }
.mb-para-h { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.mb-para textarea { font-family: var(--serif); font-size: 14.5px; line-height: 1.6; }
.mb-para textarea.ph { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: var(--warn-soft); }
.mb-phnote { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--warn); margin-top: 6px; }
.mb-phnote svg { width: 14px; height: 14px; }
.mb-sitecard { display: flex; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel-2); }
.mb-sc-img { width: 78px; flex: none; aspect-ratio: 794 / 1123; border-radius: 4px; overflow: hidden; background: var(--acc-i, var(--acc)); box-shadow: var(--shadow-2); }
.mb-sc-img img { width: 100%; height: 100%; object-fit: cover; }
.mb-sc-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mb-sc-k { font: 700 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.mb-sc-b b { font: 500 18px/1.2 var(--display); }
.mb-sc-b p { margin: 0; font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* ----- details tab ----- */
.mb-pdfcur { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); min-width: 0; }
.mb-pdfcur svg { width: 20px; height: 20px; color: var(--danger); flex: none; }
.mb-pdfcur a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mb-checks-box { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel-2); }
.mb-checks-box summary { cursor: pointer; padding: 12px 14px; list-style: none; display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.mb-checks-box summary::-webkit-details-marker { display: none; }
.mb-checks-box summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(-45deg); margin-right: 6px; transition: transform .2s var(--ease); }
.mb-checks-box[open] summary::before { transform: rotate(45deg); }
.mb-checks-sum.ok { color: var(--ok); }
.mb-checks-sum.warn { color: var(--warn); }
.mb-checks-sum.bad { color: var(--danger); }
.mb-checks { padding: 0 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.mb-check { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border: 0; background: transparent; border-radius: var(--r-sm); text-align: left; font-size: 13.5px; width: 100%; }
button.mb-check:hover { background: var(--panel-3); }
.mb-ck { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--ok-soft); color: var(--ok); }
.mb-ck svg { width: 13px; height: 13px; stroke-width: 2.6; }
.mb-ck.ok { background: var(--ok-soft); color: var(--ok); }
.mb-check.warn .mb-ck { background: var(--warn-soft); color: var(--warn); }
.mb-check.bad .mb-ck { background: var(--danger-soft); color: var(--danger); }
.mb-go { color: var(--mute); display: inline-grid; opacity: 0; transition: opacity .15s; }
.mb-go svg { width: 15px; height: 15px; }
button.mb-check:hover .mb-go, button.mb-check:focus-visible .mb-go { opacity: 1; }

/* ----- preview side ----- */
.mb-pv { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.mb-pv-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mb-pager { display: inline-flex; align-items: center; gap: 2px; }
.mb-pageof { font-size: 12.5px; font-weight: 600; color: var(--ink-2); min-width: 92px; text-align: center; font-variant-numeric: tabular-nums; }
.mb-toc { width: 200px; }
.mb-updating { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--acc-2); }
:root[data-theme="dark"] .mb-updating { color: var(--acc); }
.mb-updating i { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); animation: mb-pulse 1s ease-in-out infinite; }
.mb-pv-stage { position: relative; flex: 1; min-height: 0; }
.mb-pv-stage .pv-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.mb-pv-wait { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; background: var(--bg); color: var(--mute); font-size: 13px; z-index: 2; }
.mb-pv-wait b { color: var(--ink); font-size: 15px; }
.mb-pv-skel { display: flex; gap: 14px; margin-bottom: 14px; }
.mb-pv-skel i { display: block; width: 92px; aspect-ratio: 794 / 1123; border-radius: 4px; background: var(--panel-3); animation: mb-skel 1.3s ease-in-out infinite; }
.mb-pv-skel i:nth-child(2) { animation-delay: .15s; }
.mb-pv-skel i:nth-child(3) { animation-delay: .3s; }
@keyframes mb-skel { 50% { opacity: .45; transform: translateY(-6px); } }
.mb-pv-err { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 3; box-shadow: var(--shadow-2); background: var(--panel); }

/* ----- publish modals ----- */
.mb-problems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mb-problems li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); font-size: 13.5px; }
.mb-problems .mb-ck { background: var(--danger-soft); color: var(--danger); }
.mb-pre-item { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); }
.mb-pre-item .mb-ck { width: 34px; height: 34px; }
.mb-pre-item .mb-ck svg { width: 17px; height: 17px; }
.mb-pre-h { margin: 14px 0 8px; font-weight: 600; font-size: 13.5px; }
.mb-pre-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 32vh; overflow-y: auto; }
.mb-pre-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 4px 2px; }
.mb-pre-list .mc-thumb { width: 32px; height: 32px; border-radius: 6px; }
.mb-celebrate { text-align: center; padding: 18px 6px 4px; }
.mb-celebrate h2 { margin: 12px 0 6px; font: 500 28px/1.1 var(--display); }
.mb-celebrate p { margin: 0; color: var(--mute); }
.mb-bigcheck { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); animation: mb-pop .5s var(--ease); }
.mb-bigcheck svg { width: 28px; height: 28px; stroke-width: 2.6; }
@keyframes mb-pop { from { transform: scale(.4); opacity: 0; } }

/* ----- small screens: Edit | Preview ----- */
@media (max-width: 900px) {
  .mb-mobile { display: block; }
  .mb-split { grid-template-columns: minmax(0, 1fr); }
  .mb[data-pane="edit"] .mb-pv { display: none; }
  .mb[data-pane="preview"] .mb-insp { display: none; }
  .mb-insp { border-right: 0; }
  .mb-head { padding: 8px 12px; gap: 8px; }
  .mb-head > .mb-spacer { display: none; }
  .mb-back { order: 1; }
  .mb-chip { order: 2; }
  .mb-save { order: 3; margin-left: auto; }
  .mb-title { order: 4; flex-basis: 100%; max-width: none; }
  .mb-pdfbtn { order: 5; }
  .mb-pubbtn { order: 6; flex: 1; }
  .mb-morebtn { order: 7; }
  .mb-no { display: none; }
  .mb-head .btn:not(.primary) span, .mb-back span { display: none; }
  .mb-pdfbtn-label { display: none; }
  .mb-toc { width: 150px; }
  .mb-focal-row { flex-direction: column; }
  .mb-cropbox { flex-direction: row; width: auto; }
}
@media (max-width: 520px) {
  .mb-head #mb-pdf-label, .mb-head .btn.hide-xs { display: none; }
  .mb-pv-bar { padding: 8px; gap: 6px; }
  .mb-toc { display: none; }
}