/* MathPuzzle Forge: app-level pieces on top of the design system (mpf-tokens.css + mpf-ui.css).
   Loaded after the old app.css / studio.css / theme.css, which still draw the pages not rebuilt yet. */

/* top bar */
.mpf-top { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--divider); }
.mpf-top .mpf-nav { position: static; }
.mpf-nav__item.is-active { background: none; color: var(--text-brand); box-shadow: inset 0 -2px 0 var(--text-brand); border-radius: var(--radius-ui-sm) var(--radius-ui-sm) 0 0; }
.mpf-nav__n { min-width: 18px; padding: 0 6px; border-radius: var(--radius-ui-full); background: var(--badge-neutral-bg); color: var(--badge-neutral-text);
  font: 500 11px/18px var(--font-ui); text-align: center; }
.mpf-nav__n:empty { display: none; }
.mpf-user { display: inline-flex; align-items: center; gap: var(--gap-xs); margin-left: var(--gap-xs); font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.mpf-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-ui-full); background: var(--action-primary-bg); color: var(--action-primary-text);
  font: 600 13px/1 var(--font-ui); }
/* the old Studio grid assumed a 56px header; the design system top bar is 64px */
body.app--studio .st { height: calc(100vh - 65px); }
@media (max-width: 1500px) { .mpf-user__email { display: none; } }

/* tier ticks (View as, admin forms). The old app.css styles every input: these win by specificity. */
.ticks { display: grid; gap: 2px; }
.tick { display: flex; align-items: center; gap: var(--gap-xs); padding: 6px var(--gap-xs); border-radius: var(--radius-ui-sm); cursor: pointer; font: 400 14px/1.4 var(--font-ui);
  color: var(--text-primary); transition: background-color var(--duration-fast) var(--ease-standard); }
.tick:hover { background: var(--iconbutton-bg-hover); }
.tick input[type="checkbox"] { width: 18px; height: 18px; margin: 0; padding: 0; flex: none; border: 0; accent-color: var(--action-primary-bg); cursor: pointer; }
.tick b { font-weight: 600; }
.tick small { margin-left: auto; font-size: 12px; color: var(--text-secondary); }
.tick--fixed { cursor: default; }
.tick--fixed:hover { background: none; }

/* the admin box: admins only, buyers never see it */
.adm { position: relative; display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 4px 0 10px; border-radius: var(--radius-ui-md);
  background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.adm[hidden] { display: none; }
.adm__tag { font: 600 11px/1 var(--font-ui); letter-spacing: .5px; text-transform: uppercase; margin-right: 4px; white-space: nowrap; }
.adm__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border: 0; border-radius: var(--radius-ui-sm); background: none; color: inherit;
  font: 500 13px/1 var(--font-ui); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard); }
.adm__btn:hover { background: #47370014; }
.adm__btn:focus-visible { outline: 2px solid var(--badge-warning-text); outline-offset: 1px; }
.adm__btn b { font-weight: 600; }
.adm__va { position: relative; }
.adm__pop { position: absolute; z-index: 40; top: calc(100% + 10px); right: 0; width: 330px; padding: var(--gap-sm); box-sizing: border-box; background: var(--surface-raised);
  color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-ui-md); box-shadow: var(--shadow-ui-md);
  animation: mpf-dropdown-in var(--duration-base) var(--ease-out-expo) both; }
.adm__pop[hidden] { display: none; }
.adm__poph { margin: 0 0 var(--gap-xs); padding: 0 var(--gap-xs); font-size: 12px; color: var(--text-secondary); }
.adm__quick { display: flex; align-items: center; gap: var(--gap-xs); margin-top: var(--gap-xs); padding-top: var(--gap-sm); border-top: 1px solid var(--divider); }
.adm__quick .mpf-btn:last-child { margin-left: auto; }
.adm-peek { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px dashed var(--badge-warning-text); border-radius: var(--radius-ui-full);
  background: var(--badge-warning-bg); color: var(--badge-warning-text); font: 500 12px/1 var(--font-ui); cursor: pointer; opacity: .75;
  transition: opacity var(--duration-fast) var(--ease-standard); }
.adm-peek[hidden] { display: none; }
.adm-peek:hover { opacity: 1; }

/* flash messages under the top bar */
.mpf-flash { display: flex; align-items: center; gap: var(--gap-xs); margin: var(--gap-sm) var(--gap-lg) 0; padding: var(--gap-sm) var(--gap-md); border-radius: var(--radius-ui-md);
  font: 400 14px/1.4 var(--font-ui); background: var(--badge-info-bg); color: var(--badge-info-text); }
.mpf-flash--success { background: var(--badge-success-bg); color: var(--badge-success-text); }
.mpf-flash--error { background: var(--badge-error-bg); color: var(--badge-error-text); }
.mpf-flash--warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.mpf-flash--info { background: var(--badge-info-bg); color: var(--badge-info-text); }

/* design system fields inside pages that still load the old app.css (which styles every input) */
.mpf-field__box .mpf-field__input { width: auto; flex: 1; min-width: 0; height: auto; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font: 400 14px/1.4 var(--font-ui); color: var(--text-primary); }
.mpf-field__box .mpf-field__input:focus { outline: 0; border: 0; }
.mpf-field__box .mpf-field__input:disabled { background: transparent; color: var(--text-secondary); }
.mpf-field__box .mpf-ico { color: var(--text-secondary); flex: none; }
.mpf-flash .mpf-ico { flex: none; }

/* sign in, get key, setup, 404 */
body.auth-page { min-height: 100vh; margin: 0; padding: var(--gap-lg); box-sizing: border-box; display: flex; }
.auth-glow { flex: 1; display: grid; place-items: center; min-height: calc(100vh - 48px); }
.auth-card { width: min(460px, 100%); box-sizing: border-box; padding: var(--gap-lg) 0; }
.auth-card .mpf-glow__panel { padding: var(--gap-xl); }
.auth-name { margin: 0 0 var(--gap-lg); font: 500 20px/1 var(--font-display); text-align: center; color: var(--text-primary); }
.auth { display: grid; gap: var(--gap-md); }
.auth h1 { margin: 0; }
.auth__sub { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary); }
.auth > .mpf-btn { width: 100%; }
.auth-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); }
.auth-note { margin: 0; font-size: 12px; color: var(--text-secondary); }
.auth-foot { margin: var(--gap-md) 0 0; font-size: 14px; color: var(--text-secondary); text-align: center; }
.auth-foot a, .auth-help a { color: var(--text-brand); font-weight: 500; }
.auth-help { margin: var(--gap-md) 0 0; font-size: 13px; color: var(--text-secondary); text-align: center; }
.auth-flash { margin: 0 0 var(--gap-md); }
@media (max-width: 520px) { .auth-two { grid-template-columns: 1fr; } .auth-card .mpf-glow__panel { padding: var(--gap-lg); } }

/* pages rebuilt on the design system (Account; later My books, admin) */
/* (screens.html: pages start 64px from the left, not centred; two-column cards stop at 1056px) */
body.app { background: var(--surface-primary); }
.mpf-page { padding: var(--gap-xl) var(--gap-4xl) var(--gap-4xl); box-sizing: border-box; font-family: var(--font-ui); color: var(--text-primary); }
.page-head { display: flex; align-items: flex-end; gap: var(--gap-md); margin-bottom: var(--gap-lg); }
.page-head h1 { margin: 0; }
.page-head__sub { margin: 12px 0 0; font-size: 14px; color: var(--text-secondary); }
.page-head__right { margin-left: auto; display: flex; gap: var(--gap-sm); align-items: flex-end; }
.page-flash { margin: 0 0 var(--gap-md); }
.panel { display: grid; gap: var(--gap-sm); align-content: start; padding: var(--gap-lg); border: 0; border-radius: var(--radius-ui-lg); background: var(--surface-secondary); box-shadow: none; }
.panel__h { display: flex; align-items: center; gap: var(--gap-xs); margin: 0; font: 500 18px/1.3 var(--font-display); }
.panel__note { margin: 0; font-size: 13px; color: var(--text-secondary); }
.panel__form { display: grid; gap: var(--gap-sm); }
.acc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); max-width: 1056px; }
.acc__wide { grid-column: 1 / -1; }
.key { display: flex; align-items: center; gap: var(--gap-sm); padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) var(--gap-md); border-radius: var(--radius-btn-standard);
  background: var(--surface-raised); }
.key code { flex: 1; font: 500 16px/1.4 ui-monospace, Consolas, monospace; letter-spacing: 1px; color: var(--text-primary); background: none; }
.buys { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-xs); }
.buys li { display: flex; align-items: center; gap: var(--gap-sm); min-height: 48px; padding: var(--gap-xs) var(--gap-sm); border-radius: var(--radius-ui-md); background: var(--surface-raised); }
.buys__name { flex: 1; font-weight: 500; font-size: 14px; }
.buys li > .mpf-select, .buys li > select.buys__pick { flex: none; width: 240px; }   /* (the book to make reward charts for) */
.acc-key { padding-right: 4px; background: var(--surface-raised); }   /* the license key in Profile: *** · eye · copy · pencil */
.acc-key code { flex: 1; min-width: 0; font: 500 15px/1.4 ui-monospace, Consolas, monospace; letter-spacing: 1px; color: var(--text-primary); background: none; }
.buys__what { display: block; font-weight: 400; font-size: 13px; color: var(--text-secondary); }   /* (a bonus: what it is) */
@media (max-width: 860px) { .acc { grid-template-columns: 1fr; } .mpf-page { padding: var(--gap-lg) var(--gap-md); } }

/* admin area */
body.admin-page { margin: 0; background: var(--surface-primary); }
.admin-tag { margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-ui-sm); background: var(--badge-warning-bg); color: var(--badge-warning-text); font: 600 11px/1.4 var(--font-ui);
  letter-spacing: .5px; text-transform: uppercase; vertical-align: middle; }
.admin-only { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--gap-xs); font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.mpf-page--wide { max-width: none; }
.mpf-nav__n[hidden] { display: none; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--gap-sm); margin-bottom: var(--gap-sm); }
.stat { display: grid; gap: 2px; padding: var(--gap-md); border-radius: var(--radius-ui-lg); background: var(--surface-secondary); }
.stat b { font: 500 28px/1.1 var(--font-display); color: var(--text-primary); }
.stat span { font-size: 12px; color: var(--text-secondary); }
.byt { display: flex; flex-wrap: wrap; gap: var(--gap-xs) var(--gap-lg); margin: 0 0 var(--gap-md); font-size: 13px; color: var(--text-secondary); }
.byt b { color: var(--text-primary); font-weight: 600; }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gap-md); align-items: start; }
.adm-side { display: grid; gap: var(--gap-md); }
.panel--flush { padding: 0; overflow: hidden; gap: 0; }
.tbar { display: flex; align-items: center; gap: var(--gap-sm); padding: var(--gap-md); }
.tbar .mpf-field { flex: 1; }
.tbar--form { padding: 0; align-items: flex-end; flex-wrap: wrap; }
.tbar--form .mpf-field { flex: 1 1 170px; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--text-primary); }
.tbl th { text-align: left; padding: var(--gap-xs) var(--gap-md); font: 500 12px/1.4 var(--font-ui); color: var(--text-secondary); border-bottom: 1px solid var(--divider); white-space: nowrap; }
.tbl td { padding: 10px var(--gap-md); border-bottom: 1px solid var(--divider); vertical-align: top; }
.tbl tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.tbl tbody tr:hover { background: var(--iconbutton-bg); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl--plain th, .tbl--plain td { padding-left: 0; padding-right: var(--gap-sm); }
.tbl--plain tbody tr:hover { background: none; }
.tbl--form th, .tbl--form td { padding: 6px var(--gap-xs) 6px 0; vertical-align: middle; border: 0; }
.tbl--form tbody tr:hover { background: none; }
.tbl--form .mpf-field__box { height: 36px; }
.tbl__link { color: var(--text-primary); font-weight: 500; text-decoration: none; }
.tbl__link:hover { color: var(--text-brand); text-decoration: underline; }
.tbl__empty { padding: var(--gap-xl) var(--gap-md); color: var(--text-secondary); text-align: center; }
.tfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); padding: var(--gap-sm) var(--gap-md); border-top: 1px solid var(--divider); }
.chips-row { display: flex; flex-wrap: wrap; gap: 4px; }
.dim { color: var(--text-secondary); }
.small { font-size: 12px; margin-top: 2px; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.w90 { width: 90px; }
.w130 { width: 130px; }
.ta { width: 100%; box-sizing: border-box; padding: var(--gap-xs) var(--gap-sm); border: 1px solid var(--border-strong); border-radius: var(--radius-btn-standard); background: var(--surface-raised);
  color: var(--text-primary); font: 400 14px/1.4 var(--font-ui); resize: vertical; transition: border-color var(--duration-fast) var(--ease-standard); }
.ta:hover { border-color: var(--text-primary); }
.ta:focus { outline: 0; border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }
/* My images (2026-11-01, design/my-images.png): saved to each account, its limit as a bar, tabs, a card for each image */
.mi { display: grid; gap: var(--gap-md); }
.mi.is-drag { outline: 2px dashed var(--focus-ring); outline-offset: 8px; border-radius: 12px; }
.mi h2 { margin: 0; }
.mi__say { margin: -8px 0 0; }
.mi__top { display: flex; align-items: center; gap: var(--gap-md); flex-wrap: wrap; }
.mi__top .is-off, .mi__drop.is-off { opacity: .5; pointer-events: none; }
.mi__meter { margin-left: auto; width: 300px; }
.mi__mt { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.mi__mt b { color: var(--text-primary); font-weight: 600; }
.mi__bar { height: 8px; border-radius: 99px; background: var(--surface-secondary); overflow: hidden; display: flex; }
.mi__bar i { display: block; height: 100%; }
.mi__b-art { background: #7c3aed; }
.mi__b-up { background: var(--brand-primary, #1f5fd1); }
.mi__bar.is-near .mi__b-up { background: #d97706; }
.mi__bar.is-full i { background: #dc2626; }
.mi__lg { display: flex; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.mi__lg span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.mi__lg-art::before { background: #7c3aed; }
.mi__lg-up::before { background: var(--brand-primary, #1f5fd1); }
.mi__warn { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fef3c7; color: #92400e; font-size: 13px; line-height: 1.45; }
.mi__warn.is-full { background: #fee2e2; color: #991b1b; }
.mi__tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--divider); }
.mi__tabs button { padding: 0 0 10px; border: 0; background: none; font: 500 14px var(--font-ui); color: var(--text-secondary); cursor: pointer; }
.mi__tabs button:hover { color: var(--text-primary); }
.mi__tabs button[aria-selected="true"] { color: var(--text-brand); box-shadow: inset 0 -2px 0 currentColor; }
.mi__tabs em { font-style: normal; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--surface-secondary); font-size: 12px; color: var(--text-secondary); }
.mi__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; max-height: 52vh; overflow-y: auto; padding: 3px; }
.mi__card { position: relative; border: 1px solid var(--divider); border-radius: 10px; overflow: hidden; background: var(--surface-primary); }
.mi__card.is-on { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.mi__pick { position: relative; display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 3 / 4; cursor: pointer;
  background: repeating-conic-gradient(#eef0f3 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.mi__pick img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* hover: the picture dims and says what a click does, in a white pill */
.mi__go { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(17, 24, 39, .45); opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard); }
.mi__pick:hover .mi__go, .mi__pick:focus-visible .mi__go { opacity: 1; }
.mi__go span { padding: 7px 12px; border-radius: 8px; background: #fff; font: 500 13px/1.2 var(--font-ui); color: #111827; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.mi__tag, .mi__use { position: absolute; top: 8px; padding: 2px 7px; border-radius: 99px; font: 600 11px/1.5 var(--font-ui); pointer-events: none; }
.mi__tag { left: 8px; background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.mi__tag--ai { color: #6d28d9; }
.mi__use { right: 8px; background: #dcfce7; color: #166534; }
.mi__del { position: absolute; right: 8px; bottom: 52px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: #fff; color: #b42318;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); opacity: 0; cursor: pointer; }
.mi__card:hover .mi__del, .mi__del:focus-visible { opacity: 1; }
.mi__meta { padding: 7px 9px 9px; display: grid; gap: 2px; font-size: 12px; color: var(--text-secondary); }
.mi__meta b { font: 500 12.5px var(--font-ui); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi__drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; padding: 14px; text-align: center;
  border: 1.5px dashed var(--border-strong); border-radius: 10px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.mi__drop:hover { border-color: var(--focus-ring); color: var(--text-primary); }
.mi__drop b { color: var(--text-primary); font-weight: 500; }
.mi__none { margin: 0; }
.mi__foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--divider); font-size: 13px; color: #166534; }
@media (max-width: 1300px) { .mi__grid { grid-template-columns: repeat(5, 1fr); } }
/* Admin → AI: the connection on one row, the two tabs (Listing, Cover), the tab's prompt */
.ai-conn { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gap-md); }
.ai-conn__form { display: grid; grid-template-columns: 220px minmax(260px, 360px) auto; gap: var(--gap-md); align-items: start; }
.ai-conn__btns { display: flex; align-items: center; gap: var(--gap-md); padding-top: 26px; }
.ai-conn .row-btns { margin: 0; padding-bottom: 22px; }
.ai-tabs { display: flex; margin: 24px 0 16px; }
.ai-tabs .mpf-tab { text-decoration: none; }
.ta.prompt { font: 400 13px/1.5 var(--font-mono, ui-monospace, Consolas, monospace); }
@media (max-width: 1100px) { .ai-conn__form { grid-template-columns: 1fr; } .ai-conn__btns { padding-top: 0; } }
.ta::placeholder { color: var(--text-tertiary); }
.pick { display: flex; flex-wrap: wrap; gap: 2px var(--gap-xs); }
.pick .tick { padding: 4px var(--gap-xs) 4px 4px; }
.prods { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-xs); }
.prods li { display: flex; align-items: center; gap: var(--gap-sm); padding: var(--gap-xs) var(--gap-sm); border-radius: var(--radius-ui-md); background: var(--surface-raised); }
.prods form { display: contents; }
.prods b { font-weight: 600; }
.row-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-xs); }
.row-btns form { display: contents; }
.row-btns .mpf-field { flex: 1; min-width: 220px; }
.mpf-btn.danger, .danger { color: var(--status-error); }
.payload { margin: var(--gap-xs) 0 0; padding: var(--gap-sm); border-radius: var(--radius-ui-sm); background: var(--surface-raised); font: 12px/1.5 ui-monospace, Consolas, monospace; overflow: auto; max-width: 560px; white-space: pre-wrap; }
details.pl > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; font: 500 13px/1 var(--font-ui); color: var(--text-primary); padding: 6px 8px; border-radius: var(--radius-ui-sm); }
details.pl > summary::-webkit-details-marker { display: none; }
details.pl > summary:hover { background: var(--iconbutton-bg-hover); }
.copyrow { display: flex; align-items: center; gap: var(--gap-xs); }
.copyrow code { flex: 1; padding: 8px var(--gap-sm); border-radius: var(--radius-ui-sm); background: var(--surface-raised); font: 13px/1.4 ui-monospace, Consolas, monospace; color: var(--text-primary); overflow-wrap: anywhere; }
.note { display: flex; gap: var(--gap-xs); padding: var(--gap-sm); border-radius: var(--radius-ui-md); background: var(--badge-info-bg); color: var(--badge-info-text); font-size: 13px; }
.note .mpf-ico { flex: none; margin-top: 1px; }
.keyrow { display: flex; align-items: flex-end; gap: var(--gap-sm); }
.keyrow .mpf-field { flex: 1; }
.keyrow .mpf-field__input { font-family: ui-monospace, Consolas, monospace; }
.setgrid { display: grid; gap: var(--gap-md); max-width: 1056px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); }
.three { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gap-sm); }
.tpls { display: grid; gap: var(--gap-sm); }
.step { margin: 0; font-size: 13px; color: var(--text-secondary); }
.step b { color: var(--text-primary); }
.fl-label { font: 500 14px/1.4 var(--font-ui); color: var(--text-primary); }
.made { width: 100%; box-sizing: border-box; font: 13px/1.5 ui-monospace, Consolas, monospace; }
@media (max-width: 1100px) { .adm-grid { grid-template-columns: 1fr; } }
.tbl--form { table-layout: fixed; }
.tbl--form .mpf-field__box .mpf-field__input { width: 100%; }
.tbl--form .w64 { width: 64px; }
.tbl--form .w90 { width: 90px; }
.tbl--form .w150 { width: 150px; }
.tbl td:first-child.dim, .tbl td.nowrap { white-space: nowrap; }

/* ---------- Studio (phase 4): the old dialog frame dressed as the design system Modal ---------- */
body.app--studio #modal .modal__back { background: var(--overlay); animation: mpf-overlay-in var(--duration-base) ease both; }
/* (screens.html: dialogs open 10vh from the top) */
body.app--studio #modal:not([hidden]) { align-items: flex-start; padding-top: 10vh; box-sizing: border-box; }
body.app--studio #modal .modal__box { width: min(640px, calc(100vw - 32px)); max-width: none; max-height: calc(90vh - 16px); padding: var(--gap-lg); border: 0;
  border-radius: var(--radius-ui-xl); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-ui-2xl); font-family: var(--font-ui);
  animation: mpf-dialog-in-c var(--duration-dialog) var(--ease-out-expo) both; }
body.app--studio #modal .modal__box--wide { width: min(1040px, calc(100vw - 32px)); }
@keyframes mpf-dialog-in-c { 0% { opacity: 0; transform: translateY(-10px) scale(.97); } 100% { opacity: 1; transform: none; } }
body.app--studio #modal .modal__x { top: var(--gap-md); right: var(--gap-md); width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--iconbutton-border);
  border-radius: var(--radius-ui-sm); background: var(--iconbutton-bg); color: var(--text-primary); font: 400 20px/1 var(--font-ui); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard); }
body.app--studio #modal .modal__x:hover { background: var(--iconbutton-bg-hover); }
#modalBody > h2, #modalBody h2#modalTitle { margin: 0 48px var(--gap-sm) 0; font: 500 28px/1.2 var(--font-display); color: var(--text-primary); }
#modalBody .lead { margin: 0 0 var(--gap-md); font-size: 16px; color: var(--text-secondary); }
body.app--studio #modal .modal__box--mid { width: min(720px, calc(100vw - 32px)); }
#modalBody .mpf-modal__foot { margin-top: var(--gap-lg); }
@media (prefers-reduced-motion: reduce) { body.app--studio #modal .modal__box, body.app--studio #modal .modal__back { animation: none; } }

/* upgrade hint inside old Studio markup (studio.css still styles .upgline) */
button.mpf-upg.upgline { display: flex; width: 100%; margin: var(--gap-xs) 0 0; padding: var(--gap-sm) var(--gap-md); border: 0; border-radius: var(--radius-ui-md); background: var(--surface-selected);
  color: var(--text-primary); font: 400 13px/1.4 var(--font-ui); text-align: left; box-shadow: none; }
button.mpf-upg.upgline:hover { background: var(--sky); color: var(--midnight); }
button.mpf-upg.upgline b { font-weight: 600; color: inherit; }

/* New book menu */
.nb { position: relative; display: inline-block; }
.nbm { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: 340px; margin: 0; padding: 6px; box-sizing: border-box; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-ui-md); box-shadow: var(--shadow-ui-md); animation: mpf-dropdown-in var(--duration-base) var(--ease-out-expo) both; }
.nbm[hidden] { display: none; }
.nbm--left { left: 0; right: auto; }
.nbm button { display: flex; align-items: center; gap: var(--gap-sm); width: 100%; padding: var(--gap-xs) var(--gap-sm); border: 0; border-radius: var(--radius-ui-sm); background: none;
  text-align: left; color: var(--text-primary); cursor: pointer; font-family: var(--font-ui); transition: background-color var(--duration-fast) var(--ease-standard); }
.nbm button:hover { background: var(--iconbutton-bg-hover); }
.nbm b { display: block; font: 500 14px/1.4 var(--font-ui); }
.nbm small { display: block; font-size: 12px; color: var(--text-secondary); }
.nbm .is-locked b { color: var(--text-secondary); }

/* My books */
.st.is-lib .library { flex: 1; min-width: 0; overflow-y: auto; padding: var(--gap-xl) var(--gap-4xl) var(--gap-4xl); border: 0; border-radius: 0; background: var(--surface-primary); font-family: var(--font-ui); color: var(--text-primary); }
.library .page-head__right { flex-wrap: wrap; justify-content: flex-end; }
.lib__qf { width: 204px; }
.lib__sort { width: 204px; }
.library .mpf-field__box .lib__q { -webkit-appearance: none; appearance: none; }
/* (the owner's choice, 2026-11-01: 4 books a row on a wide screen) */
.lib__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-md); }
@media (max-width: 1500px) { .lib__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .lib__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lib__grid { grid-template-columns: 1fr; } }
.libc { cursor: default; }
.libc, .libc.is-on { border: 0; box-shadow: none; }
.libc:hover { box-shadow: var(--shadow-ui-xl); }
.libc .mpf-card__title, .libc .mpf-card__sub { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.libc__types { display: flex; flex-wrap: wrap; gap: 4px; }
.libc .mpf-card__foot { gap: var(--gap-xs); }
.lib__skel { gap: var(--gap-sm); cursor: default; }
/* (studio.css centres an old .lib__empty with padding: undone here) */
.lib__empty { display: grid; grid-template-columns: minmax(0, 650px) minmax(0, 430px); justify-content: start; column-gap: 144px; row-gap: var(--gap-xl); align-items: start;
  padding: 0; text-align: left; color: var(--text-primary); }
.lib__ehead { margin-bottom: var(--gap-sm); }
.lib__ehead h1 { margin: 0; color: var(--text-primary); }
.lib__empty .lib__ehead p { max-width: none; margin: 10px 0 0; line-height: 1.4; color: var(--text-secondary); }
.lib__gh { display: flex; align-items: center; gap: var(--gap-xs); margin: var(--gap-lg) 0 var(--gap-sm); font: 400 12px/1.4 var(--font-ui); color: var(--text-secondary); }
.lib__gh:first-of-type { margin-top: 0; }
.lib__gh .mpf-ico { color: var(--text-secondary); }
.lib__starts { display: grid; gap: var(--gap-sm); }
.lib__start { flex-direction: row; align-items: center; gap: var(--gap-sm); padding: 20px var(--gap-lg); border: 0; text-align: left; font: inherit; }
.lib__start-t { flex: 1; min-width: 0; }
.lib__art { width: 100%; max-height: 300px; margin-top: 18px; }
@media (max-width: 1300px) { .lib__empty { column-gap: var(--gap-xl); } }
@media (max-width: 900px) { .lib__empty { grid-template-columns: 1fr; } .lib__art { display: none; } }

/* Step-by-step guide */
.steps { display: flex; gap: 6px; margin: 0 0 var(--gap-xs); }
.steps i { flex: 1; height: 4px; border-radius: var(--radius-ui-full); background: var(--iconbutton-bg-hover); transition: background-color var(--duration-base) var(--ease-standard); }
.steps i.on { background: var(--action-primary-bg); }
.steplbl { margin: 0 0 var(--gap-md); font: 500 12px/1.4 var(--font-ui); color: var(--text-secondary); }
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-xs); }
.choices--3 { grid-template-columns: repeat(3, 1fr); }
.choice { display: flex; align-items: center; gap: var(--gap-sm); min-height: 56px; padding: var(--gap-sm); box-sizing: border-box; border: 1px solid var(--border-default); border-radius: var(--radius-ui-md);
  background: var(--surface-raised); color: var(--text-primary); text-align: left; cursor: pointer; font: 400 14px/1.4 var(--font-ui);
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.choice:hover { border-color: var(--text-primary); }
.choice[aria-pressed="true"] { border-color: var(--action-primary-bg); background: var(--surface-selected); box-shadow: inset 0 0 0 1px var(--action-primary-bg); }
.choice b { display: block; font-weight: 500; }
.choice small { display: block; font-size: 12px; color: var(--text-secondary); }
.choice__chk { margin-left: auto; color: var(--text-brand); flex: none; }
.choice__op { flex: none; width: 28px; font-size: 22px; text-align: center; }
.wz__fields { display: grid; gap: var(--gap-md); }
.wz__after { margin-top: var(--gap-md); }
.wz .upgline { margin-top: var(--gap-sm); }
@media (max-width: 640px) { .choices, .choices--3 { grid-template-columns: 1fr; } }

/* Start from a series */
.chips { display: flex; flex-wrap: wrap; gap: var(--gap-xs); margin-bottom: var(--gap-md); }
.chip { height: 32px; padding: 0 var(--gap-sm); border: 1px solid var(--border-default); border-radius: var(--radius-ui-full); background: none; color: var(--text-primary);
  font: 500 12px/1 var(--font-ui); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.chip:hover { background: var(--iconbutton-bg-hover); }
.chip[aria-pressed="true"] { background: var(--action-primary-bg); border-color: var(--action-primary-bg); color: var(--action-primary-text); }
.sers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-md); }
@media (max-width: 1000px) { .sers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* (screens.html, screen 7: the three covers of a series side by side, no frame round them) */
.ser .ser__cov--three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
.ser .ser__cov--three svg { border-radius: var(--radius-ui-xxs); box-shadow: var(--shadow-ui-sm); }
.ser__upg--end { margin: var(--gap-md) 0 0; }
.ser__hrow { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); margin: var(--gap-lg) 0 var(--gap-sm); }
.ser__hrow .ser__h { margin: 0; }
.ser { display: grid; gap: 6px; align-content: start; padding: var(--gap-sm); border: 0; border-radius: var(--radius-ui-lg); background: var(--surface-secondary); cursor: pointer;
  text-align: left; color: var(--text-primary); font-family: var(--font-ui); transition: box-shadow var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard); }
.ser:hover { box-shadow: var(--shadow-ui-xl); background: var(--surface-raised); }
.ser__cov { display: block; overflow: hidden; border-radius: var(--radius-ui-sm); background: var(--surface-raised); box-shadow: var(--shadow-ui-sm); }
.ser__cov svg { display: block; width: 100%; height: auto; transition: scale var(--duration-slow) var(--ease-standard); }
.ser:hover .ser__cov svg { scale: 1.04; }
.ser__grp { margin-top: 4px; font: 500 12px/1.4 var(--font-ui); color: var(--text-secondary); }
.ser__name { font: 500 18px/1.3 var(--font-display); }
.ser__meta { font-size: 13px; color: var(--text-secondary); }
.ser .mpf-badge { justify-self: start; margin-top: 2px; }
.ser__h { margin: var(--gap-lg) 0 var(--gap-sm); font: 500 18px/1.3 var(--font-display); color: var(--text-primary); }
.ser__upg { margin-bottom: var(--gap-md); }
.ser__upg .upgline { margin: 0; }
.lib__start-t > b, .lib__start-t > span { display: block; }
.libc .libc__sub { margin: 4px 0 0; white-space: normal; }
.ser { min-width: 0; } .ser__cov svg { max-width: 100%; }

/* ---------- Support (buyer) and Admin → Support / Reviews (2026-11-02, mockup design/support-review.png, option A) ---------- */
.sup-tabs { margin: calc(-1 * var(--gap-xs)) 0 var(--gap-lg); }
.sup-stats .stat { min-width: 120px; padding: var(--gap-sm) var(--gap-md); }
/* Support in the top bar (2026-11-02): with the admin box and Upgrades it still fits one line at 1280px */
@media (max-width: 1366px) { .mpf-top .mpf-nav { gap: var(--gap-md); } .mpf-top .mpf-nav__items { gap: 4px; } }
/* the admin bar has 6 tabs (Support and Reviews added): one line at 1280px */
.admin-page .mpf-nav__item { white-space: nowrap; }
@media (max-width: 1440px) { .admin-page .admin-only { display: none; } }
.sup-tabs .mpf-tab { text-decoration: none; }
.sup-tabs .mpf-tab[aria-current="page"] { color: var(--text-brand); box-shadow: inset 0 -2px 0 var(--text-brand); }
.sup__bar .mpf-tab[aria-current="page"] { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-ui-sm); }
.sup { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--gap-md); align-items: start; max-width: 1400px; }
.sup__list { padding: 0; gap: 0; overflow: hidden; }
.sup__bar { display: flex; align-items: center; gap: var(--gap-xs); padding: var(--gap-sm) var(--gap-md); border-bottom: 1px solid var(--divider); }
.sup__bar .mpf-tabs { flex-wrap: wrap; }
.sup__bar .mpf-tab { text-decoration: none; }
.sup__empty { margin: 0; padding: var(--gap-lg) var(--gap-md); font-size: 13px; color: var(--text-secondary); }
.sup__main { gap: var(--gap-md); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.sup__head { display: flex; align-items: flex-start; gap: var(--gap-xs); padding-bottom: 14px; border-bottom: 1px solid var(--divider); }
.sup__head form { margin: 0; }
.sup__t { flex: 1; min-width: 0; }
.sup__t h2 { margin: 0; font: 500 22px/1.2 var(--font-display); overflow-wrap: anywhere; }
.sup__t p { margin: 4px 0 0; font-size: 12px; color: var(--text-secondary); }
.sup__t p a { color: var(--text-brand); }
.sup__msgs { display: flex; flex-direction: column; gap: var(--gap-md); max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.sup__form { display: grid; gap: var(--gap-md); max-width: 680px; }
.sup__btns { display: flex; align-items: center; gap: var(--gap-xs); }
.rev-wrap { display: grid; gap: var(--gap-lg); max-width: 680px; }
.rev-form { gap: var(--gap-md); }
.rev-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); }
.rev-quote { display: flex; align-items: flex-start; gap: 10px; padding: var(--gap-sm); border-radius: var(--radius-ui-md); background: var(--surface-raised); cursor: pointer; }
.rev-quote input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--action-primary-bg); cursor: pointer; }
.rev-quote input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rev-quote b { display: block; font: 500 14px/1.4 var(--font-ui); color: var(--text-primary); }
.rev-quote span span { display: block; font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
.rev-ok { display: flex; align-items: center; gap: 10px; }
.rev-ok h2 { margin: 0; font: 500 20px/1.3 var(--font-display); }
.rev-ok p { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); }
.rv { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--gap-md); align-items: start; max-width: 1400px; }
.rv__sum { gap: 14px; }
.rv__big { display: flex; align-items: baseline; gap: var(--gap-xs); }
.rv__big b { font: 500 44px/1 var(--font-display); }
.rv__dist { display: grid; gap: 6px; }
.rv__dist a { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; gap: var(--gap-xs); padding: 2px 4px; border-radius: 6px;
  font-size: 13px; color: var(--text-secondary); text-decoration: none; }
.rv__dist a:hover, .rv__dist a.is-on { background: var(--iconbutton-bg); color: var(--text-primary); }
.rv__dist i { display: block; height: 8px; border-radius: var(--radius-ui-full); background: var(--surface-raised); overflow: hidden; }
.rv__dist i b { display: block; height: 100%; background: var(--rating-star); }
.rv__list { display: grid; gap: var(--gap-sm); }
.rv__list form { display: inline; margin: 0; }
@media (max-width: 1100px) { .sup, .rv { grid-template-columns: 1fr; } }