.creator-workspace { position: fixed; inset: 0; z-index: 9000; background: #121519; color: #eee9df; display: grid; grid-template-rows: 80px minmax(0,1fr) auto; min-width: 0; min-height: 0; font: 14px/1.4 system-ui,sans-serif; }
.creator-workspace[hidden], :is(.creator-workspace,.creator-meta-modal) [hidden] { display: none !important; }
:is(.creator-workspace,.creator-meta-modal) * { box-sizing: border-box; }
:is(.creator-workspace,.creator-meta-modal) button, :is(.creator-workspace,.creator-meta-modal) select, :is(.creator-workspace,.creator-meta-modal) input, :is(.creator-workspace,.creator-meta-modal) textarea { font: inherit; }
:is(.creator-workspace,.creator-meta-modal) button { border: 1px solid #42484f; border-radius: 8px; background: #262b31; color: #eae6dd; padding: 8px 12px; min-height: 38px; cursor: pointer; }
:is(.creator-workspace,.creator-meta-modal) button:disabled { opacity: .38; cursor: default; }
:is(.creator-workspace,.creator-meta-modal) button:hover:not(:disabled) { border-color: #d6a445; }
:is(.creator-workspace,.creator-meta-modal) .creator-accent { background: #d5a443; color: #241b0d; border-color: #d5a443; font-weight: 750; }
:is(.creator-workspace,.creator-meta-modal) input, :is(.creator-workspace,.creator-meta-modal) textarea, :is(.creator-workspace,.creator-meta-modal) select { width: 100%; min-width: 0; border: 1px solid #414850; border-radius: 7px; color: #ece8df; background: #171b20; padding: 9px; }
:is(.creator-workspace,.creator-meta-modal) input[aria-invalid="true"] { border-color: #ee8070; }
:is(.creator-workspace,.creator-meta-modal) input:focus, :is(.creator-workspace,.creator-meta-modal) textarea:focus, :is(.creator-workspace,.creator-meta-modal) select:focus, :is(.creator-workspace,.creator-meta-modal) button:focus-visible { outline: 2px solid #d6a445; outline-offset: 2px; }
:is(.creator-workspace,.creator-meta-modal) label { display: grid; gap: 5px; min-width: 0; font-size: 12px; color: #bdc3ca; }
:is(.creator-workspace,.creator-meta-modal) h2, :is(.creator-workspace,.creator-meta-modal) h3, :is(.creator-workspace,.creator-meta-modal) p { margin: 0; }
.creator-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 24px; border-bottom: 1px solid #343a40; }
.creator-header small, .creator-pane-heading small { color: #d5a443; font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.creator-header h2 { font-size: 23px; line-height: 1.3; }
.creator-history { display: flex; gap: 5px; margin-left: auto; }
.creator-history button { font-size: 23px; line-height: 1; width: 42px; }
.creator-edit-panes { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); min-width: 0; min-height: 0; overflow: hidden; border-top: 0; }
.creator-source-pane { min-width: 0; min-height: 0; padding: 18px 24px; display: grid; grid-template-rows: auto auto minmax(90px,1fr) auto; gap: 12px; border-right: 1px solid #343a40; }
.creator-structure-pane { min-width: 0; min-height: 0; padding: 18px 24px; display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 12px; }
.creator-pane-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.creator-pane-heading h3 { font-size: 20px; margin-top: 2px; }
.creator-help { color: #aab2bc; font-size: 12px; line-height: 1.55; }
.creator-source-label { min-height: 0; display: flex !important; }
#creatorSource { resize: none; min-height: 0; height: 100%; line-height: 1.75; font-size: 15px; padding: 15px; }
.creator-assignment { min-width: 0; }
.creator-assignment > p { margin-bottom: 8px; color: #d6c18f; font-size: 12px; }
.creator-assignment > div:first-of-type { display: flex; gap: 8px; flex-wrap: wrap; }
.creator-assigned { display: flex; flex-wrap: wrap; gap: 5px; max-height: 80px; overflow: auto; margin-top: 8px; }
.creator-assigned small { width: 100%; color: #9da8b2; font-size: 10px; }
.creator-assigned button { min-height: 28px; max-width: 100%; padding: 3px 7px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-color: #315953; color: #9cc9bb; }
.creator-add { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.creator-cards { min-height: 0; overflow-y: auto; padding: 3px 5px 12px 3px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.creator-part { flex: 0 0 auto; min-width: 0; background: #1b2026; border: 1px solid #3c434b; border-radius: 12px; padding: 12px; }
.creator-part.selected { border-color: #d5a443; box-shadow: 0 0 0 1px #d5a443; }
.creator-part-header { display: grid; grid-template-columns: 48px minmax(0,1fr) 37px 37px 30px; gap: 6px; }
.creator-part-header button { padding: 5px; }
.creator-drag { cursor: grab !important; }
.creator-part-name { margin: 9px 0; }
.creator-part-name input { font-weight: 650; }
.creator-part-text textarea { resize: vertical; min-height: 105px; max-height: 450px; line-height: 1.6; }
.creator-part-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.creator-part-footer span { margin-right: auto; color: #9dafa8; font-size: 10px; }
.creator-part-footer button { min-height: 30px; padding: 4px 7px; font-size: 11px; }
.creator-blank-rows { grid-template-columns: minmax(0,1fr) 70px; align-items: center; margin-top: 8px; }
.creator-empty { margin: auto; max-width: 300px; text-align: center; color: #97a1ad; padding: 30px 12px; }
.creator-empty > span { color: #d5a443; font-size: 36px; }
.creator-empty h4 { color: #d9d5cc; font-size: 17px; margin: 10px 0; }
.creator-empty p { font-size: 13px; }
.creator-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: #171b20; border-top: 1px solid #394047; }
.creator-footer > div:first-child { min-width: 0; }
#creatorSaveStatus { color: #94c7b0; font-size: 12px; }
#creatorError { color: #f4b0a3; font-size: 12px; margin-top: 4px; overflow-wrap: anywhere; }
.creator-footer-actions { display: flex; gap: 8px; flex-shrink: 0; }
.creator-preview-pane { min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
.creator-preview-toolbar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border-top: 1px solid #343a40; }
.creator-preview-scroll { min-height: 0; overflow: auto; padding: 20px; text-align: center; background: #0c0f12; }
#creatorPreviewCanvas { background: white; display: block; margin: 0 auto; box-shadow: 0 5px 22px #0008; max-width: 100%; }
#creatorPreviewMessage { margin: 12px auto; color: #929eaa; font-size: 11px; }
.creator-visually-hidden { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.library-footer { grid-template-columns: repeat(4,minmax(0,1fr)); }
.library-footer .footer-button { min-width: 0; padding: 6px 2px; }
.library-footer .footer-button > span { display: block; margin: 0 0 3px; }
.library-footer .footer-button svg { width: 19px; height: 19px; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 1.7; }

.creator-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;height:80px;padding:12px 20px;overflow:hidden}
.creator-heading{min-width:0}.creator-header h2{white-space:nowrap;font-size:22px}
.creator-workspace .creator-identity{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;height:52px;padding:3px 10px;border-color:transparent;background:transparent;overflow:hidden}
.creator-identity strong,.creator-identity span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.creator-identity strong{font-size:20px;line-height:1.3}.creator-identity span{font-size:12px;color:#aeb8c2;line-height:1.5}
.creator-body{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:0;min-width:0;overflow:hidden}
.creator-sidebar{min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;padding:14px 9px;background:#15191e;border-right:1px solid #343a40;overscroll-behavior:contain}
.creator-design-card{border:1px solid #414850;border-radius:8px;background:#1b2026;margin-bottom:10px;padding:8px}
.creator-design-card>summary,.creator-section-style>summary{font-weight:650;color:#d5b76f;cursor:pointer;padding:3px 0}
.creator-design-card>summary{white-space:nowrap;font-size:12px}
.creator-preset-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:10px 0}
.creator-preset-actions button{width:100%;font-size:11px;padding:7px 4px;min-height:34px}
.creator-preset-actions label{min-width:0;font-size:11px}.creator-preset-actions input,.creator-preset-actions select{font-size:12px;padding:7px 5px}
.creator-sidebar .creator-help{font-size:11px;overflow-wrap:anywhere}.creator-style-group{margin-top:10px}.creator-style-group>summary{cursor:pointer;font-size:12px;color:#ccd2d9;padding:7px 0}
.creator-section-style{border-top:1px solid #394047;margin-top:10px;padding-top:7px}
.creator-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px 0}
.creator-sidebar .creator-style-grid,.creator-sidebar .watermark-fields{grid-template-columns:minmax(0,1fr)}
.creator-style-field.check{grid-template-columns:1fr auto;align-items:center}.creator-style-field.check input{width:18px;height:18px}
.creator-style-field input[type=color]{padding:3px;height:36px}.creator-style-field.overridden>span{color:#e4bd60}
.creator-style-field input,.creator-style-field select{padding:6px;min-height:32px}
.creator-style-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.creator-style-actions button{font-size:11px;padding:6px;min-height:32px}
.creator-sidebar .watermark-tools button{padding:5px 7px;font-size:11px}.creator-sidebar .watermark-samples{display:grid;grid-template-columns:minmax(0,1fr)}.creator-sidebar .watermark-fields label{font-size:11px}
.creator-left-pane{min-height:0;min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr);border-right:1px solid #343a40}
.creator-left-content{min-height:0;min-width:0;display:grid;grid-template-rows:minmax(0,1fr)}
.creator-source-pane{border-right:0;padding:16px 20px}.creator-structure-pane{padding:16px 20px}
.creator-view-switch{display:flex;gap:4px;margin:14px 20px 0;padding:3px;background:#0f1216;border:1px solid #394047;border-radius:9px}
.creator-view-switch button{flex:1;min-width:0;font-size:12px;min-height:32px;padding:5px 8px;border-color:transparent;background:transparent}
.creator-view-switch button[aria-pressed=true]{background:#d5a443;color:#241b0d;font-weight:700}
.creator-structure-scroll{min-height:0;overflow:auto;padding:3px 5px 12px 3px;overscroll-behavior:contain}
.creator-structure-scroll .creator-cards{overflow:visible;padding:3px 0 12px}
.creator-full-preview{grid-column:1/-1;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr)}
.creator-preview-toolbar{border-top:0;gap:5px;padding:10px;flex-wrap:wrap}.creator-preview-toolbar button{font-size:11px;padding:6px;min-height:32px}
.creator-preview-scroll{padding:12px}.creator-preview-scroll #creatorPreviewMessage{font-size:10px}
#creatorPreviewSurface{position:relative;margin:auto;max-width:100%;isolation:isolate}#creatorPreviewCanvas{box-shadow:none}
.creator-footer{padding:10px 20px}.creator-footer-status{display:flex;gap:12px;align-items:center;min-width:0}.creator-footer-status>div:last-child{min-width:0}
.creator-history{margin-left:0;flex-shrink:0}.creator-history button{width:34px;min-height:34px;padding:3px}
.creator-meta-modal{position:fixed;inset:0;z-index:9100;display:flex;align-items:center;justify-content:center;padding:20px;background:#000a;color:#eee9df;font:14px/1.4 system-ui,sans-serif;overflow:auto}
.creator-meta-modal[hidden]{display:none!important}.creator-meta-card{box-sizing:border-box;width:min(440px,100%);background:#1b2026;border:1px solid #4b535c;border-radius:14px;padding:24px;box-shadow:0 16px 60px #0009;display:grid;gap:16px}
.creator-meta-card small{font-size:10px;font-weight:750;letter-spacing:.14em;color:#d5a443}.creator-meta-card h2{font-size:24px;margin:-8px 0 0}.creator-meta-card label{display:block}.creator-meta-card label span{font-size:11px;color:#9da8b2}.creator-meta-card label input{display:block;margin-top:7px}.creator-meta-card .creator-required{color:#d5b76f}
.creator-meta-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.creator-meta-error{font-size:12px;color:#f4b0a3}.creator-meta-modal .creator-resume{border-top:1px solid #414850;background:transparent;font-size:11px;color:#b7c7c3;white-space:normal;overflow-wrap:anywhere}
@media(max-width:1100px){.creator-header h2{font-size:19px}.creator-header{gap:12px;padding-inline:14px}.creator-identity strong{font-size:18px}.creator-source-pane,.creator-structure-pane{padding:14px}.creator-view-switch{margin:14px 14px 0}.creator-pane-heading{flex-wrap:wrap}.creator-pane-heading h3{font-size:18px}.creator-pane-heading button{font-size:11px;padding:6px 8px}.creator-add{grid-template-columns:minmax(0,1fr)}.creator-add button{font-size:12px}.creator-footer-actions button{padding:7px 9px;font-size:12px}}
@media(max-width:800px){.creator-header h2{font-size:17px}.creator-heading small{font-size:8px}.creator-header #creatorClose{font-size:11px;padding:7px}.creator-workspace{font-size:12px}.creator-style-grid{gap:7px}.creator-part-footer span{flex-basis:100%}.creator-footer{padding:8px 12px;gap:8px}}
@media(max-width:700px){.creator-workspace{display:flex;flex-direction:column;overflow-y:auto}.creator-header{flex:none;position:sticky;top:0;z-index:3;background:#121519;height:80px;grid-template-columns:110px minmax(0,1fr) 83px;gap:7px;padding-inline:10px}.creator-header h2{white-space:normal;font-size:15px}.creator-header small{font-size:8px;letter-spacing:.05em}.creator-workspace .creator-identity{padding:3px}.creator-identity strong{font-size:15px}.creator-identity span{font-size:10px}.creator-header #creatorClose{font-size:10px;min-height:38px;padding:5px}
.creator-body{display:block;overflow:visible;flex:1}.creator-sidebar{overflow:visible;border-right:0;border-bottom:1px solid #343a40;padding:10px 12px}.creator-design-card{margin-bottom:7px}.creator-design-card:last-child{margin-bottom:0}.creator-sidebar .creator-style-grid,.creator-sidebar .watermark-fields{grid-template-columns:minmax(0,1fr)}
.creator-edit-panes{display:block;overflow:visible}.creator-left-pane{border-right:0;border-bottom:1px solid #343a40}.creator-left-content{display:block}.creator-source-pane{min-height:400px;grid-template-rows:auto auto minmax(180px,1fr) auto}#creatorSource{min-height:180px}.creator-structure-pane{display:block}.creator-add{grid-template-columns:minmax(0,1fr) auto;margin:12px 0}.creator-structure-scroll{overflow:visible}.creator-cards{overflow:visible}.creator-empty{min-height:160px}.creator-left-content .creator-preview-pane{height:55vh;min-height:330px}.creator-preview-scroll{overflow:auto}
.creator-full-open .creator-body{display:grid;min-height:0;overflow:hidden}.creator-full-open{display:grid;grid-template-rows:80px minmax(0,1fr) auto;overflow:hidden}.creator-full-preview{min-height:0}.creator-footer{position:sticky;bottom:0;z-index:2;display:block}.creator-footer-actions{margin-top:7px;flex-wrap:wrap}.creator-footer-status{gap:10px}.creator-meta-card{padding:20px}.creator-meta-modal{padding:14px}}
@media(max-height:650px) and (min-width:701px){.creator-workspace{grid-template-rows:64px minmax(0,1fr) auto}.creator-header{height:64px;padding-block:6px}.creator-header small{display:none}.creator-sidebar{padding-top:9px}.creator-source-pane,.creator-structure-pane{padding-top:10px;padding-bottom:10px;gap:7px}.creator-view-switch{margin-top:10px}.creator-help{font-size:11px}.creator-footer{padding-block:7px}}

@media(max-width:700px){.creator-heading small{display:block;white-space:nowrap;font-size:7px;letter-spacing:0}.creator-header h2{font-size:14px;line-height:1.25}}

/* Folding is editor state only; text and appearance stay attached to the section. */
.creator-part-body[hidden] { display: none; }
.creator-part-toggle { display: grid; place-items: center; }
.creator-part-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.creator-part-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.creator-instrumental-text { margin: 9px 0; }
.creator-instrumental-text > summary { cursor: pointer; color: #b9b7b1; font-size: 12px; padding: 5px 0; }
.creator-instrumental-text[open] > summary { margin-bottom: 6px; }

/* Stored artist suggestions share the creation dialog's keyboard and touch flow. */
.creator-artist-field{min-width:0}
.creator-artist-field #creatorArtistHint{font-size:11px;margin-top:7px}
.creator-artist-suggestions{margin-top:6px;padding:4px;max-height:180px;overflow-y:auto;overscroll-behavior:contain;border:1px solid #4b535c;border-radius:8px;background:#171b20;scroll-padding:4px;touch-action:pan-y}
.creator-meta-modal .creator-artist-suggestions button{display:block;width:100%;min-height:44px;padding:9px 10px;border:0;border-radius:5px;text-align:left;background:transparent;white-space:normal;overflow-wrap:anywhere}
.creator-meta-modal .creator-artist-suggestions button[aria-selected="true"],.creator-meta-modal .creator-artist-suggestions button:hover{background:#45371f;color:#f2ca78}
.creator-meta-card{max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;margin:auto}

/* Page breaks stay with occurrences, including collapsed cards. */
.creator-workspace .creator-page-break-control{display:flex;align-items:center;gap:9px;min-height:40px;margin-bottom:8px;color:#d9c18c;cursor:pointer}
.creator-workspace .creator-page-break-control input{flex:0 0 18px;width:18px;min-width:18px;height:18px;margin:0;padding:0;accent-color:#d5a443}
.creator-page-break-marker{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:#d5b76f;font-size:11px;font-weight:650}
.creator-page-break-marker::before,.creator-page-break-marker::after{content:"";flex:1;border-top:1px dashed #74613a}

/* Keep the artist lookup in the app style, including Safari search inputs. */
.creator-meta-card #creatorArtist{appearance:none;-webkit-appearance:none}
