/* Account pages (register/login/reset/my-books/admin) — same tokens as styles.css */

.hero-compact { padding: 26px 20px; }
.account-logo {
  font-family: var(--display); font-weight: 700; font-size: 20px;
  color: var(--ink); text-decoration: none;
}
.account-container { max-width: 480px; padding-top: 20px; }
.account-container.wide { max-width: 960px; }

.account-card h1 { font-family: var(--display); font-size: 26px; margin: 0 0 6px; }
.account-card form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.account-submit { width: 100%; justify-content: center; }
.account-logout {
  margin-top: 28px; padding-top: 20px;
  border-top: 1.5px solid var(--border);
}
.account-logout .step-hint { margin: 0 0 12px; }
.account-logout .btn-ghost { text-decoration: none; }
.account-switch { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 14px 0 0; }
.account-switch a { color: var(--plum); font-weight: 700; text-decoration: none; }
.account-switch a:hover { text-decoration: underline; }

.oauth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--ink-soft); font-size: 13px; font-weight: 700;
}
.oauth-divider::before, .oauth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.btn-google {
  width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 1.5px solid var(--border); border-radius: 999px; background: #fff; color: var(--ink);
  text-decoration: none; font-weight: 800; box-shadow: var(--shadow-sm); transition: all .16s;
}
.btn-google:hover { border-color: var(--plum); background: #faf5ff; transform: translateY(-1px); }
.google-mark {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #d9dce3; color: #4285f4; font-weight: 800; font-family: Arial, sans-serif;
}

.notice-box {
  padding: 12px 16px; border-radius: 12px; background: #eefaf3; border: 1px solid #b9e6cc;
  color: #206a3f; font-size: 14px; font-weight: 600; margin-bottom: 4px;
}

/* -------------------------------------------------------------- top bar */
.site-topbar {
  max-width: 1080px; min-height: 58px; margin: 0 auto; padding: 14px 20px 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap;
}
.site-topbar .account-logo { flex: none; }
.account-bar {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 4px 6px;
  max-width: 1080px; margin: 0 auto; padding: 14px 20px 0; font-size: 14px;
}
.site-topbar .account-bar { max-width: none; min-height: 34px; margin: 0; padding: 0; flex: 1; }

/* Plain links get their own padding so the row reads as evenly spaced items
   rather than a run-on line of words. */
.account-bar a {
  color: var(--ink-soft); text-decoration: none; font-weight: 700;
  padding: 7px 11px; border-radius: 999px; white-space: nowrap;
  transition: background .14s, color .14s;
}
.account-bar a:hover { background: rgba(107, 74, 143, .09); color: var(--plum); text-decoration: none; }

/* The one primary action in the bar. */
.account-bar a.nav-cta {
  background: var(--plum); color: #fff;
  box-shadow: 0 4px 12px rgba(107, 74, 143, .28);
}
.account-bar a.nav-cta:hover { background: var(--plum-dark); color: #fff; }

.account-bar a.nav-switch {
  border: 1.5px solid var(--plum);
  color: var(--plum);
  background: #fff;
}
.account-bar a.nav-switch:hover {
  background: var(--plum);
  color: #fff;
}

.account-bar .credits-pill {
  background: rgba(107, 74, 143, .1); color: var(--plum); font-weight: 800;
}
.account-bar a.credits-pill:hover { background: rgba(107, 74, 143, .18); color: var(--plum); }

/* Divides primary action | account stuff | session, so seven links stop
   looking like one undifferentiated pile. */
.nav-sep {
  width: 1px; height: 18px; margin: 0 5px;
  background: var(--border); flex: none;
}

/* The admin entries travel together, labelled, so they read as one group
   instead of four more links in the row. */
.nav-group { display: flex; align-items: center; gap: 2px; }
.nav-group-title {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--cream-2);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}

/* Only shown once the row collapses into a hamburger menu. */
.nav-toggle {
  display: none; font-size: 20px; line-height: 1; cursor: pointer;
  background: #fff; color: var(--plum); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow-sm);
}
.language-picker {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-soft); font-size: 13px; font-weight: 800;
}
.language-picker span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);
}
.language-picker::before { content: "🌐"; font-size: 14px; flex: none; }
.language-picker select {
  font: inherit; color: var(--ink); min-width: 132px; padding: 8px 36px 8px 12px;
  border: 1.5px solid var(--border); border-radius: 999px; background: #fffdfa;
  box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------- my books */
.books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; }
.book-card {
  display: block; text-decoration: none; color: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: #fff; transition: all .16s;
}
.book-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--plum); }
.book-card .thumb-wrap {
  aspect-ratio: 1; background: var(--cream-2); display: grid; place-items: center; overflow: hidden;
}
.book-card .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.book-card .thumb-placeholder { font-size: 34px; opacity: .5; }
.book-card .book-meta { padding: 12px 14px; }
.book-card .book-title { font-family: var(--display); font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.book-card .book-status { font-size: 12px; color: var(--ink-soft); }
.status-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
.status-badge.merged { background: #f3e8ff; color: #6b4a8f; }
.books-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
}
.books-merge-btn {
  flex: none; text-decoration: none; padding: 10px 18px; font-size: 14px;
}
.status-badge.running, .status-badge.queued { background: #fff4e0; color: #9a6a10; }
.status-badge.error { background: #fde7e5; color: #a3352b; }
.empty-state { text-align: center; padding: 50px 20px; color: var(--ink-soft); }

/* ---------------------------------------------------------- buy credits */
.credit-pack-form { display: grid; gap: 12px; }
.credit-pack {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border: 1.5px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--ink); cursor: pointer; font: inherit; text-align: left;
  box-shadow: var(--shadow-sm); transition: all .16s;
}
.credit-pack:hover:not(:disabled) { border-color: var(--plum); background: #faf5ff; transform: translateY(-1px); }
.credit-pack:disabled { opacity: .55; cursor: not-allowed; }
.credit-pack strong { font-family: var(--display); font-size: 18px; }
.credit-pack span { color: var(--ink-soft); font-weight: 800; }
.credit-plus { color: #1d7a45; font-weight: 800; }
.credit-minus { color: #a3352b; font-weight: 800; }

/* -------------------------------------------------------------------- admin */
.admin-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.admin-table th[data-sort-col] {
  cursor: pointer; user-select: none; white-space: nowrap;
}
.admin-table th[data-sort-col]:hover { color: var(--plum); }
.admin-table th[data-sort-col]::after {
  content: " \2195"; font-size: 11px; opacity: .45; font-weight: 400;
}
.admin-table th[aria-sort="ascending"]::after { content: " \25B2"; opacity: 1; color: var(--plum); }
.admin-table th[aria-sort="descending"]::after { content: " \25BC"; opacity: 1; color: var(--plum); }
.admin-table tr:hover td { background: #faf7f2; }
.admin-table a { color: var(--plum); font-weight: 700; text-decoration: none; }
.log-block {
  background: #1e1b26; color: #eae6f2; font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px; line-height: 1.5; padding: 14px 16px; border-radius: 10px;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 10px 0 22px;
}
.log-block-wrap { position: relative; }
.log-copy-btn {
  position: absolute; top: 22px; right: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  background: #322d3e; color: #eae6f2; border: 1px solid #4a4458; border-radius: 8px;
  padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.log-copy-btn:hover { background: #423b52; }
.log-copy-btn.is-copied { background: #2f6f4f; border-color: #3f8863; }
.admin-table a:hover { text-decoration: underline; }
.pill-admin { background: var(--plum); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; }
.topup-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 18px; }
.topup-form .field { flex: none; width: 140px; }
.back-link { display: inline-block; margin-bottom: 14px; color: var(--plum); font-weight: 700; text-decoration: none; }

.usage-subhead { font-family: var(--display); font-size: 16px; margin: 28px 0 4px; }
.usage-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 8px; }
.usage-card {
  border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px; background: #fff;
}
.usage-card-value { font-family: var(--display); font-size: 22px; font-weight: 700; }
.usage-card-label { font-size: 12px; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.usage-card-cost { border-color: var(--plum); background: linear-gradient(180deg, #faf5ff, #fff); }
.usage-card-cost .usage-card-value { color: var(--plum); }
.usage-range { display: flex; gap: 8px; flex-wrap: wrap; }
.usage-range a {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--border); color: var(--ink-soft); text-decoration: none;
}
.usage-range button {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--border); color: var(--ink-soft); background: #fff;
  cursor: pointer; font-family: inherit;
}
.usage-range a.active,
.usage-range button.active { background: var(--plum); border-color: var(--plum); color: #fff; }
.usage-range a:hover:not(.active),
.usage-range button:hover:not(.active) { border-color: var(--plum); color: var(--plum); }

.openai-chart { position: relative; margin: 12px 0 20px; padding-top: 8px; }
.openai-chart svg { width: 100%; height: 240px; display: block; overflow: visible; }
.openai-chart-line { fill: none; stroke: var(--plum); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.openai-chart-area { fill: rgba(107, 74, 143, .12); }
.openai-chart-axis { stroke: var(--border); stroke-width: 1; }
.openai-chart-grid { stroke: #efeaf3; stroke-width: 1; }
.openai-chart-label { fill: var(--ink-soft); font-size: 11px; font-weight: 700; font-family: inherit; }
.openai-chart-dot { fill: #fff; stroke: var(--plum); stroke-width: 2; }
.openai-chart-dot.is-active { fill: var(--plum); }
.openai-chart-hit { fill: transparent; cursor: pointer; }
.openai-chart-guide { stroke: var(--plum); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; pointer-events: none; }
.openai-chart-guide.is-on { opacity: .45; }
.openai-chart-tip {
  position: absolute; pointer-events: none; z-index: 3;
  background: #2b2438; color: #fff; padding: 7px 10px; border-radius: 10px;
  font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(43, 36, 56, .28);
  transform: translate(-50%, calc(-100% - 10px));
}
.openai-chart-tip[hidden] { display: none; }
.openai-chart-tip small { display: block; font-size: 11px; font-weight: 600; color: #d8cce6; }

/* ---------------------------------------------------------------- footer */
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-bottom: 10px; }
.foot-links a { color: var(--plum); font-weight: 700; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }

/* --------------------------------------------------------- cookie banner */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 620px; margin: 0 auto; padding: 16px 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  background: #fff; border: 1.5px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-lg); font-size: 13px;
}
.cookie-bar p { margin: 0; flex: 1 1 240px; color: var(--ink-soft); line-height: 1.55; }
.cookie-bar a { color: var(--plum); font-weight: 700; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-actions .btn-ghost { padding: 10px 16px; font-size: 13px; }
.cookie-actions .btn-primary { padding: 11px 22px; font-size: 14px; box-shadow: none; }

/* Cloudflare country → local store. Above the header, not a modal. */
.geo-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 16px; padding: 10px 20px;
  background: #f3e8ff; border-bottom: 1.5px solid var(--border);
  color: var(--ink); font-size: 14px; font-weight: 700;
}
.geo-bar p { margin: 0; flex: 1 1 240px; max-width: 52em; line-height: 1.45; }
.geo-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.geo-bar-actions .btn-primary,
.geo-bar-actions .btn-ghost { text-decoration: none; padding: 8px 16px; font-size: 13px; box-shadow: none; }
.geo-bar-close {
  border: 0; background: transparent; color: var(--ink-soft);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.geo-bar-close:hover { color: var(--ink); }

/* ---------------------------------------------------------- story detail */
.story-detail-head { display: flex; align-items: flex-start; gap: 16px; }
.story-detail-emoji { font-size: 46px; line-height: 1; }
.story-detail h1 { font-family: var(--display); font-size: 28px; margin: 0 0 2px; }
.story-detail-alt { margin: 0 0 6px; color: var(--plum); font-weight: 700; font-size: 15px; }
.story-detail-summary { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 18px 0 0; }
.story-detail-sub { font-family: var(--display); font-size: 20px; margin: 30px 0 6px; }
.story-detail-cta { margin: 26px 0 0; }
.story-detail-cta .btn-primary, .story-detail-cta .btn-ghost { text-decoration: none; }
.sample-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-top: 16px;
}
.sample-page { margin: 0; }
.sample-page img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); background: var(--cream-2); display: block;
}
.sample-page figcaption {
  margin: 8px 4px 0; font-size: 13px; line-height: 1.45;
  color: var(--ink-soft); font-weight: 600;
}
.content-page h2 { font-family: var(--display); font-size: 20px; margin: 26px 0 6px; }
.content-page p, .content-page li { font-size: 15px; line-height: 1.75; color: var(--ink-soft); }
.content-page ul, .content-page ol { padding-left: 20px; }
.content-page h1 { font-family: var(--display); margin: 0 0 8px; }
.plain-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.plain-list a { color: var(--plum); font-weight: 700; text-decoration: none; }

.home-seo { display: grid; gap: 18px; margin: 8px 0 28px; }
.home-steps { margin: 14px 0 0; padding-left: 22px; }
.home-steps li { margin: 0 0 12px; }
.home-steps strong { color: var(--ink); }
.faq-list { display: grid; gap: 8px; margin: 16px 0 0; }
.faq-list details {
  border: 1.5px solid var(--border); border-radius: 14px;
  padding: 12px 16px; background: #fff;
}
.faq-list summary {
  cursor: pointer; font-weight: 700; color: var(--ink); list-style-position: outside;
}
.faq-list details p { margin: 10px 0 4px; }

/* ---------------------------------------------------------- print orders */
.book-card .book-open { display: block; text-decoration: none; color: inherit; }
.book-card .book-print, .book-card .book-download {
  display: block; padding: 10px 14px; border-top: 1px solid var(--border);
  font-size: 13px; font-weight: 800; color: var(--plum); text-decoration: none; text-align: center;
}
.book-card .book-actions {
  display: flex; flex-wrap: wrap; border-top: 1px solid var(--border);
}
.book-card .book-print, .book-card .book-download { flex: 1; border-top: 0; min-width: 40%; }
.book-card .book-actions .book-delete-form { border-left: 1px solid var(--border); }
.book-card .book-delete-form { flex: 1; margin: 0; min-width: 40%; }
.book-card .book-delete {
  display: block; width: 100%; padding: 10px 14px; border: 0; background: transparent;
  font: inherit; font-size: 13px; font-weight: 800; color: #a3352b; cursor: pointer; text-align: center;
}
.book-card .book-delete:hover { background: #ffecea; }
.book-card .book-print:hover, .book-card .book-download:hover { background: #faf5ff; }
.order-card .order-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.order-summary {
  display: grid; gap: 8px; padding: 16px 18px; border-radius: 14px;
  background: var(--cream-2); font-size: 14px;
}
.order-summary > div { display: flex; justify-content: space-between; gap: 12px; }
.order-summary > div > span:first-child { color: var(--ink-soft); font-weight: 700; }
.order-total { border-top: 1px solid var(--border); padding-top: 8px; font-weight: 800; font-size: 16px; }
.order-status-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.order-status-form select, .order-status-form input {
  font: inherit; font-size: 13px; padding: 8px 10px;
  border: 1.5px solid var(--border); border-radius: 10px; background: #fffdfa;
}
.order-status-form input { min-width: 180px; }

.merge-form { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.merge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.merge-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 14px;
  background: #fff; cursor: grab;
}
.merge-item.is-dragging { opacity: .45; }
.merge-handle { color: var(--ink-soft); font-size: 14px; letter-spacing: -2px; user-select: none; }
.merge-pick {
  display: flex; align-items: center; gap: 12px; flex: 1; cursor: pointer; min-width: 0;
}
.merge-pick input { width: 18px; height: 18px; flex: none; }
.merge-thumb {
  width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex: none;
  background: var(--cream-2); display: grid; place-items: center;
}
.merge-thumb img { width: 100%; height: 100%; object-fit: cover; }
.merge-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.merge-copy strong { font-family: var(--display); font-size: 16px; }
.merge-copy span { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.merge-move { display: flex; flex-direction: column; gap: 4px; }
.merge-move button {
  width: 32px; height: 28px; border: 1.5px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--plum); font-weight: 800; cursor: pointer;
}
.merge-move button:hover { border-color: var(--plum); background: #faf5ff; }

.status-badge.paid, .status-badge.shipped { background: #e3f7ec; color: #1d7a45; }
.status-badge.preparing, .status-badge.pending, .status-badge.pending_payment {
  background: #fff4e0; color: #9a6a10;
}
.status-badge.cancelled, .status-badge.expired { background: #efeaf3; color: #5b4a6b; }

/* ----------------------------------------------------------- admin extras */
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.admin-actions .btn-ghost,
.admin-actions .btn-primary { text-decoration: none; }
.inline-form { display: inline; margin: 0; }
.btn-danger-link {
  background: none; border: 0; padding: 0; color: #b42318; font: inherit; font-weight: 700;
  cursor: pointer; text-decoration: none;
}
.btn-danger-link:hover { text-decoration: underline; }
.story-admin-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.story-admin-form .field { display: flex; flex-direction: column; gap: 6px; }
.story-image-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.story-image-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 14px; background: #fff;
}
.story-image-item.is-dragging { opacity: .45; }
.story-image-preview {
  width: 88px; height: 88px; border-radius: 10px; overflow: hidden; flex: none;
  background: var(--cream-2); display: grid; place-items: center;
}
.story-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.story-image-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.story-cover-pick { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; }
.check-row { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.color-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.color-row input[type="color"] { width: 100%; height: 42px; padding: 2px; border-radius: 10px; border: 1.5px solid var(--border); background: #fff; }
.config-table input {
  width: 100%; min-width: 220px; font: inherit; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: 10px; background: #fffdfa;
}
.config-hint { display: block; margin-top: 4px; color: var(--ink-soft); }
.config-card { overflow: hidden; }
.config-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px; padding: 4px;
  background: #f4efe8; border-radius: 16px;
}
.config-tab {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 800;
  font-size: 13px; padding: 9px 14px; border-radius: 12px; color: var(--ink-soft);
  background: transparent; display: inline-flex; align-items: center; gap: 8px;
}
.config-tab:hover { color: var(--ink); background: rgba(255,255,255,.55); }
.config-tab.is-active { color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.config-tab-count {
  min-width: 1.4em; padding: 1px 6px; border-radius: 999px; font-size: 11px;
  background: rgba(255,255,255,.28); text-align: center;
}
.config-tab:not(.is-active) .config-tab-count { background: rgba(107,74,143,.12); color: var(--plum); }
.config-tab--website.is-active { background: #6b4a8f; }
.config-tab--google.is-active { background: #1a73e8; }
.config-tab--stripe.is-active { background: #635bff; }
.config-tab--smtp.is-active { background: #b45309; }
.config-tab--other.is-active { background: #475569; }
.config-panel { margin-top: 4px; }
.config-panel-hint { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; }
.config-table-wrap { overflow-x: auto; border: 1.5px solid var(--border); border-radius: 14px; }
.config-panel--website .config-table-wrap { border-color: #d8c8ea; }
.config-panel--google .config-table-wrap { border-color: #c5d8f7; }
.config-panel--stripe .config-table-wrap { border-color: #d0cdf8; }
.config-panel--smtp .config-table-wrap { border-color: #f3d4a8; }
.config-panel--website .config-table th { color: #6b4a8f; }
.config-panel--google .config-table th { color: #1a73e8; }
.config-panel--stripe .config-table th { color: #635bff; }
.config-panel--smtp .config-table th { color: #b45309; }
.config-tab--ai.is-active { background: #0f766e; }
.config-tab--image.is-active { background: #be185d; }
.config-tab--qwen.is-active { background: #7c3aed; }
.config-tab--system.is-active { background: #475569; }
.config-panel--ai .config-table-wrap { border-color: #b9ded9; }
.config-panel--image .config-table-wrap { border-color: #f3c6da; }
.config-panel--qwen .config-table-wrap { border-color: #d8c9f7; }
.config-panel--system .config-table-wrap { border-color: #cbd5e1; }
.config-panel--ai .config-table th { color: #0f766e; }
.config-panel--image .config-table th { color: #be185d; }
.config-panel--qwen .config-table th { color: #7c3aed; }
.config-panel--system .config-table th { color: #475569; }

/* Which store's values are on screen. It sits above the tabs because it
   changes what every tab underneath means. */
.config-scope-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  margin: 14px 0 18px; padding: 12px 14px;
  background: rgba(107,74,143,.06); border: 1.5px solid #d8c8ea; border-radius: 14px;
}
.config-scope-form .field { margin: 0; min-width: 260px; }
.config-scope-form .field-note { margin: 0 0 2px; color: var(--ink-soft); font-size: 13px; }

/* The inherit toggle, and the two states it drives. A read-only field is
   showing a value that belongs to the global scope, so it reads quieter than
   one the store actually owns. */
.config-inherit, .config-clear {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; color: var(--ink-soft); font-size: 13px; cursor: pointer;
}
.config-inherit input, .config-clear input { cursor: pointer; }
.config-table input[readonly] {
  background: rgba(15,23,42,.04); color: var(--ink-soft); cursor: not-allowed;
}
.config-row-locked td:first-child { opacity: .75; }

/* Stores. The flags are the whole point of the row: which store answers a
   domain's bare paths, which one is the x-default, which are retired. */
.store-flag {
  display: inline-block; padding: 2px 8px; margin: 0 4px 3px 0; border-radius: 999px;
  font-size: 11px; font-weight: 800; background: rgba(107,74,143,.10); color: var(--plum);
}
.store-flag--default { background: rgba(16,122,87,.12); color: #0f766e; }
.store-flag--global  { background: rgba(26,115,232,.12); color: #1a73e8; }
.store-flag--off     { background: rgba(180,83,9,.14); color: #b45309; }
.store-row-off td { opacity: .55; }
.store-form .field-note { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 12px; }
.store-flags { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.store-flags small { font-weight: 500; color: var(--ink-soft); }

/* Story list: one badge per store, saying whether that store owns this tale's
   words, inherits them, or has none. */
.story-store-cell { white-space: nowrap; }
.story-store {
  display: inline-block; padding: 3px 9px; margin: 0 4px 3px 0; border-radius: 999px;
  font-size: 11px; font-weight: 800; text-decoration: none;
  border: 1.5px solid transparent; transition: all .14s;
}
.story-store--own { background: var(--plum); color: #fff; }
.story-store--own:hover { background: var(--plum-dark); }
.story-store--inherited { background: rgba(107,74,143,.10); color: var(--plum); border-color: rgba(107,74,143,.28); }
.story-store--inherited:hover { background: rgba(107,74,143,.2); }
.story-store--missing { background: #fff; color: var(--ink-soft); border-color: var(--border); border-style: dashed; }
.story-store--missing:hover { color: var(--plum); border-color: var(--plum); }
.story-store--off { opacity: .5; text-decoration: line-through; }

.story-delete { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.story-delete .field-note { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 12px; }

/* Admin list filters and paging. */
.admin-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  margin: 16px 0 6px; padding: 12px 14px;
  background: var(--cream-2); border: 1.5px solid var(--border); border-radius: 14px;
}
.admin-filters .field { margin: 0; min-width: 180px; }
.admin-filters .field-narrow { min-width: 140px; }
.admin-filter-actions { display: flex; gap: 8px; margin: 0 0 2px; }
.admin-pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--ink-soft);
}
.admin-pager .is-disabled { opacity: .4; cursor: not-allowed; }

/* --------------------------------------------------------------- responsive */
/* Below this the seven-plus links stop fitting on one line, so the whole nav
   folds into a hamburger with the admin group pinned to the top. */
@media (max-width: 860px) {
  /* The menu button leads the row, the way a phone app puts it; the language
     picker is pushed to the far end so the two never sit side by side. */
  .site-topbar { justify-content: flex-start; }
  .nav-toggle { display: inline-flex; order: -1; }
  .language-picker { order: 3; margin-left: auto; }
  .site-topbar .account-bar {
    display: none; order: 4; flex: 1 1 100%; flex-direction: column; align-items: stretch;
    gap: 2px; padding: 10px; background: #fff; border: 1.5px solid var(--border);
    border-radius: 16px; box-shadow: var(--shadow-md);
  }
  .site-topbar .account-bar.open { display: flex; }
  .site-topbar .account-bar a { padding: 11px 12px; border-radius: 10px; text-align: left; }
  .site-topbar .account-bar a.nav-cta, .site-topbar .account-bar .credits-pill { text-align: center; }
  /* Separators only help when the row is one line; stacked they add noise. */
  .nav-sep { display: none; }
  .account-bar .nav-group {
    order: -1; flex-direction: column; align-items: stretch; gap: 2px;
    padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
  }
  .nav-group-title { align-self: flex-start; margin: 4px 0 4px 4px; }
}

@media (max-width: 560px) {
  /* The tables already sit in a scrolling wrapper; making the table itself a
     block would untie the header cells from their columns. */
  .admin-table { white-space: nowrap; }
  /* Narrow enough for the button, the wordmark and the picker to share one
     row on a 360px screen instead of the picker dropping to its own line. */
  .site-topbar { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .site-topbar .account-logo { font-size: 17px; }
  .nav-toggle { padding: 7px 10px; }
  .language-picker select { min-width: 0; padding: 7px 26px 7px 8px; font-size: 13px; }
  /* Stacked, the text must not stretch, or the bar grows to fill the screen. */
  .cookie-bar { flex-direction: column; align-items: stretch; }
  .cookie-bar p { flex: 0 0 auto; }
  .cookie-actions button { flex: 1; }
}

/* -------------------------------------------------- admin books listing */
.book-thumb-cell { width: 64px; }
.book-thumb {
  display: block; width: 56px; height: 56px; border-radius: 10px;
  object-fit: cover; border: 1px solid var(--border); background: var(--cream-2);
}
.book-thumb-empty {
  display: grid; place-items: center; font-size: 18px; color: var(--ink-soft);
}
.btn-tiny { padding: 6px 12px; font-size: 13px; }

/* ==========================================================================
   Earning: credit history, referrals, and reader-written stories.
   ========================================================================== */

/* -------------------------------------------------------- credit history */

/* Three numbers instead of a table the reader has to add up. The two that
   matter most -- paid for, earned -- carry the same icons as the rows below,
   so the summary and the list are visibly the same vocabulary. */
.txn-summary {
  display: grid; gap: 12px; margin: 16px 0;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.txn-stat {
  display: grid; gap: 2px; justify-items: center; text-align: center;
  padding: 14px 10px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--paper);
}
.txn-stat-icon { font-size: 20px; line-height: 1; }
.txn-stat-value { font-family: var(--display); font-size: 26px; font-weight: 700; }
.txn-stat-label { font-size: 13px; color: var(--ink-soft); }
.txn-stat.txn-purchase { border-color: #cfe0f5; background: #f5f9ff; }
.txn-stat.txn-earned { border-color: #cdeadd; background: #f3fbf7; }

.txn-list { list-style: none; margin: 8px 0 0; padding: 0; }
.txn-row {
  display: grid; gap: 12px; align-items: center;
  grid-template-columns: 38px 1fr auto;
  padding: 11px 4px; border-bottom: 1px solid var(--border);
}
.txn-row:last-child { border-bottom: 0; }
.txn-icon {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--cream-2); font-size: 17px;
}
.txn-row.txn-purchase .txn-icon { background: #e8f1fd; }
.txn-row.txn-earned .txn-icon { background: #e4f6ee; }
.txn-row.txn-refund .txn-icon { background: #fdf2e3; }
.txn-body { display: grid; gap: 1px; min-width: 0; }
.txn-label { font-weight: 600; }
.txn-ref {
  font-size: 12px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.txn-when { font-size: 12px; color: var(--ink-soft); }
.txn-amount { font-family: var(--display); font-size: 18px; font-weight: 700; }

/* ------------------------------------------------------------- referrals */
.referral-link-row { display: flex; gap: 8px; align-items: stretch; }
.referral-link-row input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; }
.referral-link-row .btn-ghost { white-space: nowrap; }

/* --------------------------------------------------------- user stories */
.user-story-head,
.user-story-page-head {
  display: flex; gap: 16px; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px;
}
.user-story-list { display: grid; gap: 14px; margin-top: 14px; }
.user-story-card {
  padding: 16px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--paper);
}
.user-story-card-head {
  display: flex; gap: 10px; align-items: baseline;
  justify-content: space-between; flex-wrap: wrap;
}
.user-story-card-head h2 { margin: 0; font-family: var(--display); font-size: 20px; }
.user-story-excerpt { margin: 8px 0 0; color: var(--ink-soft); }
.user-story-note, .user-story-uses { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); }
.user-story-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 0;
}

/* One vocabulary for "where is this in the queue", used on the reader's own
   list and in admin, so the same word never means two things. */
.status-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--cream-2); color: var(--ink-soft);
}
.status-pill.status-pending { background: #fdf0d8; color: #8a6114; }
.status-pill.status-approved { background: #dff3e8; color: #1f6b46; }
.status-pill.status-rejected { background: #fbe0dd; color: #93332a; }
.status-pill.status-draft { background: var(--cream-2); color: var(--ink-soft); }

.user-story-editor textarea { font-family: var(--body); line-height: 1.6; }

/* Where the picture will go once reader stories carry one. Deliberately a
   visible, labelled placeholder rather than an empty space, so the feature
   reads as "coming" instead of "broken". */
.user-story-image-placeholder {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  padding: 18px; margin: 14px 0;
  border: 2px dashed var(--border); border-radius: 14px;
  background: var(--cream); color: var(--ink-soft); font-size: 14px; text-align: center;
}
.user-story-image-icon { font-size: 22px; }

.user-story-section { margin-top: 26px; }
.user-story-section h2 { font-family: var(--display); margin: 0 0 4px; }
.user-story-grid {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.user-story-tile {
  display: grid; gap: 10px; padding: 14px; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: 14px; background: var(--paper);
  box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease;
}
.user-story-tile:hover, .user-story-tile:focus-visible {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.user-story-tile-image {
  display: grid; place-items: center; height: 96px; font-size: 30px;
  border-radius: 10px; background: var(--cream-2);
}
.user-story-tile-body { display: grid; gap: 4px; }
.user-story-tile-title { font-family: var(--display); font-size: 18px; font-weight: 700; }
.user-story-tile-author { font-size: 13px; color: var(--ink-soft); }
.user-story-tile-excerpt { font-size: 14px; color: var(--ink-soft); }
.user-story-uses-badge {
  justify-self: start; padding: 2px 9px; border-radius: 999px;
  background: #fdf0d8; color: #8a6114; font-size: 12px; font-weight: 700;
}
.user-story-content { line-height: 1.75; }
.user-story-content p { margin: 0 0 1em; }

/* ------------------------------------------------- admin: moderation UI */
.admin-filter-row { display: flex; gap: 8px; margin: 12px 0 8px; flex-wrap: wrap; }
.inline-input {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  font: inherit; background: var(--paper); min-width: 180px;
}
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.filter-chip {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--paper); text-decoration: none; color: var(--ink-soft); font-size: 13px;
}
.filter-chip.active { background: var(--plum); border-color: var(--plum); color: #fff; }
.filter-count { opacity: .7; }
.admin-row-actions { white-space: nowrap; }
.admin-row-actions .inline-form {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px;
}
.pill-ok {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #dff3e8; color: #1f6b46; font-size: 12px; font-weight: 700;
}
.pill-muted {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--cream-2); color: var(--ink-soft); font-size: 12px;
}
.btn-ghost.danger { color: #93332a; border-color: #e7bdb7; }
.admin-image-preview { margin: 0 0 8px; }
.admin-image-preview img {
  max-width: 260px; border-radius: 12px; border: 1px solid var(--border);
}
.field-inline { display: flex; gap: 6px; align-items: center; margin: 6px 0; font-size: 14px; }

@media (max-width: 640px) {
  .user-story-head, .user-story-page-head { flex-direction: column; }
  .referral-link-row { flex-direction: column; }
  .txn-row { grid-template-columns: 32px 1fr auto; gap: 9px; }
  .txn-icon { width: 32px; height: 32px; font-size: 15px; }
}

/* ----------------------------------------------- my account hub + library */

/* One tile per area, each carrying a live number so the hub answers "how many
   books do I have" without the reader opening anything. */
.account-tiles {
  display: grid; gap: 12px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.account-tile {
  display: grid; gap: 12px; align-items: center;
  grid-template-columns: 44px 1fr auto;
  padding: 16px; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: 14px; background: var(--paper);
  transition: transform .15s ease, box-shadow .15s ease;
}
.account-tile:hover, .account-tile:focus-visible {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.account-tile-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--cream-2); font-size: 20px;
}
.account-tile-body { display: grid; gap: 2px; min-width: 0; }
.account-tile-title { font-weight: 700; }
.account-tile-hint { font-size: 13px; color: var(--ink-soft); }
.account-tile-meta {
  font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--plum);
}

.library-grid {
  display: grid; gap: 14px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.library-tile {
  display: grid; gap: 10px; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: 14px; background: var(--paper);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.library-tile:hover, .library-tile:focus-visible {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.library-tile-image { display: block; aspect-ratio: 4 / 3; background: var(--cream-2); }
.library-tile-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.library-tile-emoji { display: grid; place-items: center; font-size: 40px; }
.library-tile-body { display: grid; gap: 3px; padding: 0 14px 14px; }
.library-tile-title { font-family: var(--display); font-size: 18px; font-weight: 700; }
.library-tile-tagline { font-size: 13px; color: var(--ink-soft); }

@media (max-width: 640px) {
  .account-tile { grid-template-columns: 38px 1fr auto; padding: 13px; }
  .account-tile-icon { width: 38px; height: 38px; font-size: 17px; }
}

/* ---------------------------------------------------------- admin shell */
/* Magento-style: tools in a grouped left nav, search in the top bar, store
   picker under Log out in the sidebar foot. The shell is 100vh with the
   main column scrolling, so the first group title cannot tuck under a
   sticky header. Scoped to .admin-area so the storefront chrome is untouched. */
.admin-area { background: #e8eef5; overflow: hidden; }
.admin-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  grid-template-rows: 58px 1fr;
  height: 100vh;
  overflow: hidden;
}
.admin-topbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  z-index: 40;
  height: 58px; padding: 0 16px 0 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.admin-topbar .account-logo {
  padding: 0 20px; font-size: 18px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.admin-topbar-start {
  display: flex; align-items: center; min-width: 0;
}
.admin-topbar .nav-toggle { display: none; }

.admin-search { position: relative; min-width: 0; max-width: 720px; margin: 0 12px 0 0; justify-self: stretch; }
.admin-search-field { position: relative; }
.admin-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: 14px;
}
.admin-search input {
  width: 100%; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink); background: #f6f3ee;
  border: 1.5px solid var(--border); border-radius: 999px;
  padding: 8px 14px 8px 36px;
}
.admin-search input:focus {
  outline: none; border-color: var(--plum); background: #fff;
  box-shadow: 0 0 0 3px rgba(107, 74, 143, .12);
}
.admin-search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px; background: #fff; border: 1.5px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-md);
  max-height: 360px; overflow-y: auto;
}
.admin-search-results[hidden] { display: none; }
.admin-search-results a {
  display: block; padding: 9px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700;
}
.admin-search-results a:hover,
.admin-search-results a.is-active { background: rgba(107, 74, 143, .1); color: var(--plum); }

.admin-sidebar {
  grid-row: 2; grid-column: 1;
  min-height: 0;
  display: flex; flex-direction: column;
  background: #f7f4ef;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.admin-sidebar-body { flex: 1; padding: 20px 12px 8px; }
.admin-nav-group {
  margin: 18px 10px 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #5a5164;
}
.admin-nav-group:first-child { margin-top: 0; }
.admin-nav-list { list-style: none; margin: 0; padding: 0; }
.admin-nav-list a {
  display: block; padding: 8px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700;
}
.admin-nav-list a:hover { background: rgba(107, 74, 143, .08); color: var(--plum); }
.admin-nav-list a.is-active {
  background: var(--plum); color: #fff;
}
.admin-nav-list a.is-active:hover { background: var(--plum-dark); color: #fff; }
.admin-sidebar-foot {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; border-top: 1px solid var(--border);
}
.admin-sidebar-foot a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 10px;
  text-decoration: none; font-size: 13px; font-weight: 800;
}
.admin-nav-switch {
  border: 1.5px solid var(--plum); color: var(--plum); background: #fff;
}
.admin-nav-switch:hover { background: var(--plum); color: #fff; }
.admin-nav-logout { color: var(--ink-soft); }
.admin-nav-logout:hover { background: #fde7e5; color: #a3352b; }
.admin-sidebar-foot .language-picker {
  display: flex; align-items: center; gap: 6px;
  width: 100%; margin-top: 4px;
}
.admin-sidebar-foot .language-picker select {
  flex: 1; min-width: 0; width: 100%;
}

.admin-main { grid-row: 2; grid-column: 2; min-width: 0; min-height: 0; overflow-y: auto; }
.admin-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 16px 24px 0; font-size: 13px; font-weight: 700; color: var(--ink-soft);
}
.admin-crumb a { color: var(--plum); text-decoration: none; }
.admin-crumb a:hover { text-decoration: underline; }
.admin-crumb [aria-current="page"] { color: var(--ink); }
.admin-crumb-sep { opacity: .45; }
.admin-content { padding: 12px 24px 32px; max-width: 1200px; }
.admin-content .card { margin-bottom: 0; }
.admin-content .back-link { margin-top: 4px; }

@media (max-width: 860px) {
  .admin-shell { grid-template-columns: 1fr; grid-template-rows: 58px 1fr; height: 100vh; }
  .admin-topbar { grid-template-columns: auto minmax(0, 1fr); padding-right: 10px; }
  .admin-topbar .nav-toggle { display: inline-flex; margin-left: 10px; }
  .admin-topbar .account-logo { display: none; }
  .admin-search { margin: 0 4px; max-width: none; }
  .admin-sidebar {
    display: none; position: fixed; top: 58px; left: 0; bottom: 0;
    width: min(280px, 86vw); height: auto; z-index: 35;
    box-shadow: var(--shadow-lg);
  }
  .admin-sidebar.open { display: flex; }
  .admin-main { grid-column: 1; }
  .admin-crumb, .admin-content { padding-left: 16px; padding-right: 16px; }
}