:root { --campaign-bar-height: 68px; }
.campaign-picker { min-height: 100dvh; padding: 32px 28px; }
.campaign-picker-inner { width: min(100%, 1120px); margin: 0 auto; }
.campaign-picker header, .campaign-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.campaign-picker header { min-height: 52px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.campaign-picker .login-brand { margin: 0; min-width: 0; }
.campaign-picker .login-brand strong { font-size: 20px; }
.campaign-picker .login-brand small { font-size: 11px; }
.campaign-picker-heading { margin: 32px 0 24px; flex-wrap: wrap; gap: 16px; }
.campaign-picker h1 { margin: 0; font-size: 28px; font-weight: 650; line-height: 1.25; color: var(--ink); }
.campaign-picker .small, .locations-page-actions .small, .campaign-dialog-actions .small { flex: 0 0 auto; width: auto; min-height: 40px; margin: 0; padding: 8px 14px; }
.campaign-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.campaign-card { display: grid; grid-template-rows: 22px minmax(24px, 1fr) 20px; align-items: start; gap: 16px; min-height: 160px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); text-align: left; }
.campaign-card strong { overflow-wrap: anywhere; font-size: 18px; font-weight: 600; line-height: 1.4; }
.campaign-card > .ui-icon { color: var(--muted); }
.campaign-card:hover { background: var(--soft); border-color: #62686d; }
.campaign-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 450; }
.campaign-card-footer .ui-icon { width: 16px; height: 16px; }
.campaign-card:hover .campaign-card-footer { color: var(--red); }
#campaignPickerStatus { color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#campaignPickerStatus:not(:empty) { margin-bottom: 20px; }
#campaignPickerRetry:not([hidden]) { margin-bottom: 20px; }
.campaign-bar { position: fixed; inset: 0 0 auto var(--sidebar-width); z-index: 27; height: var(--campaign-bar-height); display: flex; align-items: center; gap: 12px; padding: 12px var(--page-padding); border-bottom: 1px solid var(--line); background: var(--bg); }
.campaign-bar label { color: var(--muted); font-size: 12px; }
.campaign-bar select { width: min(280px, 24%); min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #191b1e; color: var(--ink); font-size: 13px; font-weight: 450; }
.campaign-bar button { min-height: 40px; white-space: nowrap; }
.campaign-bar #renameCampaignButton { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; }
.campaign-bar-status { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; }
.campaign-bar-status:empty { display: none; }
.campaign-bar [data-create-campaign] { margin-left: auto; }
.shell { padding-top: calc(var(--campaign-bar-height) + 24px); }
.workspace-page-head { top: var(--campaign-bar-height); }
.layout.is-workspace-page:not(.is-management-page):not(.is-teleprompter-mode) { top: calc(var(--workspace-head-height) + var(--campaign-bar-height)); }
@media (min-width: 1181px) {
  body.has-party-strip:not(.is-management-page-open) .party-strip { top: calc(var(--workspace-head-height) + var(--campaign-bar-height)); }
  body.has-party-strip .layout.is-workspace-page:not(.is-management-page):not(.is-teleprompter-mode) { top: calc(var(--workspace-head-height) + var(--campaign-bar-height) + 88px); }
}
body.is-teleprompter-window-open .campaign-bar { display: none; }
.campaign-dialog { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); padding: 24px; box-shadow: 0 20px 64px #0006; }
.campaign-dialog::backdrop { background: #0009; }
.campaign-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.campaign-dialog h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.campaign-dialog-head .icon-button { flex: 0 0 32px; width: 32px; height: 32px; }
.campaign-dialog form { display: grid; gap: 20px; }
.campaign-dialog label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 450; }
.campaign-dialog input { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #191b1e; color: var(--ink); font-size: 14px; font-weight: 450; }
.campaign-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.campaign-error { color: #ff939e; font-size: 13px; overflow-wrap: anywhere; }
.campaign-error:empty { display: none; }
.locations-page-actions { display: flex; justify-content: flex-end; margin-left: auto; }
.campaign-location-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.campaign-location-card { position: relative; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.campaign-location-card.is-current { border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; }
.campaign-location-card:hover { background: var(--soft); }
.location-open { display: grid; grid-template-rows: 24px minmax(24px, 1fr) auto 20px; gap: 12px; width: 100%; height: 100%; min-height: 192px; color: var(--ink); background: transparent; border: 0; border-radius: inherit; padding: 20px; text-align: left; }
.location-card-symbol { display: flex; align-items: center; padding-right: 72px; color: var(--muted); }
.location-open strong { font-size: 16px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.location-card-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 12px; font-weight: 400; }
.location-card-actions { display: flex; gap: 4px; position: absolute; top: 14px; right: 14px; }
.location-card-actions .icon-button { width: 32px; height: 32px; }
.campaign-location-card.is-current .campaign-card-footer { color: var(--red); }
.campaign-locations-empty { display: grid; place-content: center; justify-items: center; gap: 16px; min-height: 260px; color: var(--muted); }
.campaign-locations-empty > .ui-icon { width: 32px; height: 32px; }
body:has(.campaign-bar) .location-form { display: none; }
@media (max-width: 1000px) {
  .campaign-bar label { display: none; }
  .campaign-bar select { flex: 1; width: 0; }
}
@media (max-width: 600px) {
  :root { --campaign-bar-height: 112px; }
  .campaign-picker { padding: 24px 16px; }
  .campaign-picker-heading { align-items: center; margin-top: 28px; }
  .campaign-picker h1 { font-size: 24px; }
  .campaign-picker .login-brand strong { font-size: 18px; }
  .campaign-picker header { gap: 12px; }
  .campaign-picker header .small { padding: 8px 10px; }
  .campaign-dialog { padding: 20px; }
  .campaign-bar { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px 40px; gap: 8px; padding: 12px 10px; }
  .campaign-bar label { display: block; font-size: 11px; }
  .campaign-bar .create-campaign-label { display: none; }
  .campaign-bar select { width: 100%; }
  .campaign-bar label[for="campaignSelect"] { grid-area: 1 / 1; }
  #campaignSelect { grid-area: 1 / 2; }
  .campaign-bar #renameCampaignButton { grid-area: 1 / 3; }
  .campaign-bar [data-create-campaign] { grid-area: 1 / 4; margin: 0; padding: 0; }
  .campaign-bar label[for="campaignLocationSelect"] { grid-area: 2 / 1; }
  #campaignLocationSelect { grid-area: 2 / 2 / 3 / 4; }
  .campaign-bar [data-add-campaign-location] { grid-area: 2 / 4; }
}
.campaign-notice { position: fixed; z-index: 40; left: calc(var(--sidebar-width) + 16px); bottom: 16px; width: max-content; max-width: min(560px, calc(100% - var(--sidebar-width) - 32px)); display: flex; flex-wrap: wrap; gap: 12px; background: #202225; border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; box-shadow: 0 8px 32px #0006; }
.campaign-notice:not(:has(.campaign-bar-status:not(:empty))) { display: none; }
.campaign-notice .campaign-bar-status { flex: 1 0 100%; overflow-wrap: anywhere; line-height: 1.5; }
.campaign-notice button { white-space: normal; }

body.is-workspace-page-open:not(.is-management-page-open) .campaign-notice:not(:has(#campaignReviewSaveButton:not([hidden]))),
body.is-teleprompter-window-open .campaign-notice:not(:has(#campaignReviewSaveButton:not([hidden]))) {
  display: none;
}

.campaign-save-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(520px, calc(100% - 32px));
  padding: 28px;
  border-radius: 12px;
  box-shadow: 0 24px 80px #0009;
}
.campaign-save-dialog::backdrop { background: #000b; backdrop-filter: blur(3px); }
.campaign-save-dialog .campaign-dialog-head { align-items: flex-start; margin-bottom: 18px; }
.campaign-save-dialog h2 { font-size: 22px; letter-spacing: -.02em; }
.campaign-save-dialog p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.campaign-save-dialog .campaign-save-hint { margin-top: 12px; color: var(--muted); font-size: 13px; }
.campaign-save-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.campaign-save-actions .small { flex: 1 1 auto; width: auto; min-height: 44px; margin: 0; padding: 10px 14px; white-space: normal; }
.campaign-save-actions .accent-button { order: -1; flex-basis: 100%; background: var(--red); color: #07150f; border-color: var(--red); }
.campaign-save-actions .accent-button:hover { filter: brightness(1.08); }
.campaign-save-actions button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
body:has(#campaignSaveDialog[open]) .campaign-notice { visibility: hidden; }
@media (max-width: 600px) {
  .campaign-save-dialog { padding: 22px; }
  .campaign-save-dialog h2 { font-size: 20px; }
  .campaign-save-actions .small { flex-basis: 100%; }
}