/* Prompt optimizer and prompt square (workspace). Builds on workspace-design.css. */

#app-view .prompt-notice { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; padding: 16px 18px; color: #7a4b07; background: #fff8ea; border: 1px solid #f4dfb2; border-radius: 12px; box-shadow: none; }
#app-view .prompt-notice .icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: #d18a12; }
#app-view .prompt-notice p { display: grid; gap: 4px; margin: 0; font-size: 13px; line-height: 1.6; }
#app-view .prompt-notice strong { color: #6b3f00; font-weight: 650; }

/* ---------- Optimizer ---------- */

#app-view .main-content:has(#view-prompt-optimizer:not([hidden])) { width: min(100%, 1920px); }
#app-view .prompt-studio { display: grid; grid-template-columns: minmax(320px, .36fr) minmax(0, .64fr); min-height: clamp(680px, calc(100dvh - 290px), 960px); gap: 20px; align-items: stretch; }
#app-view .prompt-panel { display: flex; min-width: 0; flex-direction: column; gap: 18px; background: #fff; border: 1px solid #dce5f2; border-radius: 14px; box-shadow: 0 3px 12px rgba(31, 63, 110, .035); }
#app-view .prompt-panel .panel-head { margin-bottom: 0; }

#app-view .prompt-modes { display: grid; min-width: 0; gap: 8px; }
#app-view .prompt-modes-label { color: var(--text-soft); font-size: 13px; font-weight: 580; }
#app-view .prompt-mode-select { position: relative; min-width: 0; }
#app-view .prompt-mode-trigger { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; color: inherit; font: inherit; text-align: left; cursor: pointer; background: #fff; border: 1px solid #d3ddec; border-radius: 12px; transition: border-color .18s, box-shadow .18s; }
#app-view .prompt-mode-trigger:hover:not(:disabled) { border-color: #aac5ef; }
#app-view .prompt-mode-trigger:focus-visible, #app-view .prompt-mode-trigger[aria-expanded="true"] { border-color: #a9c4f6; outline: 0; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1); }
#app-view .prompt-mode-trigger:disabled { cursor: not-allowed; opacity: .6; }
#app-view .prompt-mode-trigger > .icon { width: 18px; height: 18px; flex: 0 0 auto; color: #8a99ad; transition: transform .18s; }
#app-view .prompt-mode-trigger[aria-expanded="true"] > .icon { transform: rotate(180deg); }
#app-view .prompt-mode-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; color: #2465e8; background: #eef4ff; border-radius: 10px; }
#app-view .prompt-mode-icon[data-mode="structured"] { color: #7448d6; background: #f4efff; }
#app-view .prompt-mode-icon[data-mode="coding"] { color: #0d8676; background: #e7f6f3; }
#app-view .prompt-mode-icon[data-mode="image"] { color: #d9580f; background: #fff0e6; }
#app-view .prompt-mode-icon .icon { width: 19px; height: 19px; }
#app-view .prompt-mode-text { display: grid; min-width: 0; flex: 1; gap: 2px; }
#app-view .prompt-mode-text strong { color: #162f53; font-size: 14px; font-weight: 650; }
#app-view .prompt-mode-text small { color: #748196; font-size: 12px; line-height: 1.6; }
#app-view .prompt-mode-menu { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; left: 0; display: grid; gap: 2px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #dce5f2; border-radius: 14px; box-shadow: 0 20px 44px -20px rgba(23, 45, 76, .4); }
#app-view .prompt-mode-menu[hidden] { display: none; }
#app-view .prompt-mode-option { display: flex; align-items: center; gap: 12px; padding: 9px 10px; cursor: pointer; border-radius: 10px; outline: 0; }
#app-view .prompt-mode-option:hover, #app-view .prompt-mode-option:focus-visible, #app-view .prompt-mode-option:focus { background: #f5f8fd; }
#app-view .prompt-mode-option[aria-selected="true"] { background: #f2f7ff; }
#app-view .prompt-mode-option[aria-selected="true"] .prompt-mode-text strong { color: var(--accent-bright); }
#app-view .prompt-mode-option > .icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--accent); visibility: hidden; }
#app-view .prompt-mode-option[aria-selected="true"] > .icon { visibility: visible; }

#app-view .prompt-input-field { display: flex; flex: 1; flex-direction: column; }
#app-view .prompt-input-field textarea, #app-view .prompt-refine textarea { width: 100%; min-height: 220px; padding: 13px 14px; resize: vertical; color: var(--text); font: inherit; font-size: 13px; line-height: 1.75; background: #fff; border: 1px solid #d3ddec; border-radius: 9px; outline: 0; transition: border-color .18s, box-shadow .18s; }
#app-view .prompt-input-field textarea { flex: 1; }
#app-view .prompt-input-field textarea:focus, #app-view .prompt-refine textarea:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .07); }
#app-view .prompt-input-field textarea:disabled, #app-view .prompt-input-field textarea[readonly] { color: var(--text-muted); background: #f8fafd; }
#app-view .prompt-input-field textarea::placeholder, #app-view .prompt-refine textarea::placeholder { color: #9aa7b8; }
#app-view .prompt-input-meta { display: flex; justify-content: space-between; gap: 12px; }
#app-view .prompt-input-meta span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

#app-view .prompt-form-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
#app-view .prompt-model-field { display: flex; min-width: 0; align-items: center; gap: 10px; color: var(--text-soft); font-size: 13px; }
#app-view .prompt-model-field .select-shell { position: relative; min-width: 190px; }
#app-view .prompt-model-field select { width: 100%; height: 40px; padding: 0 34px 0 12px; color: var(--text); background: transparent; border: 0; outline: 0; appearance: none; }
#app-view .prompt-model-field .select-shell .icon { position: absolute; right: 10px; width: 16px; height: 16px; pointer-events: none; }
#app-view .prompt-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
#app-view .prompt-form-actions .icon, #app-view .prompt-result-actions .icon, #app-view .prompt-refine .icon { width: 16px; height: 16px; }
#app-view #prompt-form-status:empty { display: none; }

#app-view .prompt-result .panel-head { align-items: flex-start; }
#app-view .prompt-versions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#app-view .prompt-versions button { min-width: 38px; min-height: 30px; padding: 0 10px; color: var(--text-muted); font-size: 12px; font-weight: 600; background: #f3f6fb; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
#app-view .prompt-versions button:hover:not(:disabled) { color: var(--text); }
#app-view .prompt-versions button.is-active { color: var(--accent-bright); background: rgba(var(--accent-rgb), .08); border-color: rgba(var(--accent-rgb), .2); }
#app-view .prompt-versions button:disabled { cursor: not-allowed; opacity: .6; }

#app-view .prompt-output { display: flex; min-height: 320px; flex: 1 1 auto; flex-direction: column; background: #f8fafd; border: 1px solid #e4ebf5; border-radius: 10px; }
#app-view .prompt-output-empty { display: grid; flex: 1; place-content: center; justify-items: center; gap: 8px; padding: 32px 20px; text-align: center; }
#app-view .prompt-output-empty > span { display: grid; width: 46px; height: 46px; place-items: center; color: var(--accent); background: #fff; border: 1px solid #dce5f2; border-radius: 14px; }
#app-view .prompt-output-empty .icon { width: 20px; height: 20px; }
#app-view .prompt-output-empty h3 { margin: 6px 0 0; color: #162f53; font-size: 14px; font-weight: 650; }
#app-view .prompt-output-empty p { margin: 0; color: #748196; font-size: 12px; line-height: 1.7; }
#app-view .prompt-output-text { flex: 1; max-height: max(520px, calc(100dvh - 580px)); margin: 0; padding: 20px; overflow: auto; color: #1d3557; font: inherit; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; outline: 0; }
#app-view .prompt-output-text:focus-visible { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15) inset; border-radius: 10px; }
#app-view .prompt-output-text.is-streaming::after { display: inline-block; width: 7px; height: 1.1em; margin-left: 2px; vertical-align: -2px; content: ""; background: var(--accent); border-radius: 1px; animation: prompt-caret 1s steps(2, start) infinite; }
@keyframes prompt-caret { to { visibility: hidden; } }

#app-view .prompt-result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#app-view .prompt-refine { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding-top: 18px; border-top: 1px solid #e9eef6; }
#app-view .prompt-refine .field { min-width: 0; }
#app-view .prompt-refine textarea { min-height: 112px; }
#app-view .prompt-refine .secondary-button { align-self: flex-end; flex: 0 0 auto; min-height: 42px; }
#app-view .prompt-refine textarea:disabled { cursor: not-allowed; background: #f8fafd; }

/* ---------- Square ---------- */

/* One accent per category; cards, filter dots and the dialog share them. */
[data-tone] { --tone: #2465e8; --tone-soft: #eef4ff; --tone-border: #c9dafb; --tone-shadow: rgba(36, 101, 232, .28); }
[data-tone="coding"] { --tone: #2465e8; --tone-soft: #eef4ff; --tone-border: #c9dafb; --tone-shadow: rgba(36, 101, 232, .28); }
[data-tone="writing"] { --tone: #7448d6; --tone-soft: #f4efff; --tone-border: #ddd0fa; --tone-shadow: rgba(116, 72, 214, .26); }
[data-tone="office"] { --tone: #0d8676; --tone-soft: #e7f6f3; --tone-border: #bfe6de; --tone-shadow: rgba(13, 134, 118, .24); }
[data-tone="learning"] { --tone: #b86e05; --tone-soft: #fff4e0; --tone-border: #f6dcac; --tone-shadow: rgba(184, 110, 5, .24); }
[data-tone="marketing"] { --tone: #cf2f66; --tone-soft: #ffedf3; --tone-border: #f8c9d9; --tone-shadow: rgba(207, 47, 102, .24); }
[data-tone="data"] { --tone: #0a7bbd; --tone-soft: #e7f4fc; --tone-border: #bfe0f4; --tone-shadow: rgba(10, 123, 189, .24); }
[data-tone="translate"] { --tone: #4b50dc; --tone-soft: #eef0ff; --tone-border: #d0d3fa; --tone-shadow: rgba(75, 80, 220, .26); }
[data-tone="image"] { --tone: #d9580f; --tone-soft: #fff0e6; --tone-border: #f8d2b9; --tone-shadow: rgba(217, 88, 15, .24); }
[data-tone="mine"] { --tone: #13866b; --tone-soft: #e8f6f1; --tone-border: #bfe5d8; --tone-shadow: rgba(19, 134, 107, .24); }

#app-view .prompt-toolbar { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
#app-view .prompt-toolbar .search-box { width: min(440px, 100%); flex: 0 0 auto; background: #f8fafd; }
#app-view .prompt-toolbar .search-box:focus-within { background: #fff; }
#app-view .prompt-toolbar .filter-chips { justify-content: flex-start; gap: 6px; }
#app-view .prompt-toolbar .filter-chips button { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: #4e647f; background: #f5f8fc; border: 1px solid #e6edf6; border-radius: 999px; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; }
#app-view .prompt-toolbar .filter-chips button:hover { color: #172d4c; background: #fff; border-color: #cddcf2; }
#app-view .prompt-toolbar .filter-chips button.is-active { color: var(--accent-bright); background: #f2f7ff; border-color: #a9c4f6; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1); }
#app-view .prompt-filter-dot { width: 7px; height: 7px; flex: 0 0 auto; background: var(--tone); border-radius: 50%; }
#app-view .prompt-toolbar .filter-chips button[data-prompt-filter="mine"] .prompt-filter-dot { background: #f0b100; }
#app-view .prompt-filter-count { min-width: 18px; padding: 1px 6px; color: #7a8ca4; font-size: 10px; font-weight: 600; text-align: center; background: #fff; border-radius: 999px; }
#app-view .prompt-toolbar .filter-chips button.is-active .prompt-filter-count { color: #fff; background: var(--accent); }

/* Turning a page scrolls here; leave room for the sticky site header. */
#app-view .prompt-square-hint { scroll-margin-top: 96px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: -4px 2px 16px; color: #748196; font-size: 12px; line-height: 1.7; }
#app-view .prompt-square-hint .icon { width: 15px; height: 15px; margin-right: 2px; color: var(--accent); }

#app-view .prompt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#app-view .prompt-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; padding: 20px 20px 0; background: linear-gradient(180deg, var(--tone-soft) 0, #fff 96px); border: 1px solid #e1e8f2; border-radius: 16px; box-shadow: 0 1px 2px rgba(23, 45, 76, .04), 0 10px 26px -20px rgba(23, 45, 76, .3); transition: transform .22s var(--ui-ease), box-shadow .22s, border-color .22s; }
#app-view .prompt-card::before { position: absolute; inset: 0 0 auto; height: 3px; content: ""; background: linear-gradient(90deg, var(--tone), var(--tone-border)); }
#app-view .prompt-card:hover { transform: translateY(-3px); border-color: var(--tone-border); box-shadow: 0 1px 2px rgba(23, 45, 76, .04), 0 18px 36px -22px var(--tone-shadow); }
#app-view .prompt-card-head { display: flex; align-items: center; gap: 12px; }
#app-view .prompt-card-badge { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; color: var(--tone); background: #fff; border: 1px solid var(--tone-border); border-radius: 13px; box-shadow: 0 6px 14px -10px var(--tone-shadow); }
#app-view .prompt-card-badge .icon { width: 21px; height: 21px; stroke-width: 1.8; }
#app-view .prompt-card-meta { display: grid; min-width: 0; flex: 1; gap: 2px; }
#app-view .prompt-card-category { overflow: hidden; color: var(--tone); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
#app-view .prompt-card-slots { color: #8a99ad; font-size: 11px; }
#app-view .prompt-card-slots.has-slots::before { display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0; content: ""; vertical-align: middle; background: var(--tone); border-radius: 50%; opacity: .6; }
#app-view .prompt-star { flex: 0 0 auto; width: 34px; height: 34px; color: #9aa7b8; background: rgba(255, 255, 255, .7); border: 1px solid transparent; }
#app-view .prompt-star .icon { width: 17px; height: 17px; }
#app-view .prompt-star:hover:not(:disabled) { color: #e0a100; background: #fff; border-color: #f3e2b0; }
#app-view .prompt-star.is-active { color: #f0b100; }
#app-view .prompt-star.is-active .icon, #app-view #prompt-detail-save.is-active .icon, .prompt-detail-modal #prompt-detail-save.is-active .icon { fill: currentColor; }
#app-view .prompt-card h3 { margin: 16px 0 0; font-size: 17px; line-height: 1.45; }
#app-view .prompt-card-title { padding: 0; color: #142b4d; font: inherit; font-weight: 700; text-align: left; overflow-wrap: anywhere; background: none; border: 0; cursor: pointer; transition: color .18s; }
#app-view .prompt-card-title:hover { color: var(--tone); }
#app-view .prompt-card-title:focus-visible { border-radius: 4px; outline: 2px solid var(--tone-border); outline-offset: 3px; }
#app-view .prompt-card-description { display: -webkit-box; min-height: 42px; margin: 6px 0 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #6b7c93; font-size: 12.5px; line-height: 21px; overflow-wrap: anywhere; }
#app-view .prompt-card-preview { position: relative; max-height: 104px; margin: 16px 0 0; padding: 12px 14px; overflow: hidden; color: #4a5f7c; font-size: 12px; line-height: 20px; white-space: pre-line; overflow-wrap: anywhere; cursor: pointer; background: #fafbfd; border: 1px solid #edf1f7; border-radius: 12px; -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent); mask-image: linear-gradient(180deg, #000 58%, transparent); transition: border-color .18s, background-color .18s; }
#app-view .prompt-card-preview:hover { background: #fff; border-color: var(--tone-border); }
mark.prompt-slot { padding: 0 3px; color: var(--tone, #2465e8); font-weight: 600; background: var(--tone-soft, #eef4ff); border-radius: 4px; }
#app-view .prompt-square-hint .prompt-slot { --tone: #2465e8; --tone-soft: #eef4ff; }
#app-view .prompt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
#app-view .prompt-tags .chip, .modal .prompt-tags .chip { max-width: 140px; padding: 2px 8px; color: #61748e; font-size: 11px; background: #fff; border: 1px solid #e3e9f2; border-radius: 999px; }
#app-view .prompt-tags .chip::before, .modal .prompt-tags .chip::before { content: "#"; margin-right: 2px; color: var(--tone); opacity: .7; }
#app-view .prompt-card-footer { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 12px 0 14px; border-top: 1px dashed #e3e9f2; }
#app-view .prompt-card > .prompt-card-preview + .prompt-card-footer, #app-view .prompt-card > .prompt-tags + .prompt-card-footer { margin-top: 16px; }
#app-view .prompt-card-action { min-height: 32px; padding-inline: 10px; gap: 6px; color: #4e647f; font-size: 12px; }
#app-view .prompt-card-action .icon { width: 14px; height: 14px; }
#app-view .prompt-card-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-left: auto; padding: 0 12px; color: var(--tone); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; background: var(--tone-soft); border: 1px solid transparent; border-radius: 9px; transition: background-color .18s, border-color .18s, gap .18s; }
#app-view .prompt-card-cta .icon { width: 14px; height: 14px; }
#app-view .prompt-card-cta:hover { gap: 9px; background: #fff; border-color: var(--tone-border); }
#app-view .prompt-card-cta:focus-visible { outline: 2px solid var(--tone-border); outline-offset: 2px; }
#app-view .prompt-delete { color: #b4232f; }
#app-view .prompt-delete.is-armed { color: #fff; background: #d92d3a; border-color: #d92d3a; }

/* ---------- Dialogs ---------- */

.prompt-detail-modal { width: min(720px, calc(100vw - 32px)); }
.prompt-detail-modal .modal-head { background: linear-gradient(180deg, var(--tone-soft), #fff); box-shadow: inset 0 4px 0 var(--tone); }
.prompt-detail-modal .section-kicker { color: var(--tone) !important; font-weight: 650; letter-spacing: .5px !important; }
.prompt-detail-modal .modal-body { display: grid; gap: 14px; }
.prompt-detail-description { margin: 0; color: #60718a; font-size: 13px; line-height: 1.7; }
.prompt-detail-modal .prompt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.prompt-detail-modal .prompt-tags[hidden] { display: none; }
.prompt-detail-content { max-height: min(52vh, 460px); margin: 0; padding: 16px 18px; overflow: auto; color: #1d3557; font: inherit; font-size: 13px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; background: #fafbfd; border: 1px solid #e6ecf4; border-radius: 12px; outline: 0; }
.prompt-detail-content:focus-visible { border-color: var(--tone-border); }
.prompt-detail-modal .modal-actions { flex-wrap: wrap; }
.prompt-detail-modal .modal-actions .icon { width: 16px; height: 16px; }
#prompt-detail-save.is-active { color: #b07800; }
#prompt-detail-save[hidden] { display: none; }
.prompt-detail-modal .form-status:empty, #prompt-save-modal .form-status:empty { display: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1250px) {
  #app-view .prompt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  #app-view .prompt-studio { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  #app-view .prompt-output { min-height: 200px; }
}

@media (max-width: 760px) {
  /* The sidebar links to the square; a long hero button would wrap into a column. */
  #app-view #view-prompt-optimizer .page-hero > .secondary-button { display: none; }
  #app-view .prompt-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #app-view .prompt-toolbar { padding: 13px; }
  #app-view .prompt-toolbar .search-box { width: 100%; }
  #app-view .prompt-toolbar .filter-chips { justify-content: flex-start; flex-wrap: nowrap; margin: 0 -13px; padding: 0 13px 2px; overflow-x: auto; scrollbar-width: none; }
  #app-view .prompt-toolbar .filter-chips::-webkit-scrollbar { display: none; }
  #app-view .prompt-toolbar .filter-chips button { flex: 0 0 auto; }
  #app-view .prompt-card { padding: 18px 18px 0; }
  #app-view .prompt-card:hover { transform: none; }
  #app-view .prompt-input-field textarea { min-height: 180px; }
  #app-view .prompt-form-footer, #app-view .prompt-model-field { align-items: stretch; flex-direction: column; }
  #app-view .prompt-model-field .select-shell { min-width: 0; }
  #app-view .prompt-form-actions { margin-left: 0; }
  #app-view .prompt-form-actions .primary-button { flex: 1 1 auto; }
  #app-view .prompt-refine { align-items: stretch; flex-direction: column; }
  #app-view .prompt-refine .secondary-button { align-self: stretch; }
  #app-view .prompt-output-text { max-height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  #app-view .prompt-card, #app-view .prompt-mode-trigger, #app-view .prompt-mode-trigger > .icon, #app-view .prompt-card-cta { transition: none; }
  #app-view .prompt-card:hover { transform: none; }
  #app-view .prompt-output-text.is-streaming::after { animation: none; }
}

#app-view .catalog-note .prompt-note-link { flex: 0 0 auto; font-size: inherit; }
#app-view .prompt-status-action { margin-left: 4px; font-size: inherit; font-weight: 650; }

/* ---------- Square pagination ---------- */
#app-view .prompt-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 24px; padding: 12px 14px 12px 18px; background: #fff; border: 1px solid #e1e8f2; border-radius: 14px; box-shadow: 0 1px 2px rgba(23, 45, 76, .04), 0 10px 26px -22px rgba(23, 45, 76, .3); }
#app-view .prompt-pagination[hidden] { display: none; }
#app-view .prompt-page-summary { margin: 0; color: #748196; font-size: 12px; font-variant-numeric: tabular-nums; }
#app-view .prompt-page-controls { display: flex; align-items: center; gap: 8px; }
#app-view .prompt-page-step { min-height: 34px; padding: 0 12px; font-size: 12px; border-radius: 9px; }
#app-view .prompt-page-step:disabled { cursor: not-allowed; opacity: .45; }
#app-view .prompt-page-numbers { display: flex; align-items: center; gap: 4px; }
#app-view .prompt-page-numbers button { min-width: 34px; height: 34px; padding: 0 8px; color: #4e647f; font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 9px; transition: background-color .18s, border-color .18s, color .18s; }
#app-view .prompt-page-numbers button:hover { color: #172d4c; background: #f3f6fb; border-color: #e1e8f2; }
#app-view .prompt-page-numbers button[aria-current="page"] { color: var(--accent-bright); background: #f2f7ff; border-color: #a9c4f6; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1); }
#app-view .prompt-page-numbers button:focus-visible, #app-view .prompt-page-step:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .45); outline-offset: 2px; }
#app-view .prompt-page-gap { min-width: 18px; color: #9aa7b8; text-align: center; }
#app-view .prompt-page-compact { display: none; min-width: 48px; color: #4e647f; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }

@media (max-width: 640px) {
  #app-view .prompt-pagination { padding: 12px; }
  #app-view .prompt-page-summary { width: 100%; text-align: center; }
  #app-view .prompt-page-controls { width: 100%; justify-content: space-between; }
  #app-view .prompt-page-numbers { display: none; }
  #app-view .prompt-page-compact { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  #app-view .prompt-page-numbers button { transition: none; }
}