/* The publishing composer keeps the existing fields and submission contract. */
#upload-dialog {
  --upload-surface: #1b1c21;
  --upload-input: #24252c;
  --upload-border: #ffffff10;
  --upload-text: #f4f4f6;
  --upload-muted: #858692;
  --upload-accent: #fe2c55;
  width: 956px;
  max-width: calc(100vw - 64px);
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ffffff13;
  border-radius: 20px;
  background: var(--upload-surface);
  color: var(--upload-text);
  box-shadow: 0 28px 100px #0008;
  color-scheme: dark;
}
#upload-dialog[open] { display: flex; flex-direction: column; }
#upload-dialog:not([open]) { display: none; }
#upload-dialog::backdrop { background: #08090bc4; backdrop-filter: blur(8px); }
#upload-dialog .upload-header {
  display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between;
  gap: 24px; min-height: 0; padding: 27px 30px 23px; border-bottom: 1px solid var(--upload-border);
}
#upload-dialog .upload-heading { min-width: 0; }
#upload-dialog .upload-header h2 { margin: 0; font-size: 23px; line-height: 32px; font-weight: 650; letter-spacing: .3px; }
#upload-dialog .upload-header .dialog-description { margin: 7px 0 0; padding: 0; font-size: 12px; line-height: 21px; color: var(--upload-muted); }
#upload-dialog #upload-close { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; margin: 0 -5px 0 0; padding: 8px; border-radius: 50%; background: #ffffff05; color: #858692; }
#upload-dialog #upload-close svg { width: 19px; height: 19px; }
#upload-dialog #upload-close:hover { color: #fff; background: #ffffff0c; }
#upload-dialog #upload-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; max-height: none; margin: 0; padding: 0; overflow: hidden; }
#upload-dialog .upload-content { display: grid; grid-template-columns: 310px minmax(0, 1fr); flex: 1 1 auto; gap: 32px; min-height: 0; padding: 28px 30px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3d3e46 transparent; }
#upload-dialog .upload-media { display: flex; flex-direction: column; min-width: 0; }
#upload-dialog .upload-drop {
  position: relative; display: flex; flex: 1 0 auto; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; min-height: 354px; margin: 0; padding: 28px 20px; overflow: hidden;
  border: 1px dashed #454650; border-radius: 13px; background: linear-gradient(155deg, #24252d, #1f2026 75%);
  color: var(--upload-text); text-align: center; cursor: pointer; transition: border-color .18s, background .18s;
}
#upload-dialog .upload-drop:hover { border-color: #ff496d91; background: #29252f; }
#upload-dialog .upload-drop .upload-drop-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 0 20px; border: 1px solid #ff365d15; border-radius: 20px; background: #ff365d0a; color: #ff4c70; }
#upload-dialog .upload-drop .upload-drop-icon svg { width: 29px; height: 29px; color: inherit; stroke-width: 1.7; }
#upload-dialog .upload-drop strong { color: var(--upload-text); font-size: 16px; line-height: 25px; font-weight: 600; }
#upload-dialog .upload-drop .upload-drop-caption { display: block; margin-top: 10px; color: var(--upload-muted); font-size: 11px; line-height: 21px; font-weight: 400; }
#upload-dialog .upload-drop .upload-select-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-width: 124px; min-height: 38px; margin-top: 25px; padding: 9px 15px; border: 1px solid #ffffff0f; border-radius: 7px; background: #ffffff08; color: #e5e5eb; font-size: 12px; line-height: 18px; font-weight: 500; }
#upload-dialog .upload-select-button svg { width: 14px; height: 14px; color: #b2b2bc; }
#upload-dialog .upload-drop input[type="file"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
#upload-dialog .upload-drop:focus-within { outline: 2px solid #ff6987; outline-offset: 3px; }
#upload-dialog .upload-details { display: flex; flex-direction: column; gap: 23px; min-width: 0; }
#upload-dialog .upload-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#upload-dialog .field-label { display: block; order: initial; min-width: 0; margin: 0; padding: 0; border: 0; color: #c1c1cb; font-size: 12px; line-height: 20px; font-weight: 500; }
#upload-dialog .upload-options .field-label { position: relative; margin: 0; }
#upload-dialog .upload-options .field-label::after { content: ''; position: absolute; right: 16px; bottom: 18px; width: 6px; height: 6px; border-right: 1.5px solid #a4a4b0; border-bottom: 1.5px solid #a4a4b0; transform: rotate(45deg); pointer-events: none; }
#upload-dialog .field-label input,
#upload-dialog .field-label select,
#upload-dialog .field-label textarea { display: block; width: 100%; min-width: 0; margin: 9px 0 0; border: 1px solid var(--upload-border); border-radius: 8px; background: var(--upload-input); color: var(--upload-text); font-family: inherit; font-size: 13px; line-height: 22px; font-weight: 400; outline: 0; box-shadow: none; transition: border-color .18s, background .18s; }
#upload-dialog .field-label input { height: 47px; padding: 12px 14px; }
#upload-dialog .field-label select { appearance: none; -webkit-appearance: none; height: 44px; min-height: 44px; padding: 10px 34px 10px 13px; cursor: pointer; }
#upload-dialog .field-label select option { color: var(--upload-text); background: var(--upload-input); }
#upload-dialog .field-label textarea { height: 150px; min-height: 110px; max-height: 230px; padding: 13px 14px; resize: vertical; }
#upload-dialog .field-label input::placeholder,
#upload-dialog .field-label textarea::placeholder { color: #676975; opacity: 1; }
#upload-dialog .field-label input:hover,
#upload-dialog .field-label select:hover,
#upload-dialog .field-label textarea:hover { border-color: #ffffff23; }
#upload-dialog .field-label input:focus,
#upload-dialog .field-label select:focus,
#upload-dialog .field-label textarea:focus { border-color: #ff527b8c; background: #27262f; box-shadow: 0 0 0 3px #ff365d08; }
#upload-dialog .upload-field-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#upload-dialog .upload-counter { color: #626471; font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; }
#upload-dialog .upload-topic { display: inline-flex; align-items: center; gap: 5px; min-height: 31px; margin: 10px 0 0; padding: 4px 10px; border: 1px solid #ffffff08; border-radius: 6px; background: #ffffff05; color: #a4a5b2; font-size: 11px; font-weight: 400; line-height: 21px; }
#upload-dialog .upload-topic>span { color: #d1d0d9; font-size: 16px; font-weight: 500; }
#upload-dialog .upload-topic:hover { color: #f8d0dc; border-color: #ff365d30; background: #ff365d09; }
#upload-dialog .upload-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 24px; margin: 0; padding: 19px 30px; border-top: 1px solid var(--upload-border); background: #1b1c21; }
#upload-dialog .upload-feedback { flex: 1; min-width: 0; }
#upload-dialog .local-note { order: initial; margin: 0; padding: 0; color: #757784; font-size: 11px; line-height: 20px; font-weight: 400; }
#upload-dialog #upload-status { order: initial; margin: 5px 0 0; padding: 0; border: 0; background: none; color: #ff6686; font-size: 12px; line-height: 20px; }
#upload-dialog .dialog-actions { position: static; display: flex; flex: 0 0 auto; order: initial; align-items: center; gap: 12px; width: auto; margin: 0; padding: 0; border: 0; background: transparent; }
#upload-dialog .dialog-actions>button { display: inline-flex; align-items: center; justify-content: center; min-height: 43px; margin: 0; padding: 10px 21px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; line-height: 21px; font-weight: 600; }
#upload-dialog .dialog-actions .secondary-btn { min-width: 80px; border-color: #ffffff10; background: #ffffff04; color: #b7b7c2; }
#upload-dialog .dialog-actions .secondary-btn:hover { background: #ffffff0b; color: #fff; }
#upload-dialog .dialog-actions .primary-btn { min-width: 142px; background: #fe2c55; color: #fff; }
#upload-dialog .dialog-actions .primary-btn:hover { background: #ff4268; }
#upload-dialog button:disabled { opacity: .5; cursor: default; }
#upload-dialog #upload-form[aria-busy="true"] .upload-drop { opacity: .5; cursor: default; }
#upload-dialog button:focus-visible { outline: 2px solid #ff829e; outline-offset: 3px; }
#upload-dialog #upload-preview[hidden], #upload-dialog #upload-status[hidden] { display: none !important; }
#upload-dialog #upload-preview { display: flex; flex-direction: column; order: 0; gap: 0; min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--upload-border); border-radius: 11px; background: #111216; }
#upload-dialog #upload-preview-video { display: block; width: 100%; height: 285px; max-height: 40dvh; margin: 0; border-radius: 0; object-fit: contain; background: #101114; }
#upload-dialog .upload-preview-summary { min-width: 0; margin: 0; padding: 12px 14px; color: #91929e; font-size: 11px; line-height: 19px; font-weight: 400; overflow-wrap: anywhere; }
#upload-dialog[data-has-file="true"] .upload-drop { flex: 0 0 auto; flex-direction: row; order: 1; gap: 9px; min-height: 42px; margin: 12px 0 0; padding: 10px 12px; border-style: solid; border-color: var(--upload-border); border-radius: 7px; background: #ffffff03; }
#upload-dialog[data-has-file="true"] .upload-drop .upload-drop-icon { width: 19px; height: 19px; margin: 0; border: 0; border-radius: 0; background: none; }
#upload-dialog[data-has-file="true"] .upload-drop .upload-drop-icon svg { width: 17px; height: 17px; }
#upload-dialog[data-has-file="true"] .upload-drop strong { font-size: 12px; line-height: 20px; font-weight: 400; }
#upload-dialog[data-has-file="true"] .upload-drop .upload-drop-caption,
#upload-dialog[data-has-file="true"] .upload-drop .upload-select-button { display: none; }

html[data-ui="mobile"] #upload-dialog {
  --upload-surface: #fff; --upload-input: #f7f7f9; --upload-border: #ededf1; --upload-text: #202127; --upload-muted: #999aa4;
  inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; background: #fff; color: #202127; box-shadow: none; color-scheme: light;
}
html[data-ui="mobile"] #upload-dialog .upload-header { flex: 0 0 auto; align-items: center; justify-content: center; min-height: 0; gap: 0; padding: calc(12px + env(safe-area-inset-top, 0px)) max(50px, env(safe-area-inset-right, 0px)) 12px max(50px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid #efeff3; background: #fff; }
html[data-ui="mobile"] #upload-dialog .upload-heading { text-align: center; }
html[data-ui="mobile"] #upload-dialog .upload-header h2 { font-size: 17px; line-height: 26px; letter-spacing: 0; }
html[data-ui="mobile"] #upload-dialog .upload-header .dialog-description { margin: 2px 0 0; color: #a0a1aa; font-size: 10px; line-height: 17px; white-space: normal; }
html[data-ui="mobile"] #upload-dialog #upload-close { top: calc(13px + env(safe-area-inset-top, 0px)); left: max(5px,env(safe-area-inset-left, 0px)); right: auto; width: 40px; height: 40px; margin: 0; padding: 12px; border-radius: 0; color: #303039; background: none; }
html[data-ui="mobile"] #upload-dialog #upload-close:hover { color: #303039; background: none; }
html[data-ui="mobile"] #upload-dialog #upload-form { display: flex; flex-direction: column; gap: 0; width: 100%; min-height: 0; max-height: none; margin: 0; padding: 0; overflow: hidden; }
html[data-ui="mobile"] #upload-dialog .upload-content { display: flex; flex-direction: column; flex: 1 1 auto; gap: 22px; min-height: 0; padding: 24px max(20px, env(safe-area-inset-right, 0px)) 24px max(20px, env(safe-area-inset-left, 0px)); overflow: auto; }
html[data-ui="mobile"] #upload-dialog .upload-details { order: 0; flex: 0 0 auto; gap: 22px; }
html[data-ui="mobile"] #upload-dialog .upload-media { order: 1; flex: 0 0 auto; }
html[data-ui="mobile"] #upload-dialog .upload-options { gap: 12px; }
html[data-ui="mobile"] #upload-dialog .field-label { order: initial; margin: 0; padding: 0; border: 0; color: #737480; font-size: 12px; line-height: 20px; font-weight: 500; }
html[data-ui="mobile"] #upload-dialog .upload-options .field-label::after { border-color: #9596a1; }
html[data-ui="mobile"] #upload-dialog .field-label input,
html[data-ui="mobile"] #upload-dialog .field-label select,
html[data-ui="mobile"] #upload-dialog .field-label textarea { margin-top: 8px; border: 1px solid #ededf2; border-radius: 9px; background: #f8f8fa; color: #25262d; font-size: 16px; line-height: 24px; font-weight: 400; }
html[data-ui="mobile"] #upload-dialog .field-label input { height: 48px; min-height: 48px; padding: 11px 13px; }
html[data-ui="mobile"] #upload-dialog .field-label select { height: 45px; min-height: 45px; padding: 9px 30px 10px 12px; font-size: 13px; }
html[data-ui="mobile"] #upload-dialog .field-label textarea { height: 125px; min-height: 105px; max-height: 200px; padding: 12px 13px; resize: vertical; }
html[data-ui="mobile"] #upload-dialog .field-label input::placeholder,
html[data-ui="mobile"] #upload-dialog .field-label textarea::placeholder { color: #b3b4be; }
html[data-ui="mobile"] #upload-dialog .field-label input:focus,
html[data-ui="mobile"] #upload-dialog .field-label select:focus,
html[data-ui="mobile"] #upload-dialog .field-label textarea:focus { border-color: #ff829c; background: #fff; box-shadow: 0 0 0 3px #ff365d06; }
html[data-ui="mobile"] #upload-dialog .upload-counter { color: #b3b4bd; }
html[data-ui="mobile"] #upload-dialog .upload-topic { min-height: 33px; margin-top: 9px; padding: 4px 10px; border-color: #ebebf0; border-radius: 6px; background: #f8f8fa; color: #838490; font-size: 11px; }
html[data-ui="mobile"] #upload-dialog .upload-topic>span { color: #9495a0; }
html[data-ui="mobile"] #upload-dialog .upload-drop { order: initial; flex: 0 0 auto; min-height: 166px; gap: 0; margin: 0; padding: 21px 16px; border-color: #dcdde6; border-radius: 11px; background: #fafafb; }
html[data-ui="mobile"] #upload-dialog .upload-drop:hover { border-color: #ff9fb3; background: #fefbfc; }
html[data-ui="mobile"] #upload-dialog .upload-drop .upload-drop-icon { width: 42px; height: 42px; margin-bottom: 10px; border-radius: 13px; background: #fff1f5; }
html[data-ui="mobile"] #upload-dialog .upload-drop .upload-drop-icon svg { width: 23px; height: 23px; }
html[data-ui="mobile"] #upload-dialog .upload-drop strong { color: #565762; font-size: 14px; }
html[data-ui="mobile"] #upload-dialog .upload-drop .upload-drop-caption { margin-top: 5px; font-size: 10px; line-height: 18px; }
html[data-ui="mobile"] #upload-dialog .upload-drop .upload-select-button { display: none; }
html[data-ui="mobile"] #upload-dialog .upload-footer { display: flex; flex-direction: column; flex: 0 0 auto; align-items: stretch; gap: 11px; margin: 0; padding: 12px max(20px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px)); border-top: 1px solid #efeff3; background: #fff; }
html[data-ui="mobile"] #upload-dialog .local-note { order: initial; margin: 0; padding: 0; color: #acadb6; font-size: 10px; line-height: 17px; }
html[data-ui="mobile"] #upload-dialog #upload-status { margin-top: 4px; padding: 0; background: none; color: #e13d64; font-size: 11px; line-height: 18px; }
html[data-ui="mobile"] #upload-dialog .dialog-actions { position: static; display: grid; grid-template-columns: 1fr 2fr; order: initial; width: 100%; margin: 0; padding: 0; gap: 11px; border: 0; background: none; }
html[data-ui="mobile"] #upload-dialog .dialog-actions>button { min-height: 46px; padding: 10px 16px; border-radius: 9px; font-size: 14px; line-height: 24px; }
html[data-ui="mobile"] #upload-dialog .dialog-actions .secondary-btn { border: 1px solid #eeeef3; background: #f7f7f9; color: #8b8b97; }
html[data-ui="mobile"] #upload-dialog .dialog-actions .primary-btn { background: #fe2c55; color: #fff; }
html[data-ui="mobile"] #upload-dialog #upload-preview { order: 0; display: flex; gap: 0; margin: 0; padding: 0; border-color: #ececf1; border-radius: 10px; background: #f8f8fa; }
html[data-ui="mobile"] #upload-dialog #upload-preview-video { width: 100%; height: 230px; max-height: 38dvh; border-radius: 0; background: #141418; }
html[data-ui="mobile"] #upload-dialog .upload-preview-summary { padding: 10px 12px; color: #9697a2; font-size: 11px; line-height: 19px; }
html[data-ui="mobile"] #upload-dialog[data-has-file="true"] .upload-drop { order: 1; flex-direction: row; min-height: 42px; gap: 8px; margin: 10px 0 0; padding: 10px; border-style: solid; border-color: #ededf2; background: #fafafb; }
html[data-ui="mobile"] #upload-dialog[data-has-file="true"] .upload-drop .upload-drop-icon { width: 18px; height: 18px; margin: 0; border: 0; border-radius: 0; background: none; }
html[data-ui="mobile"] #upload-dialog[data-has-file="true"] .upload-drop .upload-drop-icon svg { width: 16px; height: 16px; }
html[data-ui="mobile"] #upload-dialog[data-has-file="true"] .upload-drop strong { font-size: 12px; }
html[data-ui="mobile"] #upload-dialog[data-has-file="true"] .upload-drop .upload-drop-caption { display: none; }
@media (max-height: 640px) {
  html[data-ui="desktop"] #upload-dialog { max-height: calc(100dvh - 24px); max-width: calc(100vw - 32px); }
  html[data-ui="desktop"] #upload-dialog .upload-header { padding-top: 17px; padding-bottom: 15px; }
  html[data-ui="desktop"] #upload-dialog .upload-content { padding-top: 20px; padding-bottom: 20px; }
  html[data-ui="desktop"] #upload-dialog .upload-footer { padding-top: 13px; padding-bottom: 13px; }
  html[data-ui="mobile"] #upload-dialog .upload-header { padding-top: calc(8px + env(safe-area-inset-top,0px)); padding-bottom: 8px; }
  html[data-ui="mobile"] #upload-dialog .upload-header .dialog-description { font-size: 10px; line-height: 15px; }
  html[data-ui="mobile"] #upload-dialog .upload-content { gap: 16px; padding-top: 18px; padding-bottom: 18px; }
  html[data-ui="mobile"] #upload-dialog .upload-footer { flex-direction: row; align-items: center; gap: 16px; padding-top: 9px; padding-bottom: 9px; }
  html[data-ui="mobile"] #upload-dialog .upload-feedback { flex: 1; }
  html[data-ui="mobile"] #upload-dialog .dialog-actions { width: 250px; flex: 0 0 250px; }
  html[data-ui="mobile"] #upload-dialog .dialog-actions>button { min-height: 42px; padding: 8px 12px; }
}
@media (max-width: 820px) {
  html[data-ui="desktop"] #upload-dialog .upload-content { grid-template-columns: minmax(210px,.8fr) minmax(0,1fr); gap: 22px; padding-left: 24px; padding-right: 24px; }
  html[data-ui="desktop"] #upload-dialog .upload-header,
  html[data-ui="desktop"] #upload-dialog .upload-footer { padding-left: 24px; padding-right: 24px; }
  html[data-ui="desktop"] #upload-dialog .upload-options { grid-template-columns: 1fr; gap: 14px; }
  html[data-ui="desktop"] #upload-dialog .upload-details { gap: 18px; }
}
@media (max-width: 480px) and (max-height: 640px) {
  html[data-ui="mobile"] #upload-dialog .upload-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  html[data-ui="mobile"] #upload-dialog .dialog-actions { width: 100%; flex: initial; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-ui="desktop"] #upload-dialog[open] { animation: upload-composer-enter .2s ease-out both; }
  @keyframes upload-composer-enter { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
}
/* Reset the older flat-form order rules now that fields live in groups. */
html[data-ui="mobile"] #upload-dialog #upload-form .field-label { order: initial; }
html[data-ui="mobile"] #upload-dialog #upload-form .upload-title-field { order: 0; }
html[data-ui="mobile"] #upload-dialog #upload-form .upload-description-field { order: 1; }
html[data-ui="mobile"] #upload-dialog #upload-form .upload-options { order: 2; }
html[data-ui="mobile"] #upload-dialog[data-has-file="true"] #upload-form:has(#upload-preview:not([hidden])) .upload-drop { flex-direction: row; order: 1; gap: 8px; min-height: 42px; margin: 10px 0 0; padding: 10px; }