.poster-commandbar {
  min-height: 104px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid #2d3941;
  border-radius: 18px 18px 8px 8px;
  background:
    linear-gradient(120deg, rgba(255, 90, 47, .13), transparent 36%),
    radial-gradient(circle at 88% 0, rgba(84, 229, 255, .11), transparent 30%),
    #111b22;
  color: white;
  box-shadow: 0 20px 48px rgba(24, 32, 39, .12);
}
.poster-commandbar::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.poster-commandbar::after { content: "POSTER / 02"; position: absolute; right: 26px; bottom: -22px; color: rgba(255,255,255,.035); font-size: 68px; font-weight: 900; letter-spacing: -.06em; pointer-events: none; }
.poster-command-copy, .poster-command-actions { position: relative; z-index: 1; }
.poster-command-copy { display: flex; align-items: center; gap: 16px; }
.poster-command-copy p, .poster-editor-header p, .poster-preview-header p { margin: 0 0 6px; color: #8d9aa2; font-size: 9px; font-weight: 850; letter-spacing: .17em; }
.poster-command-copy h2 { max-width: 580px; color: white; font-size: clamp(17px, 2vw, 23px); line-height: 1.3; }
.poster-live-dot { width: 12px; height: 12px; flex: 0 0 auto; border: 2px solid #111b22; border-radius: 50%; background: #54e5ff; box-shadow: 0 0 0 5px rgba(84,229,255,.12), 0 0 22px rgba(84,229,255,.58); }
.poster-command-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.poster-tool-button, .poster-save-button { min-height: 39px; padding: 9px 12px; display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; color: #c6d0d5; cursor: pointer; font-size: 10px; font-weight: 750; }
.poster-tool-button { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.055); backdrop-filter: blur(10px); }
.poster-tool-button:hover { border-color: rgba(255,255,255,.27); color: white; background: rgba(255,255,255,.09); }
.poster-save-button { padding-inline: 16px; border: 1px solid var(--orange); background: var(--orange); color: white; box-shadow: 0 8px 22px rgba(255,90,47,.2); }
.poster-save-button span { font-size: 7px; }

.poster-status-strip { margin: 9px 0 13px; min-height: 68px; padding: 9px 12px; display: grid; grid-template-columns: minmax(300px, 1fr) auto auto; align-items: center; gap: 18px; border: 1px solid var(--line); border-radius: 8px 8px 15px 15px; background: rgba(255,255,255,.82); box-shadow: 0 9px 28px rgba(24,32,39,.04); backdrop-filter: blur(14px); }
.poster-kind-switch { display: flex; gap: 5px; }
.poster-kind-switch button { min-width: 148px; min-height: 48px; padding: 6px 12px 6px 7px; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: 1fr 1fr; column-gap: 10px; align-items: center; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; }
.poster-kind-switch button > span { width: 36px; height: 36px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 9px; background: #ece9e5; font-size: 11px; font-weight: 900; }
.poster-kind-switch button b { align-self: end; font-size: 11px; }
.poster-kind-switch button small { align-self: start; color: var(--faint); font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.poster-kind-switch button.active { border-color: #d9d5cf; background: white; color: var(--ink); box-shadow: 0 4px 12px rgba(24,32,39,.06); }
.poster-kind-switch button.active > span { background: var(--ink); color: #54e5ff; }
.poster-kind-switch button[data-poster-kind="fun"].active > span { color: #ff58c7; }
.poster-save-state { padding-left: 18px; display: flex; align-items: center; gap: 11px; border-left: 1px solid var(--line); }
.poster-save-state > span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.poster-save-state > span.dirty { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.poster-save-state strong, .poster-save-state small { display: block; white-space: nowrap; }
.poster-save-state strong { font-size: 10px; }
.poster-save-state small { margin-top: 3px; color: var(--faint); font-size: 8px; }
.poster-output-facts { display: flex; gap: 8px; }
.poster-output-facts > span { min-width: 94px; padding: 9px 11px; border: 1px solid #ece9e5; border-radius: 9px; background: #faf9f7; }
.poster-output-facts small, .poster-output-facts b { display: block; }
.poster-output-facts small { color: var(--faint); font-size: 7px; letter-spacing: .1em; }
.poster-output-facts b { margin-top: 4px; font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; }

.poster-studio-layout { --poster-accent: #54e5ff; display: grid; grid-template-columns: minmax(410px, .74fr) minmax(520px, 1.26fr); gap: 13px; align-items: start; }
.poster-studio-layout[data-poster-theme="fun"] { --poster-accent: #ff58c7; }
.poster-editor-panel, .poster-preview-panel { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 16px 44px rgba(24,32,39,.055); }
.poster-editor-panel { overflow: hidden; }
.poster-editor-header, .poster-preview-header { min-height: 72px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.poster-editor-header h3, .poster-preview-header h3 { font-size: 15px; }
.poster-editor-tabs { padding: 3px; display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 9px; background: #f1efeb; }
.poster-editor-tabs button { min-height: 29px; padding: 6px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 8px; font-weight: 750; }
.poster-editor-tabs button.active { background: white; color: var(--ink); box-shadow: 0 2px 6px rgba(24,32,39,.08); }
.poster-editor { max-height: calc(100vh - 290px); min-height: 680px; padding: 13px; overflow: auto; background: #f7f6f3; scrollbar-color: #c8c3bc transparent; scrollbar-width: thin; }
.poster-editor-note { margin-bottom: 10px; padding: 12px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid #ccebf0; border-radius: 10px; background: #effbfc; }
.poster-editor-note.brand { border-color: #ffd8ca; background: #fff5f1; }
.poster-editor-note span { padding: 3px 5px; border-radius: 4px; background: #15232b; color: #54e5ff; font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.poster-editor-note.brand span { color: var(--orange); }
.poster-editor-note p { margin: 0; color: #546169; font-size: 8px; line-height: 1.6; }

.poster-config-section { margin-bottom: 9px; overflow: hidden; border: 1px solid #e2dfda; border-radius: 11px; background: white; }
.poster-config-section > summary { min-height: 51px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.poster-config-section > summary::-webkit-details-marker { display: none; }
.poster-config-section > summary > span { display: flex; align-items: center; gap: 10px; }
.poster-config-section > summary b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: var(--ink); color: var(--poster-accent); font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; }
.poster-config-section > summary strong { font-size: 10px; }
.poster-config-section > summary small { color: var(--faint); font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; letter-spacing: .08em; }
.poster-config-section[open] > summary { border-bottom: 1px solid #ece9e5; }
.poster-config-section[open] > summary::after { content: "−"; color: var(--faint); }
.poster-config-section:not([open]) > summary::after { content: "+"; color: var(--faint); }
.poster-config-section > summary > small { margin-left: auto; }
.poster-config-body { padding: 12px; }
.poster-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.poster-field-grid .wide, .poster-subhead.wide { grid-column: 1 / -1; }
.poster-field { min-width: 0; display: grid; gap: 5px; }
.poster-field > span { color: #717a81; font-size: 8px; font-weight: 700; }
.poster-field input, .poster-field textarea, .poster-field select { width: 100%; min-height: 35px; padding: 8px 9px; border: 1px solid #dedad4; border-radius: 7px; outline: none; background: #fff; color: var(--ink); font-size: 9px; line-height: 1.5; transition: border .12s, box-shadow .12s; }
.poster-field textarea { min-height: 67px; resize: vertical; }
.poster-field input:focus, .poster-field textarea:focus, .poster-field select:focus { border-color: var(--poster-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--poster-accent) 14%, transparent); }
.poster-subhead { margin-top: 3px; padding: 8px 0 2px; display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed #ddd9d2; }
.poster-subhead span { font-size: 9px; font-weight: 800; }
.poster-subhead small { color: var(--faint); font-size: 7px; letter-spacing: .1em; }
.poster-color-input { min-height: 36px; padding: 5px 8px 5px 5px; display: grid; grid-template-columns: 33px 1fr; align-items: center; gap: 9px; border: 1px solid #dedad4; border-radius: 7px; background: white; }
.poster-color-input input { width: 33px; height: 24px; min-height: 0; padding: 0; overflow: hidden; border: 0; border-radius: 5px; cursor: pointer; }
.poster-color-input b { color: #5f6870; font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; }
.poster-asset-lock { min-height: 56px; padding: 9px; display: flex; align-items: center; gap: 10px; border: 1px solid #d9e8df; border-radius: 8px; background: #f4faf6; }
.poster-asset-lock i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-style: normal; }
.poster-asset-lock strong, .poster-asset-lock small { display: block; }
.poster-asset-lock strong { font-size: 9px; }
.poster-asset-lock small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.poster-asset-lock > b { margin-left: auto; color: var(--green); font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; letter-spacing: .1em; }

.poster-groups { display: grid; gap: 10px; }
.poster-group-editor { overflow: hidden; border: 1px solid #ddd9d3; border-radius: 10px; background: #faf9f7; }
.poster-group-editor > header { min-height: 54px; padding: 9px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; border-bottom: 1px solid #e5e2dd; background: white; }
.poster-group-editor > header > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--ink); color: var(--poster-accent); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; font-weight: 900; }
.poster-group-editor > header strong, .poster-group-editor > header small { display: block; }
.poster-group-editor > header strong { font-size: 10px; }
.poster-group-editor > header small { margin-top: 3px; color: var(--faint); font-size: 7px; }
.poster-mini-actions { display: flex; gap: 3px; }
.poster-mini-actions button { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border: 1px solid #dfdbd5; border-radius: 6px; background: white; color: #727b82; cursor: pointer; font-size: 9px; }
.poster-mini-actions button.danger { color: var(--red); }
.poster-mini-actions button:disabled { opacity: .32; cursor: default; }
.poster-group-fields { padding: 10px; }
.poster-item-list { padding: 0 10px 10px; display: grid; gap: 7px; }
.poster-item-editor { padding: 9px; border: 1px solid #e2ded8; border-radius: 8px; background: white; }
.poster-item-editor > header { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.poster-item-editor > header > span { color: var(--orange); font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.poster-inline-add, .poster-add-button { min-height: 36px; border: 1px dashed #cfcac3; border-radius: 8px; background: #fbfaf8; color: #687179; cursor: pointer; font-size: 8px; font-weight: 750; }
.poster-inline-add { width: calc(100% - 20px); margin: 0 10px 10px; }
.poster-add-button { width: 100%; }
.poster-inline-add:hover, .poster-add-button:hover { border-color: var(--orange); color: var(--orange); background: #fff6f2; }
.poster-array-list, .poster-note-list { margin-top: 10px; display: grid; gap: 8px; }
.poster-array-row { padding: 9px; display: grid; grid-template-columns: 28px 1fr; align-items: start; gap: 9px; border: 1px solid #e2ded8; border-radius: 8px; }
.poster-array-row > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: var(--ink); color: var(--poster-accent); font-size: 8px; font-weight: 900; }
.poster-array-row > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.poster-note-list article { display: grid; grid-template-columns: 25px 1fr 24px; align-items: start; gap: 7px; }
.poster-note-list article > b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; background: #edeae5; color: var(--muted); font-size: 7px; }
.poster-note-list article > button { width: 24px; height: 24px; border: 1px solid #ead7d3; border-radius: 6px; background: #fff5f3; color: var(--red); cursor: pointer; }

.poster-preview-panel { position: sticky; top: 16px; overflow: hidden; background: #10181e; border-color: #26343d; color: white; box-shadow: 0 24px 70px rgba(12,19,24,.19); }
.poster-preview-header { border-bottom-color: rgba(255,255,255,.09); background: #131e25; }
.poster-preview-header p { color: var(--poster-accent); }
.poster-preview-header h3 { color: white; }
.poster-preview-actions { display: flex; gap: 6px; }
.poster-preview-actions button { min-height: 34px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: rgba(255,255,255,.055); color: #cad3d8; cursor: pointer; font-size: 8px; font-weight: 800; }
.poster-preview-actions button.primary { border-color: var(--poster-accent); background: var(--poster-accent); color: #07141b; }
.poster-preview-stage { height: calc(100vh - 357px); min-height: 620px; padding: 28px; position: relative; overflow: auto; background: radial-gradient(circle at 50% 0, rgba(84,229,255,.09), transparent 36%), #091116; scrollbar-color: #39464e transparent; scrollbar-width: thin; }
.poster-studio-layout[data-poster-theme="fun"] .poster-preview-stage { background: radial-gradient(circle at 50% 0, rgba(255,88,199,.09), transparent 36%), #110b16; }
.poster-stage-grid { position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 24px 24px; }
.poster-preview-canvas { width: min(100%, 590px); margin: 0 auto; position: relative; z-index: 1; overflow: hidden; border-radius: 3px; background: #07141b; box-shadow: 0 20px 60px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.12); }
.poster-preview-canvas svg { width: 100%; height: auto; display: block; }
.poster-preview-loading { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; background: rgba(9,17,22,.86); color: #9ba7ae; text-align: center; }
.poster-preview-loading > span { width: 25px; height: 25px; border: 2px solid rgba(255,255,255,.16); border-top-color: var(--poster-accent); border-radius: 50%; animation: spin .7s linear infinite; }
.poster-preview-loading strong { color: white; font-size: 12px; }
.poster-preview-loading p { max-width: 380px; margin: 0; font-size: 9px; line-height: 1.6; }
.poster-preview-footer { min-height: 49px; padding: 10px 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.08); background: #131e25; }
.poster-preview-footer > span { padding: 4px 7px; border-radius: 999px; background: rgba(84,229,255,.1); color: var(--poster-accent); font-size: 7px; font-weight: 800; }
.poster-preview-footer p { margin: 0; color: #7f8c94; font-size: 7px; line-height: 1.5; }
.poster-preview-footer b { color: #7f8c94; font-family: "SFMono-Regular", Consolas, monospace; font-size: 7px; font-weight: 700; }

@media (max-width: 1260px) {
  .poster-commandbar { align-items: flex-start; flex-direction: column; }
  .poster-command-actions { justify-content: flex-start; }
  .poster-studio-layout { grid-template-columns: minmax(370px, .82fr) minmax(440px, 1.18fr); }
  .poster-status-strip { grid-template-columns: 1fr auto; }
  .poster-output-facts { display: none; }
}

@media (max-width: 1080px) {
  .poster-studio-layout { grid-template-columns: 1fr; }
  .poster-editor { max-height: none; min-height: 0; }
  .poster-preview-panel { position: relative; top: auto; }
  .poster-preview-stage { height: 900px; }
}

@media (max-width: 720px) {
  .poster-commandbar { padding: 18px; }
  .poster-command-actions { width: 100%; }
  .poster-tool-button, .poster-save-button { flex: 1; justify-content: center; }
  .poster-status-strip { grid-template-columns: 1fr; gap: 9px; }
  .poster-kind-switch button { flex: 1; min-width: 0; }
  .poster-save-state { padding: 9px 5px; border-left: 0; border-top: 1px solid var(--line); }
  .poster-field-grid, .poster-array-row > div { grid-template-columns: 1fr; }
  .poster-field-grid .wide, .poster-subhead.wide { grid-column: auto; }
  .poster-editor-header { align-items: flex-start; flex-direction: column; }
  .poster-editor-tabs { width: 100%; }
  .poster-editor-tabs button { flex: 1; }
  .poster-preview-stage { height: 720px; min-height: 540px; padding: 16px; }
  .poster-preview-footer { grid-template-columns: 1fr auto; }
  .poster-preview-footer p { display: none; }
}