:root {
  --f-ink: var(--kt-ink-2);
  --f-muted: var(--kt-muted);
  --f-line: var(--kt-line);
  --f-surface: var(--kt-canvas);
  --f-accent: var(--kt-ink-2);
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  color: var(--f-ink);
}
html,
body {
  height: auto !important;
  overflow: auto !important;
  background: var(--f-surface);
  scroll-behavior: smooth;
}
#app {
  min-height: 100dvh;
  height: auto !important;
}
.frame-app {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100dvh;
  font-size: 16px;
  line-height: 1.55;
}
.frame-app * {
  box-sizing: border-box;
}
.frame-app h1,
.frame-app h2,
.frame-app h3 {
  color: var(--f-ink);
  line-height: 1.25;
}
.frame-app h1 {
  font-size: 32px;
  letter-spacing: -1.1px;
  font-weight: 650;
  margin: 9px 0 12px;
}
.frame-app h2 {
  font-size: 20px;
  letter-spacing: -0.35px;
  margin: 0 0 7px;
}
.frame-app h3 {
  font-size: 18px;
  margin: 8px 0;
}
.frame-app p {
  margin: 8px 0 16px;
}
.f-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}
.f-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  min-height: 44px;
  border: 1px solid var(--f-line);
  border-radius: 10px;
  background: var(--kt-surface);
  color: var(--f-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.f-button:hover:not(:disabled) {
  background: var(--kt-canvas);
  border-color: var(--kt-muted-2);
}
.f-button.primary {
  background: var(--f-ink);
  border-color: var(--f-ink);
  color: var(--kt-surface);
}
.f-button.primary:hover:not(:disabled) {
  background: var(--kt-ink-2);
}
.f-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.f-button.quiet {
  border: 0;
  background: transparent;
  padding: 8px;
}
.f-button.icon-only {
  padding: 11px;
  flex-shrink: 0;
}
.f-button.selected {
  background: var(--kt-line);
  border-color: var(--kt-line-strong);
}
.f-button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--kt-accent);
  outline-offset: 3px;
}
.f-sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--kt-surface);
  border-right: 1px solid var(--f-line);
  padding: 30px 18px;
  gap: 24px;
}
.f-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  padding: 0 12px;
  color: var(--kt-ink-2);
}
.f-brand strong {
  font-size: 24px;
  letter-spacing: 1px;
}
.f-brand strong span {
  color: var(--kt-muted-2);
}
.f-logo {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  background: var(--kt-ink-2);
  border-radius: 12px;
  flex-shrink: 0;
}
.f-logo svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: var(--kt-surface);
  stroke-width: 1.8;
}
.f-workspace {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--f-line);
  padding: 13px 11px;
  border-radius: 12px;
  font-size: 14px;
}
.f-workspace span {
  flex: 1;
}
.f-workspace small {
  display: block;
  font-size: 12px;
  color: var(--f-muted);
}
.f-workspace > .f-icon:last-child {
  width: 16px;
  color: var(--kt-muted-2);
}
.f-nav-label {
  font-size: 11px;
  letter-spacing: 1.4px;
  font-weight: 700;
  color: var(--kt-muted-2);
  padding-left: 13px;
  margin-bottom: -16px;
}
.f-sidebar nav {
  display: grid;
  gap: 5px;
}
.f-sidebar nav .f-button {
  justify-content: flex-start;
  border: 0;
  background: transparent;
  font-size: 14px;
  padding: 12px 14px;
  color: var(--kt-muted);
}
.f-sidebar nav .f-button.selected {
  color: var(--kt-ink-2);
  background: var(--kt-canvas);
}
.f-sidebar nav .f-button.selected .f-icon {
  stroke-width: 2;
}
.f-count {
  margin-left: auto;
  border-radius: 6px;
  background: var(--kt-ink-2);
  color: var(--kt-surface);
  font-size: 12px;
  padding: 0 6px;
}
.f-sidebar-bottom {
  margin-top: auto;
  display: grid;
  gap: 18px;
}
.f-sidebar-tip {
  padding: 16px 12px;
  color: var(--kt-muted);
}
.f-sidebar-tip strong {
  display: block;
  color: var(--kt-ink-2);
  font-size: 14px;
  margin-top: 7px;
}
.f-sidebar-tip p {
  font-size: 13px;
  margin: 6px 0;
  line-height: 1.65;
}
.f-user {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding-top: 15px;
  border-top: 1px solid var(--f-line);
}
.f-user > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.f-user small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--f-muted);
  font-size: 11px;
}
.f-user .f-button {
  padding: 8px;
}
.f-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kt-canvas);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.f-button.f-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 50%;
}
.f-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kt-account-avatar { display: flex; align-items: center; gap: 16px; margin-block: 20px; }
.kt-account-avatar .f-avatar { width: 72px; height: 72px; }
.kt-account-avatar p { margin: 2px 0; }
.kt-account-avatar .f-button.quiet { padding-inline: 0; }
.f-dialog.kt-avatar-dialog { width: min(760px, 100%); }
.kt-avatar-section + .kt-avatar-section { margin-top: 28px; }
.kt-avatar-section h3 { margin: 0 0 12px; font-size: 18px; }
.kt-avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.kt-avatar-collaborators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kt-avatar-option {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 44px;
  padding: 12px 8px;
  border: 1px solid var(--kt-line);
  border-radius: 14px;
  background: var(--kt-canvas);
  color: var(--kt-ink-2);
  font: inherit;
  cursor: pointer;
}
.kt-avatar-option:hover:not(:disabled), .kt-avatar-option.is-selected { border-color: var(--kt-accent); background: var(--kt-surface); }
.kt-avatar-option:focus-visible { outline: 3px solid var(--kt-accent); outline-offset: 3px; }
.kt-avatar-option:disabled { cursor: not-allowed; }
.kt-avatar-option strong { font-size: 14px; line-height: 1.3; }
.kt-avatar-option small { font-size: 12px; color: var(--kt-muted); }
.kt-avatar-portrait { position: relative; display: block; width: 80px; height: 80px; }
.kt-avatar-portrait img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.kt-avatar-collaborators .kt-avatar-portrait { width: 104px; height: 104px; }
.kt-avatar-lock, .kt-avatar-selected {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--kt-surface);
  border-radius: 50%;
  background: var(--kt-ink-2);
  color: var(--kt-surface);
}
.kt-avatar-lock .f-icon, .kt-avatar-selected .f-icon { width: 15px; height: 15px; }
.kt-avatar-dialog .f-dialog-body { overscroll-behavior: contain; }
.workspace-main {
  min-width: 0;
}
.f-top {
  height: 84px;
  padding: 0 40px;
  border-bottom: 1px solid var(--f-line);
  background: color-mix(in srgb, var(--kt-surface) 85%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}
.f-top > div > span {
  color: var(--kt-muted-2);
  margin-right: 10px;
}
.f-top-actions {
  display: flex;
  gap: 13px;
  align-items: center;
}
.f-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 8px;
  border: 1px solid var(--kt-line);
  background: var(--kt-canvas);
  color: var(--kt-muted);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
}
.f-content {
  max-width: 1500px;
  margin: auto;
  padding: 38px 40px 22px;
}
.f-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--kt-muted-2);
}
.f-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 0 0 30px;
}
.f-heading p {
  color: var(--f-muted);
  font-size: 15px;
  margin: 0;
}
.f-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.f-panel {
  border: 1px solid var(--f-line);
  border-radius: 16px;
  background: var(--kt-surface);
  min-width: 0;
  overflow: hidden;
}
.f-pad {
  padding: 24px;
}
.f-panel-heading {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.f-panel-heading p {
  margin: 0;
  color: var(--f-muted);
  font-size: 14px;
}
.f-panel-heading h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.f-welcome {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 36px;
  align-items: center;
  background: linear-gradient(115deg, var(--kt-surface), var(--kt-canvas));
  border: 1px solid var(--f-line);
  border-radius: 18px;
  padding: 44px;
  margin-bottom: 26px;
}
.f-welcome h1 {
  font-size: 42px;
  line-height: 1.15;
  letter-spacing: -1.5px;
}
.f-welcome p {
  color: var(--f-muted);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 24px;
}
.f-flow-art {
  padding: 24px 0 10px;
  text-align: center;
}
.f-art-source {
  border: 1px solid var(--kt-line-strong);
  background: var(--kt-surface);
  box-shadow: 0 12px 36px #2b304511;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 21px;
  border-radius: 14px;
  max-width: 350px;
  margin: auto;
  font-size: 15px;
  transform: rotate(-2deg);
}
.f-art-source .f-icon {
  width: 30px;
  height: 30px;
}
.f-art-source .f-badge {
  margin-left: auto;
  font-size: 10px;
}
.f-art-line {
  height: 36px;
  border-left: 1px dashed var(--kt-muted-2);
  width: 0;
  margin: auto;
}
.f-art-networks {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.f-art-networks .f-channel {
  width: 50px;
  height: 50px;
  font-size: 14px;
  background: var(--kt-surface);
  box-shadow: 0 5px 13px #23283508;
}
.f-flow-art p {
  font-size: 12px;
  letter-spacing: 0.1px;
  margin: 17px 0;
}
.f-channel {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--kt-line);
  border-radius: 10px;
  background: var(--kt-canvas);
  color: var(--kt-ink-2);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: -0.5px;
}
.f-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 30px;
}
.f-stats article {
  padding: 21px 24px;
  background: var(--kt-surface);
  border: 1px solid var(--f-line);
  border-radius: 14px;
  display: grid;
  gap: 6px;
}
.f-stats article > span {
  font-size: 14px;
  color: var(--kt-muted);
}
.f-stats strong {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
}
.f-stats small {
  color: var(--kt-muted-2);
  font-size: 12px;
}
.f-project-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  border-top: 1px solid var(--kt-line);
}
.f-project-row img {
  width: 58px;
  height: 66px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--kt-line);
}
.f-project-row > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.f-project-row strong {
  font-size: 15px;
  display: block;
  overflow-wrap: anywhere;
}
.f-project-row span:not(.f-channel) {
  display: block;
  font-size: 13px;
  color: var(--f-muted);
  margin-top: 4px;
}
.f-row-channels {
  display: flex;
  gap: 5px;
}
.f-empty {
  text-align: center;
  padding: 50px 24px;
  color: var(--f-muted);
}
.f-empty > .f-icon {
  width: 36px;
  height: 36px;
  color: var(--kt-muted-2);
  margin-bottom: 12px;
}
.f-empty h3 {
  color: var(--kt-ink-2);
}
.f-empty p {
  max-width: 480px;
  margin: 9px auto 22px;
  font-size: 15px;
}
.f-notice {
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--kt-line);
  border-radius: 12px;
  background: var(--kt-canvas);
  padding: 17px 20px;
  color: var(--kt-muted);
  font-size: 14px;
  margin: 20px 0;
}
.f-notice span:not(.f-spinner) {
  flex: 1;
}
.f-notice.error {
  background: color-mix(in srgb, var(--kt-danger) 10%, var(--kt-surface));
  border-color: color-mix(in srgb, var(--kt-danger) 35%, transparent);
  color: var(--kt-danger);
}
.f-small {
  font-size: 13px !important;
  color: var(--f-muted);
  line-height: 1.7;
}
.f-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  color: var(--f-muted);
  font-size: 14px;
}
.f-toolbar input {
  max-width: 350px;
}
.frame-app input,
.frame-app textarea,
.frame-app select,
.f-dialog input,
.f-dialog textarea,
.f-dialog select {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--kt-line);
  border-radius: 10px;
  background: var(--kt-surface);
  color: var(--kt-ink-2);
  font-size: 16px;
  padding: 11px 12px;
  line-height: 1.5;
  min-height: 46px;
}
.frame-app textarea {
  resize: vertical;
}
.frame-app input[type='checkbox'] {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--kt-ink-2);
  flex-shrink: 0;
}
.f-field {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 18px;
  color: var(--kt-muted);
  min-width: 0;
}
.f-field textarea {
  font-weight: 400;
}
.f-field input,
.f-field select {
  font-weight: 400;
}
.f-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}
.f-media-card {
  border: 1px solid var(--f-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--kt-surface);
}
.f-media-image {
  position: relative;
  height: 200px;
  background: var(--kt-ink-2);
}
.f-media-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.f-media-image > span {
  position: absolute;
  bottom: 12px;
  right: 12px;
  color: var(--kt-surface);
  background: #0009;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
}
.f-media-info {
  padding: 20px;
}
.f-select-media {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.f-media-info > p {
  font-size: 12px;
  color: var(--f-muted);
  margin: 8px 0 17px;
}
.f-media-info .f-button {
  font-size: 13px;
  padding: 9px 12px;
}
.f-drop-hint {
  border: 1px dashed var(--kt-line-strong);
  border-radius: 12px;
  margin: 24px 0;
  padding: 21px;
  text-align: center;
  color: var(--kt-muted-2);
  font-size: 14px;
}
.f-bulk {
  position: sticky;
  bottom: 18px;
  margin-top: 20px;
  padding: 16px 22px;
  background: var(--kt-ink-2);
  color: var(--kt-surface);
  box-shadow: 0 8px 24px #22242b26;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
}
.f-bulk[hidden] {
  display: none;
}
.f-steps {
  display: flex;
  justify-content: space-between;
  padding: 18px 22px;
  background: var(--kt-surface);
  border: 1px solid var(--f-line);
  border-radius: 12px;
  margin-bottom: 25px;
  gap: 14px;
  color: var(--kt-muted);
  font-size: 13px;
}
.f-steps span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.f-preparation {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.f-video-panel {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.f-video-canvas {
  border-radius: 14px;
  overflow: hidden;
  background: var(--kt-ink-2);
  height: 440px;
  display: grid;
  place-items: center;
}
.f-video-canvas video {
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: contain;
}
.f-video-meta {
  display: grid;
  gap: 6px;
  font-size: 13px;
  padding: 8px 2px;
}
.f-video-meta strong {
  overflow-wrap: anywhere;
}
.f-video-meta span {
  color: var(--f-muted);
}
.f-saved {
  padding: 12px 14px;
  background: var(--kt-line);
  border-radius: 10px;
  color: var(--kt-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.f-preparation-main {
  display: grid;
  gap: 24px;
  min-width: 0;
}
.frame-app fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.frame-app fieldset:disabled {
  opacity: 0.7;
}
.frame-app details summary,
.f-panel > summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  min-height: 36px;
}
.frame-app details[open] > summary {
  margin-bottom: 18px;
}
.f-inline-note {
  background: var(--kt-canvas);
  padding: 13px 15px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--kt-muted);
  margin-bottom: 19px;
}
.f-analysis {
  border-top: 1px solid var(--kt-line);
  margin-top: 20px;
  padding-top: 20px;
}
.f-analysis p {
  font-size: 14px;
  color: var(--kt-muted);
}
.f-warning {
  font-size: 13px;
  color: var(--kt-pending);
  background: color-mix(in srgb, var(--kt-pending) 10%, var(--kt-surface));
  padding: 10px 12px;
  border-radius: 8px;
}
.f-network-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--f-line);
  padding: 7px;
  gap: 3px;
  background: var(--kt-canvas);
}
.f-network-tabs .f-button {
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  padding: 9px 3px;
  border: 0;
  background: transparent;
  min-width: 0;
}
.f-network-tabs .f-button.selected {
  background: var(--kt-line);
  color: var(--kt-ink-2);
}
.f-network-tabs .f-channel {
  background: var(--kt-surface);
}
.f-check {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 22px;
}
.f-caption-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--kt-muted-2);
  margin-top: -12px;
  margin-bottom: 20px;
  gap: 10px;
}
.f-caption-meta .f-button {
  font-size: 12px;
}
.f-date-fields,
.f-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.f-section-gap {
  margin-top: 24px;
}
.f-publication-status {
  border-top: 1px solid var(--f-line);
  padding-top: 20px;
}
.f-publication-status > div {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0;
}
.f-publication-status > div > span:nth-child(2) {
  flex: 1;
  font-size: 13px;
}
.f-publication-status small {
  display: block;
  color: var(--f-muted);
  font-size: 11px;
}
.f-calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px;
}
.f-calendar-toolbar h2 {
  font-size: 20px;
  text-transform: capitalize;
  margin: 0;
}
.f-mode {
  display: flex;
  gap: 5px;
  margin-left: auto;
}
.f-calendar-week,
.f-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.f-calendar-week {
  border-top: 1px solid var(--f-line);
  font-size: 11px;
  font-weight: 700;
  color: var(--kt-muted-2);
  letter-spacing: 0.7px;
  text-align: center;
  padding: 14px;
}
.f-day {
  min-height: 130px;
  border-top: 1px solid var(--f-line);
  border-right: 1px solid var(--f-line);
  padding: 6px;
  min-width: 0;
}
.f-day:nth-child(7n) {
  border-right: 0;
}
.f-day.empty {
  background: var(--kt-canvas);
}
.f-day-number.f-button {
  min-height: 35px;
  border: 0;
  background: transparent;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--kt-muted);
}
.f-event.f-button {
  width: 100%;
  display: block;
  text-align: left;
  background: var(--kt-canvas);
  border: 0;
  padding: 9px;
  margin-top: 5px;
  border-radius: 8px;
  overflow: hidden;
  min-height: 0;
}
.f-event strong,
.f-event span,
.f-event small {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.f-event strong {
  font-size: 11px;
  color: var(--kt-muted);
}
.f-event span {
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
}
.f-event small {
  font-size: 10px;
  color: var(--kt-muted-2);
  margin-top: 4px;
}
.f-agenda-item {
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--f-line);
  padding: 18px 0;
  font-size: 14px;
}
.f-agenda-item > span:nth-last-child(2) {
  flex: 1;
}
.f-agenda-item small {
  display: block;
  font-size: 12px;
  color: var(--f-muted);
  margin-top: 4px;
}
.f-cta-grid,
.f-connection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.f-cta-item {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--f-line);
  padding: 16px 0;
  font-size: 14px;
}
.f-cta-item > div {
  flex: 1;
}
.f-cta-item small {
  display: block;
  color: var(--f-muted);
  font-size: 12px;
  margin-top: 4px;
}
.f-notification {
  display: flex;
  gap: 18px;
  align-items: start;
  border-top: 1px solid var(--f-line);
  padding: 24px;
}
.f-notification.unread {
  background: var(--kt-canvas);
  border-left: 3px solid var(--kt-accent);
}
.f-notification > div {
  flex: 1;
  min-width: 0;
}
.f-notification strong {
  font-size: 13px;
  color: var(--kt-muted);
}
.f-notification p {
  font-size: 14px;
  color: var(--kt-muted);
  overflow-wrap: anywhere;
}
.f-notification small {
  font-size: 12px;
  color: var(--kt-muted-2);
}
.f-page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  color: var(--kt-muted-2);
  margin-top: 42px;
  padding: 20px 0 5px;
}
.f-page-footer .f-icon {
  width: 13px;
  height: 13px;
}
.f-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00000070;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.f-dialog {
  width: min(680px, 100%);
  max-height: 90dvh;
  background: var(--kt-surface);
  border-radius: 18px;
  box-shadow: 0 30px 100px #11182740;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--kt-ink-2);
  font-size: 16px;
}
.f-dialog > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--f-line);
}
.f-dialog h2 {
  font-size: 20px;
  margin: 0;
}
.f-dialog-body {
  overflow: auto;
  padding: 24px 26px;
  min-height: 0;
}
.f-dialog > footer {
  padding: 19px 26px;
  border-top: 1px solid var(--f-line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.f-dialog p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--kt-muted);
}
.f-upload-zone {
  border: 1px dashed var(--kt-line-strong);
  border-radius: 12px;
  background: var(--kt-canvas);
  display: grid;
  gap: 12px;
  text-align: center;
  justify-items: center;
  padding: 28px 18px;
  margin: 20px 0;
  cursor: pointer;
}
.f-upload-zone > span {
  font-size: 13px;
  color: var(--kt-muted-2);
}
.f-upload-zone input {
  font-size: 13px;
  border: 0;
  background: transparent;
  padding: 0;
}
.f-watch-video {
  display: block;
  width: 100%;
  max-height: 65dvh;
  background: var(--kt-ink-2);
  border-radius: 10px;
  margin-top: 15px;
}
.f-review-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--kt-line);
}
.f-review-item h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
}
.f-review-item small {
  font-size: 13px;
  color: var(--kt-muted-2);
}
.f-preserve-lines {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.f-drive-row {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid var(--f-line);
  font-size: 14px;
}
.f-more-menu {
  display: grid;
  gap: 9px;
}
.f-more-menu .f-button {
  justify-content: flex-start;
}
.f-mobile-nav {
  display: none;
}
.f-spinner {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border: 2px solid var(--kt-line-strong);
  border-top-color: var(--kt-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (min-width: 1500px) {
  .f-content {
    padding: 45px 55px 24px;
  }
  .f-welcome {
    padding: 50px;
  }
  .f-welcome h1 {
    font-size: 42px;
  }
}
@media (max-width: 1150px) {
  .frame-app {
    grid-template-columns: 216px minmax(0, 1fr);
  }
  .f-sidebar {
    padding: 26px 12px;
  }
  .f-top {
    padding: 0 25px;
  }
  .f-content {
    padding: 28px 25px;
  }
  .f-welcome {
    padding: 28px;
    gap: 20px;
  }
  .f-welcome h1 {
    font-size: 32px;
  }
  .f-art-source {
    padding: 15px;
    font-size: 12px;
  }
  .f-art-source .f-badge {
    display: none;
  }
  .f-preparation {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
  }
  .f-pad {
    padding: 20px;
  }
  .f-panel-heading {
    flex-wrap: wrap;
  }
  .f-row-channels {
    display: none;
  }
  .f-heading h1 {
    font-size: 28px;
  }
}
@media (max-width: 850px) {
  .frame-app {
    display: block;
    padding-bottom: 82px;
  }
  .f-sidebar {
    display: none;
  }
  .f-top {
    height: 70px;
    padding: 0 20px;
    font-size: 13px;
  }
  .f-top-actions > .f-badge {
    display: none;
  }
  .f-top-actions {
    gap: 6px;
  }
  .f-top-actions .f-button {
    font-size: 13px;
    padding: 10px;
  }
  .f-content {
    padding: 26px 20px;
  }
  .f-heading {
    align-items: start;
    flex-wrap: wrap;
    gap: 16px;
  }
  .f-heading h1 {
    font-size: 28px;
  }
  .f-welcome {
    padding: 28px;
    grid-template-columns: 1fr 1fr;
  }
  .f-welcome h1 {
    font-size: 32px;
  }
  .f-welcome p {
    font-size: 14px;
  }
  .f-flow-art {
    padding: 10px;
  }
  .f-art-source {
    flex-wrap: wrap;
    justify-content: center;
  }
  .f-art-networks {
    gap: 9px;
  }
  .f-art-networks .f-channel {
    width: 38px;
    height: 38px;
    font-size: 11px;
  }
  .f-flow-art p {
    font-size: 10px;
  }
  .f-stats {
    gap: 10px;
  }
  .f-stats article {
    padding: 17px;
  }
  .f-stats article > span {
    font-size: 12px;
  }
  .f-stats small {
    font-size: 11px;
  }
  .f-preparation {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 15px;
  }
  .f-video-canvas {
    height: 360px;
  }
  .f-video-canvas video {
    max-height: 360px;
  }
  .f-network-tabs .f-button > span:last-child {
    font-size: 10px;
  }
  .f-date-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .f-mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--kt-surface) 93%, transparent);
    border-top: 1px solid var(--kt-line);
    backdrop-filter: blur(16px);
  }
  .f-mobile-nav .f-button {
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    font-size: 11px;
    color: var(--kt-muted-2);
    min-height: 49px;
  }
  .f-mobile-nav .f-button.selected {
    color: var(--kt-ink-2);
    background: var(--kt-line);
  }
  .f-mobile-nav .f-button[data-action='upload'] .f-icon {
    background: var(--kt-ink-2);
    color: var(--kt-surface);
    border-radius: 8px;
    width: 29px;
    height: 29px;
    padding: 4px;
  }
  .f-page-footer {
    margin-top: 24px;
  }
  .f-bulk {
    bottom: 85px;
  }
}
@media (max-width: 600px) {
  .f-content {
    padding: 22px 16px;
  }
  .f-top {
    padding: 0 16px;
  }
  .f-top > div:first-child > span {
    display: none;
  }
  .f-welcome {
    display: block;
    padding: 28px 23px;
  }
  .f-welcome h1 {
    font-size: 36px;
  }
  .f-welcome p {
    font-size: 15px;
  }
  .f-flow-art {
    display: none;
  }
  .f-stats {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 22px;
  }
  .f-stats article {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 16px 19px;
    gap: 4px;
  }
  .f-stats strong {
    grid-column: 2;
    grid-row: 1/3;
    font-size: 28px;
    align-self: center;
  }
  .f-stats article > span {
    font-size: 14px;
  }
  .f-stats small {
    font-size: 12px;
  }
  .f-project-row {
    padding: 16px;
    gap: 12px;
  }
  .f-project-row img {
    width: 44px;
    height: 56px;
  }
  .f-project-row .f-button {
    font-size: 13px;
    padding: 8px 10px;
  }
  .f-project-row .f-button .f-icon {
    display: none;
  }
  .f-project-row strong {
    font-size: 14px;
  }
  .f-project-row span:not(.f-channel) {
    font-size: 12px;
  }
  .f-preparation {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .f-video-panel {
    position: static;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .f-video-canvas {
    grid-column: 1/-1;
    height: 330px;
  }
  .f-video-canvas video {
    max-height: 330px;
  }
  .f-video-meta {
    grid-column: 1/-1;
  }
  .f-video-panel .f-small,
  .f-saved {
    grid-column: 1/-1;
  }
  .f-preparation-main {
    width: 100%;
    gap: 20px;
  }
  .f-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 12px;
    padding: 15px;
    gap: 14px;
  }
  .f-pad {
    padding: 20px;
  }
  .f-panel-heading {
    gap: 12px;
  }
  .f-panel-heading > .f-button {
    width: 100%;
  }
  .f-network-tabs .f-button > span:last-child {
    font-size: 10px;
  }
  .f-network-tabs {
    padding: 6px;
  }
  .f-date-fields {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .f-form-grid,
  .f-cta-grid,
  .f-connection-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .f-notification {
    padding: 20px 16px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .f-notification > div {
    flex-basis: calc(100% - 36px);
  }
  .f-notification > .f-button {
    margin-left: 32px;
  }
  .f-notice {
    align-items: start;
    flex-wrap: wrap;
    padding: 15px;
    font-size: 13px;
  }
  .f-calendar-toolbar {
    gap: 5px;
    padding: 15px 10px;
    flex-wrap: wrap;
  }
  .f-calendar-toolbar h2 {
    font-size: 16px;
    flex: 1;
  }
  .f-mode {
    margin-left: 0;
  }
  .f-mode .f-button {
    padding: 9px 12px;
    font-size: 13px;
  }
  .f-day {
    min-height: 90px;
    padding: 2px;
  }
  .f-calendar-week {
    font-size: 10px;
    padding: 12px 2px;
  }
  .f-day-number.f-button {
    padding: 7px;
    font-size: 12px;
    min-height: 33px;
  }
  .f-event.f-button {
    padding: 5px 3px;
  }
  .f-event strong {
    font-size: 10px;
  }
  .f-event span {
    font-size: 10px;
  }
  .f-event small {
    display: none;
  }
  .f-agenda-item {
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
  }
  .f-agenda-item > strong {
    flex-basis: 100%;
  }
  .f-media-grid {
    grid-template-columns: 1fr;
  }
  .f-media-image {
    height: 230px;
  }
  .f-overlay {
    padding: 12px;
  }
  .f-dialog {
    max-height: 94dvh;
    border-radius: 14px;
  }
  .f-dialog > header {
    padding: 18px;
  }
  .f-dialog h2 {
    font-size: 20px;
  }
  .f-dialog-body {
    padding: 18px;
  }
  .f-dialog > footer {
    padding: 16px;
  }
  .f-caption-meta {
    flex-wrap: wrap;
  }
  .f-page-footer > span:last-child {
    display: none;
  }
  .f-bulk {
    padding: 12px;
    font-size: 13px;
    gap: 12px;
  }
  .f-bulk .f-button {
    font-size: 12px;
    padding: 10px;
  }
  .f-heading h1 {
    font-size: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 850px) {
  #toast {
    bottom: calc(88px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 32px);
  }
}
.f-project-row > input[type='checkbox'] {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex-shrink: 0;
  accent-color: var(--kt-ink-2);
}
.f-source-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 22px;
}
.f-source-option {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  padding: 18px;
  border: 1px solid var(--kt-line);
  border-radius: 12px;
  background: var(--kt-surface);
  color: var(--kt-muted);
  min-width: 0;
  white-space: normal;
}
.f-source-option.selected {
  background: var(--kt-canvas);
  border-color: var(--kt-line-strong);
}
.f-source-option > span,
.f-source-option > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.f-source-option strong {
  font-size: 15px;
  color: var(--kt-ink-2);
}
.f-source-option small {
  font-size: 12px;
  color: var(--kt-muted-2);
  font-weight: 400;
  line-height: 1.5;
}
.f-source-option > .f-icon {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}
.f-file-picker {
  position: relative;
  padding: 33px 20px !important;
  gap: 10px !important;
  background: var(--kt-canvas);
}
.f-file-picker > .f-icon {
  width: 28px;
  height: 28px;
  color: var(--kt-muted);
}
.f-file-picker .f-picker-button {
  display: inline-flex;
  padding: 11px 20px;
  border-radius: 10px;
  background: var(--kt-ink-2);
  color: var(--kt-surface);
  font-size: 15px;
  font-weight: 600;
  margin-top: 7px;
  box-shadow: 0 3px 8px #25324a15;
}
.f-file-picker input[type='file'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  min-height: 0;
}
.f-file-picker:focus-within {
  outline: 3px solid var(--kt-accent);
  outline-offset: 3px;
}
.f-selected-files {
  font-size: 13px !important;
  color: var(--kt-muted) !important;
  overflow-wrap: anywhere;
  max-height: 100px;
  overflow: auto;
}
.f-drive-account {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border: 1px solid var(--kt-line);
  background: var(--kt-canvas);
  border-radius: 12px;
  margin: 0 0 22px;
}
.f-drive-account > .f-icon {
  width: 26px;
  height: 26px;
  color: var(--kt-ok);
}
.f-drive-account > div {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}
.f-drive-account strong {
  font-size: 15px;
}
.f-drive-account small {
  font-size: 13px;
  color: var(--kt-muted);
  overflow-wrap: anywhere;
}
.f-drive-empty {
  text-align: center;
  padding: 30px 16px;
  background: var(--kt-canvas);
  border: 1px dashed var(--kt-line);
  border-radius: 12px;
}
.f-drive-empty > .f-icon {
  width: 35px;
  height: 35px;
  color: var(--kt-muted-2);
}
.f-drive-empty h3 {
  font-size: 18px;
}
.f-drive-empty p {
  max-width: 400px;
  margin: 12px auto 22px;
}
.f-drive-row > span {
  overflow-wrap: anywhere;
  min-width: 0;
  flex: 1;
}
.f-drive-row > .f-button {
  flex-shrink: 0;
}
@media (max-width: 500px) {
  .f-source-options {
    grid-template-columns: 1fr;
  }
  .f-source-option {
    padding: 15px;
  }
  .f-drive-account {
    padding: 14px;
    flex-wrap: wrap;
  }
  .f-drive-account > .f-badge {
    margin-left: 40px;
  }
  .f-dialog > footer > .f-button {
    flex: 1;
  }
}

.f-drive-switcher {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.f-drive-switcher .f-field {
  flex: 1;
  min-width: 220px;
  margin: 0;
  font-size: 14px;
}
.f-drive-switcher select {
  font-size: 15px;
  cursor: pointer;
  padding-right: 32px;
  text-overflow: ellipsis;
}
.f-drive-add {
  white-space: nowrap;
  margin-bottom: 1px;
}
.f-drive-account > span > .f-icon {
  width: 24px;
  height: 24px;
  color: var(--kt-ok);
}
.f-source-option small {
  overflow-wrap: anywhere;
}
@media (max-width: 500px) {
  .f-drive-switcher {
    gap: 10px;
  }
  .f-drive-switcher .f-field {
    min-width: 0;
    flex-basis: 100%;
  }
  .f-drive-add {
    width: 100%;
  }
  .f-drive-switcher select {
    font-size: 14px;
  }
}
.f-drive-row {
  flex-wrap: wrap;
  align-items: center;
}
.f-drive-file {
  flex: 1;
  min-width: 160px;
  display: grid;
  gap: 6px;
  overflow-wrap: anywhere;
}
.f-drive-file small {
  font-size: 12px;
  color: var(--f-muted);
}
.f-drive-preview {
  flex-basis: 100%;
  background: var(--kt-canvas);
  border: 1px solid var(--f-line);
  border-radius: 12px;
  padding: 12px;
}
.f-drive-preview video {
  display: block;
  width: 100%;
  max-height: 360px;
  background: var(--kt-ink);
  border-radius: 8px;
}
.f-drive-preview p {
  margin: 10px 0 3px;
}
@media (max-width: 500px) {
  .f-drive-row > .f-actions {
    width: 100%;
  }
  .f-drive-row > .f-actions .f-button {
    flex: 1;
    font-size: 13px;
  }
  .f-drive-preview video {
    max-height: 300px;
  }
}
.f-drive-dialog {
  width: min(1060px, 100%);
}
.f-drive-dialog .f-drive-switcher {
  margin-bottom: 12px;
}
.f-drive-intro {
  margin: 0 0 20px !important;
  font-size: 14px !important;
}
.f-drive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.f-drive-card {
  border: 1px solid var(--f-line);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
  background: var(--kt-surface);
}
.f-drive-card-media {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--kt-ink-2);
  overflow: hidden;
}
.f-drive-card-media img,
.f-drive-card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.f-drive-card-media img[hidden] {
  display: none;
}
.f-drive-no-thumb {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--kt-muted-2);
}
.f-drive-no-thumb svg {
  width: 44px;
  height: 44px;
}
.f-drive-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  background: linear-gradient(transparent, #0002);
}
.f-drive-play[hidden] {
  display: none;
}
.f-drive-play span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding-left: 3px;
  border: 1px solid #ffffff80;
  border-radius: 50%;
  color: var(--kt-surface);
  background: #111b;
  font-size: 24px;
  box-shadow: 0 4px 18px #0004;
}
.f-drive-play:hover span {
  background: #111e;
  transform: scale(1.06);
}
.f-drive-play:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -4px;
}
.f-drive-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #000b;
  color: var(--kt-surface);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
  pointer-events: none;
}
.f-drive-card-media:has(video) .f-drive-duration {
  display: none;
}
.f-drive-card-info {
  padding: 14px;
  display: grid;
  gap: 7px;
}
.f-drive-card-info > strong {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f-drive-card-info > small {
  font-size: 12px;
  color: var(--f-muted);
}
.f-drive-card-info > .f-button {
  width: 100%;
  margin-top: 6px;
}
.f-drive-error {
  font-size: 12px !important;
  color: var(--kt-danger) !important;
}
.f-drive-error[hidden] {
  display: none;
}
@media (max-width: 850px) {
  .f-drive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 500px) {
  .f-drive-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .f-drive-card-media {
    aspect-ratio: 16/10;
  }
}

/* Batch release workspace: ordered queue, original, four independent review cards. */
.f-release-rule {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  background: var(--kt-surface);
  border: 1px solid var(--f-line);
  border-radius: 12px;
  margin-bottom: 22px;
  font-size: 14px;
}
.f-release-rule span {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.f-release-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.f-release-queue {
  position: sticky;
  top: 18px;
  max-height: 80dvh;
  overflow: auto;
}
.f-release-queue h2 {
  font-size: 18px;
}
.f-release-queue .f-panel-heading {
  margin-bottom: 3px;
}
.f-release-items {
  display: grid;
  gap: 10px;
}
.f-queue-item {
  border: 1px solid var(--f-line);
  border-radius: 12px;
  background: var(--kt-surface);
  overflow: hidden;
}
.f-queue-item.selected {
  border: 2px solid var(--kt-ink-2);
  box-shadow: 0 3px 12px #2221;
}
.f-queue-item > button {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
  position: relative;
}
.f-queue-item img {
  width: 40px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--kt-ink-2);
}
.f-queue-item > button > span:last-child {
  min-width: 0;
  flex: 1;
}
.f-queue-item strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
}
.f-queue-item small {
  font-size: 11px;
  color: var(--kt-muted);
}
.f-queue-number {
  position: absolute;
  top: 5px;
  left: 5px;
  background: var(--kt-ink-2);
  color: var(--kt-surface);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 11px;
}
.f-queue-arrows {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--kt-line);
}
.f-queue-arrows .f-button {
  min-height: 32px;
  padding: 3px 15px;
}
.f-release-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(300px, 1.3fr);
  align-items: start;
  gap: 20px;
}
.f-release-original {
  position: sticky;
  top: 18px;
}
.f-release-original h2 {
  font-size: 20px;
  overflow-wrap: anywhere;
  margin-top: 8px;
}
.f-release-original > video {
  display: block;
  width: 100%;
  height: 330px;
  background: var(--kt-ink);
  object-fit: contain;
}
.f-release-original .f-pad {
  padding: 18px;
}
.f-release-original summary {
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 0;
}
.f-release-original details .f-field:first-of-type {
  margin-top: 15px;
}
.f-release-networks {
  display: grid;
  gap: 20px;
  min-width: 0;
}
.f-release-network header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 16px;
}
.f-release-network header h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  margin: 0;
}
.f-release-network > video {
  width: 100%;
  height: 210px;
  display: block;
  background: var(--kt-ink);
  object-fit: contain;
}
.f-release-network .f-pad {
  padding: 18px;
}
.f-release-network .f-pad > .f-button {
  width: 100%;
}
.f-release-network.approved {
  border: 2px solid var(--kt-muted);
}
.f-release-network textarea {
  font-size: 16px;
  line-height: 1.6;
  min-height: 80px;
}
.f-release-network fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.f-release-network .f-check {
  font-size: 14px;
  margin-bottom: 16px;
}
.f-release-bottom {
  position: sticky;
  bottom: 12px;
  z-index: 15;
  margin-top: 24px;
  background: var(--kt-surface);
  border: 1px solid var(--kt-line-strong);
  border-radius: 14px;
  box-shadow: 0 5px 24px #1112;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.f-release-bottom strong {
  font-size: 16px;
}
.f-release-bottom small {
  display: block;
  max-width: 500px;
  font-size: 12px;
  color: var(--f-muted);
  margin-top: 3px;
}
.f-release-batches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.f-release-batches h2 {
  margin-top: 12px;
}
.f-drive-select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.f-drive-select input {
  width: 18px !important;
  height: 18px !important;
  min-height: 0 !important;
  accent-color: var(--kt-ink-2);
}
@media (min-width: 1600px) {
  .f-content:has(.f-release-layout) {
    max-width: 1900px;
    padding-left: 30px;
    padding-right: 30px;
  }
  .f-release-layout {
    grid-template-columns: 185px minmax(0, 1fr);
  }
  .f-release-workspace {
    grid-template-columns: minmax(240px, 0.65fr) minmax(560px, 1.7fr);
  }
  .f-release-networks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1150px) {
  .f-release-layout {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 14px;
  }
  .f-release-workspace {
    grid-template-columns: minmax(180px, 0.65fr) minmax(260px, 1fr);
    gap: 14px;
  }
  .f-queue-item > button {
    flex-wrap: wrap;
  }
  .f-queue-item img {
    width: 100%;
    height: 85px;
  }
  .f-queue-item > button > span:last-child {
    flex-basis: 100%;
  }
  .f-release-bottom {
    flex-wrap: wrap;
  }
}
@media (max-width: 1000px) {
  .f-release-layout {
    display: block;
  }
  .f-release-queue {
    position: static;
    max-height: none;
    margin-bottom: 20px;
  }
  .f-release-items {
    display: flex;
    overflow-x: auto;
    padding: 2px 0 10px;
  }
  .f-queue-item {
    min-width: 140px;
    max-width: 140px;
  }
  .f-release-workspace {
    grid-template-columns: minmax(200px, 0.7fr) minmax(280px, 1fr);
  }
}
@media (max-width: 600px) {
  .f-release-workspace {
    display: block;
  }
  .f-release-original {
    position: static;
    margin-bottom: 20px;
  }
  .f-release-original > video {
    height: 300px;
  }
  .f-release-networks {
    grid-template-columns: 1fr;
  }
  .f-release-network > video {
    height: 250px;
  }
  .f-release-bottom {
    bottom: 85px;
    padding: 15px;
    gap: 12px;
    position: static;
  }
  .f-release-bottom .f-actions {
    width: 100%;
  }
  .f-release-bottom .f-actions .f-button {
    flex: 1;
    font-size: 14px;
  }
  .f-release-rule {
    font-size: 13px;
  }
  .f-release-batches {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1200px) {
  .f-content:has(.f-release-layout) {
    padding: 24px;
    max-width: 1900px;
  }
  .f-content:has(.f-release-layout) .f-heading {
    margin-bottom: 18px;
  }
  .f-content:has(.f-release-layout) .f-heading h1 {
    font-size: 28px;
  }
  .f-release-layout {
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 18px;
  }
  .f-release-workspace {
    grid-template-columns: minmax(210px, 0.6fr) minmax(560px, 1.5fr);
    gap: 18px;
  }
  .f-release-networks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .f-release-network > video {
    height: 170px;
  }
  .f-release-network header {
    padding: 12px;
  }
  .f-release-network .f-pad {
    padding: 15px;
  }
  .f-release-network header .f-badge {
    font-size: 10px;
  }
  .f-release-network header h2 {
    font-size: 15px;
  }
}
.f-release-network summary {
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 0;
}
.f-release-network details {
  margin: 8px 0 15px;
}
.f-release-network details .f-field:first-of-type {
  margin-top: 14px;
}

/* Brand marks keep the existing badge footprint. Status also has a text/symbol cue. */
.f-channel svg {
  display: block;
  width: 65%;
  height: 65%;
  fill: currentColor;
  flex-shrink: 0;
}
.f-channel {
  --channel-cutout: var(--kt-surface);
}
.f-event .f-channel {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 0;
  background: transparent;
  --channel-cutout: var(--event-bg, var(--kt-surface));
}
.f-event strong {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.f-event .f-channel svg {
  width: 17px;
  height: 17px;
}
.f-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 14px;
}
.f-calendar-legend > span {
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid var(--event-border);
}
.f-status-published {
  --event-bg: #e5f5eb;
  --event-border: #80b998;
  --event-text: #165b34;
}
.f-status-pending {
  --event-bg: #fff5ce;
  --event-border: #ddbc58;
  --event-text: #70520b;
}
.f-status-overdue {
  --event-bg: #ffeded;
  --event-border: #e5a0a0;
  --event-text: #9a2929;
}
.f-status-cancelled {
  --event-bg: var(--kt-canvas);
  --event-border: var(--kt-line-strong);
  --event-text: var(--kt-muted);
}
.f-event.f-button,
.f-calendar-legend > span {
  background: var(--event-bg);
  color: var(--event-text);
  border-color: var(--event-border);
}
.f-event.f-button:hover {
  filter: brightness(0.96);
}
.f-event small {
  color: inherit;
}
.f-agenda-item {
  border-left: 4px solid var(--event-border);
  padding-left: 14px;
}
.f-agenda-item > span > small {
  color: var(--event-text);
  font-weight: 600;
}
.f-button.danger {
  background: var(--kt-surface);
  color: var(--kt-danger);
  border-color: color-mix(in srgb, var(--kt-danger) 35%, transparent);
}
.f-button.danger:hover {
  background: var(--kt-canvas);
}
.f-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.f-delete-impact {
  max-height: 220px;
  overflow: auto;
  padding-left: 22px;
}
.f-delete-impact li {
  padding: 4px 0;
}
.f-queue-arrows {
  flex-wrap: wrap;
}
.f-queue-arrows .f-button {
  padding: 5px 9px;
}
.f-toolbar {
  flex-wrap: wrap;
}
.f-bulk {
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .f-project-row {
    flex-wrap: wrap;
  }
  .f-project-row > div:first-of-type {
    flex: 1;
    min-width: 100px;
  }
  .f-project-row > .f-button {
    min-height: 40px;
  }
  .f-calendar-legend {
    font-size: 12px;
    gap: 6px;
  }
  .f-event .f-channel {
    width: 16px;
    height: 16px;
    min-width: 16px;
  }
  .f-event .f-channel svg {
    width: 14px;
    height: 14px;
  }
  .f-event small {
    display: block;
    font-size: 10px;
    white-space: normal;
  }
  .f-queue-arrows .f-button {
    min-height: 40px;
  }
  .f-bulk .f-button {
    min-height: 44px;
  }
}

.f-agenda-item > span > small {
  display: table;
  background: var(--event-bg);
  border: 1px solid var(--event-border);
  border-radius: 6px;
  padding: 3px 7px;
  margin-top: 5px;
}
@media (max-width: 600px) {
  .f-manage-row {
    display: grid;
    grid-template-columns: 18px 42px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 16px;
  }
  .f-manage-row > input {
    grid-column: 1;
    grid-row: 1;
  }
  .f-manage-row > img {
    grid-column: 2;
    grid-row: 1;
    width: 42px;
    height: 54px;
  }
  .f-manage-row > div:first-of-type {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
  }
  .f-manage-row > .f-row-channels {
    display: flex;
    grid-column: 2 / 4;
    grid-row: 2;
    gap: 6px;
  }
  .f-manage-row .f-channel {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }
  .f-manage-row > [data-action='open'] {
    grid-column: 4;
    grid-row: 1;
  }
  .f-manage-row > [data-action='delete-project'] {
    grid-column: 4;
    grid-row: 2;
  }
  .f-manage-row strong {
    overflow-wrap: anywhere;
  }
}
.f-project-row > div:first-of-type {
  flex: 1;
  min-width: 0;
}
.f-project-row > .f-row-channels {
  flex: 0 0 auto;
}

/* Independent navigation scroll; the work surface keeps the document scrollbar. */
.f-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 244px;
  height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
  padding: 22px 16px;
  gap: 12px;
  z-index: 25;
}
.f-sidebar > .f-brand,
.f-sidebar > .f-sidebar-bottom {
  flex-shrink: 0;
}
.f-sidebar > nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  align-content: start;
  grid-auto-rows: max-content;
}
.workspace-main {
  grid-column: 2;
}
.f-sidebar-tip {
  display: none;
}
.f-sidebar nav .f-button {
  min-height: 40px;
  padding: 9px 12px;
}
.f-sidebar-bottom {
  gap: 10px;
}
.f-sidebar .f-brand {
  margin-bottom: 8px;
}
.f-sidebar .f-user {
  min-width: 0;
}
.f-sidebar .f-user > span:nth-child(2) {
  min-width: 0;
}
.f-sidebar .f-user small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.f-library-organizer {
  margin-bottom: 24px;
}
.f-library-organizer > .f-field {
  max-width: 440px;
  margin: 16px 0;
}
.f-library-order {
  display: grid;
  gap: 8px;
  max-height: 430px;
  overflow: auto;
}
.f-library-order-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--kt-canvas);
  border: 1px solid var(--f-line);
  border-radius: 10px;
  cursor: grab;
}
.f-library-order-item img {
  width: 48px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
}
.f-library-order-item > div:first-of-type {
  flex: 1;
  min-width: 0;
}
.f-library-order-item strong {
  overflow-wrap: anywhere;
}
.f-library-order-item small {
  display: block;
  color: var(--f-muted);
  font-size: 13px;
}
.f-single-edit {
  grid-template-columns: 1fr !important;
}
.f-single-edit > .f-release-queue {
  display: none;
}
.f-media-image,
.f-drive-card-media {
  position: relative;
}
.f-hover-video {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--kt-ink);
  pointer-events: none;
}
.f-media-image > span,
.f-drive-play,
.f-drive-duration {
  z-index: 2;
}
.f-drive-play {
  position: absolute;
}
.f-drive-inline-video { z-index: 1; }
.f-drive-preview-controls {
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 40px;
  align-items: center;
  gap: 5px;
  padding: 6px;
  color: #fff;
  background: linear-gradient(transparent, #111e 28%);
}
.f-drive-preview-controls[hidden], .f-drive-preview-loading[hidden] { display: none; }
.f-drive-preview-controls button {
  border: 0;
  border-radius: 7px;
  background: #1118;
  color: #fff;
  min-height: 44px;
  min-width: 40px;
  padding: 0;
  cursor: pointer;
  font: 600 15px system-ui, sans-serif;
}
.f-drive-preview-controls input[type="range"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  accent-color: #d6e4c8;
  cursor: pointer;
}
.f-drive-preview-controls span { white-space: nowrap; font: 11px system-ui, sans-serif; }
.f-drive-preview-controls :focus-visible { outline: 2px solid white; outline-offset: -2px; }
.f-drive-preview-loading {
  position: absolute;
  top: 42%;
  left: 12px;
  right: 12px;
  z-index: 3;
  text-align: center;
  color: #fff;
  background: #111b;
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  pointer-events: none;
}
.f-folder-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 20px 0;
  font-weight: 600;
}
.f-folder-list {
  display: grid;
  gap: 8px;
}
.f-folder-list > .f-button {
  justify-content: flex-start;
  white-space: normal;
  text-align: left;
  overflow-wrap: anywhere;
}
.f-folder-list > .f-button > .f-icon:last-child {
  margin-left: auto;
}
.f-history-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.f-history-filters > .f-field {
  margin: 0;
}
.f-history-filters > div {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 15px;
}
.f-history-filters small,
.f-history-filters p {
  font-size: 13px;
  color: var(--f-muted);
}
.f-history-filters > p {
  grid-column: 1/-1;
  margin: 0;
}
.f-history-date {
  display: block;
  color: var(--kt-muted);
  font-size: 13px;
  margin-top: 5px;
}
.f-history-details {
  margin-top: 10px;
}
.f-history-details > summary {
  font-size: 13px !important;
  font-weight: 500 !important;
}
.f-history-network {
  padding: 12px 0;
  border-top: 1px solid var(--f-line);
}
.f-history-network > strong {
  display: flex;
  gap: 7px;
  align-items: center;
}
.f-history-network > p {
  font-size: 13px;
  margin: 5px 0;
}
.f-history-network > small {
  display: block;
  font-size: 12px;
  color: var(--f-muted);
}
.f-metrics {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.f-metrics > span {
  display: grid !important;
  min-width: 65px;
  font-size: 12px !important;
  color: var(--f-muted);
}
.f-metrics b {
  font-size: 20px;
  color: var(--f-ink);
}
@media (min-width: 851px) and (max-width: 1150px) {
  .f-sidebar {
    width: 216px;
  }
}
@media (min-width: 851px) and (max-height: 680px) {
  .f-sidebar {
    padding: 14px 12px;
    gap: 8px;
  }
  .f-sidebar nav {
    gap: 2px;
  }
  .f-sidebar nav .f-button {
    min-height: 34px;
    padding: 6px 10px;
  }
  .f-sidebar .f-brand {
    margin: 0;
  }
  .f-sidebar .f-user {
    padding: 6px 0;
  }
  .f-sidebar-bottom {
    gap: 0;
  }
}
@media (max-width: 1000px) {
  .f-history-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 850px) {
  .workspace-main {
    grid-column: auto;
  }
  .f-library-organizer .f-panel-heading > .f-button {
    width: 100%;
  }
  .f-library-order-item {
    flex-wrap: wrap;
  }
  .f-library-order-item > .f-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .f-history-details .f-button {
    white-space: normal;
  }
  .f-history-network {
    overflow-wrap: anywhere;
  }
}
@media (max-width: 600px) {
  .f-manage-row > div:first-of-type {
    grid-column: 3/-1;
  }
  .f-manage-row > [data-action='open'] {
    grid-column: 3;
    grid-row: 3;
    justify-self: start;
  }
  .f-manage-row > [data-action='delete-project'] {
    grid-column: 4;
    grid-row: 3;
  }
  .f-manage-row > .f-row-channels {
    grid-column: 3/-1;
    grid-row: 2;
  }
  .f-history-filters select {
    padding-left: 10px;
    padding-right: 20px;
  }
}

.f-drive-loading {
  text-align: center;
  padding: 32px 20px;
  display: grid;
  justify-items: center;
  gap: 15px;
}
.f-drive-loading strong {
  overflow-wrap: anywhere;
  max-width: 100%;
}
.f-drive-loading p {
  max-width: 440px;
  margin: 0;
  color: var(--f-muted);
  line-height: 1.6;
}
.f-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--kt-line);
  border-top-color: var(--kt-ink-2);
  border-radius: 50%;
  animation: frame-loading 0.85s linear infinite;
}
@keyframes frame-loading {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .f-loading-spinner {
    animation: none;
  }
}

/* 0.6.4: visible preparation, brand colors and editable date filters. */
.f-channel[data-network='instagram'] {
  background: linear-gradient(35deg, #ffb94f, #e52c75 55%, #8054d8);
  color: var(--kt-surface);
  border-color: transparent;
  --channel-cutout: var(--kt-surface);
}
.f-channel[data-network='facebook'] {
  background: var(--kt-canvas);
  color: #1877f2;
  border-color: #d5e6ff;
  --channel-cutout: var(--kt-surface);
}
.f-channel[data-network='youtube'] {
  background: var(--kt-canvas);
  color: #ed153b;
  border-color: #ffd9df;
  --channel-cutout: var(--kt-surface);
}
.f-channel[data-network='tiktok'] {
  background: var(--kt-ink);
  color: var(--kt-surface);
  border-color: var(--kt-ink);
  --channel-cutout: var(--kt-ink);
}
.f-channel[data-network='tiktok'] svg {
  filter: drop-shadow(-0.6px -0.4px 0 #25f4ee) drop-shadow(0.6px 0.4px 0 #fe2c55);
}
.f-preparation-loading {
  padding: 32px;
  align-self: start;
  position: sticky;
  top: 24px;
  min-width: 0;
  box-shadow: 0 6px 28px #27334809;
  border-color: var(--kt-line-strong);
}
.f-preparation-loading-head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 13px;
  padding: 12px 0 24px;
}
.f-preparation-loading .f-loading-spinner {
  width: 42px;
  height: 42px;
  border-width: 4px;
  border-top-color: var(--kt-accent);
}
.f-preparation-loading h2 {
  font-size: 24px;
  line-height: 1.25;
  margin: 0;
}
.f-preparation-loading p {
  line-height: 1.6;
  margin: 0 0 12px;
}
.f-preparation-loading-head > strong {
  font-size: 15px;
  color: var(--kt-ink-2);
}
.f-preparation-network-list {
  border: 1px solid var(--f-line);
  border-radius: 14px;
  margin: 0 0 20px;
  overflow: hidden;
}
.f-preparation-network-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--kt-canvas);
}
.f-preparation-network-list > div + div {
  border-top: 1px solid var(--f-line);
}
.f-preparation-network-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.f-preparation-network-list small {
  font-size: 13px;
  color: var(--kt-muted);
  text-align: right;
}
.f-preparation-connection:empty {
  display: none;
}
.f-preparation-connection {
  color: var(--kt-danger);
}
.f-history-filters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.f-history-filters > .f-filter-networks {
  grid-column: 1/-1;
  border: 0;
  padding: 0 0 18px;
  margin: 0 0 3px;
  border-bottom: 1px solid var(--f-line);
}
.f-filter-networks legend {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.f-filter-networks > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.f-network-choice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--kt-line);
  border-radius: 12px;
  background: var(--kt-surface);
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  color: var(--kt-muted);
  min-height: 44px;
}
.f-network-choice.selected {
  border-color: var(--kt-accent);
  background: var(--kt-canvas);
  color: var(--kt-ink);
  box-shadow: inset 0 0 0 1px var(--kt-accent);
}
.f-network-choice:focus-visible {
  outline: 3px solid var(--kt-accent);
  outline-offset: 2px;
}
.f-network-stack {
  display: inline-flex;
  gap: 3px;
}
.f-network-choice .f-channel {
  width: 24px;
  height: 24px;
  min-width: 24px;
}
.f-network-choice .f-channel svg {
  width: 16px;
  height: 16px;
}
.f-filter-networks > small {
  display: block;
  margin-top: 10px;
}
.f-history-filters > .f-filter-date {
  grid-column: auto;
  display: block;
}
.f-filter-date > label {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 500;
}
.f-date-input {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.f-date-input > input[data-date-text] {
  width: 100%;
  padding-right: 42px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}
.f-date-input > button {
  position: absolute;
  right: 5px;
  top: 5px;
  bottom: 5px;
  width: 34px;
  display: grid;
  place-items: center;
  background: var(--kt-surface);
  border: 0;
  border-radius: 6px;
  color: var(--kt-muted);
  cursor: pointer;
}
.f-date-input > button:hover {
  background: var(--kt-canvas);
}
.f-date-input > button:focus-visible {
  outline: 2px solid var(--kt-accent);
}
.f-date-input .f-date-native {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  pointer-events: none;
  min-height: 0;
}
.f-date-error {
  display: block;
  color: var(--kt-danger) !important;
  margin-top: 6px;
}
.f-date-error:empty {
  display: none;
}
.f-date-input > input[aria-invalid='true'] {
  border-color: var(--kt-danger);
}
.f-history-filters > .f-history-filter-actions {
  grid-column: 1/-1;
}
@media (max-width: 1150px) {
  .f-history-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .f-preparation-loading {
    padding: 24px;
  }
}
@media (max-width: 600px) {
  .f-history-filters {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .f-network-choice {
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
    font-size: 13px;
    padding: 8px;
  }
  .f-network-choice[data-history-network='all'] {
    flex-basis: 100%;
  }
  .f-preparation-loading {
    position: static;
    padding: 22px 18px;
  }
  .f-preparation-loading h2 {
    font-size: 24px;
  }
  .f-preparation-network-list > div {
    padding: 12px;
    gap: 8px;
  }
  .f-preparation-network-list small {
    font-size: 12px;
  }
  .f-history-filters > .f-history-filter-actions {
    flex-wrap: wrap;
  }
}

.f-social-setup {
  border-color: var(--kt-line-strong);
  background: linear-gradient(120deg, var(--kt-surface), var(--kt-canvas));
}
.f-social-setup > .f-field {
  max-width: 660px;
  margin: 20px 0 14px;
}
.f-social-profile {
  border-top: 1px solid var(--f-line);
  margin-top: 22px;
  padding-top: 20px;
}
.f-social-profile > .f-field {
  max-width: 660px;
}
.f-social-profile > .f-small {
  margin-top: 16px;
}
.f-social-setup .f-actions {
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .f-social-setup .f-actions > .f-button,
  .f-social-profile > .f-button {
    width: 100%;
  }
}

/* 0.6.6: original brand assets and separation between navigation label and selection. */
.f-nav-label {
  margin: 0;
  padding-left: 13px;
  line-height: 1.5;
  flex-shrink: 0;
}
.f-sidebar nav {
  margin-top: 4px;
}
.f-channel[data-network] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  padding: 2px;
  color: inherit;
}
.f-channel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}
.f-release-network .f-pad > .f-button[download] {
  margin-bottom: 12px;
}
/* 0.6.7: centered editing hub, batch selection and one uninterrupted import queue. */
.f-editing-hub {
  max-width: 1120px;
  margin: 0 auto;
}
.f-editing-hub > .f-heading {
  justify-content: center;
  text-align: center;
  margin: 24px auto 36px;
}
.f-editing-hub > .f-heading .f-actions:empty {
  display: none;
}
.f-editing-hub.is-empty {
  min-height: calc(100dvh - 220px);
  display: flex;
  flex-direction: column;
}
.f-editing-hub.is-empty .f-release-batches {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 0 20px 100px;
}
.f-editing-hub.is-empty .f-empty {
  max-width: 500px;
  margin: 0 auto;
}
.f-source-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.f-drive-card.selected {
  border-color: var(--kt-accent);
  box-shadow: 0 0 0 2px var(--kt-accent);
}
.f-drive-grid.selecting .f-drive-card-info {
  cursor: pointer;
}
.f-drive-grid.selecting .f-drive-card-info:hover {
  background: var(--kt-canvas);
}
.f-import-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.f-import-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--kt-line);
  border-radius: 12px;
  background: var(--kt-canvas);
}
.f-import-item > div {
  min-width: 0;
  flex: 1;
}
.f-import-item strong {
  display: block;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.f-import-item small {
  display: block;
  color: var(--kt-muted);
  margin-top: 5px;
}
.f-import-item p {
  margin: 8px 0 0 !important;
  font-size: 13px !important;
}
.f-import-symbol {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--kt-ok);
}
.f-import-symbol .f-loading-spinner {
  width: 20px;
  height: 20px;
}
.f-import-item.waiting .f-loading-spinner {
  animation: none;
  border-color: var(--kt-line-strong);
  border-top-color: var(--kt-muted-2);
}
.f-import-item.reused {
  background: var(--kt-canvas);
  border-color: color-mix(in srgb, var(--kt-pending) 35%, transparent);
}
.f-import-item.failed {
  background: var(--kt-canvas);
  border-color: color-mix(in srgb, var(--kt-danger) 35%, transparent);
}
.f-import-item.failed .f-import-symbol {
  color: var(--kt-danger);
}
.f-reuse-history,
.f-reuse-warning {
  color: var(--kt-pending) !important;
}
.f-import-item.ready {
  background: var(--kt-canvas);
}
@media (max-width: 650px) {
  .f-source-options {
    grid-template-columns: 1fr;
  }
  .f-editing-hub > .f-heading {
    margin-top: 10px;
  }
  .f-editing-hub.is-empty .f-release-batches {
    padding: 0 0 50px;
  }
  .f-import-item {
    padding: 12px;
  }
}
.f-media-card.selected {
  border-color: var(--kt-accent);
  box-shadow: 0 0 0 2px var(--kt-accent);
}
.f-media-card.selected .f-media-info {
  background: var(--kt-canvas);
}
.f-editing-hub:not(.is-empty) .f-release-batches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.f-editing-hub:not(.is-empty) .f-release-batches > .f-panel {
  flex: 0 1 360px;
  width: 100%;
  min-width: 0;
}