/* Focused Creator View: page -> item -> one editing form, with preview on demand. */
.visual-editor {
  --creator-bg: #f1edf2;
  --creator-panel: #fffdfd;
  --creator-soft: #f7f0f6;
  --creator-accent: #9b6f8e;
  --creator-accent-soft: #eedfea;
  --creator-border: #ddd3de;
  --creator-text: #554756;
  color: var(--creator-text);
  font-size: 14px;
}

.auth-mode-toggle { width: 100%; min-height: 36px; border: 1px solid #dfcfdb; border-radius: 9px; background: #fbf6fa; color: #7d6277; font: 700 11px 'DM Sans',sans-serif; cursor: pointer; }
.auth-mode-toggle:hover { border-color: #cba8bd; background: #f8edf5; }

.visual-editor-top {
  height: 68px;
  flex: 0 0 68px;
  padding: 0 20px;
  background: rgba(255, 253, 253, .98);
  border-bottom: 1px solid var(--creator-border);
  box-shadow: 0 3px 14px rgba(65, 47, 68, .06);
}
.visual-brand { min-width: 195px; gap: 10px; }
.visual-brand > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--creator-accent-soft); color: #785970; font-size: 17px; }
.visual-brand strong { color: #4f4050; font-size: 12px; }
.visual-brand small { display: none; }
.visual-breadcrumb { max-width: min(500px, 38vw); padding: 8px 12px; border: 1px solid #e7dce5; border-radius: 9px; background: #faf7f9; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visual-breadcrumb span { color: #a28fa0; }
.visual-breadcrumb b { margin: 0 7px; color: #c0afbc; }
.visual-breadcrumb strong { color: #655265; }
.visual-top-actions { gap: 8px; }
.saved-state { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 9px; background: #edf5ed; color: #6f8873; font-size: 11px; }
.saved-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #789b7c; }
.saved-state.unsaved { background: #fff1e8; color: #9a6c4f; }
.saved-state.unsaved::before { background: #d08b5e; }
.visual-top-actions .small-button { min-height: 38px; padding: 9px 14px; border-radius: 10px; font-size: 12px; }
.visual-close { width: 38px; height: 38px; border: 0; border-radius: 10px; background: #f6edf4; color: #8a7486; font-size: 23px; cursor: pointer; }
.inspector-toggle { display: none !important; }

.visual-editor-body { display: grid; grid-template-columns: 220px 340px minmax(0, 1fr); min-height: 0; flex: 1; background: var(--creator-bg); }
.visual-editor[data-creator-layout="single"] .visual-editor-body { grid-template-columns: 220px minmax(0, 1fr); }
.visual-editor[data-creator-layout="single"] .editor-canvas-wrap { display: none; }
.visual-editor[data-creator-layout="overview"] .visual-editor-body { grid-template-columns: 220px minmax(0, 1fr); }
.visual-editor[data-creator-layout="overview"] .editor-inspector { display: none; }
.visual-editor.creator-list-only .visual-editor-body { grid-template-columns: 220px minmax(0, 1fr); }
.visual-editor.creator-list-only .editor-inspector { display: none; }

/* One short page menu. */
.editor-tools { min-width: 0; padding: 20px 12px; overflow-y: auto; background: #fffdfd; border-right: 1px solid var(--creator-border); }
.editor-tools p { margin: 0 9px 8px; padding: 0; color: #aa98a7; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.editor-tools .tool-separator { margin-top: 23px; padding-top: 18px; border-top: 1px solid #eee5ed; }
.editor-tool { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; width: 100%; min-height: 48px; gap: 9px; padding: 8px 9px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #817382; text-align: left; font-size: 16px; cursor: pointer; }
.editor-tool > span { font-size: 12px; font-weight: 700; line-height: 1.25; }
.editor-tool:hover { background: #faf5f8; border-color: #eee1eb; }
.editor-tool.active { background: var(--creator-accent-soft); border-color: #ddc7d7; color: #624c5e; box-shadow: none; }
.editor-tool.active::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: -1px; width: 3px; border-radius: 0 3px 3px 0; background: var(--creator-accent); }
.editor-tool-count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.75); color: #816a7c; font-size: 10px; }

/* The middle column is a compact item picker, not a second full website. */
.editor-canvas-wrap { min-width: 0; overflow: auto; padding: 18px; background: #f8f4f7; border-right: 1px solid var(--creator-border); }
.canvas-toolbar { display: flex !important; min-height: 44px; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 2px 2px 13px; color: #7a6878; letter-spacing: 0; }
.canvas-toolbar strong { font-size: 13px; }
.canvas-toolbar span { max-width: 190px; color: #a291a0; font-size: 11px; line-height: 1.45; text-align: right; }
.editor-canvas { width: 100%; max-width: 760px; min-height: 0; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.canvas-page { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.collection-canvas, .visibility-canvas { padding: 0; }
.canvas-page-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding: 12px; border: 1px solid #e7dce5; border-radius: 12px; background: #fffdfd; color: #756174; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.canvas-page-title .small-button, .creator-page-settings { min-height: 35px; padding: 8px 11px; border: 1px solid #d8c5d4; border-radius: 9px; background: #f8eef5; color: #73566c; font: 700 11px 'DM Sans', sans-serif; box-shadow: none; cursor: pointer; }
.creator-page-settings { margin-left: auto; background: #eee4ef; }
.canvas-item, .canvas-adopt-card, .canvas-post-card, .queue-editor-card, .canvas-commission-card { cursor: pointer; transition: border-color .16s, background .16s, box-shadow .16s; }
.canvas-item:focus-visible, .canvas-adopt-card:focus-visible, .canvas-post-card:focus-visible, .queue-editor-card:focus-visible, .canvas-commission-card:focus-visible { outline: 3px solid rgba(155, 111, 142, .22); outline-offset: 2px; }
.canvas-item.selected, .canvas-adopt-card.selected, .canvas-post-card.selected, .queue-editor-card.selected, .canvas-commission-card.selected { border-color: #b986a9; background: #fff7fb; box-shadow: 0 0 0 3px rgba(155,111,142,.11); }

.canvas-commission-grid, .canvas-adopt-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.canvas-commission-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 11px; min-width: 0; padding: 9px; border: 1px solid #e5dbe3; border-radius: 12px; background: #fffdfd; text-align: left; }
.canvas-commission-card > strong { grid-column: 2; align-self: end; min-height: 0; color: #5b4859; font: 600 14px/1.3 'DM Sans', sans-serif; }
.canvas-commission-card > em { grid-column: 2; color: #90798b; font-size: 12px; font-style: normal; }
.canvas-commission-card > .canvas-commission-image { grid-column: 1; grid-row: 1 / 3; width: 64px; height: 64px; aspect-ratio: 1; border-radius: 9px; box-shadow: none; }
.canvas-commission-card > i { top: 6px; right: 7px; }
.canvas-commission-image .commission-type-placeholder b { font-size: 18px; }
.canvas-commission-image .commission-type-placeholder small { font-size: 9px; }

.canvas-adopt-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 11px; min-height: 82px; padding: 9px; border: 1px solid #e5dbe3; border-radius: 12px; background: #fffdfd; text-align: left; }
.canvas-adopt-card:nth-child(2n) { background: #faf9fd; }
.canvas-adopt-card img { grid-column: 1; grid-row: 1 / 3; width: 64px; height: 64px; border-radius: 9px; object-fit: cover; mix-blend-mode: normal; }
.canvas-adopt-card strong, .canvas-adopt-card small { grid-column: 2; padding: 0; }
.canvas-adopt-card strong { align-self: end; margin: 0; color: #5b4859; font: 600 14px/1.3 'DM Sans', sans-serif; }
.canvas-adopt-card small { align-self: start; color: #a1879a; font-size: 9px; }
.canvas-adopt-card i { top: 6px; left: 6px; border-radius: 6px; }

.canvas-post-card { grid-template-columns: 64px minmax(0,1fr); gap: 11px; min-height: 82px; margin-bottom: 9px; padding: 9px; border: 1px solid #e5dbe3; border-radius: 12px; background: #fffdfd; }
.canvas-post-card > div { height: 64px; border-radius: 9px; }
.canvas-post-card > span strong { margin: 3px 0; color: #5b4859; font: 600 14px/1.3 'DM Sans', sans-serif; }
.canvas-post-card > span em { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 10px; }
.queue-editor-summary { grid-template-columns: 1fr; gap: 7px; }
.queue-editor-summary span { flex-direction: row; align-items: center; justify-content: space-between; border-radius: 9px; }
.queue-editor-list { gap: 9px; }
.queue-editor-card { padding: 12px; border-radius: 12px; }
.queue-editor-card-head { grid-template-columns: auto 1fr; gap: 5px 10px; }
.queue-editor-card-head em { grid-column: 2; justify-self: start; }
.queue-detail-grid, .queue-private-note { display: none; }
.wallet-editor-canvas .wallet-editor-hero { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; padding: 20px; border-radius: 14px; background: linear-gradient(135deg,#4f4150,#73566e); }
.wallet-editor-canvas .wallet-editor-hero > div { min-width: 0; }
.wallet-editor-canvas .wallet-editor-hero .wallet-hero-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; font: 500 23px 'Playfair Display',serif; }
.wallet-editor-canvas .wallet-editor-hero strong { font-size: 34px; line-height: 1.05; }
.wallet-editor-canvas .wallet-editor-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.wallet-editor-canvas .wallet-editor-grid div { display: flex; align-items: center; justify-content: space-between; min-height: 58px; border-radius: 11px; }
.wallet-editor-canvas .wallet-editor-grid .commission { background: #faf3f7; border-color: #ead7e4; }
.wallet-editor-canvas .wallet-editor-grid .tips { background: #f1f7f1; border-color: #d8e5d8; }
.wallet-editor-canvas .wallet-editor-grid strong { margin-top: 0; font-size: 18px; }
.wallet-editor-canvas .wallet-ledger { margin-top: 15px; overflow: hidden; border: 1px solid #e5dae3; border-radius: 13px; background: #fffdfd; }
.wallet-ledger-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-bottom: 1px solid #e8dee6; background: #f8f3f7; }
.wallet-ledger-title strong, .wallet-ledger-title small { display: block; }
.wallet-ledger-title strong { color: #5c4959; font-size: 12px; }
.wallet-ledger-title small { margin-top: 2px; color: #9a8796; font-size: 9px; }
.wallet-ledger-title > span { padding: 5px 8px; border-radius: 999px; background: #eadde7; color: #745d70; font-size: 9px; font-weight: 700; }
.wallet-editor-canvas .wallet-ledger-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto 14px; align-items: center; gap: 10px; width: 100%; min-height: 82px; padding: 12px 13px; border: 0; border-bottom: 1px solid #eee5ec; background: #fffdfd; color: #5b4c59; text-align: left; cursor: pointer; transition: background .15s,border-color .15s,box-shadow .15s; }
.wallet-editor-canvas .wallet-ledger-row:last-child { border-bottom: 0; }
.wallet-editor-canvas .wallet-ledger-row:hover { background: #fcf7fa; }
.wallet-editor-canvas .wallet-ledger-row.selected { z-index: 1; background: #fff5fb; box-shadow: inset 4px 0 #b986a9; }
.wallet-entry-copy { min-width: 0; }
.wallet-entry-copy strong, .wallet-entry-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-entry-copy small { margin-bottom: 5px; color: #a48e9f; font-size: 8px; letter-spacing: .04em; }
.wallet-entry-copy strong { color: #574554; font-size: 13px; }
.wallet-entry-money { display: grid; grid-template-columns: repeat(2,auto); gap: 4px 12px; text-align: right; }
.wallet-entry-money small { display: grid; grid-template-columns: auto; gap: 1px; }
.wallet-entry-money i { color: #ac9aaa; font-size: 7px; font-style: normal; font-weight: 500; }
.wallet-entry-money b { color: #796477; font-size: 10px; }
.wallet-entry-money > strong { grid-column: 1 / -1; margin-top: 2px; padding-top: 5px; border-top: 1px solid #eadfe8; color: #654e61; font: 600 15px 'Playfair Display',serif; }
.wallet-entry-money > strong i { margin-right: 7px; }
.wallet-entry-arrow { color: #b394aa; font-size: 20px; }
.wallet-empty { padding: 20px 10px; color: #958494; font-size: 12px; line-height: 1.6; text-align: center; }
.wallet-entry-form .cms-field:has(input[name="commission"]), .wallet-entry-form .cms-field:has(input[name="tip"]) { padding: 12px; border: 1px solid #e5d9e2; border-radius: 11px; background: #fbf7fa; }
.wallet-entry-form .cms-field:has(input[name="tip"]) { border-color: #dce7da; background: #f5faf4; }
.wallet-entry-form .cms-field:has(input[name="commission"]) input, .wallet-entry-form .cms-field:has(input[name="tip"]) input { font-size: 18px; font-weight: 700; }
.wallet-form-note { display: grid; gap: 3px; margin: 13px 0; padding: 12px 14px; border: 1px solid #d9e5d8; border-radius: 10px; background: #f3f8f2; color: #68806c; font-size: 11px; line-height: 1.55; }
.wallet-form-note strong { color: #58705c; font-size: 12px; }
.wallet-item-actions { grid-template-columns: 1fr !important; }

/* The main area contains one focused form. */
.editor-inspector { position: relative; min-width: 0; overflow: auto; padding: 0 28px 100px; background: var(--creator-panel); border-left: 0; border-radius: 0; scroll-behavior: smooth; }
.editor-inspector > * { width: min(820px, 100%); margin-left: auto; margin-right: auto; }
.editor-inspector-close { display: none !important; }
.editor-selection-context { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 11px; width: auto; max-width: none; margin: 0 -28px 22px; padding: 13px max(28px, calc((100% - 820px) / 2 + 28px)); border-bottom: 1px solid #eadfea; background: rgba(255,253,253,.97); box-shadow: 0 5px 14px rgba(74,54,76,.05); backdrop-filter: blur(12px); }
.editor-selection-context > i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--creator-accent); box-shadow: 0 0 0 4px rgba(155,111,142,.12); }
.editor-selection-context > span { min-width: 0; }
.editor-selection-context small, .editor-selection-context strong { display: block; }
.editor-selection-context small { color: #aa91a4; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.editor-selection-context strong { margin-top: 2px; color: #5d4b5d; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-back-list { min-height: 34px; margin-right: 3px; padding: 7px 10px; border: 1px solid #ddceda; border-radius: 9px; background: #faf4f8; color: #745f70; font: 700 11px 'DM Sans', sans-serif; cursor: pointer; }
.inspector-heading { padding: 17px 19px; border: 1px solid #eadde7; border-radius: 13px; background: #faf5f8; }
.inspector-heading h2 { margin: 5px 0; color: #4f4050; font-size: 27px; }
.inspector-heading p { color: #8f7f8e; font-size: 13px; line-height: 1.55; }

.creator-inspector-switch { position: sticky; top: 61px; z-index: 18; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 14px; margin-bottom: 18px; padding: 6px; border: 1px solid #dfd3de; border-radius: 12px; background: rgba(255,253,253,.97); box-shadow: 0 5px 14px rgba(72,52,72,.06); backdrop-filter: blur(10px); }
.creator-inspector-switch button { min-height: 47px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #806e7e; font: 700 13px 'DM Sans', sans-serif; cursor: pointer; }
.creator-inspector-switch button small { display: block; margin-top: 2px; color: #aa9aaa; font-size: 10px; font-weight: 500; }
.creator-inspector-switch button[aria-selected="true"] { border-color: #d9bed1; background: var(--creator-accent-soft); color: #60495b; }
.editor-inspector[data-creator-mode="page"] > [data-creator-mode-section="item"],
.editor-inspector[data-creator-mode="item"] > [data-creator-mode-section="page"] { display: none !important; }

.creator-tabbed-form > .editor-section-nav { position: sticky; top: 61px; z-index: 17; display: flex; gap: 6px; margin: 14px 0 17px; padding: 6px; border: 1px solid #e2d6df; border-radius: 11px; background: rgba(255,253,253,.97); overflow-x: auto; box-shadow: 0 5px 13px rgba(72,52,72,.05); }
.creator-tabbed-form > .editor-section-nav > span { display: none; }
.creator-tabbed-form > .editor-section-nav button { min-height: 39px; flex: 0 0 auto; padding: 8px 13px; border-radius: 8px; font-size: 12px; }
.creator-tabbed-form .editor-section-divider { margin-top: 0; padding-top: 2px; }
.creator-tabbed-form .editor-section-divider span { font-size: 20px; }
.creator-tabbed-form [data-creator-section-node][hidden] { display: none !important; }
.visual-editor .cms-form-grid { gap: 14px; padding: 18px; border: 1px solid #e8dde6; border-radius: 13px; background: #fffdfd; box-shadow: 0 4px 14px rgba(74,55,74,.035); }
.visual-editor .cms-field { color: #766575; font-size: 12px; font-weight: 700; letter-spacing: .01em; text-transform: none; }
.visual-editor .cms-field input, .visual-editor .cms-field textarea, .visual-editor .cms-field select { min-height: 47px; margin-top: 7px; padding: 11px 12px; border-radius: 9px; color: #4e414e; font-size: 14px; line-height: 1.55; }
.visual-editor .cms-field textarea { min-height: 118px; resize: vertical; }
.visual-editor .cms-check { min-height: 49px; padding: 11px 12px; border: 1px solid #e2d7e0; border-radius: 10px; background: #faf6f9; color: #746473; font-size: 13px; }
.visual-editor .cms-check input { width: 18px; height: 18px; accent-color: var(--creator-accent); }
.visual-editor .upload-zone { padding: 16px; border-width: 1px; border-radius: 11px; font-size: 12px; }
.visual-editor .cms-form-actions { position: sticky; z-index: 22; bottom: -100px; gap: 9px; margin: 22px -28px 0; padding: 14px max(28px, calc((100% - 820px) / 2 + 28px)); border-top: 1px solid #e5dae3; background: rgba(255,253,253,.97); box-shadow: 0 -8px 18px rgba(74,54,76,.06); backdrop-filter: blur(10px); }
.visual-editor .cms-form-actions button { min-height: 44px; font-size: 13px; }
.visual-editor .cms-form-actions .post-button { min-width: 170px; }
.visual-editor .visual-item-actions { width: min(820px,100%); margin: 18px auto 0; }
.inspector-empty { padding: 28px; border: 1px dashed #d8c9d5; border-radius: 12px; background: #faf6f9; color: #8d7b8a; font-size: 14px; line-height: 1.7; text-align: center; }

/* Every public Commission section has a direct editor entry. */
.creator-commission-sections { margin: 0 0 13px; padding: 12px; border: 1px solid #decfdb; border-radius: 13px; background: #f8eef5; }
.creator-commission-sections > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.creator-commission-sections > header strong { color: #604c5c; font-size: 13px; }
.creator-commission-sections > header span { color: #9a8796; font-size: 10px; }
.creator-commission-sections > div { display: grid; gap: 7px; }
.creator-commission-sections button { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 9px; width: 100%; min-height: 55px; padding: 8px 10px; border: 1px solid #e4d7e1; border-radius: 10px; background: #fffdfd; color: #5d4d5b; text-align: left; cursor: pointer; }
.creator-commission-sections button:hover { border-color: #cdaec3; background: #fff8fc; }
.creator-commission-sections button > b { color: #b17d9f; font: 500 13px 'Playfair Display', serif; }
.creator-commission-sections button > span, .creator-commission-sections button strong, .creator-commission-sections button small { display: block; min-width: 0; }
.creator-commission-sections button strong { font-size: 12px; }
.creator-commission-sections button small { margin-top: 2px; color: #9b8998; font-size: 9px; line-height: 1.3; }
.creator-commission-sections button > i { color: #b28aa6; font-size: 18px; font-style: normal; }
.visual-editor.creator-list-only .creator-commission-sections > div { grid-template-columns: repeat(2, minmax(0,1fr)); }
.commission-guide-form .commission-edit-tabs { position: sticky; top: 61px; z-index: 17; display: flex; gap: 7px; margin: 14px 0 17px; padding: 6px; overflow-x: auto; box-shadow: 0 5px 14px rgba(72,52,72,.06); }
.commission-edit-tabs button { min-height: 44px; flex: 0 0 auto; font-size: 13px; white-space: nowrap; }
.commission-guide-form .commission-edit-panel { padding: 17px; }
.commission-edit-panel > h3 { margin: 0 0 13px; }

/* Every form starts with a compact, unsaved preview of the same data. */
.creator-live-preview { margin: 14px 0 18px; overflow: hidden; border: 1px solid #dfd1dc; border-radius: 14px; background: #fbf8fb; box-shadow: 0 5px 16px rgba(74,55,74,.045); }
.creator-live-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-bottom: 1px solid #eadfe7; background: #f4edf3; }
.creator-live-preview > header span { display: inline-flex; align-items: center; gap: 7px; color: #71556c; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.creator-live-preview > header i { width: 7px; height: 7px; border-radius: 50%; background: #7aa17b; box-shadow: 0 0 0 3px rgba(122,161,123,.15); }
.creator-live-preview > header small { color: #938191; font-size: 10px; text-align: right; }
.creator-live-preview-body { padding: 13px; }
.creator-live-preview h3, .creator-live-preview p { margin-top: 0; }
.creator-live-preview p { margin-bottom: 0; color: #7d6c7a; font-size: 11px; line-height: 1.55; }
.creator-preview-visible, .creator-preview-hidden { display: inline-flex; align-items: center; min-height: 20px; margin-top: 8px; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.creator-preview-visible { background: #edf5ed; color: #66816b; }
.creator-preview-hidden { background: #f5eaee; color: #a07185; }
.creator-preview-empty { color: #a394a1 !important; font-size: 10px !important; }

.creator-preview-wallet { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,.8fr); gap: 14px; align-items: center; }
.creator-preview-wallet > div > small { display: block; margin-bottom: 4px; color: #a28a9d; font-size: 9px; letter-spacing: .05em; }
.creator-preview-wallet h3 { margin-bottom: 5px; color: #554653; font-size: 18px; }
.creator-preview-wallet dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; }
.creator-preview-wallet dl > div { padding: 8px; border: 1px solid #eadde6; border-radius: 9px; background: #fffdfd; }
.creator-preview-wallet dl > .total { grid-column: 1 / -1; border-color: #d9c1d2; background: #f5eaf2; }
.creator-preview-wallet dt { color: #9b8998; font-size: 8px; }
.creator-preview-wallet dd { margin: 3px 0 0; color: #5e4b5b; font: 600 16px 'Playfair Display',serif; }
.creator-preview-wallet .total dd { font-size: 20px; }

.creator-preview-queue { padding: 2px; }
.creator-preview-queue header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 7px; }
.creator-preview-queue header > span { padding: 4px 6px; border-radius: 6px; background: #eee2eb; color: #846278; font-size: 8px; font-weight: 800; }
.creator-preview-queue header strong { overflow: hidden; color: #5a4858; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.creator-preview-queue header em { padding: 4px 6px; border-radius: 999px; background: #edf5ed; color: #65816b; font-size: 8px; font-style: normal; }
.creator-preview-queue header .creator-preview-visible, .creator-preview-queue header .creator-preview-hidden { grid-column: 2 / -1; justify-self: start; margin: 0; }
.creator-preview-progress { height: 8px; margin: 13px 0 10px; overflow: hidden; border-radius: 999px; background: #eadfe7; }
.creator-preview-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#c992b2,#937cb5); transition: width .16s ease; }
.creator-preview-queue-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.creator-preview-queue-grid span { min-width: 0; padding: 8px; border-radius: 8px; background: #fffdfd; }
.creator-preview-queue-grid small, .creator-preview-queue-grid b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-preview-queue-grid small { color: #a0919e; font-size: 7px; }
.creator-preview-queue-grid b { margin-top: 3px; color: #695666; font-size: 10px; }

.creator-preview-profile { overflow: hidden; border: 1px solid #e7dbe4; border-radius: 10px; background: #fffdfd; }
.creator-preview-banner { position: relative; min-height: 100px; padding: 16px; overflow: hidden; background: linear-gradient(135deg,#efe1ee,#ede9f6); color: #594557; }
.creator-preview-banner img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .42; object-fit: cover; }
.creator-preview-banner strong, .creator-preview-banner small { position: relative; z-index: 1; display: block; max-width: 75%; text-shadow: 0 1px rgba(255,255,255,.4); }
.creator-preview-banner strong { font: 500 23px 'Playfair Display',serif; }
.creator-preview-banner small { margin-top: 3px; font-size: 10px; }
.creator-preview-profile-copy { display: grid; grid-template-columns: 55px minmax(0,1fr); gap: 11px; padding: 12px; }
.creator-preview-profile-copy > img, .creator-preview-avatar { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; background: #efe6ef; }
.creator-preview-avatar { display: grid; place-items: center; color: #ad89a2; font-size: 22px; }
.creator-preview-profile-copy h3 { margin-bottom: 2px; color: #554653; font-size: 17px; }
.creator-preview-profile-copy > div > small { color: #a18e9e; font-size: 9px; }
.creator-preview-profile-copy p { margin-top: 7px; }
.creator-preview-socials { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.creator-preview-socials span { padding: 4px 6px; border: 1px solid #eadde7; border-radius: 999px; color: #80657a; font-size: 8px; }

.creator-preview-post, .creator-preview-commission, .creator-preview-adopt { display: grid; grid-template-columns: 94px minmax(0,1fr); gap: 12px; align-items: center; min-height: 100px; }
.creator-preview-post > img, .creator-preview-commission > img, .creator-preview-adopt > img, .creator-preview-placeholder { width: 94px; height: 94px; border-radius: 10px; object-fit: cover; background: #f0e8ef; }
.creator-preview-placeholder { display: grid; place-items: center; color: #b68eaa; font-size: 26px; }
.creator-preview-post span, .creator-preview-commission small, .creator-preview-adopt small { display: block; margin-bottom: 5px; color: #9d8999; font-size: 8px; letter-spacing: .06em; }
.creator-preview-post h3, .creator-preview-commission h3, .creator-preview-adopt h3 { margin-bottom: 4px; color: #564654; font-size: 18px; }
.creator-preview-commission > div > strong, .creator-preview-adopt > div > strong { display: block; margin-bottom: 5px; color: #7d6277; font: 500 15px 'Playfair Display',serif; }

.creator-preview-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 3px 2px 12px; }
.creator-preview-page-head small { display: block; margin-bottom: 4px; color: #a28d9e; font-size: 8px; letter-spacing: .08em; }
.creator-preview-page-head h3 { margin-bottom: 5px; color: #554653; font: 500 24px 'Playfair Display',serif; }
.creator-preview-page-head > span { flex: 0 0 auto; padding: 4px 6px; border: 1px solid #e2d4df; border-radius: 999px; color: #9a7b90; font-size: 8px; }
.creator-preview-rate { overflow: hidden; border: 1px solid #e6d9e3; border-radius: 10px; background: #fffdfd; }
.creator-preview-rate > strong { display: block; padding: 9px 10px; border-bottom: 1px solid #eee2eb; color: #604b5e; font: 500 16px 'Playfair Display',serif; }
.creator-preview-rate > span { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-bottom: 1px solid #f1e8ef; color: #746171; font-size: 10px; }
.creator-preview-rate > span:last-child { border-bottom: 0; }
.creator-preview-rate em { color: #815f79; font-style: normal; }
.creator-preview-rate > small { display: block; padding: 10px; color: #9f8e9d; font-size: 10px; }
.creator-preview-page-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 9px; }
.creator-preview-page-summary section { min-width: 0; min-height: 64px; padding: 9px; border: 1px solid #e9dfe7; border-radius: 9px; background: #fdfbfd; }
.creator-preview-page-summary small { display: block; margin-bottom: 5px; color: #9f8c9d; font-size: 8px; font-weight: 800; }
.creator-preview-page-summary ul { display: grid; gap: 3px; margin: 0; padding-left: 15px; color: #766575; font-size: 9px; line-height: 1.3; }
.creator-preview-page-summary p { font-size: 9px; }
.creator-preview-generic { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.creator-preview-generic span { padding: 9px; border: 1px solid #eadfe7; border-radius: 8px; background: #fffdfd; }
.creator-preview-generic small, .creator-preview-generic strong { display: block; }
.creator-preview-generic small { color: #a3909f; font-size: 8px; }
.creator-preview-generic strong { margin-top: 3px; color: #5c4b59; font-size: 12px; }

/* Preview is an optional drawer, so it never competes with the form. */
.creator-preview-backdrop { display: block; position: fixed; inset: 68px 0 0; z-index: 70; border: 0; background: rgba(57,43,57,.38); opacity: 0; pointer-events: none; transition: opacity .2s; backdrop-filter: blur(3px); }
.creator-preview-drawer { position: fixed; top: 68px; right: 0; bottom: 0; z-index: 71; display: grid; grid-template-rows: auto minmax(0,1fr); width: min(900px, calc(100vw - 80px)); background: #f4eff4; border-left: 1px solid #d8cbd6; box-shadow: -20px 0 50px rgba(52,37,55,.2); transform: translateX(102%); transition: transform .24s ease; }
.creator-preview-open .creator-preview-backdrop { opacity: 1; pointer-events: auto; }
.creator-preview-open .creator-preview-drawer { transform: translateX(0); }
.creator-preview-drawer > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 74px; padding: 12px 18px; border-bottom: 1px solid #ddd2dc; background: #fffdfd; }
.creator-preview-drawer header div { min-width: 0; }
.creator-preview-drawer header small, .creator-preview-drawer header strong, .creator-preview-drawer header span { display: block; }
.creator-preview-drawer header small { color: #a78da1; font-size: 9px; letter-spacing: .13em; }
.creator-preview-drawer header strong { margin: 2px 0; color: #534452; font-size: 16px; }
.creator-preview-drawer header span { color: #938291; font-size: 11px; }
.creator-preview-close { width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid #dfd3dd; border-radius: 10px; background: #f8f1f6; color: #826d7e; font-size: 22px; cursor: pointer; }
.creator-preview-frame { width: 100%; height: 100%; border: 0; background: white; }

@media (max-width: 1180px) {
  .visual-editor-body { grid-template-columns: 84px 310px minmax(0,1fr); }
  .visual-editor[data-creator-layout="single"] .visual-editor-body,
  .visual-editor[data-creator-layout="overview"] .visual-editor-body,
  .visual-editor.creator-list-only .visual-editor-body { grid-template-columns: 84px minmax(0,1fr); }
  .editor-tools { padding: 16px 7px; }
  .editor-tools p { display: none; }
  .editor-tool { grid-template-columns: 1fr; justify-items: center; min-height: 57px; padding: 7px 4px; }
  .editor-tool > span { font-size: 9px; text-align: center; }
  .editor-tool-count { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; }
}

@media (max-width: 900px) {
  .visual-editor-top { height: 64px; flex-basis: 64px; padding: 0 10px; }
  .visual-brand { min-width: 0; }
  .visual-brand > span { width: 34px; height: 34px; }
  .visual-brand strong { font-size: 10px; }
  .visual-breadcrumb { display: none; }
  .saved-state { padding: 7px 8px; font-size: 10px; }
  .visual-editor-body,
  .visual-editor[data-creator-layout="single"] .visual-editor-body,
  .visual-editor[data-creator-layout="overview"] .visual-editor-body,
  .visual-editor.creator-list-only .visual-editor-body { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
  .editor-tools { display: flex; gap: 5px; padding: 7px 9px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--creator-border); }
  .editor-tools p { display: none; }
  .editor-tool { display: flex; grid-template-columns: none; flex: 0 0 auto; width: auto; min-height: 42px; padding: 7px 10px; font-size: 14px; }
  .editor-tool > span { display: block; font-size: 10px; white-space: nowrap; }
  .editor-tool-count { position: static; min-width: 19px; height: 19px; }
  .editor-tool.active::before { top: auto; right: 8px; bottom: -1px; left: 8px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .editor-canvas-wrap { grid-row: 2; padding: 14px; border-right: 0; }
  .editor-inspector { grid-row: 2; position: relative; inset: auto; width: auto; padding: 0 16px 88px; transform: none; box-shadow: none; }
  .visual-editor[data-creator-layout="collection"]:not(.creator-list-only) .editor-canvas-wrap { display: none; }
  .visual-editor[data-creator-layout="collection"].creator-list-only .editor-inspector { display: none; }
  .editor-selection-context { margin: 0 -16px 18px; padding: 11px 16px; }
  .creator-inspector-switch, .creator-tabbed-form > .editor-section-nav, .commission-guide-form .commission-edit-tabs { top: 54px; }
  .visual-editor .cms-form-actions { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .creator-preview-backdrop { inset: 64px 0 0; }
  .creator-preview-drawer { top: 64px; width: min(760px, 96vw); }
}

@media (max-width: 600px) {
  .visual-brand > span { display: none; }
  .visual-brand strong { font-size: 9px; }
  .saved-state { font-size: 0; min-width: 30px; justify-content: center; }
  .visual-top-actions .small-button { min-height: 36px; padding: 8px 10px; font-size: 10px; }
  .visual-close { width: 35px; height: 35px; }
  .canvas-toolbar { align-items: center; }
  .canvas-toolbar span { max-width: 155px; font-size: 10px; }
  .creator-back-list { padding: 7px 8px; font-size: 10px; }
  .editor-selection-context > i { display: none; }
  .creator-inspector-switch button { min-height: 44px; font-size: 11px; }
  .creator-inspector-switch button small { font-size: 8px; }
  .visual-editor .cms-form-grid { grid-template-columns: 1fr; padding: 14px; }
  .visual-editor .cms-field.full, .visual-editor .cms-check { grid-column: auto; }
  .visual-editor .cms-form-actions { justify-content: stretch; }
  .visual-editor .cms-form-actions button { flex: 1; min-width: 0; }
  .visual-editor.creator-list-only .creator-commission-sections > div { grid-template-columns: 1fr; }
  .commission-edit-tabs button { padding: 8px 10px; font-size: 11px; }
  .wallet-editor-canvas .wallet-editor-hero { padding: 15px; }
  .wallet-editor-canvas .wallet-editor-hero strong { font-size: 29px; }
  .wallet-editor-canvas .wallet-editor-grid { grid-template-columns: 1fr; }
  .wallet-editor-canvas .wallet-ledger-row { grid-template-columns: minmax(0,1fr) auto 11px; gap: 7px; padding: 11px 10px; }
  .wallet-entry-money { gap: 3px 8px; }
  .wallet-entry-money > strong { font-size: 13px; }
  .creator-live-preview > header { align-items: flex-start; flex-direction: column; gap: 4px; }
  .creator-live-preview > header small { text-align: left; }
  .creator-preview-wallet { grid-template-columns: 1fr; }
  .creator-preview-queue-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .creator-preview-profile-copy { grid-template-columns: 45px minmax(0,1fr); }
  .creator-preview-profile-copy > img, .creator-preview-avatar { width: 45px; height: 45px; }
  .creator-preview-post, .creator-preview-commission, .creator-preview-adopt { grid-template-columns: 70px minmax(0,1fr); gap: 9px; min-height: 75px; }
  .creator-preview-post > img, .creator-preview-commission > img, .creator-preview-adopt > img, .creator-preview-placeholder { width: 70px; height: 70px; }
  .creator-preview-page-summary { grid-template-columns: 1fr; }
  .creator-preview-drawer { width: 100vw; }
}

/* Wallet is a finance workspace: give the balance, breakdown, and ledger room to breathe. */
.visual-editor[data-creator-tab="wallet"] .visual-editor-body { grid-template-columns: 235px minmax(410px, .92fr) minmax(500px, 1.18fr); }
.visual-editor[data-creator-tab="wallet"] .editor-canvas-wrap { padding: 24px; background: #f5f0f4; }
.visual-editor[data-creator-tab="wallet"] .editor-canvas { max-width: 900px; }
.wallet-editor-canvas .canvas-page-title { min-height: 52px; margin-bottom: 15px; padding: 13px 15px; font-size: 11px; }
.wallet-editor-canvas .wallet-editor-hero { min-height: 142px; margin-bottom: 14px; padding: 25px 24px; border-radius: 17px; box-shadow: 0 12px 25px rgba(74, 48, 73, .13); }
.wallet-editor-canvas .wallet-editor-hero .wallet-hero-icon { width: 58px; height: 58px; border-radius: 17px; font-size: 28px; }
.wallet-editor-canvas .wallet-editor-hero strong { margin: 5px 0 3px; font-size: 43px; letter-spacing: -.02em; }
.wallet-editor-canvas .wallet-editor-hero > div > span { font-size: 10px; }
.wallet-hero-badge { align-self: flex-start; margin-left: auto; padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #f7eaf4; font-size: 9px; font-weight: 600; white-space: nowrap; }
.wallet-editor-canvas .wallet-editor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 17px; }
.wallet-editor-canvas .wallet-editor-grid div { display: block; min-height: 96px; padding: 15px; border-radius: 13px; }
.wallet-editor-canvas .wallet-editor-grid small { font-size: 9px; }
.wallet-editor-canvas .wallet-editor-grid strong { display: block; margin: 7px 0 3px; font-size: 22px; }
.wallet-editor-canvas .wallet-editor-grid span { display: block; color: #9a8796; font-size: 9px; line-height: 1.35; }
.wallet-editor-canvas .wallet-editor-grid .entries { background: #f3f0f7; border-color: #ded7e6; }
.wallet-editor-canvas .wallet-ledger { margin-top: 0; border-radius: 15px; box-shadow: 0 7px 18px rgba(74, 54, 74, .05); }
.wallet-ledger-title { min-height: 63px; padding: 15px 17px; }
.wallet-ledger-title strong { font-size: 13px; }
.wallet-ledger-title small { font-size: 10px; }
.wallet-ledger-title > span { padding: 6px 10px; font-size: 10px; }
.wallet-editor-canvas .wallet-ledger-row { min-height: 105px; padding: 16px 17px; gap: 15px; }
.wallet-entry-copy small { margin-bottom: 7px; font-size: 9px; }
.wallet-entry-copy strong { font-size: 15px; }
.wallet-entry-money { gap: 5px 16px; }
.wallet-entry-money i { font-size: 8px; }
.wallet-entry-money b { font-size: 11px; }
.wallet-entry-money > strong { font-size: 17px; }
.wallet-entry-arrow { font-size: 24px; }
.wallet-entry-form .cms-form-grid { gap: 16px; padding: 20px; }
.wallet-entry-form .admin-section-title { margin-bottom: 12px; }
.wallet-entry-form .cms-field input, .wallet-entry-form .cms-field textarea { min-height: 50px; }
.wallet-entry-form .wallet-form-note { margin: 16px 0; padding: 14px 16px; }

@media (max-width: 1180px) {
  .visual-editor[data-creator-tab="wallet"] .visual-editor-body { grid-template-columns: 84px minmax(370px, .9fr) minmax(440px, 1.1fr); }
}

@media (max-width: 900px) {
  .visual-editor[data-creator-tab="wallet"] .visual-editor-body { grid-template-columns: 1fr; }
  .visual-editor[data-creator-tab="wallet"] .editor-canvas-wrap { padding: 14px; }
}

@media (max-width: 600px) {
  .wallet-hero-badge { display: none; }
  .wallet-editor-canvas .wallet-editor-hero { min-height: 0; }
  .wallet-editor-canvas .wallet-editor-hero .wallet-hero-icon { width: 48px; height: 48px; font-size: 23px; }
  .wallet-editor-canvas .wallet-editor-hero strong { font-size: 31px; }
  .wallet-editor-canvas .wallet-editor-grid div { min-height: 74px; }
  .wallet-editor-canvas .wallet-editor-grid strong { font-size: 19px; }
}