/* Creation workspace: compact guidance and a visual play picker. */
body.mode-user .portal-play-trigger { display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:12px 14px; border:1px solid var(--zhuqing-line,#b5cec0); border-radius:8px; background:var(--zhuqing-surface,#f5fcf6); color:var(--zhuqing-ink,#0d120e); text-align:left; font:inherit; cursor:pointer; }
.portal-play-trigger span { flex:1; min-width:0; }
.portal-play-trigger small { font-size:12px; color:var(--zhuqing-ink-secondary,#49524a); font-weight:400; }
.portal-play-trigger:disabled { opacity:.55; cursor:not-allowed; }
.portal-play-trigger:focus-visible,.portal-play-option:focus-visible { outline:2px solid #007b42; outline-offset:3px; }
.portal-play-dialog { width:min(760px,calc(100vw - 32px)); max-height: min(720px,calc(100dvh - 48px)); padding:24px; border:1px solid #b5cec0; border-radius:12px; color:#0d120e; background:#f5fcf6; }
.portal-play-dialog::backdrop { background:rgb(13 18 14 / 35%); }
.portal-play-dialog[open] { display:flex; flex-direction:column; gap:18px; }
.portal-play-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.portal-play-dialog h2 { margin:0; font-size:20px; }
.portal-play-dialog header button { width:36px; height:36px; border:0; background:transparent; font-size:24px; cursor:pointer; }
.portal-play-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; overflow:auto; min-height:0; padding:3px; }
.portal-play-option { display:flex; align-items:center; gap:12px; min-width:0; min-height:94px; padding:12px; border:1px solid #d4e5d9; border-radius:8px; background:#fff; text-align:left; color:#0d120e; font:inherit; cursor:pointer; }
.portal-play-option img { width:64px; height:76px; object-fit:contain; flex:none; background:#eef6f0; border-radius:4px; }
.portal-play-option span { flex:1; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.portal-play-option small { font-size:12px; color:#49524a; flex:none; }
.portal-play-option:hover { background:#eef6f0; border-color:#007b42; }
.portal-play-option[aria-pressed=true] { background:#eef6f0; border-color:#007b42; }
body.mode-user #portalProductSelect[hidden],body.mode-user .creator-live-preview[hidden],body.mode-user #portal-panel-preview>.creator-preview-head[hidden] {display:none!important;}
html.lingling-user-theme body.mode-user .creator-layout {grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);}
html.lingling-user-theme body.mode-user .creator-compose {padding:32px 40px;}
html.lingling-user-theme body.mode-user .creator-preview {padding:32px;}
body.mode-user .portal-input-guidance {margin-top:-8px;}
body.mode-user .portal-input-guidance-rule {padding:0; border:0; background:transparent;}
body.mode-user .portal-input-guidance-section-label {display:none;}
body.mode-user .portal-input-guidance-rule p {margin:0; font-size:13px; line-height:1.6; color:var(--zhuqing-ink-secondary,#49524a);}
body.mode-user .portal-input-guidance-rule p strong {font-weight:400; color:inherit;}
body.mode-user #saveDraftBtn {border-color:transparent; background:transparent; box-shadow:none; color:var(--zhuqing-ink-secondary,#49524a); font-size:13px; padding:10px 12px;}
body.mode-user #saveDraftBtn:hover {background:var(--zhuqing-primary-soft,#eef6f0); color:#007b42;}
body.mode-user .creator-live-page.is-text {min-height:0; aspect-ratio:auto;}
body.mode-user .creator-live-page-content {min-height:0; padding:18px;}
@media(max-width:1180px) {
 html.lingling-user-theme body.mode-user .creator-layout {grid-template-columns:minmax(0,1fr);}
 html.lingling-user-theme body.mode-user .creator-compose,html.lingling-user-theme body.mode-user .creator-preview {padding:24px;}
}
@media(max-width:600px) {
 .portal-play-dialog {padding:16px; max-height:calc(100dvh - 24px);}
 .portal-play-list {grid-template-columns:minmax(0,1fr);}
 html.lingling-user-theme body.mode-user .creator-compose,html.lingling-user-theme body.mode-user .creator-preview {padding:20px 16px;}
}

#creatorMockup[data-empty-reference=true]::after {content:"此玩法暂无效果示例，填写后可查看输入预览。";display:block;padding:24px 0;color:#49524a;font-size:14px;}
@media(max-width:1180px) { body.mode-user #creatorMockup > .creator-live-preview {display:none;} }

html.lingling-user-theme body.mode-user .creator-form {max-width:none;width:100%;}

body.mode-user .portal-input-wrap {position:relative; min-width:0;}
html.lingling-user-theme body.mode-user .portal-input-wrap #portalInput {display:block; width:100%; padding-bottom:36px;}
body.mode-user .portal-input-wrap #portalInputIssue {position:absolute; right:12px; bottom:9px; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; pointer-events:none; max-width:calc(100% - 24px);}
body.mode-user .portal-input-wrap #portalInputIssue strong {font-size:12px; line-height:18px; font-weight:500; color:#b42318;}
body.mode-user .portal-input-wrap #portalInputIssue.is-success strong {color:#007b42;}
body.mode-user .portal-input-wrap #portalInputIssue:is(.is-checking,.is-unavailable) strong {color:#677069;}
body.mode-user .portal-input-detail {font-size:12px; font-weight:400; line-height:1.6; color:#b42318;}
body.mode-user .portal-input-detail[hidden] {display:none;}
body.mode-user .portal-play-trigger b {font-size:18px; font-weight:400; color:#49524a;}
body.mode-user .portal-play-trigger:hover:not(:disabled) {border-color:#007b42; background:#eef6f0;}

body.mode-user #portalInputGuidance:has(#portalInputIssueFix:not([hidden])) .portal-input-guidance-rule {display:none;}

/* Shared support pane: quiet canvas, readable content surfaces. */
html.lingling-user-theme body.mode-user .creator-preview:not(:has(#portal-panel-drafts.is-active)) {background:transparent;}
html.lingling-user-theme body.mode-user .creator-inline-preview {display:block;}
html.lingling-user-theme body.mode-user .creator-inline-preview:not(:has(.creator-live-preview:not([hidden]))) {display:none;}
html.lingling-user-theme body.mode-user #creatorMockup > .creator-live-preview {display:none;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .creator-effect-reference {margin:0;padding:20px;background:#fff;border:1px solid #d4e5d9;border-radius:8px;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .creator-effect-reference-head strong {display:none;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .creator-preview-head {margin-bottom:16px;gap:12px;flex-wrap:wrap;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .creator-preview-head strong {font-size:16px;line-height:24px;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-history-empty {min-height:0;padding:24px 20px;background:#fff;border:1px solid #d4e5d9;border-radius:8px;font-size:14px;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-task-table-head {display:none;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-task-row {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;min-width:0;padding:16px;margin-bottom:12px;background:#fff;border:1px solid #d4e5d9;border-radius:8px;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-task-row-main {display:grid;grid-column:auto;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;min-width:0;padding:0;background:transparent;border:0;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-task-row-main > span {display:grid;min-width:0;min-height:0;padding:0;border:0;font-size:12px;text-align:left;white-space:normal;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-task-row-main > .task-title-cell {grid-column:1/-1;display:flex;align-items:center;gap:12px;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .task-title-cell strong {font-size:14px;line-height:1.6;overflow-wrap:anywhere;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-task-row-main > span:last-child {grid-column:1/-1;color:#677069;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-history-thumb {width:48px;height:60px;object-fit:cover;border-radius:4px;flex:none;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-task-row-actions {display:flex;align-items:center;gap:4px;padding:0;border:0;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-task-row-actions button {background:transparent;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-history-frame,
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-history-table {min-width:0;border:0;background:transparent;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .result-state {background:#fff;border:1px solid #d4e5d9;border-radius:8px;padding:24px;}
html.lingling-user-theme body.mode-user #portalHistoryReturn {padding:6px 8px;border:0;background:transparent;color:#007b42;font-size:12px;cursor:pointer;}
html.lingling-user-theme body.mode-user #portalHistoryReturn[hidden] {display:none;}
html.lingling-user-theme body.mode-user #portal-tab-current[data-progress]:not([data-progress=""])::after {content:attr(data-progress);margin-left:5px;font-size:11px;}
html.lingling-user-theme body.mode-user #creatorMockup[data-empty-reference=true]::after {content:"此玩法暂无效果示例";padding:24px 20px;background:#fff;border:1px solid #d4e5d9;border-radius:8px;}
@media(max-width:600px) {
 html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-task-row {padding:12px;gap:8px;}
 html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-task-row-actions {flex-direction:column;}
}

html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .task-title-cell strong {white-space:normal;}

html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-result {background:transparent;border:0;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .portal-result-body {background:#fff;border-radius:8px;}

/* Let input and actions lead; supporting previews stay below the actions. */
html.lingling-user-theme body.mode-user .creator-layout {padding-top:16px;}
html.lingling-user-theme body.mode-user .creator-compose {padding-top:16px;gap:20px;}
html.lingling-user-theme body.mode-user .creator-preview {padding-top:8px;}
html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel {padding-top:12px;}
html.lingling-user-theme body.mode-user .creator-mockup {margin-top:0;}
html.lingling-user-theme body.mode-user .creator-preview .creator-effect-reference-head {min-height:0;padding-bottom:8px;margin-bottom:8px;border:0;}
html.lingling-user-theme body.mode-user .creator-preview .creator-sample-image {max-height:none;}
html.lingling-user-theme body.mode-user .creator-preview .creator-sample-image img {width:100%;height:auto;max-height:calc(100svh - 230px);object-fit:contain;}
@media(max-height:800px) and (min-width:1181px) {
 html.lingling-user-theme body.mode-user .creator-form {gap:14px;}
 html.lingling-user-theme body.mode-user .creator-compose {padding-bottom:16px;}
 html.lingling-user-theme body.mode-user .creator-preview .portal-tab-panel:not(#portal-panel-drafts) .creator-effect-reference {padding:12px;}
}
@media(max-width:600px) {
 html.lingling-user-theme body.mode-user .creator-preview .creator-sample-image img {max-height:65svh;}
}

/* Quantity belongs to the input label; split preview only explains actual grouping. */
body.mode-user .portal-input-heading {display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
body.mode-user .portal-input-count {font-size:12px;font-weight:400;color:var(--zhuqing-ink-secondary,#49524a);white-space:nowrap;}
body.mode-user .portal-input-count[hidden] {display:none;}
html.lingling-user-theme body.mode-user .creator-compact-preview {padding:0;border:0;background:transparent;}
body.mode-user .creator-compact-preview > strong {display:block;margin-bottom:8px;font-size:13px;}
body.mode-user .creator-compact-preview summary {padding:10px 0;cursor:pointer;font-size:12px;color:var(--zhuqing-ink-secondary,#49524a);}

body.mode-user .creator-input-preview-grid {display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:clamp(100px,calc((100% - 40px)/5),144px);gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;}
body.mode-user .creator-input-preview-card {margin:0;min-width:0;}
body.mode-user .creator-input-preview-sheet {display:grid;grid-auto-rows:minmax(0,1fr);aspect-ratio:3/4;overflow:hidden;border:1px solid var(--zhuqing-line,#b5cec0);border-radius:6px;background:#fff;box-shadow:0 2px 5px rgb(13 18 14 / 4%);}
body.mode-user .creator-input-preview-sheet p {display:flex;align-items:center;justify-content:center;margin:0;padding:12px;font-size:12px;line-height:1.6;text-align:center;overflow-wrap:anywhere;white-space:pre-wrap;overflow:auto;}
body.mode-user .creator-input-preview-sheet p + p {border-top:1px solid var(--zhuqing-line,#b5cec0);}
body.mode-user .creator-input-preview-sheet.is-meme-grid {grid-template-columns:repeat(4,minmax(0,1fr));aspect-ratio:1;}
body.mode-user .creator-input-preview-sheet.is-meme-grid p {padding:3px;font-size:10px;border:1px solid #eef6f0;}
body.mode-user .creator-input-preview-card figcaption {margin-top:6px;font-size:12px;text-align:center;color:var(--zhuqing-ink-secondary,#49524a);}
body.mode-user .creator-input-preview-card.is-incomplete .creator-input-preview-sheet {border-color:#b42318;}

/* Short laptop windows: keep the form, actions and one row of previews together. */
@media(max-height:800px) and (min-width:1181px) {
 html.lingling-user-theme body.mode-user .creator-layout {padding-top:8px;}
 html.lingling-user-theme body.mode-user .creator-compose {padding-top:8px;gap:12px;}
 html.lingling-user-theme body.mode-user .creator-form {gap:8px;}
 html.lingling-user-theme body.mode-user .creator-form > label {gap:6px;}
 html.lingling-user-theme body.mode-user .creator-compact-preview {gap:0;}
 body.mode-user .creator-compact-preview > strong {margin-bottom:6px;}
 body.mode-user .creator-input-preview-sheet p {padding:6px;}
 body.mode-user .creator-compact-preview summary {padding:4px 0;}
 html.lingling-user-theme body.mode-user .portal-input-guidance {margin-top:0;}
 html.lingling-user-theme body.mode-user .generation-pause-notice {margin:0;padding:6px 8px;}
}

@media(max-height:800px) and (min-width:1181px) {
 html.lingling-user-theme body.mode-user .creator-compose {gap:8px;padding-bottom:8px;}
 html.lingling-user-theme body.mode-user .creator-form {gap:6px;}
 html.lingling-user-theme body.mode-user .portal-play-trigger {min-height:44px;padding:8px 14px;}
 body.mode-user .creator-compact-preview > strong {display:none;}
}

/* History is a scan-friendly list; drafts keep their existing layout. */
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-task-row {padding:12px 14px;margin-bottom:8px;gap:8px;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-task-row-main {grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-task-row-main > .task-title-cell {grid-column:1;grid-row:1;gap:8px;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .task-title-cell strong {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:22px;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-history-thumb {width:24px;height:30px;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-task-row-main > .portal-history-status {grid-column:2;grid-row:1;align-self:center;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-history-status .badge {padding:0;border:0;background:transparent;font-size:12px;line-height:22px;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-task-row-main > .portal-history-meta {grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:2px 12px;color:#677069;line-height:18px;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-history-meta > span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-history-meta time {white-space:nowrap;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-task-row-main > .portal-history-progress {grid-column:1/-1;display:flex;align-items:center;gap:8px;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-history-progress .task-progress {width:84px;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-task-row-actions {align-self:start;flex-direction:row;gap:4px;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-task-row-actions button {width:32px;height:32px;min-width:32px;min-height:32px;}
html.lingling-user-theme body.mode-user #portal-panel-history .creator-preview-head {margin-bottom:10px;gap:2px 12px;}
html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-history-retention-note {font-size:12px;line-height:18px;}
@media(max-width:600px) {
 html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-task-row {padding:10px;}
 html.lingling-user-theme body.mode-user #portal-panel-history #portalHistory .portal-task-row-actions {flex-direction:column;}
}

/* Keep comic editing proportions comfortable and show a full row of page previews. */
html.lingling-user-theme body.mode-user .creator-form:has(#portalInput[data-input-mode="line_pairs"]) {max-width:680px;}
body.mode-user .creator-input-preview-card {scroll-snap-align:start;}
body.mode-user .creator-input-preview-grid:focus-visible {outline:2px solid var(--zhuqing-primary,#007b42);outline-offset:2px;}
@media(max-width:600px) {
 body.mode-user .creator-input-preview-grid {grid-template-columns:none;grid-auto-columns:calc((100% - 24px)/2.4);}
}
