@import url('./main-layout.css');

:root {
  --app-bg: #17181b;
  --app-surface-1: #1d1e22;
  --app-surface-2: #24252a;
  --app-border: #2e3035;
  --app-border-strong: #3b3d43;
  --app-text: #e6e7ea;
  --app-muted: #a7a9b0;
  --app-accent: #7ab0e2;
  --app-input-icon: #c3cdd8;
  --app-radius-control-sm: 12px;
  --app-radius-control-md: 14px;
  --app-radius-control-lg: 16px;
  --app-radius-control-xl: 20px;
  --app-radius-control-2xl: 22px;
  --app-radius-pill: 999px;
  --app-button-min-height: 42px;
  --app-button-min-height-compact: 38px;
  --app-button-padding-inline: 16px;
  --app-button-padding-inline-compact: 12px;
  --app-button-border: rgba(255, 255, 255, 0.07);
  --app-button-border-hover: rgba(255, 255, 255, 0.13);
  --app-button-surface: linear-gradient(180deg, #27282d 0%, #212226 100%);
  --app-button-surface-hover: linear-gradient(180deg, #2d2e34 0%, #26272c 100%);
  --app-button-text: #dfe0e4;
  --app-button-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --app-button-primary-border: #4a4c53;
  --app-button-primary-surface: linear-gradient(180deg, #dcdde1 0%, #c9cbd0 100%);
  --app-button-primary-surface-hover: linear-gradient(180deg, #e4e5e8 0%, #d3d5d9 100%);
  --app-button-primary-text: #1a1b1f;
  --app-button-danger-border: rgba(150, 96, 96, 0.45);
  --app-button-danger-surface: linear-gradient(180deg, #2a1f20 0%, #221a1b 100%);
  --app-button-danger-surface-hover: linear-gradient(180deg, #322425 0%, #291e1f 100%);
  --app-button-danger-text: #ecd9d9;
  --app-button-transition: 180ms ease;

  --lumo-base-color: var(--app-bg);
  --lumo-body-text-color: var(--app-text);
  --lumo-header-text-color: var(--app-text);
  --lumo-primary-text-color: var(--app-text);
  --lumo-secondary-text-color: var(--app-muted);
  --lumo-primary-color: var(--app-accent);
  --lumo-primary-color-10pct: rgba(122, 176, 226, 0.16);
  --lumo-contrast-10pct: rgba(255, 255, 255, 0.08);
  --lumo-contrast-20pct: rgba(255, 255, 255, 0.16);
  --lumo-border-radius-s: var(--app-radius-control-sm);
  --lumo-border-radius-m: var(--app-radius-control-lg);
  --lumo-border-radius-l: var(--app-radius-control-2xl);
}

html,
body {
  background: var(--app-bg);
  color: var(--app-text);
}

/* Global scrollbar theme */
* {
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a #1b1c1f;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #1b1c1f;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3f3f3f 0%, #2e2f32 100%);
  border-radius: 999px;
  border: 2px solid #1b1c1f;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #565656 0%, #3f3f3f 100%);
}

vaadin-app-layout,
vaadin-app-layout::part(drawer),
vaadin-app-layout::part(navbar) {
  background: var(--app-bg);
  color: var(--app-text);
}

vaadin-side-nav-item::part(content) {
  border-radius: 10px;
}

vaadin-side-nav-item[current]::part(content) {
  background: rgba(122, 176, 226, 0.18);
}

vaadin-text-field::part(prefix),
vaadin-combo-box::part(prefix),
vaadin-email-field::part(prefix),
vaadin-number-field::part(prefix),
vaadin-password-field::part(prefix),
vaadin-combo-box::part(toggle-button),
vaadin-date-picker::part(toggle-button),
vaadin-time-picker::part(toggle-button),
vaadin-date-time-picker::part(toggle-button),
vaadin-number-field::part(increase-button),
vaadin-number-field::part(decrease-button) {
  color: var(--app-input-icon);
}

vaadin-text-field vaadin-icon,
vaadin-combo-box vaadin-icon,
vaadin-email-field vaadin-icon,
vaadin-number-field vaadin-icon,
vaadin-password-field vaadin-icon,
vaadin-date-picker vaadin-icon,
vaadin-time-picker vaadin-icon,
vaadin-date-time-picker vaadin-icon {
  color: var(--app-input-icon);
}

.asmu-login-page {
  min-height: 100vh;
  background: #131417;
  overflow: hidden;
}

.asmu-login-split {
  display: grid;
  grid-template-columns: minmax(480px, 0.42fr) minmax(0, 0.58fr);
  width: 100%;
  height: 100vh;
  min-width: 0;
  min-height: 0;
}

.asmu-login-form-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 28px;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(28px, 4vw, 56px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow-y: auto;
  background:
    radial-gradient(circle at top left, rgba(122, 176, 226, 0.12) 0%, rgba(122, 176, 226, 0) 34%),
    linear-gradient(180deg, #1a1b1e 0%, #141518 100%);
}

.asmu-login-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  width: min(100%, 492px);
  min-width: 0;
  margin-top: clamp(4px, 2vh, 18px);
}

.asmu-login-logo {
  width: 104px;
  height: 104px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.28);
  box-sizing: border-box;
  object-fit: contain;
}

.asmu-login-brand-text {
  display: grid;
  gap: 9px;
  justify-items: start;
}

.asmu-login-brand-name {
  color: #e8e9eb;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
}

.asmu-login-product-name {
  color: rgba(232, 233, 236, 0.62);
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.asmu-login-form-shell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100%, 492px);
  min-height: 0;
}

.asmu-login-heading {
  margin: 0;
  color: #e8e9eb;
  font-size: clamp(2.2rem, 1.9rem + 1vw, 3.1rem);
  line-height: 1;
}

.asmu-login-copy {
  max-width: 40ch;
  margin: 14px 0 28px;
  color: rgba(232, 233, 236, 0.68);
  font-size: 1rem;
  line-height: 1.55;
}

.asmu-login-form {
  width: 100%;
  color: #e8e9eb;
  --lumo-primary-color: #7ab0e2;
  --lumo-primary-text-color: #e8e9eb;
  --lumo-body-text-color: #e8e9eb;
  --lumo-secondary-text-color: rgba(232, 233, 236, 0.68);
  --lumo-base-color: transparent;
  --lumo-contrast-10pct: rgba(255, 255, 255, 0.08);
  --lumo-contrast-20pct: rgba(255, 255, 255, 0.16);
}

.asmu-login-card {
  position: relative;
  gap: 18px;
  padding: 0;
}

.asmu-login-card::before {
  content: none;
}

.asmu-login-form::part(form) {
  width: 100%;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.asmu-login-form::part(form-title) {
  margin: 0 0 18px;
  color: #e8e9eb;
  font-size: 1.18rem;
  font-weight: 800;
}

.asmu-login-form::part(error-message) {
  margin-bottom: 16px;
  border-radius: 16px;
  background: rgba(255, 87, 87, 0.12);
  color: #ffdede;
}

.asmu-login-form-frame {
  position: relative;
  width: 100%;
}

.asmu-login-forgot-inline-link {
  position: absolute;
  top: 162px;
  right: 2px;
  z-index: 2;
  color: rgba(232, 233, 236, 0.62);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.asmu-login-forgot-inline-link:hover {
  color: #e8e9eb;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.asmu-login-card vaadin-text-field,
.asmu-login-card vaadin-email-field,
.asmu-login-card vaadin-password-field,
.asmu-login-card vaadin-combo-box {
  --vaadin-input-field-background: transparent;
  --vaadin-input-field-border-width: 0;
  --vaadin-input-field-label-color: rgba(255, 255, 255, 0.72);
  --vaadin-input-field-value-color: #e8e9eb;
  --vaadin-input-field-autofill-color: #e8e9eb;
  --vaadin-input-field-autofill-background: #202124;
  --vaadin-input-field-button-text-color: rgba(232, 233, 236, 0.78);
  --vaadin-input-field-helper-color: rgba(255, 255, 255, 0.5);
  --vaadin-input-field-placeholder-color: rgba(255, 255, 255, 0.42);
}

.asmu-login-card vaadin-text-field::part(label),
.asmu-login-card vaadin-email-field::part(label),
.asmu-login-card vaadin-password-field::part(label),
.asmu-login-card vaadin-combo-box::part(label) {
  color: rgba(232, 233, 236, 0.72);
  font-size: 0.86rem;
  font-weight: 700;
}

.asmu-login-card vaadin-text-field::part(input-field),
.asmu-login-card vaadin-email-field::part(input-field),
.asmu-login-card vaadin-password-field::part(input-field),
.asmu-login-card vaadin-combo-box::part(input-field) {
  --vaadin-input-field-value-color: #e8e9eb;
  --vaadin-input-field-autofill-color: #e8e9eb;
  --vaadin-input-field-button-text-color: rgba(232, 233, 236, 0.78);
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--app-radius-control-lg);
  background: linear-gradient(180deg, #242528 0%, #1e1e22 100%);
  color: #e8e9eb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 24px rgba(0, 0, 0, 0.2);
}

.asmu-login-card vaadin-text-field:hover::part(input-field),
.asmu-login-card vaadin-email-field:hover::part(input-field),
.asmu-login-card vaadin-password-field:hover::part(input-field),
.asmu-login-card vaadin-combo-box:hover::part(input-field) {
  border-color: rgba(255, 255, 255, 0.2);
}

.asmu-login-card vaadin-text-field[focused]::part(input-field),
.asmu-login-card vaadin-email-field[focused]::part(input-field),
.asmu-login-card vaadin-password-field[focused]::part(input-field),
.asmu-login-card vaadin-combo-box[focused]::part(input-field) {
  border-color: rgba(122, 176, 226, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(122, 176, 226, 0.13),
    0 12px 30px rgba(0, 0, 0, 0.28);
}

.asmu-login-card vaadin-text-field input[slot="input"],
.asmu-login-card vaadin-email-field input[slot="input"],
.asmu-login-card vaadin-password-field input[slot="input"],
.asmu-login-card vaadin-combo-box input[slot="input"] {
  color: #e8e9eb !important;
  -webkit-text-fill-color: #e8e9eb !important;
  caret-color: #e8e9eb;
}

.asmu-login-card vaadin-text-field input[slot="input"]:autofill,
.asmu-login-card vaadin-email-field input[slot="input"]:autofill,
.asmu-login-card vaadin-password-field input[slot="input"]:autofill,
.asmu-login-card vaadin-combo-box input[slot="input"]:autofill,
.asmu-login-card vaadin-text-field input[slot="input"]:-webkit-autofill,
.asmu-login-card vaadin-email-field input[slot="input"]:-webkit-autofill,
.asmu-login-card vaadin-password-field input[slot="input"]:-webkit-autofill,
.asmu-login-card vaadin-combo-box input[slot="input"]:-webkit-autofill {
  border-radius: var(--app-radius-control-lg);
  color: #e8e9eb !important;
  -webkit-text-fill-color: #e8e9eb !important;
  caret-color: #e8e9eb;
  -webkit-box-shadow: 0 0 0 1000px #202124 inset;
  transition: background-color 999999s ease-out;
}

.asmu-auth-form-stack {
  display: grid;
  gap: 16px;
  width: 100%;
}

.asmu-register-form-layout {
  width: 100%;
}

.asmu-register-form-layout vaadin-text-field,
.asmu-register-form-layout vaadin-email-field,
.asmu-register-form-layout vaadin-password-field,
.asmu-register-form-layout vaadin-combo-box {
  width: 100%;
}

.asmu-auth-form-stack vaadin-text-field,
.asmu-auth-form-stack vaadin-email-field,
.asmu-auth-form-stack vaadin-password-field,
.asmu-auth-form-stack vaadin-combo-box {
  width: 100%;
}

.asmu-auth-status-message {
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(122, 176, 226, 0.22);
  border-radius: var(--app-radius-control-lg);
  background: rgba(122, 176, 226, 0.1);
  color: rgba(235, 247, 255, 0.92);
  font-size: 0.9rem;
  line-height: 1.4;
}

.asmu-auth-status-message-error {
  border-color: rgba(255, 87, 87, 0.26);
  background: rgba(255, 87, 87, 0.12);
  color: #ffdede;
}

.asmu-auth-primary-button {
  justify-self: stretch;
}

.asmu-auth-secondary-button,
.asmu-auth-link {
  justify-self: stretch;
}

.asmu-auth-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.asmu-auth-inline-note {
  justify-self: center;
  color: rgba(232, 233, 236, 0.58);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
}

.asmu-auth-inline-link {
  color: rgba(232, 233, 236, 0.88);
  font-weight: 700;
  text-decoration: none;
}

.asmu-auth-inline-link:hover {
  color: #e8e9eb;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.asmu-login-form vaadin-button[slot="submit"],
.asmu-login-form vaadin-button[slot="forgot-password"],
.two-factor-inline-form vaadin-button[theme~="primary"],
.two-factor-inline-form vaadin-button[theme~="tertiary"],
.asmu-auth-primary-button,
.asmu-auth-secondary-button,
.asmu-auth-link {
  width: 100%;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  --vaadin-button-height: 44px;
  --vaadin-button-padding: 0 var(--app-button-padding-inline);
  --vaadin-button-font-size: 0.95rem;
  --vaadin-button-font-weight: 600;
  --vaadin-button-line-height: 1.2;
}

.asmu-login-form vaadin-button[slot="submit"]::part(label),
.asmu-login-form vaadin-button[slot="forgot-password"]::part(label),
.two-factor-inline-form vaadin-button[theme~="primary"]::part(label),
.two-factor-inline-form vaadin-button[theme~="tertiary"]::part(label),
.asmu-auth-primary-button::part(label),
.asmu-auth-secondary-button::part(label) {
  align-items: center;
  line-height: 1.2;
}

.two-factor-inline-form {
  display: grid;
  gap: 16px;
  width: 100%;
}

.two-factor-inline-form vaadin-button[theme~="tertiary"] {
  color: rgba(232, 233, 236, 0.78);
}

.asmu-login-footer-note {
  width: min(100%, 460px);
  color: rgba(232, 233, 236, 0.46);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.asmu-login-video-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 25%, rgba(122, 176, 226, 0.2), transparent 38%),
    linear-gradient(135deg, #101014 0%, #050506 100%);
}

.asmu-login-video-panel::before,
.asmu-login-video-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.asmu-login-video-panel::before {
  background:
    linear-gradient(90deg, rgba(19, 20, 23, 0.72) 0%, rgba(19, 20, 23, 0.2) 18%, rgba(19, 20, 23, 0) 46%),
    linear-gradient(180deg, rgba(19, 20, 23, 0.46) 0%, rgba(19, 20, 23, 0) 28%, rgba(19, 20, 23, 0.5) 100%),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.16), transparent 18%),
    radial-gradient(circle at 24% 82%, rgba(122, 176, 226, 0.16), transparent 24%);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 0 140px rgba(0, 0, 0, 0.36);
}

.asmu-login-video-panel::after {
  opacity: 0.18;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.12) 46%, transparent 58%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 90px);
  mix-blend-mode: screen;
}

.asmu-login-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.12) brightness(0.72);
  transform: scale(1.02);
}

.asmu-login-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(19, 20, 23, 0.28) 0%, rgba(19, 20, 23, 0.02) 44%, rgba(19, 20, 23, 0.28) 100%),
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.13), transparent 22%),
    radial-gradient(circle at 20% 78%, rgba(122, 176, 226, 0.16), transparent 28%);
}

@media (max-width: 900px) {
  .asmu-login-page {
    overflow: auto;
  }

  .asmu-login-split {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 100vh;
  }

  .asmu-login-form-panel {
    min-height: 66vh;
    border-right: none;
  }

  .asmu-login-brand-row {
    margin-top: 0;
  }

  .asmu-login-video-panel {
    min-height: 34vh;
    order: -1;
  }
}

@media (max-width: 540px) {
  .asmu-login-form-panel {
    padding: 24px;
  }

  .asmu-login-brand-row {
    gap: 18px;
  }

  .asmu-login-logo {
    width: 78px;
    height: 78px;
    border-radius: 22px;
  }

  .asmu-login-brand-name {
    font-size: 1.36rem;
  }

  .asmu-login-product-name {
    font-size: 0.82rem;
  }

  .asmu-login-heading {
    font-size: 2rem;
  }
}

/* Shared control system: standard, primary, danger, and pill/icon button variants. */
vaadin-button,
button,
a[role="button"] {
  border-radius: var(--app-radius-control-lg);
}

vaadin-button,
button[class*="button"],
button[class*="Button"],
a[role="button"] {
  transition:
      border-color var(--app-button-transition),
      background var(--app-button-transition),
      color var(--app-button-transition),
      box-shadow var(--app-button-transition),
      transform var(--app-button-transition);
}

.asmu-login-form vaadin-button[slot="submit"],
.two-factor-inline-form vaadin-button[theme~="primary"],
.asmu-auth-primary-button {
  min-height: 44px;
  padding-inline: var(--app-button-padding-inline);
  border-radius: var(--app-radius-control-lg);
  border: 1px solid var(--app-button-primary-border);
  background: var(--app-button-primary-surface);
  color: var(--app-button-primary-text);
  box-shadow: var(--app-button-shadow);
}

.asmu-login-form vaadin-button[slot="submit"] {
  margin-top: 28px;
  box-shadow:
    var(--app-button-shadow),
    0 14px 34px rgba(0, 0, 0, 0.28);
  --vaadin-button-margin: 28px 0 0;
}

.asmu-login-form vaadin-button[slot="submit"]:hover,
.two-factor-inline-form vaadin-button[theme~="primary"]:hover,
.asmu-auth-primary-button:hover {
  background: var(--app-button-primary-surface-hover);
}

.asmu-login-form vaadin-button[slot="forgot-password"],
.two-factor-inline-form vaadin-button[theme~="tertiary"],
.asmu-auth-secondary-button,
.asmu-auth-link {
  min-height: 44px;
  padding-inline: var(--app-button-padding-inline);
  border-radius: var(--app-radius-control-lg);
  border: 1px solid var(--app-button-border);
  background: var(--app-button-surface);
  color: var(--app-button-text);
  box-shadow: var(--app-button-shadow);
}

.asmu-login-form vaadin-button[slot="forgot-password"]:hover,
.two-factor-inline-form vaadin-button[theme~="tertiary"]:hover,
.asmu-auth-secondary-button:hover,
.asmu-auth-link:hover {
  border-color: var(--app-button-border-hover);
  background: var(--app-button-surface-hover);
  color: #e8e9eb;
}

.asmu-login-form vaadin-button[slot="forgot-password"] {
  align-self: flex-end;
  width: auto;
  height: auto;
  min-height: 0;
  margin: -4px 2px -6px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(232, 233, 236, 0.58);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  --vaadin-button-height: auto;
  --vaadin-button-padding: 0;
  --vaadin-button-font-size: 0.78rem;
  --vaadin-button-font-weight: 600;
  --vaadin-button-line-height: 1.2;
}

.asmu-login-form vaadin-button[slot="forgot-password"]::part(label) {
  line-height: 1.2;
}

.asmu-login-form vaadin-button[slot="forgot-password"]:hover {
  border-color: transparent;
  background: transparent;
  color: #e8e9eb;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.media-page,
.posts-page {
  background: var(--app-bg);
  color: var(--app-text);
}

.media-folder-scroller {
  background: transparent;
}

.posts-left-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 220px;
  min-width: 220px;
  border-right: 1px solid var(--app-border);
  border-radius: 18px;
  background: #16181a;
  overflow: hidden;
  transition: width 220ms ease, min-width 220ms ease, border-color 220ms ease;
}

.posts-left-rail.collapsed {
  width: 92px;
  min-width: 92px;
}

.posts-left-rail-header {
  margin: 0;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.posts-left-rail-title {
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: opacity 150ms ease, transform 150ms ease;
}

.posts-left-rail-collapse {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--app-radius-control-md);
  background: linear-gradient(180deg, #222326 0%, #1c1d20 100%);
  color: #dfe0e2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
      border-color var(--app-button-transition),
      background var(--app-button-transition),
      transform var(--app-button-transition),
      box-shadow var(--app-button-transition);
}

.posts-left-rail-collapse:hover {
  border-color: rgba(255, 255, 255, 0.26);
  background: linear-gradient(180deg, #28292c 0%, #202124 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.posts-left-rail-collapse:active {
  transform: translateY(0);
}

.posts-left-rail-collapse vaadin-icon {
  width: 16px;
  height: 16px;
}

.posts-left-rail.collapsed .posts-left-rail-header {
  justify-content: center;
  padding-inline: 12px;
}

.posts-left-rail.collapsed .posts-left-rail-title {
  opacity: 0;
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
  transform: translateX(-6px);
  pointer-events: none;
}

.posts-left-rail.collapsed .posts-left-rail-collapse {
  margin-inline: auto;
}

.posts-left-rail.collapsed .posts-rail-toggle {
  display: none;
}

.posts-rail-toggle {
  display: none;
  padding: 12px 12px 10px;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.media-main-layout .posts-rail-toggle {
  display: flex;
}

.media-main-layout .posts-left-rail {
  width: var(--media-rail-width, 360px);
  min-width: var(--media-rail-width, 360px);
  max-width: min(680px, 56vw);
}

.media-main-layout .posts-left-rail.collapsed {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
}

.media-main-layout .posts-left-rail.resizing {
  transition: none;
}

.media-rail-resize-handle {
  display: none;
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  z-index: 20;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
}

.media-main-layout .posts-left-rail:not(.collapsed) .media-rail-resize-handle {
  display: block;
}

.media-rail-resize-handle::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 4px;
  width: 2px;
  border-radius: 999px;
  background: rgba(122, 176, 226, 0.58);
  opacity: 0.34;
  transition: opacity 140ms ease, box-shadow 140ms ease;
}

.media-rail-resize-handle:hover::before,
.posts-left-rail.resizing .media-rail-resize-handle::before {
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(122, 176, 226, 0.14);
}

body.media-rail-resizing,
body.media-rail-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.posts-rail-toggle-button {
  flex: 1 1 0;
  min-height: 38px;
  margin: 0;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control-lg);
  background: #1e1e22;
  color: #cfd0d2;
  font-weight: 600;
}

.posts-rail-toggle-button:hover {
  background: #242528;
  color: #e8e9eb;
}

.posts-rail-toggle-button.active {
  border-color: var(--app-button-primary-border);
  background: var(--app-button-primary-surface);
  color: var(--app-button-primary-text);
}

.posts-rail-section {
  min-width: 0;
}

.media-main-layout .posts-rail-section-folders {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.media-main-layout .posts-left-rail .media-folder-scroller {
  flex: 1 1 auto;
  min-height: 0;
}

.posts-mini-calendar-overview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.posts-mini-calendar-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px 0;
  border-bottom: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.posts-mini-calendar-nav-label {
  color: #e0e1e3;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.posts-mini-calendar-nav-button {
  min-width: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #d9eeff;
}

.posts-mini-calendar-nav-button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.posts-mini-calendar {
  padding: 10px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-surface-1);
}

.posts-mini-calendar-title {
  display: block;
  margin-bottom: 8px;
  color: #e0e1e3;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.posts-left-rail.collapsed .posts-mini-calendar-overview {
  padding: 10px 8px 8px;
  gap: 8px;
}

.posts-left-rail.collapsed .posts-mini-calendar-nav {
  padding: 10px 8px 6px;
  justify-content: center;
}

.posts-left-rail.collapsed .posts-mini-calendar-nav-label {
  display: none;
}

.posts-left-rail.collapsed .posts-mini-calendar {
  padding: 10px 8px;
  border-radius: 10px;
}

.posts-left-rail.collapsed .posts-mini-calendar-grid {
  display: none;
}

.posts-left-rail.collapsed .posts-mini-calendar-title {
  margin: 0;
  font-size: 0;
  letter-spacing: 0;
  text-align: center;
}

.posts-left-rail.collapsed .posts-mini-calendar-title::after {
  content: attr(data-short-label);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #e0e1e3;
}

.posts-mini-calendar-grid {
  display: grid;
  grid-template-columns: 22px repeat(7, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
}

.posts-mini-calendar-header-spacer,
.posts-mini-calendar-dow,
.posts-mini-calendar-week-number,
.posts-mini-calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  font-size: 0.68rem;
  line-height: 1;
}

.posts-mini-calendar-dow {
  color: var(--app-muted);
  font-weight: 600;
}

.posts-mini-calendar-week-number {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 6px;
  color: #8ea6bd;
  cursor: pointer;
  font-weight: 600;
  transition: background 120ms ease, color 120ms ease;
}

.posts-mini-calendar-week-number.active {
  color: #d9eeff;
}

.posts-mini-calendar-day {
  appearance: none;
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 6px;
  color: #dedfe1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.posts-mini-calendar-week-number:hover,
.posts-mini-calendar-day:hover {
  background: rgba(255, 255, 255, 0.06);
}

.posts-mini-calendar-week-number:focus-visible,
.posts-mini-calendar-day:focus-visible {
  outline: 1px solid rgba(122, 176, 226, 0.7);
  outline-offset: 1px;
}

.posts-mini-calendar-day-number {
  display: block;
}

.posts-mini-calendar-day-count {
  position: absolute;
  top: 1px;
  right: 2px;
  color: #8fc2eb;
  font-size: 0.46rem;
  font-weight: 700;
  line-height: 1;
}

.posts-mini-calendar-day.outside-month {
  color: rgba(232, 233, 236, 0.45);
}

.posts-mini-calendar-day.outside-month .posts-mini-calendar-day-count {
  color: rgba(232, 233, 236, 0.24);
}

.posts-mini-calendar-day.today {
  background: rgba(122, 176, 226, 0.18);
  color: #dff3ff;
}

.posts-mini-calendar-day.active-week {
  background: rgba(255, 255, 255, 0.08);
}

.posts-mini-calendar-day.active-week .posts-mini-calendar-day-count {
  color: #dff3ff;
}

.media-week-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  transition: padding 220ms ease;
}

.media-week-button {
  margin: 0;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-surface-1);
  color: var(--app-text);
  transition: border-color 120ms ease, background 120ms ease;
}

.media-week-button:hover {
  border-color: var(--app-border-strong);
  background: var(--app-surface-2);
}

.media-week-button.drop-target {
  border-color: #dedfe1;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.media-week-button.active {
  border-color: var(--app-accent);
  background: rgba(122, 176, 226, 0.18);
}

.posts-left-rail.collapsed .media-week-rail {
  padding-left: 8px;
  padding-right: 8px;
  gap: 6px;
}

.posts-left-rail.collapsed .media-week-button {
  min-height: 36px;
  border-radius: 10px;
}

.posts-left-rail.collapsed .media-week-prefix {
  display: none;
}

.posts-left-rail.collapsed .media-week-button-week .media-week-content,
.posts-left-rail.collapsed .media-week-button-all .media-week-content {
  justify-content: space-between;
  gap: 6px;
  padding: 0 6px;
}

.media-week-content {
  min-width: 0;
  box-sizing: border-box;
  gap: 8px;
  padding: 0 6px 0 8px;
}

.media-week-count {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: var(--lumo-font-size-xs);
}

.media-week-all-label {
  font-weight: 600;
}

.posts-left-rail.collapsed .media-week-number,
.posts-left-rail.collapsed .media-week-all-label {
  font-weight: 700;
  font-size: 0.78rem;
}

.posts-left-rail.collapsed .media-week-count {
  min-width: 22px;
  padding: 1px 6px;
  font-size: 0.64rem;
}

.media-folder-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  transition: padding 220ms ease;
}

.media-folder-button {
  margin: 0;
  border: 1px solid var(--app-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.015) 100%);
  color: var(--app-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.media-folder-button:hover {
  border-color: var(--app-border-strong);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

.media-folder-button.drop-target {
  border-color: #dedfe1;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.media-explorer-row.drop-target .media-folder-tree-button,
.audio-empty-state-shell.drop-target .media-empty-state {
  border-color: #dedfe1;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.media-folder-button.active {
  border-color: var(--app-accent);
  background: rgba(122, 176, 226, 0.16);
  box-shadow: inset 0 0 0 1px rgba(122, 176, 226, 0.16);
}

.media-folder-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.95rem;
}

.media-folder-count {
  min-width: 32px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: var(--lumo-font-size-xs);
}

.media-folder-explorer-header {
  display: grid;
  gap: 12px;
}

.media-folder-section-label,
.media-folder-location-caption {
  color: #c0c1c3;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.media-folder-nav-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.media-explorer-action-button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.03);
  color: #dcdddf;
}

.media-explorer-icon-button {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
}

.media-explorer-action-button:hover {
  background: rgba(255, 255, 255, 0.07);
}

.media-explorer-action-button.active {
  border-color: rgba(122, 176, 226, 0.48);
  background: rgba(122, 176, 226, 0.14);
}

.media-folder-location-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.media-folder-path-label,
.media-folder-path-drop-zone {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--app-muted);
  overflow: hidden;
}

.media-folder-path-label {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}

.media-folder-path-drop-zone {
  gap: 6px;
  flex-wrap: wrap;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.media-folder-path-drop-zone > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-folder-breadcrumb-bar {
  align-items: center;
}

.media-folder-breadcrumb-button {
  margin: 0;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #e1e2e4;
  font-size: 0.78rem;
  font-weight: 600;
}

.media-folder-breadcrumb-button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.media-folder-breadcrumb-button.active {
  border-color: rgba(122, 176, 226, 0.5);
  background: rgba(122, 176, 226, 0.16);
}

.media-folder-breadcrumb-separator {
  color: rgba(232, 233, 236, 0.38);
  font-size: 0.78rem;
  font-weight: 700;
}

.media-folder-path-drop-zone.drop-target {
  border-color: #dedfe1;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.media-folder-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.media-explorer-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-left: min(calc(var(--media-tree-depth, 0) * 18px), 112px);
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.media-explorer-toggle,
.media-explorer-toggle-placeholder {
  width: 26px;
  min-width: 26px;
  height: 26px;
}

.media-explorer-toggle {
  margin: 0;
  padding: 0;
  border-radius: 8px;
  color: rgba(232, 233, 236, 0.82);
}

.media-explorer-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e8e9eb;
}

.media-explorer-toggle vaadin-icon {
  width: 18px;
  height: 18px;
}

.media-explorer-toggle-placeholder {
  display: block;
}

.media-folder-tree-button,
.media-explorer-file-button {
  min-height: 32px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--app-text);
  text-align: left;
  box-shadow: none;
}

.media-folder-tree-button:hover,
.media-explorer-file-button:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.media-folder-tree-button.active,
.media-explorer-file-button.active {
  border-color: rgba(122, 176, 226, 0.44);
  background: rgba(122, 176, 226, 0.14);
  box-shadow: inset 0 0 0 1px rgba(122, 176, 226, 0.08);
}

.media-folder-tree-button.selected,
.media-explorer-file-button.selected {
  border-color: rgba(122, 176, 226, 0.68);
  background: rgba(122, 176, 226, 0.22);
  box-shadow: inset 0 0 0 1px rgba(122, 176, 226, 0.16);
}

.media-folder-tree-button.dragging,
.media-explorer-file-button.dragging {
  opacity: 0.32;
}

.media-header-folder-button .media-explorer-icon,
.media-header-folder-button .media-explorer-label {
  color: #9ecbff;
}

.media-header-folder-button .media-explorer-count {
  color: rgba(158, 203, 255, 0.88);
}

.media-folder-tree-button::part(label),
.media-explorer-file-button::part(label) {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.media-explorer-item-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 8px 0 6px;
}

.media-explorer-file-row .media-explorer-item-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(48px, max-content);
  gap: 8px;
}

.media-explorer-label-wrap {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.media-explorer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  color: rgba(232, 233, 236, 0.72);
}

.media-explorer-icon vaadin-icon {
  width: 16px;
  height: 16px;
}

.media-explorer-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 500;
}

.media-inline-rename-shell {
  display: flex;
  align-items: center;
}

.media-inline-rename-field {
  width: 100%;
  min-width: 0;
}

.media-inline-rename-field::part(input-field) {
  min-height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.media-inline-rename-field::part(value) {
  font-size: 0.9rem;
}

.media-explorer-count,
.media-explorer-file-meta {
  flex: 0 0 auto;
  color: rgba(232, 233, 236, 0.45);
  font-size: 0.72rem;
  line-height: 1;
}

.media-explorer-count {
  min-width: 24px;
  padding: 2px 0;
  text-align: right;
  font-weight: 700;
}

.media-explorer-file-meta {
  min-width: 48px;
  max-width: 72px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.posts-left-rail.collapsed .media-folder-rail {
  padding-left: 8px;
  padding-right: 8px;
  gap: 6px;
}

.posts-left-rail.collapsed .media-folder-button {
  min-height: 36px;
  border-radius: 10px;
}

.posts-left-rail.collapsed .media-folder-count {
  min-width: 22px;
  padding: 1px 6px;
  font-size: 0.64rem;
}

.posts-left-rail.collapsed .media-folder-explorer-header,
.posts-left-rail.collapsed .media-folder-tree,
.posts-left-rail.collapsed .media-folder-path-drop-zone,
.posts-left-rail.collapsed .media-folder-path-label,
.posts-left-rail.collapsed .media-folder-location-card,
.posts-left-rail.collapsed .media-folder-section-label {
  display: none;
}

.media-content {
  padding: 18px 20px 20px;
  gap: 12px;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.settings-tab-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  padding: 6px;
  border: 1px solid var(--app-border);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.015) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.settings-tab-button {
  margin: 0;
  min-height: var(--app-button-min-height);
  padding: 0 var(--app-button-padding-inline);
  border-radius: var(--app-radius-control-lg);
  color: var(--app-muted);
  font-weight: 600;
  transition:
      background var(--app-button-transition),
      color var(--app-button-transition),
      box-shadow var(--app-button-transition);
}

.settings-tab-button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 233, 236, 0.92);
}

.settings-tab-button-active {
  color: #e8e9eb;
  background: linear-gradient(135deg, rgba(141, 214, 255, 0.2) 0%, rgba(83, 164, 255, 0.32) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.18);
}

.settings-admin-panel {
  overflow: hidden;
}

.settings-admin-channel-tab-bar {
  align-self: flex-start;
}

.settings-admin-channel-shell {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.settings-admin-channel-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  gap: 12px;
  overflow: auto;
  scrollbar-gutter: stable;
  padding-right: 4px;
}

.settings-admin-channel-header {
  display: grid;
  gap: 2px;
}

.settings-admin-tool-tab-bar {
  align-self: flex-start;
}

.settings-admin-tool-panel {
  display: grid;
  gap: 12px;
}

.settings-admin-channel-note {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--app-border);
  background: rgba(255, 255, 255, 0.025);
  color: var(--app-muted);
  line-height: 1.55;
}

.settings-admin-content {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.settings-admin-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.settings-admin-media-card {
  overflow: hidden;
}

.settings-admin-media-preview {
  height: 180px;
}

.settings-admin-media-body {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
}

.settings-admin-media-title {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.35;
}

.settings-admin-media-summary {
  color: var(--app-muted);
  font-size: 0.86rem;
}

.settings-admin-media-path-block {
  display: grid;
  gap: 4px;
}

.settings-admin-media-path-label {
  color: var(--app-muted);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settings-admin-media-path-value {
  color: inherit;
  font-size: 0.84rem;
  line-height: 1.45;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.settings-section-title {
  margin: 0;
  font-size: 1.08rem;
}

.settings-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.settings-account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-inline-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--app-border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 233, 236, 0.76);
  font-size: 0.8rem;
  line-height: 1.2;
}

.security-settings-page {
  min-height: 0;
}

.profile-page {
  min-height: 0;
}

.company-management-content {
  gap: 18px;
  overflow: auto;
}

.company-management-page .media-heading-row {
  align-items: flex-start;
}

.company-management-section-selector-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-management-section-selector {
  min-height: 132px;
}

.company-management-section-selector-active {
  border-color: rgba(122, 176, 226, 0.24);
  background:
    radial-gradient(circle at top right, rgba(122, 176, 226, 0.14) 0%, rgba(122, 176, 226, 0) 34%),
    linear-gradient(180deg, #181a1c 0%, #111315 100%);
  box-shadow:
    inset 0 0 0 1px rgba(122, 176, 226, 0.08),
    0 22px 42px rgba(0, 0, 0, 0.22);
}

.company-management-selector-icon-shell {
  background: rgba(122, 176, 226, 0.1);
  color: #dcefff;
}

.company-management-section-selector-active .company-management-selector-icon-shell {
  background: rgba(122, 176, 226, 0.16);
  color: #e8e9eb;
}

.company-management-tabs {
  width: 100%;
  padding: 4px;
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  box-sizing: border-box;
}

.company-management-tab {
  min-height: 58px;
  padding: 8px 12px;
  border-radius: 14px;
}

.company-management-tab-body {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.company-management-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(122, 176, 226, 0.12);
  color: #dcefff;
}

.company-management-tab-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.company-management-tab-title {
  color: #e8e9eb;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.15;
}

.company-management-tab-subtitle {
  color: var(--app-muted);
  font-size: 0.75rem;
  line-height: 1.2;
}

.company-management-tab-shell,
.company-management-tab-content {
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.company-management-section-layout {
  display: grid;
  grid-template-columns: minmax(240px, 282px) minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.company-management-section-layout-flat {
  display: block;
}

.company-management-section-layout-flat .company-management-tab-shell {
  width: 100%;
  height: 100%;
}

.company-management-vertical-tabs {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, #1e1e22 0%, #191a1d 100%);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}

.company-management-vertical-tab {
  position: relative;
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
  min-height: 126px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, #1f2023 0%, #1a1b1e 100%);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.company-management-vertical-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.2);
}

.company-management-vertical-tab:focus-visible {
  outline: 2px solid rgba(122, 176, 226, 0.34);
  outline-offset: 2px;
}

.company-management-vertical-tab-active {
  border-color: rgba(122, 176, 226, 0.24);
  background:
    radial-gradient(circle at top right, rgba(122, 176, 226, 0.14) 0%, rgba(122, 176, 226, 0) 36%),
    linear-gradient(180deg, #181a1c 0%, #111315 100%);
  box-shadow:
    inset 0 0 0 1px rgba(122, 176, 226, 0.08),
    0 20px 38px rgba(0, 0, 0, 0.22);
}

.company-management-vertical-tab-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.company-management-vertical-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(122, 176, 226, 0.12);
  color: #dcefff;
}

.company-management-vertical-tab-icon-departments {
  background: rgba(120, 227, 168, 0.12);
  color: #c8f6dc;
}

.company-management-vertical-tab-icon-employees {
  background: rgba(255, 193, 105, 0.12);
  color: #ffe2b5;
}

.company-management-vertical-tab-icon vaadin-icon {
  width: 21px;
  height: 21px;
}

.company-management-vertical-tab-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.company-management-vertical-tab-title {
  color: #e1e2e4;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

.company-management-vertical-tab-subtitle {
  color: #a7a7a7;
  font-size: 0.86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.company-management-vertical-tab-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.company-management-vertical-tab-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #cccdcf;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.company-management-vertical-tab-chip-ready {
  border-color: rgba(122, 176, 226, 0.24);
  background: rgba(122, 176, 226, 0.14);
  color: #e6f4ff;
}

.company-management-vertical-tab-chip-muted {
  color: #b7b7b7;
}

.company-management-tab-content {
  gap: 18px;
  min-height: 0;
}

.company-management-employees-tab {
  height: 100%;
}

.company-management-departments-tab {
  height: 100%;
}

.company-profile-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 760px);
  align-items: start;
  gap: 16px;
  width: 100%;
  max-width: 1180px;
}

.company-management-summary-card {
  justify-items: center;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(122, 176, 226, 0.12) 0%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0.018) 100%);
}

.company-management-summary-card .company-management-logo-host {
  width: 178px;
  height: 178px;
  border-radius: 32px;
}

.company-management-summary-card .company-management-logo-placeholder vaadin-icon {
  width: 48px;
  height: 48px;
}

.company-management-summary-card .company-management-logo-overlay {
  border-radius: 24px;
}

.company-management-summary-card .company-management-logo-overlay vaadin-icon {
  width: 34px;
  height: 34px;
  padding: 10px;
}

.company-management-summary-card .company-management-logo-remove-button {
  top: 10px;
  left: 10px;
  z-index: 4;
}

.company-management-summary-status-row {
  justify-content: center;
}

.company-management-details-card {
  align-content: flex-start;
}

.company-management-details-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, auto);
  gap: 16px;
  align-items: end;
  min-width: 0;
}

.company-management-accounts-card {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
  box-sizing: border-box;
}

.company-management-company-card {
  width: 100%;
  padding: 18px;
  gap: 14px;
  border: 1px solid var(--app-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(122, 176, 226, 0.1), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.018) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 36px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}

.company-management-overview {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, auto);
  gap: 18px;
  align-items: center;
  width: 100%;
}

.company-management-profile-block {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.company-management-profile-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.company-management-profile-title {
  overflow: hidden;
  color: #e8e9eb;
  font-size: 1.35rem;
  font-weight: 850;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-management-profile-subtitle,
.company-management-logo-meta {
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
  line-height: 1.4;
}

.company-management-logo-control {
  position: relative;
  display: inline-grid;
  justify-items: center;
  flex: 0 0 auto;
  isolation: isolate;
}

.company-management-logo-upload {
  position: relative;
  z-index: 2;
  display: inline-grid;
  width: auto;
  cursor: pointer;
}

.company-management-logo-upload vaadin-upload-file-list {
  display: none;
}

.company-management-logo-upload::part(primary-buttons) {
  margin: 0;
}

.company-management-logo-host {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border: 1px solid var(--app-border-strong);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(122, 176, 226, 0.16), transparent 44%),
    var(--app-surface-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color var(--app-button-transition),
    box-shadow var(--app-button-transition),
    transform var(--app-button-transition);
}

.company-management-logo-host:hover {
  border-color: rgba(122, 176, 226, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.26),
    0 0 0 4px rgba(122, 176, 226, 0.08);
  transform: translateY(-1px);
}

.company-management-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}

.company-management-logo-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #dcefff;
}

.company-management-logo-placeholder-disabled {
  color: rgba(232, 233, 236, 0.42);
}

.company-management-logo-placeholder vaadin-icon {
  width: 34px;
  height: 34px;
}

.company-management-logo-overlay {
  position: absolute;
  inset: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(22, 23, 26, 0.24);
  color: #f3f7fb;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(5px);
  transition:
    opacity var(--app-button-transition),
    background var(--app-button-transition);
}

.company-management-logo-host:hover .company-management-logo-overlay {
  opacity: 1;
  background: rgba(22, 23, 26, 0.34);
}

.company-management-logo-overlay vaadin-icon {
  width: 26px;
  height: 26px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(25, 26, 29, 0.58);
}

.company-management-logo-remove-button {
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 1;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(25, 26, 29, 0.78);
  color: #d8dde6;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
}

.company-management-logo-remove-button:hover {
  border-color: rgba(255, 118, 118, 0.36);
  background: rgba(34, 21, 21, 0.9);
  color: #ffb7b7;
}

.company-management-logo-remove-button vaadin-icon {
  width: 20px;
  height: 20px;
}

.company-management-toolbar {
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}

.company-management-toolbar vaadin-button {
  height: 46px;
  min-height: 46px;
  align-self: flex-end;
}

.company-management-selector {
  width: min(360px, 100%) !important;
}

.company-management-name-field {
  max-width: 560px;
}

.company-management-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 980px;
}

.company-management-detail-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  width: 100%;
}

.company-management-detail-groups .company-management-field-group:nth-child(3) {
  grid-column: 1 / -1;
}

.company-management-detail-groups .company-management-field-group:nth-child(3) .company-management-field-group-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-management-field-group {
  display: grid;
  align-content: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.12);
}

.company-management-field-group-title {
  color: #e8e9eb;
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.company-management-field-group-list {
  display: grid;
  gap: 10px;
}

.company-management-detail-field vaadin-icon {
  color: var(--app-input-icon);
}

.company-management-company-card vaadin-combo-box::part(input-field),
.company-management-company-card vaadin-text-field::part(input-field),
.company-management-company-card vaadin-email-field::part(input-field),
.company-management-details-card vaadin-combo-box::part(input-field),
.company-management-details-card vaadin-text-field::part(input-field),
.company-management-details-card vaadin-email-field::part(input-field) {
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--app-radius-control-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.company-management-company-card vaadin-text-field[readonly]::part(input-field),
.company-management-company-card vaadin-email-field[readonly]::part(input-field),
.company-management-details-card vaadin-text-field[readonly]::part(input-field),
.company-management-details-card vaadin-email-field[readonly]::part(input-field) {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.14);
}

.company-management-section {
  gap: 10px;
  min-height: 0;
}

.company-management-accounts-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.company-management-section-title {
  margin: 0;
  color: #e8e9eb;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.2;
}

.company-management-grid-shell {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.company-management-pending-shell {
  min-height: 176px;
}

.company-management-approved-shell {
  min-height: 282px;
}

.company-management-employees-grid-shell {
  display: grid;
  height: 100%;
  min-height: 0;
  padding: 14px;
  box-sizing: border-box;
}

.company-management-heading-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.company-management-results-footer {
  flex: 0 0 auto;
  min-width: 0;
}

.company-management-results-chip {
  max-width: min(520px, 72vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-management-employee-filters {
  width: 100%;
  min-width: 0;
  gap: 10px;
  box-sizing: border-box;
}

.company-management-employee-filters > * {
  min-width: 0;
}

.company-management-employee-filter-search {
  flex: 1 1 320px;
}

.company-management-employee-filter-select {
  flex: 1 1 170px;
}

.company-management-employee-filter-reset {
  flex: 0 0 auto;
}

.company-management-employee-filter-results {
  margin-left: auto;
  padding-inline: 4px;
  white-space: nowrap;
}

.company-management-roles-card {
  min-height: 0;
}

.company-management-roles-stage {
  display: grid;
  position: relative;
  overflow: hidden;
  min-height: 340px;
}

.company-management-roles-list-pane,
.company-management-role-editor-pane {
  grid-area: 1 / 1;
  min-width: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

.company-management-roles-list-pane {
  display: grid;
  align-content: start;
  gap: 14px;
}

.company-management-role-editor-pane {
  display: grid;
  align-content: start;
  gap: 18px;
  padding-top: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(108%);
}

.company-management-roles-stage.company-management-role-editor-open .company-management-roles-list-pane {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-30%);
}

.company-management-roles-stage.company-management-role-editor-open .company-management-role-editor-pane {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.company-management-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.company-management-role-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
}

.company-management-role-card-selectable {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.company-management-role-card-selectable:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.company-management-role-card-selectable:focus-visible {
  outline: 2px solid rgba(122, 176, 226, 0.72);
  outline-offset: 3px;
}

.company-management-role-card-selected {
  border-color: rgba(122, 176, 226, 0.62);
  background: rgba(122, 176, 226, 0.12);
  box-shadow: 0 0 0 1px rgba(122, 176, 226, 0.2), 0 16px 34px rgba(0, 0, 0, 0.24);
}

.company-management-role-card-selected .company-management-role-icon {
  background: rgba(122, 176, 226, 0.2);
  color: #dbeeff;
}

.company-management-role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--app-accent);
}

.company-management-role-icon vaadin-icon {
  width: 1rem;
  height: 1rem;
}

.company-management-role-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.company-management-role-title {
  color: #e8e9eb;
  font-size: 0.96rem;
  font-weight: 850;
  line-height: 1.2;
}

.company-management-role-subtitle,
.company-management-role-description {
  color: var(--app-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.company-management-role-subtitle {
  color: rgba(232, 233, 236, 0.78);
  font-weight: 700;
}

.company-management-role-editor-fields {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.company-management-role-editor-fields vaadin-text-field::part(label),
.company-management-role-editor-fields vaadin-text-area::part(label) {
  color: rgba(232, 233, 236, 0.7);
  font-size: 0.84rem;
  font-weight: 800;
}

.company-management-role-editor-fields vaadin-text-field::part(input-field),
.company-management-role-editor-fields vaadin-text-area::part(input-field) {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--app-radius-control-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.company-management-permission-toggle-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.company-management-permission-toggle-label {
  color: rgba(232, 233, 236, 0.7);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.2;
}

.company-management-permission-toggle-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.company-management-permission-group-box {
  display: grid;
  gap: 0;
  min-width: 0;
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, min-height 180ms ease;
}

.company-management-permission-group-box-active {
  border-color: rgba(122, 176, 226, 0.44);
  background: rgba(122, 176, 226, 0.1);
  box-shadow: inset 0 0 0 1px rgba(122, 176, 226, 0.12);
}

.company-management-permission-group-box-expanded {
  gap: 12px;
  min-height: 168px;
}

.company-management-permission-group-header,
.company-management-permission-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.company-management-permission-group-copy,
.company-management-permission-action-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.company-management-permission-group-title,
.company-management-permission-action-title {
  color: #e8e9eb;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.company-management-permission-group-title {
  font-size: 0.9rem;
}

.company-management-permission-action-title {
  font-size: 0.82rem;
}

.company-management-permission-group-summary,
.company-management-permission-action-description {
  color: var(--app-muted);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.company-management-permission-group-summary {
  font-size: 0.78rem;
  font-weight: 700;
}

.company-management-permission-action-description {
  font-size: 0.75rem;
}

.company-management-permission-group-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.company-management-permission-collapse-button {
  width: 30px;
  height: 30px;
  min-width: 30px;
  color: rgba(232, 233, 236, 0.76);
}

.company-management-permission-action-list {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.company-management-permission-action-row {
  min-height: 54px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.company-management-permission-action-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.company-management-permission-action-row:focus-visible,
.company-management-permission-switch:focus-visible {
  outline: 2px solid rgba(122, 176, 226, 0.72);
  outline-offset: 2px;
}

.company-management-permission-action-row-active {
  background: rgba(122, 176, 226, 0.1);
}

.company-management-permission-switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  transition: border-color 160ms ease, background 160ms ease;
}

.company-management-permission-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.26);
  transition: transform 160ms ease, background 160ms ease;
}

.company-management-permission-switch-active {
  border-color: rgba(122, 176, 226, 0.48);
  background: rgba(122, 176, 226, 0.42);
}

.company-management-permission-switch-active::after {
  transform: translateX(20px);
  background: #e8e9eb;
}

.company-management-permission-empty {
  display: grid;
  gap: 6px;
  min-height: 90px;
  place-content: center;
  padding: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  color: var(--app-muted);
  text-align: center;
}

.company-management-role-editor-actions {
  justify-content: flex-end;
}

.company-management-grid {
  min-height: 0;
}

.company-management-employee-list {
  display: grid;
  align-content: start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

.company-management-employee-card {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, auto);
  align-items: center;
  gap: 18px;
  width: 100%;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at left, rgba(122, 176, 226, 0.1) 0%, rgba(122, 176, 226, 0) 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.018) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
}

.company-management-employee-card-pending {
  background:
    radial-gradient(circle at left, rgba(255, 193, 105, 0.1) 0%, rgba(255, 193, 105, 0) 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.018) 100%);
}

.company-management-employee-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.company-management-employee-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(122, 176, 226, 0.22);
  border-radius: 14px;
  background: rgba(122, 176, 226, 0.12);
  color: #dcefff;
}

.company-management-employee-icon vaadin-icon {
  width: 20px;
  height: 20px;
}

.company-management-employee-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.company-management-employee-title {
  overflow: hidden;
  color: #e8e9eb;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-management-employee-subtitle {
  overflow: hidden;
  color: var(--app-muted);
  font-size: 0.84rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-management-employee-department {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-management-employee-department-set {
  border-color: rgba(122, 176, 226, 0.22);
  background: rgba(122, 176, 226, 0.12);
  color: #dcefff;
}

.company-management-employee-department-empty {
  border-color: rgba(255, 193, 105, 0.18);
  background: rgba(255, 193, 105, 0.08);
  color: #e9c890;
}

.company-management-employee-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.company-management-employee-control-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.company-management-employee-control-label {
  color: rgba(232, 233, 236, 0.5);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.company-management-employee-status,
.company-management-employee-action {
  display: flex;
  align-items: center;
  min-width: 0;
}

.company-management-employees-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  --vaadin-grid-background: transparent;
  --vaadin-grid-cell-background: transparent;
  --vaadin-grid-header-background: #1f2023;
  --lumo-primary-text-color: #e1e2e4;
  --lumo-body-text-color: #e1e2e4;
  --lumo-disabled-text-color: rgba(232, 233, 236, 0.54);
}

.company-management-grid::part(header-cell) {
  min-height: 48px;
}

.company-management-grid::part(body-cell) {
  min-height: 56px;
}

.company-management-employees-grid::part(header-row) {
  background: linear-gradient(180deg, rgba(34, 35, 38, 0.98) 0%, rgba(30, 31, 34, 0.98) 100%);
}

.company-management-employees-grid::part(header-cell) {
  min-height: 54px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(34, 35, 38, 0.98) 0%, rgba(30, 31, 34, 0.98) 100%);
  color: var(--app-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.company-management-employees-grid::part(body-cell) {
  min-height: 72px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.018);
  color: #e1e2e4;
  font-size: 0.94rem;
}

.company-management-employees-grid::part(odd-row-cell) {
  background: rgba(255, 255, 255, 0.028);
}

.company-management-employees-grid::part(row):hover {
  background: rgba(255, 255, 255, 0.045);
}

.company-management-empty-state {
  display: grid;
  flex: 1 1 auto;
  place-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 100%;
  padding: 34px 18px;
  text-align: center;
  box-sizing: border-box;
}

.company-management-empty-title {
  color: #e8e9eb;
  font-weight: 800;
}

.company-management-role-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #e0e1e3;
  font-size: 0.82rem;
  font-weight: 700;
}

.company-management-approve-button {
  min-height: 34px;
  padding-inline: 12px;
  border-radius: var(--app-radius-control-md);
}

.company-management-role-select {
  width: 180px;
}

.company-management-department-select,
.company-management-role-select,
.company-management-custom-role-select {
  --lumo-primary-text-color: #e1e2e4;
  --lumo-body-text-color: #e1e2e4;
  --lumo-disabled-text-color: rgba(232, 233, 236, 0.58);
  color: #e1e2e4;
}

.company-management-department-select::part(input-field),
.company-management-role-select::part(input-field),
.company-management-custom-role-select::part(input-field) {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: none;
  color: #e1e2e4;
}

.company-management-department-select:hover::part(input-field),
.company-management-role-select:hover::part(input-field),
.company-management-custom-role-select:hover::part(input-field) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.095);
}

.company-management-department-select::part(value),
.company-management-role-select::part(value),
.company-management-custom-role-select::part(value),
.company-management-department-select::part(toggle-button),
.company-management-role-select::part(toggle-button),
.company-management-custom-role-select::part(toggle-button) {
  color: #e1e2e4;
  -webkit-text-fill-color: #e1e2e4;
}

.company-management-department-select[disabled],
.company-management-role-select[disabled],
.company-management-custom-role-select[disabled] {
  opacity: 1;
}

.company-management-department-select[disabled]::part(input-field),
.company-management-role-select[disabled]::part(input-field),
.company-management-custom-role-select[disabled]::part(input-field) {
  border-color: rgba(255, 255, 255, 0.055);
  background: rgba(255, 255, 255, 0.04);
}

.company-management-department-select[disabled]::part(value),
.company-management-role-select[disabled]::part(value),
.company-management-custom-role-select[disabled]::part(value),
.company-management-department-select[disabled]::part(toggle-button),
.company-management-role-select[disabled]::part(toggle-button),
.company-management-custom-role-select[disabled]::part(toggle-button) {
  color: rgba(232, 233, 236, 0.58);
  -webkit-text-fill-color: rgba(232, 233, 236, 0.58);
}

.company-management-custom-role-select::part(chip) {
  border: 1px solid rgba(122, 176, 226, 0.2);
  background: rgba(122, 176, 226, 0.12);
  color: #e1e2e4;
}

.company-management-status-chip {
  min-width: 74px;
  justify-content: center;
}

.company-management-approved-label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}

.company-management-department-toolbar {
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.company-management-department-results {
  min-width: 180px;
}

.company-department-slot-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  padding: 20px 0 0;
}

.company-department-slot-card {
  min-height: 286px;
}

.company-department-state {
  text-transform: uppercase;
}

.company-department-description {
  display: -webkit-box;
  min-height: 44px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.company-department-contact-group {
  justify-content: flex-start;
}

.company-department-empty-state {
  min-height: 260px;
}

vaadin-dialog-overlay[theme~="company-department"]::part(backdrop) {
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

vaadin-dialog-overlay[theme~="company-department"]::part(overlay) {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(122, 176, 226, 0.1) 0%, rgba(122, 176, 226, 0) 32%),
    linear-gradient(180deg, #202124 0%, #191a1d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 28px 70px rgba(0, 0, 0, 0.36);
  color: var(--app-text);
}

vaadin-dialog-overlay[theme~="company-department"]::part(header) {
  padding: 22px 24px 8px;
  background: transparent;
}

vaadin-dialog-overlay[theme~="company-department"]::part(title) {
  color: #e2e3e5;
  font-size: 1.14rem;
  font-weight: 850;
  line-height: 1.2;
}

vaadin-dialog-overlay[theme~="company-department"]::part(content) {
  padding: 8px 24px 2px;
  background: transparent;
}

vaadin-dialog-overlay[theme~="company-department"]::part(footer) {
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 24px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(0, 0, 0, 0.12) 100%);
}

.company-management-department-dialog-content {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding-bottom: 16px;
}

.company-management-department-dialog-company {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  border-color: rgba(122, 176, 226, 0.18);
  background: rgba(122, 176, 226, 0.1);
  color: #dcefff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-management-department-dialog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

vaadin-dialog-overlay[theme~="company-department"] .company-management-department-dialog-field::part(label),
vaadin-dialog-overlay[theme~="company-department"] .company-management-department-dialog-description::part(label) {
  color: rgba(232, 233, 236, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

vaadin-dialog-overlay[theme~="company-department"] .company-management-department-dialog-field::part(input-field),
vaadin-dialog-overlay[theme~="company-department"] .company-management-department-dialog-description::part(input-field) {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.035) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  color: #e1e2e4;
}

vaadin-dialog-overlay[theme~="company-department"] .company-management-department-dialog-field:hover::part(input-field),
vaadin-dialog-overlay[theme~="company-department"] .company-management-department-dialog-description:hover::part(input-field) {
  border-color: rgba(255, 255, 255, 0.16);
}

vaadin-dialog-overlay[theme~="company-department"] .company-management-department-dialog-field::part(value),
vaadin-dialog-overlay[theme~="company-department"] .company-management-department-dialog-description::part(value) {
  color: #e1e2e4;
}

vaadin-dialog-overlay[theme~="company-department"] .company-management-department-dialog-field vaadin-icon {
  color: #b9c8d5;
}

vaadin-dialog-overlay[theme~="company-department"] .company-management-department-dialog-description::part(input-field) {
  min-height: 140px;
}

.company-management-department-description-field::part(input-field) {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--app-radius-control-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.profile-page .media-content {
  gap: 18px;
  overflow: auto;
}

.profile-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 760px);
  align-items: start;
  gap: 16px;
  width: 100%;
  max-width: 1180px;
}

.profile-side-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.profile-card {
  display: grid;
  gap: 20px;
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.018) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 36px rgba(0, 0, 0, 0.18);
}

.profile-card-title {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.2;
}

.profile-card-title-block {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-card-subtitle {
  color: var(--app-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.profile-card-header,
.profile-security-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.profile-summary-card {
  justify-items: stretch;
  background:
    linear-gradient(145deg, rgba(122, 176, 226, 0.12) 0%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0.018) 100%);
}

.profile-summary-header {
  display: grid;
  gap: 14px;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.profile-avatar-control {
  position: relative;
  display: inline-grid;
  justify-items: center;
  isolation: isolate;
}

.profile-picture-upload {
  position: relative;
  z-index: 2;
  display: inline-grid;
  width: auto;
  cursor: pointer;
}

.profile-picture-upload vaadin-upload-file-list {
  display: none;
}

.profile-picture-upload::part(primary-buttons) {
  margin: 0;
}

.profile-avatar-host {
  position: relative;
  display: grid;
  place-items: center;
  width: 194px;
  height: 194px;
  border: 1px solid var(--app-border-strong);
  border-radius: 999px;
  background: var(--app-surface-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition:
    border-color var(--app-button-transition),
    box-shadow var(--app-button-transition),
    transform var(--app-button-transition);
}

.profile-avatar-host:hover {
  border-color: rgba(122, 176, 226, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.26),
    0 0 0 4px rgba(122, 176, 226, 0.08);
  transform: translateY(-1px);
}

.profile-avatar-preview {
  width: 178px;
  height: 178px;
  font-size: 3.25rem;
}

.profile-avatar-change-overlay {
  position: absolute;
  inset: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(22, 23, 26, 0.24);
  color: #f3f7fb;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(5px);
  transition:
    opacity var(--app-button-transition),
    background var(--app-button-transition);
}

.profile-avatar-host:hover .profile-avatar-change-overlay {
  opacity: 1;
  background: rgba(22, 23, 26, 0.34);
}

.profile-avatar-change-overlay vaadin-icon {
  width: 34px;
  height: 34px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(25, 26, 29, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.24);
}

.profile-avatar-upload-badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(25, 26, 29, 0.86);
  color: #e5f4ff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.profile-avatar-upload-badge vaadin-icon {
  width: 18px;
  height: 18px;
}

.profile-avatar-remove-button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(25, 26, 29, 0.76);
  color: #d8dde6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
  transition:
    border-color var(--app-button-transition),
    background var(--app-button-transition),
    color var(--app-button-transition),
    transform var(--app-button-transition),
    box-shadow var(--app-button-transition);
  transform: translate(0, 0);
}

.profile-avatar-control:hover .profile-avatar-remove-button,
.profile-avatar-remove-button:hover {
  border-color: rgba(255, 118, 118, 0.36);
  background: rgba(34, 21, 21, 0.9);
  color: #ffb7b7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 22px rgba(0, 0, 0, 0.28);
  transform: translate(-18px, -18px);
}

.profile-avatar-remove-button vaadin-icon {
  width: 22px;
  height: 22px;
}

.profile-summary-identity {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-summary-name {
  color: #e8e9eb;
  font-size: 1.42rem;
  font-weight: 800;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.profile-summary-email {
  color: rgba(232, 233, 236, 0.68);
  font-size: 0.92rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.profile-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.profile-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.company-management-role-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.profile-status-approved {
  border: 1px solid rgba(69, 196, 132, 0.24);
  background: rgba(69, 196, 132, 0.18);
  color: #95efc0;
}

.profile-status-pending {
  border: 1px solid rgba(255, 188, 87, 0.22);
  background: rgba(255, 188, 87, 0.16);
  color: #ffd08b;
}

.profile-status-secured {
  border: 1px solid rgba(122, 176, 226, 0.28);
  background: rgba(122, 176, 226, 0.16);
  color: #bde5ff;
}

.profile-status-off {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(232, 233, 236, 0.68);
}

.profile-summary-metrics,
.profile-security-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.profile-metric,
.profile-security-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.16);
}

.profile-metric-icon,
.profile-security-row-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(122, 176, 226, 0.12);
  color: #dbeeff;
}

.profile-metric-icon vaadin-icon,
.profile-security-row-icon vaadin-icon {
  width: 18px;
  height: 18px;
}

.profile-metric-copy,
.profile-security-row-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profile-metric-label,
.profile-section-label,
.profile-security-row-title {
  color: rgba(232, 233, 236, 0.5);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.profile-metric-value,
.profile-security-row-value {
  color: rgba(232, 233, 236, 0.9);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.profile-role-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.profile-role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.profile-role-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(232, 233, 236, 0.78);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
}

.profile-details-card {
  align-content: start;
}

.profile-picture-meta {
  color: var(--app-muted);
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.profile-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-field-grid vaadin-text-field::part(label),
.profile-field-grid vaadin-email-field::part(label) {
  color: rgba(232, 233, 236, 0.7);
  font-size: 0.84rem;
  font-weight: 800;
}

.profile-field-grid vaadin-text-field::part(input-field),
.profile-field-grid vaadin-email-field::part(input-field) {
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--app-radius-control-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.profile-field-grid vaadin-text-field[readonly]::part(input-field),
.profile-field-grid vaadin-email-field[readonly]::part(input-field) {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.12);
}

.profile-save-button {
  justify-self: stretch;
}

.profile-security-card {
  align-content: flex-start;
  gap: 16px;
}

.profile-security-copy {
  color: var(--app-muted);
  line-height: 1.55;
}

.profile-security-card .media-action-button {
  justify-self: stretch;
}

@media (max-width: 960px) {
  .company-management-toolbar {
    align-items: stretch;
  }

  .company-management-toolbar vaadin-button {
    width: 100% !important;
  }

  .company-management-roles-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-management-employee-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .company-management-employee-controls {
    justify-content: flex-start;
  }

  .company-management-employee-filter-results {
    margin-left: 0;
  }

  .company-management-permission-toggle-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-management-detail-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }

  .company-profile-workspace,
  .company-management-overview,
  .company-management-accounts-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-management-details-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-management-detail-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-management-section-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-management-vertical-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-management-tabs {
    overflow-x: auto;
  }

  .company-management-section-selector-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-side-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .company-management-content {
    padding: 16px;
  }

  .company-management-company-card {
    padding: 16px;
    border-radius: 20px;
  }

  .company-management-profile-block {
    align-items: flex-start;
  }

  .company-management-logo-host,
  .company-management-summary-card .company-management-logo-host {
    width: 88px;
    height: 88px;
    border-radius: 18px;
  }

  .company-management-detail-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-management-detail-groups .company-management-field-group:nth-child(3) .company-management-field-group-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-management-vertical-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-management-tab-subtitle {
    display: none;
  }

  .company-department-slot-grid {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 14px;
  }

  .company-management-pending-shell,
  .company-management-approved-shell {
    min-height: 210px;
  }

  .company-management-employee-card {
    padding: 14px;
  }

  .company-management-department-dialog-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  vaadin-dialog-overlay[theme~="company-department"]::part(header),
  vaadin-dialog-overlay[theme~="company-department"]::part(content),
  vaadin-dialog-overlay[theme~="company-department"]::part(footer) {
    padding-inline: 18px;
  }

  vaadin-dialog-overlay[theme~="company-department"]::part(footer) {
    flex-wrap: wrap;
  }

  vaadin-dialog-overlay[theme~="company-department"] vaadin-button {
    width: 100%;
  }

  .company-management-employee-filters {
    align-items: stretch;
  }

  .company-management-employee-filter-search,
  .company-management-employee-filter-select,
  .company-management-employee-filter-reset {
    width: 100% !important;
    flex-basis: 100%;
  }

  .company-management-employee-control-group,
  .company-management-department-select,
  .company-management-role-select,
  .company-management-custom-role-select {
    width: 100% !important;
  }

  .profile-page .media-content {
    padding: 16px;
  }

  .profile-card {
    padding: 18px;
  }

  .profile-side-panel,
  .profile-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-avatar-host {
    width: 164px;
    height: 164px;
  }

  .profile-avatar-preview {
    width: 150px;
    height: 150px;
    font-size: 2.75rem;
  }

  .profile-avatar-change-overlay {
    inset: 7px;
  }

  .profile-avatar-change-overlay vaadin-icon {
    width: 30px;
    height: 30px;
    padding: 8px;
  }

  .profile-avatar-upload-badge {
    right: 12px;
    bottom: 12px;
    width: 32px;
    height: 32px;
  }
}

.security-settings-card {
  display: grid;
  gap: 18px;
  width: min(880px, 100%);
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(141, 214, 255, 0.08) 0%, rgba(141, 214, 255, 0) 32%),
    linear-gradient(180deg, #1e1f22 0%, #191a1d 100%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.security-settings-page .media-content {
  gap: 18px;
  overflow: auto;
}

.security-login-activity-card {
  width: min(1120px, 100%);
}

.security-user-activity-card {
  width: min(1240px, 100%);
}

.security-audit-tabs {
  align-self: flex-start;
  max-width: 100%;
  padding: 5px;
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.security-audit-tabs vaadin-tab {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  color: var(--app-muted);
  font-weight: 800;
}

.security-audit-tabs vaadin-tab[selected] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--app-text);
}

.security-settings-card-header {
  margin: 0;
}

.security-settings-card-title {
  margin: 0;
  font-size: 1.18rem;
}

.security-settings-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.security-settings-status-enabled {
  background: rgba(69, 196, 132, 0.18);
  color: #95efc0;
}

.security-settings-status-off {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(232, 233, 236, 0.68);
}

.security-settings-description {
  max-width: 68ch;
  margin: 0;
  color: var(--app-muted);
  line-height: 1.6;
}

.security-settings-setup-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.security-settings-qr-panel {
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
}

.security-settings-qr {
  width: 220px;
  height: 220px;
}

.security-settings-setup-form {
  gap: 14px;
}

.security-settings-actions {
  flex-wrap: wrap;
  gap: 10px;
}

.security-login-grid-shell {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
}

.security-user-activity-grid-shell {
  min-height: 560px;
}

.security-login-activity-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.security-user-activity-grid {
  min-height: 560px;
}

.security-login-activity-grid::part(body-cell) {
  cursor: pointer;
}

.security-login-activity-grid::part(row):hover {
  background: rgba(255, 255, 255, 0.04);
}

.security-login-result-chip {
  font-weight: 800;
}

.security-login-result-success {
  border-color: rgba(120, 227, 168, 0.28);
  background: rgba(120, 227, 168, 0.14);
  color: #e9fff1;
}

.security-login-result-failed {
  border-color: rgba(255, 139, 139, 0.28);
  background: rgba(255, 139, 139, 0.14);
  color: #ffeaea;
}

.security-login-user-agent {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.security-login-details {
  overflow-wrap: anywhere;
}

.security-login-empty-state {
  min-height: 180px;
}

.security-audit-inspector-dialog::part(content) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  height: 100%;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(141, 214, 255, 0.08) 0%, rgba(141, 214, 255, 0) 34%),
    linear-gradient(180deg, #1e1f22 0%, #191a1d 100%);
  color: var(--app-text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.29);
  overflow: hidden;
}

.security-audit-inspector-header {
  gap: 16px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.security-audit-inspector-heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.security-audit-inspector-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
}

.security-audit-inspector-subtitle {
  color: var(--app-muted);
  font-size: 0.88rem;
}

.security-audit-inspector-action {
  flex: 0 0 auto;
}

.security-audit-inspector-close {
  flex: 0 0 auto;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
}

.security-audit-inspector-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.security-audit-inspector-tabs {
  width: fit-content;
  max-width: calc(100% - 48px);
  margin: 18px 24px 12px;
  padding: 5px;
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.security-audit-inspector-tabs vaadin-tab {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  color: var(--app-muted);
  font-weight: 800;
}

.security-audit-inspector-tabs vaadin-tab[selected] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--app-text);
}

.security-audit-inspector-panel {
  min-height: 0;
  overflow: auto;
  padding: 0 24px 24px;
}

.security-audit-overview-panel {
  display: grid;
  gap: 18px;
}

.security-audit-summary-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(120, 227, 168, 0.08) 0%, rgba(120, 227, 168, 0) 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.018) 100%);
}

.security-audit-summary-label {
  color: var(--app-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.security-audit-summary-text {
  color: #e1e2e4;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.35;
}

.security-audit-summary-supporting {
  max-width: 72ch;
  color: var(--app-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.security-audit-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.security-audit-summary-chip {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  color: #d9dadc;
}

.security-audit-details-grid {
  display: grid;
  gap: 0;
  min-width: 0;
}

.security-audit-details-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.security-audit-details-label {
  color: var(--app-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.security-audit-details-value {
  min-width: 0;
  color: #e0e0e2;
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.two-factor-code-field {
  margin-top: 4px;
}

.two-factor-error {
  color: var(--lumo-error-text-color);
  font-size: 0.9rem;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .security-settings-card {
    padding: 18px;
  }

  .security-settings-setup-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .security-settings-qr-panel {
    justify-self: flex-start;
  }

  .security-login-grid-shell {
    overflow-x: auto;
  }

  .security-audit-inspector-header {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 18px 18px 14px;
  }

  .security-audit-inspector-action {
    order: 2;
  }

  .security-audit-inspector-close {
    order: 1;
  }

  .security-audit-inspector-tabs {
    max-width: calc(100% - 36px);
    margin: 14px 18px 10px;
    overflow-x: auto;
  }

  .security-audit-inspector-panel {
    padding: 0 18px 18px;
  }

  .security-audit-details-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

.settings-api-domain-selector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.settings-api-domain-selector,
.settings-api-workspace-selector {
  position: relative;
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #1e1f22 0%, #191a1d 100%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.settings-api-domain-selector:hover,
.settings-api-workspace-selector:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.22);
}

.settings-api-domain-selector:focus-visible,
.settings-api-workspace-selector:focus-visible {
  outline: 2px solid rgba(122, 176, 226, 0.32);
  outline-offset: 2px;
}

.settings-api-domain-selector-active,
.settings-api-workspace-selector-active {
  color: #e8e9eb;
}

.settings-api-domain-selector-social.settings-api-domain-selector-active {
  border-color: rgba(122, 176, 226, 0.24);
  background:
    radial-gradient(circle at top right, rgba(122, 176, 226, 0.14) 0%, rgba(122, 176, 226, 0) 34%),
    linear-gradient(180deg, #181a1c 0%, #111315 100%);
}

.settings-api-domain-selector-mailing.settings-api-domain-selector-active {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #1f2023 0%, #191a1d 100%);
}

.settings-api-tab-icon {
  width: 24px;
  height: 24px;
  color: inherit;
  fill: currentColor;
}

.settings-api-selector-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.settings-api-selector-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.settings-api-selector-title {
  color: #e1e2e4;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.settings-api-selector-subtitle {
  color: #a7a7a7;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.settings-api-selector-icon-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  color: #e8e9eb;
  flex-shrink: 0;
}

.settings-api-selector-icon-shell-instagram {
  background: rgba(228, 64, 95, 0.12);
  color: #ffb4c4;
}

.settings-api-selector-icon-shell-linkedin {
  background: rgba(10, 102, 194, 0.16);
  color: #a8d0ff;
}

.settings-api-selector-icon-shell-youtube {
  background: rgba(255, 0, 51, 0.12);
  color: #ffb2c2;
}

.settings-api-selector-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-api-selector-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #cccdcf;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.settings-api-selector-chip-ready {
  border-color: rgba(122, 176, 226, 0.24);
  background: rgba(122, 176, 226, 0.14);
  color: #e6f4ff;
}

.settings-api-selector-chip-muted {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #c0c1c3;
}

.settings-api-domain-shell {
  width: 100%;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.settings-api-domain-panel {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.settings-api-workspace-shell {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.settings-api-workspace-rail {
  position: sticky;
  top: 0;
  align-self: start;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--app-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, #1e1e22 0%, #191a1d 100%);
  max-width: 100%;
  box-sizing: border-box;
}

.settings-api-rail-header {
  display: grid;
  gap: 6px;
}

.settings-api-rail-eyebrow {
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-api-rail-title {
  color: #e1e2e4;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

.settings-api-rail-subtitle {
  color: #a7a7a7;
  font-size: 0.86rem;
  line-height: 1.55;
}

.settings-api-workspace-rail-list {
  display: grid;
  gap: 12px;
}

.settings-api-workspace-selector-active {
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.24);
}

.settings-api-workspace-selector-instagram.settings-api-workspace-selector-active {
  border-color: rgba(228, 64, 95, 0.24);
  background:
    radial-gradient(circle at top right, rgba(228, 64, 95, 0.14) 0%, rgba(228, 64, 95, 0) 34%),
    linear-gradient(180deg, #191415 0%, #191a1d 100%);
}

.settings-api-workspace-selector-linkedin.settings-api-workspace-selector-active {
  border-color: rgba(10, 102, 194, 0.28);
  background:
    radial-gradient(circle at top right, rgba(10, 102, 194, 0.16) 0%, rgba(10, 102, 194, 0) 34%),
    linear-gradient(180deg, #15181c 0%, #101113 100%);
}

.settings-api-workspace-selector-youtube.settings-api-workspace-selector-active {
  border-color: rgba(255, 0, 51, 0.24);
  background:
    radial-gradient(circle at top right, rgba(255, 0, 51, 0.14) 0%, rgba(255, 0, 51, 0) 34%),
    linear-gradient(180deg, #1a1416 0%, #191a1d 100%);
}

.settings-api-workspace-stage {
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
}

.settings-api-panel,
.settings-api-domain-panel-mailing {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--app-border);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, #1e1f22 0%, #191a1d 100%);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  overflow: hidden;
}

.settings-api-panel-instagram {
  border-color: rgba(228, 64, 95, 0.16);
}

.settings-api-panel-linkedin {
  border-color: rgba(10, 102, 194, 0.18);
}

.settings-api-panel-youtube {
  border-color: rgba(255, 0, 51, 0.16);
}

.settings-api-domain-panel-mailing {
  border-color: rgba(255, 255, 255, 0.08);
}

.settings-api-workspace-hero {
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.settings-api-workspace-hero-instagram {
  border-color: transparent;
}

.settings-api-workspace-hero-linkedin {
  border-color: transparent;
}

.settings-api-workspace-hero-youtube {
  border-color: transparent;
}

.settings-api-workspace-hero-mailing {
  border-color: transparent;
}

.settings-api-workspace-header {
  margin: 0;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.settings-api-workspace-copy {
  gap: 8px;
  margin: 0;
}

.settings-api-workspace-title-row {
  margin: 0;
  gap: 16px;
  align-items: center;
}

.settings-api-workspace-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-api-workspace-eyebrow-instagram {
  background: rgba(228, 64, 95, 0.14);
  color: #ffb4c4;
}

.settings-api-workspace-eyebrow-linkedin {
  background: rgba(10, 102, 194, 0.18);
  color: #a8d0ff;
}

.settings-api-workspace-eyebrow-youtube {
  background: rgba(255, 0, 51, 0.14);
  color: #ffb2c2;
}

.settings-api-workspace-eyebrow-mailing {
  background: rgba(255, 255, 255, 0.08);
  color: #d4d5d7;
}

.settings-api-workspace-title {
  margin: 0;
  font-size: 1.38rem;
  line-height: 1.15;
}

.settings-api-workspace-subtitle {
  max-width: 72ch;
  overflow-wrap: anywhere;
}

.settings-api-workspace-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-api-workspace-chip,
.settings-api-workspace-chip.media-stat-chip {
  min-height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(232, 233, 236, 0.72);
  font-size: var(--lumo-font-size-s);
  font-weight: 600;
  line-height: 1.3;
}

.settings-api-add-button {
  flex-shrink: 0;
}

.settings-api-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.settings-api-insight-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
}

.settings-api-insight-label {
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-api-insight-value {
  color: #dfe0e2;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.settings-api-accounts-shell {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-right: none;
  border-bottom: none;
  border-left: none;
  border-radius: 0;
  background: transparent;
}

.settings-api-section-header {
  display: grid;
  gap: 4px;
}

.settings-api-section-title {
  color: #e1e2e4;
  font-size: 1rem;
  font-weight: 700;
}

.settings-api-account-grid {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.settings-account-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
  padding: 18px 20px;
  background: transparent;
  box-sizing: border-box;
}

.settings-account-row + .settings-account-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-account-row-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
  flex: 1 1 auto;
}

.settings-account-row-title {
  color: #e1e2e4;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
}

.settings-account-row-subtitle {
  color: var(--app-muted);
  font-size: 0.79rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.settings-account-row-summary {
  color: #cecfd1;
  font-size: 0.88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.settings-account-row-detail {
  color: #9d9d9d;
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.settings-account-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  align-self: center;
}

.settings-account-row-status {
  white-space: nowrap;
}

.settings-account-row-action {
  min-height: 36px;
  padding-inline: 14px;
  border-radius: 999px;
}

.settings-api-account-grid .posts-empty-state {
  margin: 18px;
}

.media-heading {
  gap: 2px;
  min-width: 0;
}

.media-heading-row {
  margin: 0;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.media-title {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: 0.2px;
}

.media-subtitle {
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
}

.settings-api-heading {
  gap: 4px;
}

.settings-api-title-row {
  margin: 0;
  gap: 16px;
  align-items: center;
}

.settings-api-overview-stat {
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}

.media-stat-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.media-stat-group > * {
  max-width: 100%;
}

.media-stat-chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--app-border-strong);
  background: var(--app-surface-1);
  font-size: var(--lumo-font-size-s);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.media-selection-meta,
.media-results-meta {
  display: inline-flex;
  align-items: center;
  color: rgba(232, 233, 236, 0.6);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.media-selection-meta {
  min-width: fit-content;
  padding-inline-end: 4px;
}

.media-results-footer {
  margin: 0;
  padding: 0 4px 2px;
  min-height: 20px;
}

.media-filter-row,
.media-action-row {
  margin: 0;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.media-action-row {
  align-items: center;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: linear-gradient(180deg, #1c1d20 0%, #191a1d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.media-storage-action-row {
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}

.media-storage-action-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 20px;
  background: linear-gradient(180deg, #1d1e21 0%, #191a1d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}

.media-storage-action-panel .media-action-row {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.media-storage-primary-row .media-search-field {
  flex: 1 1 320px;
  min-width: 280px;
}

.media-storage-primary-row .media-upload {
  flex: 0 1 auto;
}

.media-storage-bulk-row {
  justify-content: flex-start;
}

.media-storage-bulk-row .media-folder-bulk-field {
  width: 220px !important;
  min-width: 220px;
}

.file-folder-create-row {
  gap: 8px;
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
}

.file-folder-create-row .file-folder-create-field {
  min-width: 0;
}

.file-folder-create-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--app-radius-control-lg);
}

.file-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 18px;
  box-sizing: border-box;
}

.file-card {
  display: grid;
  grid-template-columns: 34px 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: linear-gradient(180deg, #1e1e22 0%, #191a1d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}

.file-card.selected {
  border-color: rgba(122, 176, 226, 0.42);
  background: linear-gradient(180deg, rgba(24, 47, 64, 0.78) 0%, rgba(16, 28, 38, 0.92) 100%);
}

.file-card.previewing {
  border-color: rgba(122, 176, 226, 0.68);
  box-shadow: 0 0 0 1px rgba(122, 176, 226, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.file-card-copy,
.file-card-icon {
  cursor: pointer;
}

.media-explorer-file-button.previewing {
  background: rgba(122, 176, 226, 0.12);
  border-color: rgba(122, 176, 226, 0.5);
}

.file-preview-pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background: #0d0d0d;
  overflow: hidden;
  box-sizing: border-box;
}

.file-preview-pane.empty {
  align-items: center;
  justify-content: center;
}

.file-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  color: #7d7d7d;
  text-align: center;
}

.file-preview-empty vaadin-icon {
  width: 28px;
  height: 28px;
}

.file-preview-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--app-border);
  background: #121212;
}

.file-preview-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.file-preview-title {
  color: #f4f4f4;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-preview-meta {
  color: #9d9d9d;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-preview-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  flex: 0 0 auto;
}

.file-preview-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  background: #050505;
}

.file-preview-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}

.file-preview-image {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.file-preview-body-unsupported {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
  color: #c4c4c4;
}

.file-preview-fallback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #202020;
  color: #d8e7f2;
}

.file-preview-fallback-icon vaadin-icon {
  width: 28px;
  height: 28px;
}

.file-preview-fallback-type {
  color: #b9c7d1;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.file-preview-fallback-hint {
  color: #9d9d9d;
  font-size: 0.85rem;
  max-width: 320px;
  line-height: 1.4;
}

.file-preview-fallback-action {
  margin-top: 4px;
}

.file-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #242528;
  color: #d8e7f2;
}

.file-card-icon vaadin-icon {
  width: 22px;
  height: 22px;
}

.file-card-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.file-card-title {
  color: #e1e2e4;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-card-meta,
.file-card-folder {
  color: #9d9d9d;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-card-folder {
  color: #b9c7d1;
}

.file-card-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.file-library-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  grid-column: 1 / -1;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #a8a8a8;
}

.file-library-empty-state vaadin-icon {
  width: 28px;
  height: 28px;
  color: #d4e5f2;
}

.media-action-row > * {
  margin: 0;
  max-width: 100%;
}

.posts-archive-toggle.active {
  border-color: rgba(122, 176, 226, 0.34);
  background: rgba(122, 176, 226, 0.14);
  color: #e4f4ff;
}

.posts-filter-row {
  min-width: 0;
  margin: 0;
  gap: 10px;
}

.posts-title-row {
  margin: 0;
  gap: 10px;
}

.posts-title-copy {
  gap: 0;
}

.posts-heading-toggle {
  flex-shrink: 0;
}

.posts-heading-toggle.active {
  border-color: rgba(122, 176, 226, 0.34);
  background: rgba(122, 176, 226, 0.14);
  color: #e4f4ff;
}

.posts-heading-actions {
  align-items: center;
}

.posts-console-header {
  margin: 0;
  padding: 4px 4px 0;
  align-items: center;
}

.posts-content-column {
  gap: 16px;
}

.posts-console-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(122, 176, 226, 0.08) 0%, rgba(122, 176, 226, 0) 28%),
    linear-gradient(180deg, #1e1e22 0%, #191a1d 100%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}

.posts-selection-toolbar {
  margin: 0;
  gap: 10px;
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
  flex-wrap: wrap;
}

.posts-selection-toolbar .posts-heading-actions {
  margin-left: auto;
  justify-content: flex-end;
}

.posts-selection-count {
  white-space: nowrap;
}

.posts-filter-search,
.posts-filter-category,
.posts-filter-channel,
.posts-filter-schedule,
.posts-filter-media,
.posts-filter-scope {
  min-width: 0;
}

.posts-filters-stack {
  gap: 8px;
}

.posts-primary-filter-row,
.posts-secondary-filter-row {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.posts-primary-filter-row {
  flex-wrap: wrap;
}

.posts-secondary-filter-row {
  margin: 0;
  gap: 10px;
  flex-wrap: wrap;
}

.posts-secondary-filter-row > * {
  min-width: 0;
  flex: 1 1 180px;
}

.posts-primary-filter-row .posts-filter-search {
  flex: 1 1 320px;
}

.posts-filter-category,
.posts-filter-channel,
.posts-filter-schedule,
.posts-filter-media,
.posts-filter-scope {
  flex: 1 1 180px;
}

.posts-filter-search::part(input-field),
.posts-filter-category::part(input-field),
.posts-filter-channel::part(input-field),
.posts-filter-schedule::part(input-field),
.posts-filter-media::part(input-field),
.posts-filter-scope::part(input-field) {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, #26272a 0%, #202124 100%);
  box-shadow: none;
}

.posts-filter-search::part(value),
.posts-filter-category::part(value),
.posts-filter-channel::part(value),
.posts-filter-schedule::part(value),
.posts-filter-media::part(value),
.posts-filter-scope::part(value) {
  color: #dedfe1;
}

.posts-filter-search vaadin-icon,
.posts-filter-category vaadin-icon,
.posts-filter-channel vaadin-icon,
.posts-filter-schedule vaadin-icon,
.posts-filter-media vaadin-icon,
.posts-filter-scope vaadin-icon {
  color: #9fb7c8;
}

.posts-filter-action-button {
  min-height: 44px;
  padding-inline: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: #e0e0e2;
  font-weight: 600;
  white-space: nowrap;
}

.posts-filter-action-button:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.post-ai-action-row {
  margin: 0;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
}

.post-ai-brief-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--app-button-min-height);
  min-height: var(--app-button-min-height);
  padding: 0 14px;
  border: 1px solid var(--app-button-border);
  border-radius: var(--app-radius-control-lg);
  background: rgba(255, 255, 255, 0.02);
  color: #b9b9b9;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
      border-color var(--app-button-transition),
      background var(--app-button-transition),
      color var(--app-button-transition);
  box-sizing: border-box;
}

.post-ai-brief-button:hover {
  border-color: rgba(255, 255, 255, 0.14);
  color: #dedfe1;
}

.post-ai-brief-button.active {
  border-color: rgba(122, 176, 226, 0.34);
  background: rgba(122, 176, 226, 0.12);
  color: #dff2ff;
}

.post-ai-brief-button vaadin-icon {
  width: 14px;
  height: 14px;
}

.post-ai-generate-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--app-button-min-height);
  min-height: var(--app-button-min-height);
  padding: 0 14px;
  border: 1px solid var(--app-button-border);
  border-radius: var(--app-radius-control-lg);
  background: linear-gradient(180deg, #1f2023 0%, #1b1c1f 100%);
  color: #cfd0d2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
      border-color var(--app-button-transition),
      background var(--app-button-transition),
      transform var(--app-button-transition);
  box-sizing: border-box;
}

.post-ai-generate-button:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, #242528 0%, #1d1e21 100%);
}

.post-ai-generate-button:active {
  transform: translateY(1px);
}

.post-ai-generate-button[disabled],
.post-ai-generate-button.loading {
  opacity: 1;
}

.post-ai-generate-button.stop-mode {
  border-color: rgba(255, 120, 120, 0.34);
  background: linear-gradient(180deg, rgba(140, 32, 32, 0.9) 0%, rgba(92, 22, 22, 0.96) 100%);
  color: #fff0f0;
}

.post-ai-generate-button.stop-mode:hover {
  border-color: rgba(255, 150, 150, 0.46);
  background: linear-gradient(180deg, rgba(156, 38, 38, 0.96) 0%, rgba(105, 24, 24, 1) 100%);
}

.post-ai-generate-button::part(label) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.post-ai-brief-button::part(label) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.post-ai-generate-button-content {
  gap: 10px;
}

.post-ai-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.post-ai-action-icon-idle::before {
  content: "✦";
  font-size: 0.9rem;
  line-height: 1;
}

.post-ai-action-icon-stop::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: currentColor;
}

.post-ai-loading-text {
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

vaadin-dialog-overlay[theme~="post-ai-brief"]::part(content) {
  width: min(560px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background: linear-gradient(180deg, #26272a 0%, #202124 100%);
  color: #dfe0e2;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
}

vaadin-dialog-overlay[theme~="post-ai-brief"]::part(header) {
  padding: 18px 20px 8px;
}

vaadin-dialog-overlay[theme~="post-ai-brief"]::part(title) {
  color: #e1e2e4;
  font-size: 1rem;
  font-weight: 700;
}

vaadin-dialog-overlay[theme~="post-ai-brief"]::part(footer) {
  padding: 8px 20px 18px;
  background: transparent;
  border-top: none;
  box-shadow: none;
}

.post-ai-brief-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 0 20px 8px;
  box-sizing: border-box;
}

.post-ai-brief-help {
  margin: 0;
  color: #a8a8a8;
  font-size: 0.84rem;
  line-height: 1.5;
}

vaadin-dialog-overlay[theme~="post-ai-brief"] vaadin-text-area.post-ai-brief-field::part(input-field) {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: #242528;
  box-shadow: none;
  min-height: 220px;
}

vaadin-dialog-overlay[theme~="post-ai-brief"] vaadin-text-area.post-ai-brief-field::part(label) {
  color: #c2c3c5;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

vaadin-dialog-overlay[theme~="post-ai-brief"] vaadin-text-area.post-ai-brief-field::part(helper-text) {
  color: #919191;
}

.media-upload {
  min-width: 370px;
}

.media-search-field {
  min-width: 280px;
}

.media-search-field::part(input-field) {
  min-height: 44px;
  border: 1px solid var(--app-border-strong);
  border-radius: 12px;
  background: #202124;
  box-shadow: none;
}

.media-search-field::part(value) {
  color: var(--app-text);
}

.media-search-field vaadin-icon {
  color: var(--app-input-icon);
}

.media-upload::part(primary-buttons) {
  padding: 0;
}

.media-upload::part(drop-label) {
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
}

.media-upload::part(drop-label-icon) {
  color: var(--app-text);
}

.media-upload::part(upload-button) {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #3a3a3a;
  border-radius: 12px;
  background: linear-gradient(180deg, #27282b 0%, #212225 100%);
  color: #e8e9eb;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.media-upload::part(upload-button):hover {
  border-color: #4a4a4a;
  background: linear-gradient(180deg, #2d2e31 0%, #252629 100%);
}

.media-upload::part(drop-label),
.media-upload::part(upload-button) {
  display: flex;
  align-items: center;
}

.media-upload[dragover-valid] {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.media-action-row vaadin-button {
  min-height: var(--app-button-min-height);
  padding-inline: var(--app-button-padding-inline);
  border-radius: var(--app-radius-control-lg);
  font-weight: 600;
}

.media-action-button::part(label),
.media-action-button-primary::part(label),
.media-action-button-danger::part(label) {
  line-height: 1;
}

.media-action-button {
  border-radius: var(--app-radius-control-lg);
}

.media-action-button:hover {
  border-color: var(--app-button-border-hover);
}

.media-action-button-primary {
  border-radius: var(--app-radius-control-lg);
}

.media-action-button-primary:hover {
  background: var(--app-button-primary-surface-hover);
}

.media-action-button-danger {
  border-radius: var(--app-radius-control-lg);
}

.media-action-button-danger:hover {
  border-color: var(--app-button-danger-border);
  color: #e8e9eb;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 14px;
  align-items: start;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.media-main-row {
  overflow: hidden;
  min-width: 0;
}

.media-main-layout {
  min-width: 0;
  min-height: 0;
  gap: 16px;
  padding: 14px;
  box-sizing: border-box;
}

.media-main-layout > * {
  min-width: 0;
  min-height: 0;
}

.media-main-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.media-main-column > * {
  min-width: 0;
}

.media-preview-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 8px 0 14px;
  padding: 18px;
  border: 1px solid var(--app-border);
  border-radius: 20px;
  background: linear-gradient(180deg, #171717 0%, #111111 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

.media-preview-stage-header {
  margin: 0;
  gap: 16px;
  align-items: flex-start;
}

.media-preview-stage-heading {
  gap: 4px;
  min-width: 0;
}

.media-preview-stage-heading > * {
  min-width: 0;
}

.media-preview-stage-eyebrow {
  color: #aeb5be;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.media-preview-stage-title {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-preview-stage-meta {
  color: #9b9b9b;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-preview-stage-actions {
  margin: 0;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.media-preview-stage-download {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #f1f1f1;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease;
}

.media-preview-stage-download:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.media-preview-stage-close {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #f1f1f1;
}

.media-preview-stage-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.media-preview-stage-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 12px;
  border-radius: 18px;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01) 45%), #090909;
  overflow: hidden;
}

.media-preview-stage-asset {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  display: block;
  border-radius: 14px;
  background: #000;
}

.media-preview-stage-video {
  min-height: 320px;
}

.media-grid-scroller {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.media-grid-scroller::part(content) {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.posts-list-scroller::part(content) {
  overflow-x: hidden;
  overflow-y: auto;
}

.posts-list-scroller {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  box-sizing: border-box;
  min-height: 100%;
}

.posts-main-layout {
  min-width: 0;
  gap: 16px;
  padding: 14px;
  box-sizing: border-box;
}

.posts-main-layout > * {
  min-width: 0;
}

.post-card {
  --type-accent: #888888;
  --type-tint: rgba(255, 255, 255, 0.06);
  --type-tint-soft: rgba(255, 255, 255, 0.025);
  display: grid;
  grid-template-columns: 56px 168px minmax(0, 1fr);
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
  position: relative;
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, var(--type-tint-soft) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, #1d1e21 0%, #18191c 100%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition:
    border-color 160ms ease,
    box-shadow 200ms ease,
    transform 180ms ease,
    background 220ms ease;
}

.post-card.post-card-type-post {
  --type-accent: #4f9ee0;
  --type-tint: rgba(79, 158, 224, 0.16);
  --type-tint-soft: rgba(79, 158, 224, 0.07);
}

.post-card.post-card-type-story {
  --type-accent: #d65d77;
  --type-tint: rgba(214, 93, 119, 0.18);
  --type-tint-soft: rgba(214, 93, 119, 0.07);
}

.post-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.27);
  transform: translateY(-1px);
}

.post-card.archived {
  --type-accent: rgba(255, 255, 255, 0.32);
  --type-tint: rgba(255, 255, 255, 0.05);
  --type-tint-soft: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #1d1e21 0%, #191a1d 100%);
  cursor: default;
}

.post-card.archived:hover {
  transform: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

/* Archived cards still need to be identifiable from the archive list, so the
   ARCHIVED wordmark drops behind the content as a watermark rather than
   blurring it away: thumbnail, account and created date stay scannable. */
.post-card.archived .post-card-meta,
.post-card.archived .post-card-body {
  position: relative;
  z-index: 2;
  filter: none;
  pointer-events: none;
  user-select: none;
}

/* Dim the text but not the peek — an ancestor's opacity cannot be undone by a
   child, so the thumbnail is deliberately left out of this rule. */
.post-card.archived .post-card-type-badge,
.post-card.archived .post-card-meta-supplemental,
.post-card.archived .post-card-body {
  opacity: 0.68;
}

.post-card.archived .post-card-thumb {
  filter: grayscale(0.35);
}

.post-card.selectable {
  cursor: pointer;
  touch-action: auto;
}

.post-card.selectable:active {
  cursor: pointer;
}

.post-card.selected {
  --type-accent: #7ab0e2;
  --type-tint: rgba(122, 176, 226, 0.18);
  --type-tint-soft: rgba(122, 176, 226, 0.08);
  border-color: rgba(122, 176, 226, 0.42);
  background:
    radial-gradient(circle at top right, rgba(122, 176, 226, 0.14) 0%, rgba(122, 176, 226, 0) 30%),
    linear-gradient(180deg, #1a2128 0%, #12171d 100%);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(122, 176, 226, 0.2);
}

.post-card.dragging {
  opacity: 0.3;
}

.post-card:active {
  cursor: grabbing;
}

.post-card.drag-ghost {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  right: auto;
  pointer-events: none;
  opacity: 0.96;
  transform: rotate(-1deg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.26);
  grid-template-columns: 56px minmax(0, auto);
  gap: 0;
  width: 160px !important;
  min-height: 0;
}

.post-card.drag-ghost .post-card-body,
.post-card.drag-ghost .post-card-info,
.post-card.drag-ghost .post-card-description-column,
.post-card.drag-ghost .post-card-actions {
  display: none;
}

.post-card.drag-ghost .post-card-meta {
  padding: 12px 14px;
  justify-content: center;
}

.post-card.drag-ghost .post-card-meta .post-chip:not(.post-card-id-chip) {
  display: none;
}

.post-card.drag-ghost .post-card-thumb,
.post-card.drag-ghost .post-card-thumb.post-card-thumb-story {
  width: 40px;
  aspect-ratio: 1;
  border-radius: 8px;
  box-shadow: none;
}

.post-card.drag-ghost .post-card-thumb-count {
  display: none;
}

/* --- rail (date strip) ----------------------------------------------- */

.post-card-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  padding: 24px 0;
  background:
    linear-gradient(180deg,
      var(--type-tint) 0%,
      rgba(255, 255, 255, 0.02) 55%,
      rgba(255, 255, 255, 0.008) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.post-card-rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--type-accent);
}

.post-card-rail-day,
.post-card-rail-month {
  color: #dedfe1;
  line-height: 1;
}

.post-card-rail-day {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.post-card-rail-month {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232, 233, 236, 0.55);
}

/* --- meta column (type pill + chips) -------------------------------- */

.post-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 16px 22px 22px;
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.post-card-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 104px;
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.26);
}

/* Stories are shot 9:16 — give them a taller peek than the square feed crop. */
.post-card-thumb.post-card-thumb-story {
  aspect-ratio: 3 / 4;
}

.post-card-thumb-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sits under the image, so a 404'd asset degrades to this instead of a broken glyph. */
.post-card-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 233, 236, 0.2);
}

.post-card-thumb-count {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(20, 21, 24, 0.72);
  color: #e0e0e2;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
}

.post-card-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  width: auto;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--type-accent) 36%, transparent);
  border-radius: 999px;
  background: var(--type-tint);
  overflow: visible;
  box-sizing: border-box;
}

.post-card-type-badge::before {
  display: none;
}

.post-card-type-post,
.post-card-type-story {
  color: var(--type-accent);
}

.post-card-type-label {
  display: block;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.post-card-meta-supplemental {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.post-card-id-chip {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #dedfe1;
  font-weight: 600;
}

.post-card-account-chip {
  max-width: 100%;
  border-color: rgba(122, 184, 255, 0.28);
  background: rgba(122, 184, 255, 0.1);
  color: #cfe4ff;
  font-weight: 600;
  overflow: hidden;
}

.post-card-created-chip {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(232, 233, 236, 0.48);
  font-size: 0.76rem;
}

/* --- body (info chips + description) -------------------------------- */

.post-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 108px 22px 22px;
  min-width: 0;
}

.post-card-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.post-card-info > .post-chip-row {
  display: contents;
}

.post-card-description-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
  width: 100%;
  min-width: 0;
}

.post-card-collapsed-summary {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

/* --- floating action cluster ---------------------------------------- */

.post-card .post-card-actions {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(24, 25, 28, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0.55;
  transition: opacity 140ms ease, border-color 140ms ease, background 140ms ease;
}

.post-card:hover .post-card-actions,
.post-card:focus-within .post-card-actions,
.post-card.selected .post-card-actions {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(24, 25, 28, 0.78);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.post-card .post-card-actions .post-card-action {
  min-width: 32px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.post-card .post-card-actions .post-card-action:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
  transform: none;
}

/* --- collapsed state ------------------------------------------------ */

.post-card.post-card-collapsed {
  grid-template-columns: 56px minmax(290px, 340px) minmax(0, 1fr);
}

.post-card.post-card-collapsed .post-card-thumb,
.post-card.post-card-collapsed .post-card-thumb.post-card-thumb-story {
  width: 44px;
  aspect-ratio: 1;
  border-radius: 9px;
  box-shadow: none;
}

.post-card.post-card-collapsed .post-card-thumb-count {
  display: none;
}

.post-card.post-card-collapsed .post-card-thumb-placeholder {
  font-size: 0.46rem;
  letter-spacing: 0.06em;
}

.post-card.post-card-collapsed .post-card-meta {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 18px 16px 18px 22px;
}

.post-card.post-card-collapsed .post-card-meta-supplemental {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.post-card.post-card-collapsed .post-card-meta .post-chip,
.post-card.post-card-collapsed .post-card-collapsed-summary .post-chip {
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.8rem;
}

.post-card.post-card-collapsed .post-card-body {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 18px 108px 18px 22px;
}

.post-card.post-card-collapsed .post-card-info {
  display: none;
}

.post-card.post-card-collapsed .post-card-description-column {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.post-card.post-card-collapsed .post-card-collapsed-summary {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
}

.post-card.post-card-collapsed .post-description {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.3;
  color: rgba(225, 226, 228, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.post-card.post-card-collapsed .post-card-rail {
  padding: 16px 0;
}

.post-card.post-card-collapsed .post-card-rail-day {
  font-size: 1.18rem;
}

.post-card.post-card-collapsed .post-card-rail-month {
  font-size: 0.66rem;
}

.post-card-action {
  min-width: 34px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #e0e0e2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.post-card-action:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.post-card-action-select.active {
  border-color: rgba(122, 176, 226, 0.38);
  background: rgba(122, 176, 226, 0.16);
  color: #e8f7ff;
}

.post-card-action-archive.active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  color: #e8e9eb;
}

.post-card-archived-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.post-card-archived-actions .post-card-action {
  pointer-events: none;
  opacity: 0.35;
}

.post-card-archived-actions .post-card-action-archive {
  pointer-events: auto;
  opacity: 1;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.post-card-selection-overlay-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.post-card-selection-overlay-actions .post-card-action {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.post-card-archived-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 21, 24, 0.16) 0%, rgba(20, 21, 24, 0.24) 100%);
}

.post-card-archived-overlay span {
  color: rgba(232, 233, 236, 0.07);
  font-size: 128px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 1380px) {
  .posts-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 12px;
  }

  .posts-heading {
    gap: 0;
  }

  .posts-title-row {
    gap: 8px;
  }

  .posts-page-title {
    font-size: 1.28rem;
    line-height: 1.04;
  }

  .posts-page-subtitle {
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .posts-heading-row .posts-stat-group {
    width: auto;
    justify-content: flex-end;
    align-self: start;
  }

  .posts-results-chip {
    min-height: 34px;
    padding: 5px 11px;
    font-size: 0.82rem;
  }

  .posts-primary-filter-row {
    gap: 8px;
  }

  .posts-secondary-filter-row {
    gap: 8px;
  }

  .posts-filter-search,
  .posts-filter-category,
  .posts-filter-channel,
  .posts-filter-schedule,
  .posts-filter-media,
  .posts-filter-scope {
    width: auto !important;
  }

  .posts-filter-category,
  .posts-filter-channel,
  .posts-filter-schedule,
  .posts-filter-media,
  .posts-filter-scope {
    max-width: 220px;
  }

  .posts-filter-action-button {
    min-height: 38px;
    padding-inline: 12px;
  }

  .posts-filter-search::part(input-field),
  .posts-filter-category::part(input-field),
  .posts-filter-channel::part(input-field),
  .posts-filter-schedule::part(input-field),
  .posts-filter-media::part(input-field),
  .posts-filter-scope::part(input-field) {
    min-height: 38px;
  }

  .post-card {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 0;
  }

  .post-card-rail {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .post-card-meta {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 18px 0 0;
  }

  .post-card-meta-supplemental {
    gap: 6px;
  }

  .post-card-thumb {
    width: 96px;
  }

  .post-card-body {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 10px 18px 18px 0;
  }

  .post-card-description-column {
    order: -1;
    padding: 0;
  }

  .post-card-description-header {
    position: relative;
    flex-wrap: nowrap;
    align-items: flex-start;
    min-height: 34px;
    padding-right: 132px;
  }

  .post-card-actions {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .post-card.post-card-collapsed .post-card-meta {
    display: grid;
    grid-template-columns: 40px minmax(150px, 174px) minmax(86px, 1fr);
    padding: 10px 14px 0 0;
    column-gap: 10px;
    row-gap: 4px;
  }

  .post-card.post-card-collapsed .post-card-thumb,
  .post-card.post-card-collapsed .post-card-thumb.post-card-thumb-story {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 40px;
  }

  .post-card.post-card-collapsed .post-card-body {
    gap: 6px;
    padding: 6px 14px 10px 0;
  }

  .post-card.post-card-collapsed .post-card-description-header {
    position: static;
    min-height: 0;
    padding-right: 0;
    align-items: center;
    justify-content: flex-end;
    width: auto;
  }

  .post-card.post-card-collapsed .post-card-actions {
    position: static;
    top: auto;
    right: auto;
  }

  .post-card-archived-overlay span {
    font-size: 112px;
  }
}

/* Narrow desktop / tablet: collapse the meta block into a single tidy row
   with a compact type pill, inline chips, and actions pinned to the right
   so the row uses the full width instead of stranding empty space. */
@media (max-width: 1280px) {
  .post-card {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 22px;
    row-gap: 0;
  }

  .post-card-rail {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .post-card-meta,
  .post-card.post-card-collapsed .post-card-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 14px 132px 6px 12px;
    column-gap: 10px;
    row-gap: 8px;
  }

  .post-card-thumb,
  .post-card.post-card-collapsed .post-card-thumb,
  .post-card-thumb.post-card-thumb-story,
  .post-card.post-card-collapsed .post-card-thumb.post-card-thumb-story {
    grid-column: auto;
    grid-row: auto;
    width: 52px;
    aspect-ratio: 1;
    border-radius: 10px;
    box-shadow: none;
  }

  .post-card-thumb-count {
    display: none;
  }

  .post-card-thumb-placeholder {
    font-size: 0.48rem;
    letter-spacing: 0.06em;
  }

  .post-card-type-badge,
  .post-card.post-card-collapsed .post-card-type-badge {
    width: auto;
    min-height: 32px;
    flex: 0 0 auto;
    padding: 6px 14px 6px 14px;
    border-radius: 999px;
    align-self: center;
  }

  /* Solid pill fill (not a fading gradient) at narrow widths. */
  .post-card-type-badge::before {
    border-radius: 999px;
  }

  .post-card-type-post::before {
    background: rgba(27, 63, 103, 0.98);
  }

  .post-card-type-story::before {
    background: rgba(89, 30, 44, 0.98);
  }

  .post-card-type-label,
  .post-card.post-card-collapsed .post-card-type-label {
    font-size: 0.74rem;
    letter-spacing: 0.04em;
  }

  .post-card-meta-supplemental,
  .post-card.post-card-collapsed .post-card-meta-supplemental {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
  }

  .post-card.post-card-collapsed .post-card-meta-supplemental .post-chip,
  .post-card-meta-supplemental .post-chip {
    min-height: 24px;
    padding: 0 10px;
    font-size: 0.74rem;
  }

  /* Pin the action buttons to the top-right of the card so they
     occupy the previously-empty right-hand area. Applies for both
     collapsed and expanded cards at this width. */
  .post-card-actions,
  .post-card.post-card-collapsed .post-card-actions {
    position: absolute;
    top: 12px;
    right: 14px;
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
    z-index: 3;
  }

  /* Body / description sits below the meta row and only takes the
     space it needs — no padding-right reservation since actions are
     pinned to the card itself. */
  .post-card-body,
  .post-card.post-card-collapsed .post-card-body {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 0 14px 14px 0;
  }

  .post-card-description-header,
  .post-card.post-card-collapsed .post-card-description-header {
    position: static;
    min-height: 0;
    padding-right: 0;
  }

  /* Hide description-header chrome on the collapsed card — the
     section label is redundant when meta and actions are already
     visible above. */
  .post-card.post-card-collapsed .post-card-description-header .post-section-label {
    display: none;
  }

  /* Empty bodies (no description / no media / no channels) shouldn't
     reserve a second grid row of padding. */
  .post-card-info:empty,
  .post-card-description-column:empty {
    display: none;
  }
}

@media (max-width: 1180px) {

  .posts-main-layout {
    flex-direction: column;
  }

  .posts-main-layout .posts-left-rail {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--app-border);
  }

  .posts-main-layout .posts-left-rail.collapsed {
    width: 100%;
    min-width: 0;
  }

  .posts-main-layout .posts-left-rail-header {
    display: none;
  }

  .posts-main-layout .posts-rail-toggle {
    display: flex;
  }

  .posts-main-layout .posts-left-rail.collapsed .posts-rail-toggle {
    display: flex;
  }

  .posts-main-layout .posts-rail-section {
    display: none;
  }

  .posts-main-layout .posts-left-rail[data-active-rail="month"] .posts-rail-section-month {
    display: block;
  }

  .posts-main-layout .posts-left-rail[data-active-rail="weeks"] .posts-rail-section-weeks {
    display: flex;
  }

  .posts-main-layout .posts-mini-calendar-nav {
    padding: 10px 12px 0;
  }

  .posts-main-layout .posts-mini-calendar-overview {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px 12px 12px;
    border-bottom: none;
  }

  .posts-main-layout .posts-mini-calendar {
    flex: 1 1 220px;
    max-width: 320px;
    padding: 8px;
  }

  .posts-main-layout .posts-left-rail.collapsed .posts-mini-calendar-grid {
    display: grid;
  }

  .posts-main-layout .posts-left-rail.collapsed .posts-mini-calendar-title {
    margin-bottom: 8px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-align: left;
  }

  .posts-main-layout .posts-left-rail.collapsed .posts-mini-calendar-title::after {
    content: none;
  }

  .posts-main-layout .posts-mini-calendar-overview .posts-mini-calendar:nth-child(n + 2) {
    display: none;
  }

  .posts-main-layout .posts-rail-section-weeks .media-week-scroller {
    height: 116px !important;
    max-height: 116px;
    min-height: 116px;
  }

  .posts-main-layout .posts-rail-section-weeks .media-week-scroller::part(content) {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .posts-main-layout .posts-rail-section-weeks .media-week-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(112px, 1fr);
    grid-template-rows: repeat(2, minmax(0, auto));
    gap: 6px;
    align-items: start;
    padding: 10px 12px 12px;
    min-width: max-content;
  }

  .posts-main-layout .posts-rail-section-weeks .media-week-button {
    min-height: 34px;
    border-radius: 9px;
  }

  .posts-main-layout .posts-left-rail.collapsed .media-week-prefix {
    display: inline;
  }

  .posts-main-layout .posts-left-rail.collapsed .media-week-count {
    display: inline-flex;
  }

  .posts-main-layout .posts-rail-section-weeks .media-week-button .media-week-content {
    gap: 6px;
    padding: 0 4px 0 8px;
  }

  .posts-main-layout .posts-rail-section-weeks .media-week-count {
    min-width: 22px;
    padding: 1px 6px;
    font-size: 0.68rem;
  }

  .posts-main-layout .posts-rail-section-weeks .media-week-button-week .media-week-content,
  .posts-main-layout .posts-rail-section-weeks .media-week-button-all .media-week-content {
    font-size: 0.78rem;
  }
}

@media (max-width: 980px) {

  .posts-heading-row {
    gap: 6px 10px;
  }

  .posts-title-row {
    align-items: flex-start;
  }

  .posts-page-subtitle {
    font-size: 0.78rem;
  }

  .posts-primary-filter-row {
    gap: 8px;
  }

  .posts-secondary-filter-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .posts-secondary-filter-row .posts-filter-category,
  .posts-secondary-filter-row .posts-filter-channel,
  .posts-secondary-filter-row .posts-filter-schedule,
  .posts-secondary-filter-row .posts-filter-media,
  .posts-secondary-filter-row .posts-filter-scope {
    flex: 1 1 180px;
    max-width: none;
  }
}

vaadin-dialog[theme~="post-edit"]:not([theme~="post-media-picker-dialog"]) {
  --vaadin-dialog-background: transparent;
  --vaadin-overlay-background: transparent;
  --vaadin-dialog-border-width: 0;
  --vaadin-dialog-border-color: transparent;
  --vaadin-dialog-border-radius: 0;
  --vaadin-dialog-shadow: none;
}

vaadin-dialog[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(content),
vaadin-dialog-overlay[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(content) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  border: none;
  border-radius: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 80px 36px 0;
  background: transparent;
  color: var(--app-text);
  box-shadow: none;
  overflow: hidden;
  box-sizing: border-box;
}

vaadin-dialog-overlay[theme~="post-edit"]:not([theme~="post-media-picker-dialog"]) {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  align-items: stretch;
  justify-content: stretch;
}

vaadin-dialog[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(overlay),
vaadin-dialog-overlay[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(overlay) {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

vaadin-dialog[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(backdrop),
vaadin-dialog-overlay[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(backdrop) {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

vaadin-dialog[theme~="post-edit"]::part(header),
vaadin-dialog-overlay[theme~="post-edit"]::part(header) {
  padding: 22px 22px 8px;
  background: transparent;
}

vaadin-dialog[theme~="post-edit"]::part(title),
vaadin-dialog-overlay[theme~="post-edit"]::part(title) {
  color: #e1e2e4;
  font-size: 1.15rem;
  font-weight: 700;
}

vaadin-dialog[theme~="post-edit"]::part(footer),
vaadin-dialog-overlay[theme~="post-edit"]::part(footer) {
  padding: 12px 22px 20px;
  background: linear-gradient(180deg, #212225 0%, #1f2023 100%);
  box-shadow: none;
  border-top: none;
}

vaadin-dialog[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(header),
vaadin-dialog[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(footer),
vaadin-dialog-overlay[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(header),
vaadin-dialog-overlay[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(footer) {
  display: none;
}

/* API Credentials dialogs (Instagram/LinkedIn/YouTube): constrained centered modal
   with visible header + footer — NOT the full-screen post-editor overlay. */
vaadin-dialog-overlay[theme~="api-credentials"]::part(backdrop) {
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

vaadin-dialog-overlay[theme~="api-credentials"]::part(overlay) {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(122, 176, 226, 0.08) 0%, rgba(122, 176, 226, 0) 34%),
    linear-gradient(180deg, #202124 0%, #191a1d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 28px 70px rgba(0, 0, 0, 0.38);
  color: var(--app-text);
}

vaadin-dialog-overlay[theme~="api-credentials"]::part(header) {
  padding: 22px 24px 6px;
  background: transparent;
}

vaadin-dialog-overlay[theme~="api-credentials"]::part(title) {
  color: #e2e3e5;
  font-size: 1.14rem;
  font-weight: 800;
  line-height: 1.2;
}

vaadin-dialog-overlay[theme~="api-credentials"]::part(content) {
  padding: 10px 22px 4px;
  max-height: min(74vh, 680px);
  overflow-y: auto;
  background: transparent;
}

vaadin-dialog-overlay[theme~="api-credentials"]::part(footer) {
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(0, 0, 0, 0.12) 100%);
}

vaadin-dialog-overlay[theme~="api-credentials"] .post-edit-content {
  height: auto;
  padding: 4px 2px 6px;
  gap: 14px;
}

.post-edit-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 18px 12px;
  background: transparent;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  align-items: stretch;
}

.post-edit-shell {
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  gap: 14px;
  width: min(100%, 1480px);
  height: 100%;
  margin: 0 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.post-edit-main-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  padding: 0 22px;
  box-sizing: border-box;
}

.post-edit-preview-area {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.post-edit-preview-stretcher {
  flex: 1 1 0;
  min-width: 0;
  max-width: 48px;
  min-height: 0;
}

.post-edit-shell[data-preview-visible="false"] .post-edit-preview-area {
  display: none;
}

.post-edit-main-dialog-box {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: clamp(380px, 42%, 820px);
  min-width: 380px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, rgba(38, 39, 42, 0.96) 0%, rgba(31, 32, 35, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 22px 52px rgba(0, 0, 0, 0.28);
  box-sizing: border-box;
}

.post-edit-shell[data-preview-visible="false"] .post-edit-main-dialog-box {
  width: 100%;
  flex: 1 1 auto;
}

.post-edit-main-dialog-box > .post-edit-content {
  flex: 1 1 auto;
  min-height: 0;
}

.post-edit-actions-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 22px 12px 70px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: rgba(26, 27, 30, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
}

/* "Style this post with AI" sits in the left cluster with an accent icon. */
.post-edit-style-ai-button vaadin-icon {
  color: var(--app-accent, #2f80ed);
}

/* Account-picker popup body for "Style this post with AI". */
.post-edit-style-ai-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 340px;
}

.post-edit-style-ai-hint {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(232, 233, 236, 0.6);
}

/* Push the post-type switch button (the first child) to the left edge of the
   action row, with Cancel/Save staying right-aligned. */
.post-edit-actions-row .post-edit-type-switch-button {
  margin-right: auto;
}

vaadin-dialog-overlay[theme~="post-media-picker-dialog"]::part(content) {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  width: min(1880px, calc(100vw - 8px));
  max-width: calc(100vw - 8px);
  height: calc(100vh - 8px);
  max-height: calc(100vh - 8px);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(180deg, #26272a 0%, #202124 100%);
  color: var(--app-text);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
}

vaadin-dialog-overlay[theme~="post-media-picker-dialog"] .post-edit-content {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.post-edit-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "setup"
    "description";
  column-gap: 0;
  row-gap: 18px;
  width: 100%;
  min-height: 0;
  align-items: start;
  min-width: 0;
  overflow: visible;
  box-sizing: border-box;
}

.post-edit-workspace[data-preview-available="false"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "setup"
    "description";
}

.post-edit-body-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.post-edit-body-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  transition: filter 140ms ease, opacity 140ms ease;
}

.post-edit-body-shell[data-channel-locked="true"] .post-edit-body-content {
  filter: blur(10px);
  opacity: 0.36;
  pointer-events: none;
  user-select: none;
}

.post-edit-workspace-container {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.post-edit-channel-lock-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(27, 28, 31, 0.22) 0%, rgba(22, 23, 26, 0.36) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
}

.post-edit-body-shell[data-channel-locked="true"] .post-edit-channel-lock-overlay {
  display: flex;
}

.post-edit-channel-lock-button {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
}

.post-edit-compact-tab-bar {
  display: none;
  width: 100%;
  box-sizing: border-box;
  gap: 6px;
  align-items: center;
}

.post-edit-top-tab-section {
  width: 100%;
}

.post-edit-top-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.post-edit-top-controls .post-edit-platform-tab-bar {
  flex: 1 1 520px;
  min-width: 0;
}

.post-edit-channel-hero-row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 0 0;
  margin: 0;
  box-sizing: border-box;
}

.post-edit-channel-hero-row > .post-edit-channel-row-hero {
  flex: 1 1 auto;
  border-bottom: none;
  padding: 0;
  margin-bottom: 0;
}

.post-edit-channel-row-hero {
  flex: 0 0 auto;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.post-edit-channel-row-hero .post-channel-toggle {
  width: 56px;
  min-width: 56px;
  height: 56px;
  border-radius: 14px;
  border-width: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.post-edit-channel-row-hero .post-channel-toggle.selected {
  border-color: rgba(122, 176, 226, 0.4);
  box-shadow: 0 0 0 1px rgba(122, 176, 226, 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.post-edit-channel-row-hero .post-channel-toggle-icon {
  width: 26px;
  height: 26px;
}

.post-edit-type-switch-button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  margin: 0;
  border-radius: 10px;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: none;
}

.post-edit-compact-tab-button {
  flex: 1 1 0;
  min-height: 40px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #c9cacc;
  font-weight: 600;
}

.post-edit-compact-tab-button:hover {
  color: #e8e9eb;
}

.post-edit-compact-tab-button.active {
  background: linear-gradient(180deg, #e3e4e6 0%, #cdced0 100%);
  color: #191a1d;
}

.post-edit-section {
  min-width: 0;
  max-width: 100%;
}

.post-edit-section-preview {
  grid-area: preview;
}

.post-edit-section-setup {
  grid-area: setup;
}

.post-edit-section-description {
  grid-area: description;
}

.post-edit-setup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.post-edit-media-section {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0;
  justify-content: stretch;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.post-edit-phone-preview-container {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.post-edit-preview-layout {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-width: 0;
}

.post-edit-audio-editor {
  flex: 0 0 260px;
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
  box-sizing: border-box;
  align-self: stretch;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
}

.post-edit-audio-editor.post-edit-audio-editor-embedded {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.012) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  align-self: auto;
  max-height: none;
  overflow: visible;
}

.post-edit-audio-editor.empty {
  align-items: flex-start;
  justify-content: flex-start;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.008) 100%);
}

.post-edit-audio-editor.post-edit-audio-editor-embedded.empty {
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.post-edit-audio-editor-track {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(122, 176, 226, 0.1) 0%, rgba(122, 176, 226, 0.06) 100%);
  border: 1px solid rgba(122, 176, 226, 0.18);
  font-size: 11px;
  font-weight: 600;
  color: rgba(232, 233, 236, 0.92);
  overflow-wrap: break-word;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.post-edit-audio-editor-track vaadin-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: rgba(141, 214, 255, 0.95);
}

.post-edit-audio-editor-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.post-edit-audio-editor-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.post-edit-audio-editor-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(232, 233, 236, 0.82);
}

.post-edit-audio-editor-value {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(141, 214, 255, 0.95);
}

.post-edit-audio-editor-hint {
  font-size: 10.5px;
  color: rgba(232, 233, 236, 0.58);
  line-height: 1.45;
}

.post-edit-audio-editor-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(122, 176, 226, 0.55) 0%, rgba(122, 176, 226, 0.15) 100%);
  outline: none;
  cursor: pointer;
}

.post-edit-audio-editor-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e8e9eb;
  border: 1px solid rgba(122, 176, 226, 0.6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.post-edit-audio-editor-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e8e9eb;
  border: 1px solid rgba(122, 176, 226, 0.6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.post-edit-audio-editor-toggle {
  margin: 0;
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.016) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.post-edit-audio-editor-toggle::part(label) {
  color: rgba(232, 233, 236, 0.85);
  font-weight: 600;
}

.post-edit-audio-editor-toggle-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.post-edit-phone-audio-preview-element {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.post-edit-phone-audio-preview-toggle {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 4;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: var(--app-radius-control-md);
  background: rgba(8, 8, 8, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.36);
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.post-edit-phone-audio-preview-toggle:hover {
  background: rgba(20, 20, 20, 0.78);
  transform: scale(1.04);
}

.post-edit-phone-audio-preview-toggle vaadin-icon {
  width: 14px;
  height: 14px;
  color: inherit;
}

.post-edit-phone-audio-preview-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.post-edit-phone-audio-preview-toggle[data-state="paused"] .post-edit-phone-audio-preview-icon-pause {
  display: none;
}

.post-edit-phone-audio-preview-toggle[data-state="playing"] .post-edit-phone-audio-preview-icon-play {
  display: none;
}

.post-edit-phone-audio-preview-toggle[data-state="playing"] {
  background: rgba(122, 176, 226, 0.55);
  border-color: rgba(141, 214, 255, 0.7);
}

.post-edit-preview-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-height: 0;
  overflow: visible;
}

.post-edit-audio-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(27, 28, 31, 0.92) 0%, rgba(23, 24, 27, 0.88) 100%);
  width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.post-edit-audio-timeline.disabled {
  color: rgba(232, 233, 236, 0.5);
  font-size: 12px;
}

.post-edit-audio-timeline-lane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.post-edit-audio-timeline.track-empty .post-edit-audio-timeline-lane[data-lane="track"] {
  opacity: 0.45;
  pointer-events: none;
}

.post-edit-audio-timeline-lane-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.post-edit-audio-timeline-lane-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.post-edit-audio-timeline-lane-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.post-edit-audio-timeline-lane-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 233, 236, 0.82);
}

.post-edit-audio-timeline-lane-subtitle {
  font-size: 11px;
  color: rgba(232, 233, 236, 0.62);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.post-edit-audio-timeline-volume {
  appearance: none;
  -webkit-appearance: none;
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(122, 176, 226, 0.46) 0%, rgba(122, 176, 226, 0.14) 100%);
  outline: none;
  cursor: pointer;
}

.post-edit-audio-timeline-volume::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e8e9eb;
  border: 1px solid rgba(122, 176, 226, 0.6);
  cursor: pointer;
}

.post-edit-audio-timeline-value {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(141, 214, 255, 0.95);
  min-width: 42px;
  text-align: right;
}

.post-edit-audio-timeline-mute,
.post-edit-audio-timeline-play {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(37, 38, 41, 0.96) 0%, rgba(30, 31, 34, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e8e9eb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.post-edit-audio-timeline-play[data-state="playing"] {
  background: rgba(122, 176, 226, 0.55);
  border-color: rgba(141, 214, 255, 0.7);
}

.post-edit-audio-timeline-mute[data-state="muted"] {
  background: rgba(255, 95, 95, 0.45);
  border-color: rgba(255, 130, 130, 0.7);
}

.post-edit-audio-timeline-strip {
  position: relative;
  width: 100%;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(30, 42, 56, 0.88) 0%, rgba(25, 34, 46, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  user-select: none;
  touch-action: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.post-edit-audio-timeline-strip::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-50%);
}

.post-edit-audio-timeline-waveform {
  position: absolute;
  inset: 3px 10px;
  z-index: 1;
  min-width: 0;
  pointer-events: none;
}

.post-edit-audio-timeline-waveform-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

.post-edit-audio-timeline-lane[data-lane="video"] .post-edit-audio-timeline-waveform {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12) 0 1px,
      transparent 1px 5px
    );
  mask-image: linear-gradient(180deg, transparent 10%, rgba(0, 0, 0, 0.64) 26%, rgba(0, 0, 0, 0.64) 74%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, transparent 10%, rgba(0, 0, 0, 0.64) 26%, rgba(0, 0, 0, 0.64) 74%, transparent 90%);
  opacity: 0.45;
}

.post-edit-audio-timeline-strip.audio-waveform-ready .post-edit-audio-timeline-waveform-canvas {
  opacity: 1;
}

.post-edit-audio-timeline-strip.audio-waveform-loading .post-edit-audio-timeline-waveform-canvas {
  opacity: 0.45;
}

.post-edit-audio-timeline-region {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(122, 176, 226, 0.22) 0%, rgba(122, 176, 226, 0.12) 100%);
  border-left: 1px solid rgba(141, 214, 255, 0.56);
  border-right: 1px solid rgba(141, 214, 255, 0.56);
}

.post-edit-audio-timeline-fade-in,
.post-edit-audio-timeline-fade-out {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  pointer-events: none;
}

.post-edit-audio-timeline-fade-in {
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
}

.post-edit-audio-timeline-fade-out {
  right: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
}

.post-edit-audio-timeline-handle {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(141, 214, 255, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: ew-resize;
  transform: translateX(-50%);
  z-index: 2;
}

.post-edit-audio-timeline-handle.handle-left {
  left: 0;
}

.post-edit-audio-timeline-handle.handle-right {
  right: 0;
  left: auto;
  transform: translateX(50%);
}

.post-edit-audio-timeline-handle.handle-fade-in {
  left: 0;
  background: rgba(255, 200, 90, 0.92);
  border-color: rgba(255, 200, 90, 0.5);
  width: 8px;
  margin-left: 0;
  transform: translateX(0);
  border-radius: 0 4px 4px 0;
}

.post-edit-audio-timeline-handle.handle-fade-out {
  right: 0;
  left: auto;
  background: rgba(255, 200, 90, 0.92);
  border-color: rgba(255, 200, 90, 0.5);
  width: 8px;
  transform: translateX(0);
  border-radius: 4px 0 0 4px;
}

.post-edit-audio-timeline-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.7);
  left: 0;
  display: none;
  z-index: 3;
}

.post-edit-platform-preview-shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  height: 100%;
  max-width: min(100%, 710px);
  margin: 0;
  position: relative;
  overflow: visible;
}

.post-edit-platform-preview-shell-instagram,
.post-edit-platform-preview-shell-youtube {
  max-width: min(100%, 710px);
}

.post-edit-platform-preview-device {
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 34px;
  background: linear-gradient(180deg, #232323 0%, #151515 100%);
  box-shadow: 0 26px 48px rgba(0, 0, 0, 0.34);
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* Phone-bezel overlay: draws the dark phone frame ON TOP of all content (incl.
   the blurred backdrop) so the rounded screen edges sit in front, like a real
   phone bezel. pointer-events: none keeps the foreground interactive. */
.post-edit-platform-preview-device::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  box-shadow:
    inset 0 0 0 6px #0d0d0d,
    inset 0 0 0 7px rgba(255, 255, 255, 0.08);
}

.post-edit-platform-preview-device-instagram {
  background:
    radial-gradient(circle at top, rgba(255, 92, 146, 0.18), transparent 34%),
    linear-gradient(180deg, #232323 0%, #141414 100%);
}

.post-edit-platform-preview-device-linkedin {
  background:
    radial-gradient(circle at top, rgba(10, 102, 194, 0.18), transparent 34%),
    linear-gradient(180deg, #24262c 0%, #17181d 100%);
}

.post-edit-platform-preview-device-youtube {
  background:
    radial-gradient(circle at top, rgba(255, 77, 77, 0.16), transparent 34%),
    linear-gradient(180deg, #232323 0%, #121212 100%);
}

.post-edit-platform-preview-device.post-edit-platform-preview-device-overview {
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(180deg, #232323 0%, #151515 100%);
}

.post-edit-platform-preview-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 14px;
  border-radius: inherit;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* In feed mode the image sits centered with the action row + caption pinned
   below. margin: auto 0 on the stage absorbs the free space between header
   and chrome. */
.post-edit-platform-preview-card-feed .post-edit-platform-media-stage {
  flex: 0 0 auto;
  margin: auto 0;
  /* Post images are produced at the Instagram feed ratio (4:5), so the stage is
     4:5 too — image aspect == stage aspect means the cover fill is exact: no
     letterbox gaps and no crop of the design (headline stays in frame). */
  aspect-ratio: 4 / 5;
}

/* Instagram-feed: the image bleeds full-width to the card edges with square
   corners, matching the real Instagram feed layout. The card keeps its 14px
   padding for the header / action row / caption; only the media stage is
   pulled flush. */
.post-edit-platform-preview-card-instagram.post-edit-platform-preview-card-feed
  .post-edit-platform-media-stage {
  border-radius: 0;
  width: calc(100% + 28px);
  margin: auto -14px;
}

.post-edit-platform-preview-card-youtube.post-edit-platform-preview-card-feed
  .post-edit-platform-media-stage {
  aspect-ratio: 16 / 9;
}

/* YouTube card has no header above the thumbnail — pin it at the top instead
   of centering vertically, with the title/meta beneath. */
.post-edit-platform-preview-card-youtube.post-edit-platform-preview-card-feed
  .post-edit-platform-media-stage {
  margin: 0 0 auto;
}

/* Story/reel previews are full bleed — the image stretches to fill the phone
   below the header overlay; no chrome below. */
.post-edit-platform-preview-card-fullbleed .post-edit-platform-media-stage {
  flex: 1 1 auto;
  margin: 0;
}

.post-edit-platform-preview-card-instagram {
  background: linear-gradient(180deg, #121212 0%, #0d0d0d 100%);
}

.post-edit-platform-preview-card-linkedin {
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.post-edit-platform-preview-card-youtube {
  background: linear-gradient(180deg, #141414 0%, #101010 100%);
}

.post-edit-platform-preview-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.post-edit-platform-preview-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 999px;
}

.post-edit-platform-preview-avatar-instagram {
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 48%, #8134af 100%);
}

.post-edit-platform-preview-avatar-linkedin {
  background: linear-gradient(135deg, #0a66c2 0%, #5aa7ff 100%);
}

.post-edit-platform-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.post-edit-platform-preview-title {
  color: #f5f5f5;
  font-size: 0.9rem;
  font-weight: 700;
}

.post-edit-platform-preview-subtitle {
  color: #a8a8a8;
  font-size: 0.76rem;
}

.post-edit-platform-preview-card-linkedin .post-edit-platform-preview-title {
  color: #142033;
}

.post-edit-platform-preview-card-linkedin .post-edit-platform-preview-subtitle {
  color: #5f6c7f;
}

.post-edit-platform-preview-line {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.post-edit-platform-preview-card-linkedin .post-edit-platform-preview-line {
  background: rgba(20, 32, 51, 0.12);
}

.post-edit-platform-preview-line-long {
  width: 100%;
}

.post-edit-platform-preview-line-mid {
  width: 74%;
}

.post-edit-platform-preview-line-short {
  width: 46%;
}

/* --- feed-mode action icon row (Instagram heart/comment/send/bookmark,
       LinkedIn like/comment/repost/send) -------------------------------- */

.post-edit-platform-preview-actions-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

.post-edit-platform-preview-actions-left,
.post-edit-platform-preview-actions-right {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.post-edit-platform-preview-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.post-edit-platform-preview-actions-linkedin .post-edit-platform-preview-action-icon vaadin-icon {
  width: 22px;
  height: 22px;
  color: #56657a;
}

/* --- feed-mode caption block ------------------------------------------- */

.post-edit-platform-preview-caption {
  display: -webkit-box;
  flex: 0 0 auto;
  padding: 2px 0 0;
  font-size: 0.84rem;
  line-height: 1.35;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.post-edit-platform-preview-caption-username {
  font-weight: 700;
  margin-right: 6px;
}

.post-edit-platform-preview-caption-linkedin {
  color: #1f2a3a;
}

.post-edit-platform-preview-caption-placeholder {
  color: rgba(255, 255, 255, 0.32);
  font-style: italic;
}

.post-edit-platform-preview-caption-linkedin .post-edit-platform-preview-caption-placeholder {
  color: rgba(31, 42, 58, 0.42);
}

/* --- YouTube title + meta block --------------------------------------- */

.post-edit-platform-preview-yt-meta-block {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0 0;
}

.post-edit-platform-preview-yt-title {
  color: #f5f5f5;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-edit-platform-preview-yt-title.post-edit-platform-preview-caption-placeholder {
  color: rgba(255, 255, 255, 0.38);
  font-weight: 600;
  font-style: italic;
}

.post-edit-platform-preview-yt-meta {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.76rem;
}

/* Unified phone-portrait stage. All platforms share the same 9:16 crop window
   since that is the physical limitation the phone preview imposes. The stage
   itself uses overflow: visible so the transform handles (especially the rotation
   dot above the top edge) can render outside the crop bounds. The image clipping
   happens on the inner .post-edit-platform-media-clip wrapper. */
.post-edit-platform-media-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border-radius: 22px;
  width: 100%;
  aspect-ratio: 9 / 16;
  min-height: 0;
  background: #0f0f0f;
  margin: auto 0;
}

.post-edit-platform-media-stage-instagram,
.post-edit-platform-media-stage-linkedin,
.post-edit-platform-media-stage-youtube {
  background: #0f0f0f;
}

.post-edit-platform-media-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: inherit;
  z-index: 1;
}

/* Blurred letterbox backdrop: same asset (or its thumbnail for video) drawn
   behind the entire preview card, scaled to cover, heavily blurred. It fills
   any space the foreground media doesn't cover (above/below the image when
   aspect ratios differ, plus the chrome rows). Sits at z-index 0 so the
   header / media stage / actions / caption all render on top. */
.post-edit-platform-card-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(40px) saturate(135%);
  transform: scale(1.2);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.post-edit-platform-preview-card-instagram.post-edit-platform-preview-card-feed {
  position: relative;
}

.post-edit-platform-preview-card-instagram.post-edit-platform-preview-card-feed
  > *:not(.post-edit-platform-card-backdrop) {
  position: relative;
  z-index: 1;
}

/* In Instagram-feed mode the stage + clip must be transparent so the backdrop
   flows continuously behind the letterbox area — otherwise the stage's solid
   #0f0f0f leaks a dark bar between the foreground image and the blur. */
.post-edit-platform-preview-card-instagram.post-edit-platform-preview-card-feed
  .post-edit-platform-media-stage,
.post-edit-platform-preview-card-instagram.post-edit-platform-preview-card-feed
  .post-edit-platform-media-stage-instagram,
.post-edit-platform-preview-card-instagram.post-edit-platform-preview-card-feed
  .post-edit-platform-media-clip {
  background: transparent;
}

.post-edit-phone-arrows {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  pointer-events: none;
}

.post-edit-phone-remove {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: var(--app-radius-control-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(24, 25, 28, 0.62);
  color: #e8e9eb;
  backdrop-filter: blur(10px);
}

.post-edit-phone-remove:hover {
  background: rgba(31, 32, 35, 0.78);
}

.post-edit-phone-arrow {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: var(--app-radius-control-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(24, 25, 28, 0.55);
  color: #e8e9eb;
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.post-edit-phone-arrow:hover {
  background: rgba(27, 28, 31, 0.72);
}

.post-edit-phone-arrow:disabled {
  opacity: 0.28;
}

.post-edit-platform-image,
.post-edit-platform-video {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  display: block;
  flex: 1 1 auto;
}

/* Live crop interaction: image/video acts like a draggable, zoomable surface
   inside the fixed media stage. Drag/wheel are only active when the parent
   stage has data-crop-mode="true" (toggled by the crop button).

   The frame renders at the image's natural aspect ratio but its layout size
   is hard-capped to MEDIA_FRAME_CAP px in each dimension. Without this cap a
   high-res phone photo (e.g. 4032x3024) gets promoted to a ~48MB GPU compositor
   layer the moment the preview transform is applied — which is what drives the
   "browser drastically slows down when the dialog opens" symptom. The JS
   handler reads offsetWidth/offsetHeight (the capped layout size) rather than
   naturalWidth/Height so the cover-scale math stays correct. We also drop
   `will-change: transform` so the layer is only created while the user is
   actively dragging, not preallocated. */
/* DEFAULT (viewing, no crop): fill the stage natively with CSS cover. This is
   deterministic — it does NOT depend on the JS cover transform landing, so the
   image never sits at natural size with letterbox gaps on first paint (the bug
   where gaps appeared until you navigated away and back). */
.post-edit-platform-media-stage .post-edit-platform-media-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: 0 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  transition: transform 80ms ease-out;
}

/* SAVED CROP or ACTIVE crop mode: switch to natural size + the JS pan/zoom/rotate
   transform model (object-fit:none, capped at 1600px so a huge photo doesn't
   promote an oversized compositor layer). data-mt-mode is set by the server when a
   non-identity transform is stored; data-crop-mode is set live by the crop toggle. */
.post-edit-platform-media-stage[data-mt-mode="transform"] .post-edit-platform-media-frame,
.post-edit-platform-media-stage[data-crop-mode="true"] .post-edit-platform-media-frame {
  width: auto;
  height: auto;
  max-width: 1600px;
  max-height: 1600px;
  min-width: 0;
  min-height: 0;
  object-fit: none;
}

.post-edit-platform-media-stage[data-crop-mode="true"] .post-edit-platform-media-frame {
  cursor: grab;
}

.post-edit-platform-media-stage[data-crop-mode="true"] .post-edit-platform-media-frame.post-edit-platform-media-dragging {
  cursor: grabbing;
  transition: none;
}

/* The crop toggle floats over the stage at the top-left. When active, it
   shows a blue ring + light fill to signal the stage is interactive. */
.post-edit-platform-crop-toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(20, 21, 24, 0.62);
  color: #e1e2e4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.27);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.post-edit-platform-crop-toggle:hover {
  background: rgba(30, 31, 34, 0.82);
  transform: scale(1.04);
}

.post-edit-platform-crop-toggle vaadin-icon {
  width: 16px;
  height: 16px;
}

.post-edit-platform-crop-toggle.active {
  background: rgba(122, 176, 226, 0.78);
  border-color: rgba(141, 214, 255, 0.95);
  color: #0c1a26;
  box-shadow:
    0 0 0 2px rgba(122, 176, 226, 0.32),
    0 8px 22px rgba(122, 176, 226, 0.32);
}

/* When crop mode is active, dim the rest of the stage chrome slightly so the
   image manipulation is the focus. */
.post-edit-platform-media-stage[data-crop-mode="true"] .post-edit-phone-arrows,
.post-edit-platform-media-stage[data-crop-mode="true"] .post-edit-phone-remove {
  opacity: 0.35;
  pointer-events: none;
}

/* Text overlay on the phone preview. Position + rotation + font-size are set
   inline by the JS handler attached in bindTextOverlayInteractions(). The user
   drags it to move, scroll-wheels to scale the font, double-clicks to edit. */
.post-edit-platform-text-element {
  position: absolute;
  z-index: 4;
  display: inline-block;
  max-width: 80%;
  padding: 4px 8px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: #e8e9eb;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.41);
  cursor: grab;
  user-select: none;
  touch-action: none;
  outline: none;
  transform-origin: center center;
}

.post-edit-platform-user-tag {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.54);
  color: #e8e9eb;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

.post-edit-platform-user-tag.post-edit-platform-user-tag-dragging {
  cursor: grabbing;
}

.post-edit-platform-user-tag-at {
  opacity: 0.7;
  pointer-events: none;
}

.post-edit-platform-user-tag-input {
  width: 90px;
  min-width: 60px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
  cursor: text;
}

.post-edit-platform-user-tag-input::placeholder {
  color: rgba(232, 233, 236, 0.45);
}

.post-edit-platform-user-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #e8e9eb;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.post-edit-platform-user-tag-remove:hover {
  background: rgba(255, 255, 255, 0.45);
}

.post-edit-platform-text-element.post-edit-platform-text-element-dragging {
  cursor: grabbing;
}

.post-edit-platform-text-element.post-edit-platform-text-element-editing {
  cursor: text;
  user-select: text;
  touch-action: auto;
  background: rgba(0, 0, 0, 0.24);
  outline: 1px dashed rgba(255, 255, 255, 0.55);
  border-radius: 4px;
}

.post-edit-platform-text-element-inner {
  display: inline-block;
  outline: none;
  pointer-events: none;
}

.post-edit-platform-text-element-editing .post-edit-platform-text-element-inner {
  pointer-events: auto;
}

/* When a text overlay is selected we show a 1px dashed ring + 8 scale handles
   and a rotation dot, mirroring the image-crop UI. */
.post-edit-platform-text-element-selected {
  outline: 1px dashed rgba(122, 176, 226, 0.85);
  outline-offset: 2px;
  border-radius: 2px;
}

.post-edit-text-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e8e9eb;
  border: 1.5px solid #18191c;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.34);
  pointer-events: auto;
  touch-action: none;
  display: none;
}

.post-edit-platform-text-element-selected .post-edit-text-handle {
  display: block;
}

.post-edit-text-handle-active {
  background: rgba(122, 176, 226, 0.95);
  border-color: #e8e9eb;
}

.post-edit-text-handle-tl { top: 0;    left: 0;    transform: translate(-50%, -50%); cursor: nwse-resize; }
.post-edit-text-handle-tr { top: 0;    left: 100%; transform: translate(-50%, -50%); cursor: nesw-resize; }
.post-edit-text-handle-bl { top: 100%; left: 0;    transform: translate(-50%, -50%); cursor: nesw-resize; }
.post-edit-text-handle-br { top: 100%; left: 100%; transform: translate(-50%, -50%); cursor: nwse-resize; }
.post-edit-text-handle-t  { top: 0;    left: 50%;  transform: translate(-50%, -50%); cursor: ns-resize; }
.post-edit-text-handle-b  { top: 100%; left: 50%;  transform: translate(-50%, -50%); cursor: ns-resize; }
.post-edit-text-handle-l  { top: 50%;  left: 0;    transform: translate(-50%, -50%); cursor: ew-resize; }
.post-edit-text-handle-r  { top: 50%;  left: 100%; transform: translate(-50%, -50%); cursor: ew-resize; }

.post-edit-text-handle-rotate {
  top: 0;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, calc(-50% - 24px));
  background: rgba(122, 176, 226, 0.95);
  border-color: #e8e9eb;
  cursor: grab;
}

.post-edit-text-handle-rotate::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1.5px;
  height: 18px;
  margin-left: -0.75px;
  background: rgba(255, 255, 255, 0.72);
  pointer-events: none;
}

/* Floating quick-action menu shown on right-click of a selected text overlay.
   Positioned in viewport coordinates (position: fixed) so the JS handler can
   place it at clientX/clientY without mapping through the stage transform. */
.post-edit-quick-action-menu {
  position: fixed;
  z-index: 10000;
  min-width: 168px;
  padding: 4px;
  background: rgba(22, 22, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
  color: #e1e2e4;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  user-select: none;
}

.post-edit-quick-action-menu-item {
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}

.post-edit-quick-action-menu-item:hover {
  background: rgba(122, 176, 226, 0.22);
}

.post-edit-quick-action-menu-item-danger {
  color: #ff8a8a;
}

.post-edit-quick-action-menu-item-danger:hover {
  background: rgba(255, 90, 90, 0.22);
  color: #e8e9eb;
}

/* Format-text popover: compact horizontal bar of style controls. */
.post-edit-text-format-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  min-width: 0;
}

.post-edit-text-format-color {
  width: 100%;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.post-edit-text-format-toggle-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-edit-text-format-toggle {
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
}

.post-edit-text-format-toggle.active {
  background: rgba(122, 176, 226, 0.32);
  color: #e8e9eb;
}

.post-edit-text-format-bold span,
.post-edit-text-format-italic span {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.post-edit-text-format-italic span {
  font-style: italic;
}

/* The selection box mirrors the image's actual bounding box (size + rotation
   + position). JS sets its width/height/transform on every transform change.
   Handles are positioned at the corners and side-midpoints of this box, so
   they hug the image rather than the crop window. */
.post-edit-platform-selection-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-origin: center center;
  pointer-events: none;
  display: none;
  z-index: 6;
  box-sizing: border-box;
}

.post-edit-platform-media-stage[data-crop-mode="true"] .post-edit-platform-selection-box {
  display: block;
}

/* Optional dashed outline so the user sees the image's true bounds even when
   they extend past the visible crop frame. */
.post-edit-platform-selection-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  pointer-events: none;
}

/* Transform handles — 8 scale dots (corners + side midpoints) and a separate
   rotation dot floating above the top-middle. Positioned relative to the
   selection box so they follow the image as it scales / rotates / pans. */
.post-edit-platform-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e8e9eb;
  border: 1.5px solid #18191c;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.34);
  pointer-events: auto;
  touch-action: none;
}

.post-edit-platform-handle-active {
  background: rgba(122, 176, 226, 0.95);
  border-color: #e8e9eb;
}

/* Corners */
.post-edit-platform-selection-box .post-edit-platform-handle-tl { top: 0;    left: 0;    transform: translate(-50%, -50%); cursor: nwse-resize; }
.post-edit-platform-selection-box .post-edit-platform-handle-tr { top: 0;    left: 100%; transform: translate(-50%, -50%); cursor: nesw-resize; }
.post-edit-platform-selection-box .post-edit-platform-handle-bl { top: 100%; left: 0;    transform: translate(-50%, -50%); cursor: nesw-resize; }
.post-edit-platform-selection-box .post-edit-platform-handle-br { top: 100%; left: 100%; transform: translate(-50%, -50%); cursor: nwse-resize; }

/* Side midpoints */
.post-edit-platform-selection-box .post-edit-platform-handle-t { top: 0;    left: 50%; transform: translate(-50%, -50%); cursor: ns-resize; }
.post-edit-platform-selection-box .post-edit-platform-handle-b { top: 100%; left: 50%; transform: translate(-50%, -50%); cursor: ns-resize; }
.post-edit-platform-selection-box .post-edit-platform-handle-l { top: 50%;  left: 0;    transform: translate(-50%, -50%); cursor: ew-resize; }
.post-edit-platform-selection-box .post-edit-platform-handle-r { top: 50%;  left: 100%; transform: translate(-50%, -50%); cursor: ew-resize; }

/* Rotation dot sits 28px above the top-middle of the selection box, connected
   by a thin line. Both follow the image rotation. */
.post-edit-platform-selection-box .post-edit-platform-handle-rotate {
  top: 0;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, calc(-50% - 28px));
  background: rgba(122, 176, 226, 0.95);
  border-color: #e8e9eb;
  cursor: grab;
}

.post-edit-platform-selection-box .post-edit-platform-handle-rotate::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1.5px;
  height: 21px;
  margin-left: -0.75px;
  background: rgba(255, 255, 255, 0.72);
  pointer-events: none;
}

.post-edit-platform-selection-box .post-edit-platform-handle-rotate.post-edit-platform-handle-active {
  cursor: grabbing;
}

.post-edit-platform-video {
  display: block;
  background: #16171a;
}

.post-edit-platform-empty {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  color: #b8b8b8;
}

.post-edit-preview-media-button {
  width: 56px;
  min-width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(27, 27, 27, 0.88);
  color: #f4f4f4;
  align-self: flex-start;
}

.post-edit-preview-media-button:hover {
  background: rgba(35, 35, 35, 0.96);
  border-color: rgba(255, 255, 255, 0.18);
}

.post-edit-preview-media-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.post-edit-preview-media-button:disabled:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(27, 27, 27, 0.88);
}

.post-edit-preview-audio-button.active {
  border-color: rgba(122, 176, 226, 0.44);
  background: rgba(122, 176, 226, 0.16);
  color: #eff9ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(122, 176, 226, 0.1),
    0 14px 24px rgba(0, 0, 0, 0.22);
}

.post-edit-preview-media-button vaadin-icon {
  width: 22px;
  height: 22px;
}

.post-edit-action-bar-at {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

/* Undo/redo buttons live next to the drawing toggle in the action bar. */
.post-edit-drawing-undo-button,
.post-edit-drawing-redo-button {
  display: inline-flex;
}

.post-edit-preview-media-button.active {
  border-color: rgba(122, 176, 226, 0.42);
  background: linear-gradient(180deg, rgba(122, 176, 226, 0.22) 0%, rgba(122, 176, 226, 0.12) 100%);
  color: #7ab0e2;
  box-shadow:
    0 0 0 1px rgba(122, 176, 226, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.post-edit-preview-media-button.active vaadin-icon,
.post-edit-preview-media-button.active .post-edit-action-bar-at {
  color: #7ab0e2;
}

.post-edit-platform-drawing-mount {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}

.post-edit-platform-drawing-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.post-edit-platform-media-stage[data-drawing-mode="true"] {
  /* Native cursor is hidden so the brush-size indicator div doubles as the
     cursor — gives the user a real footprint preview before committing a
     stroke. The clear button overrides this back to pointer below. */
  cursor: none;
  touch-action: none;
}

.post-edit-platform-media-stage[data-drawing-mode="true"] .post-edit-platform-text-element,
.post-edit-platform-media-stage[data-drawing-mode="true"] .post-edit-platform-user-tag {
  pointer-events: none;
}

.post-edit-platform-media-stage[data-drawing-mode="true"] .post-edit-platform-drawing-clear {
  cursor: pointer;
}

/* Brush-size cursor indicator: a circle sized to the current pen width that
   tracks the pointer. JS sets width/height/left/top each pointermove; the
   transform centers it on the cursor. Layered box-shadow gives it readability
   on both light and dark images — inner white halo for dark bg, outer dark
   drop-shadow for light bg. */
.post-edit-platform-draw-cursor {
  position: absolute;
  display: none;
  pointer-events: none;
  border: 1.5px solid rgba(0, 0, 0, 0.71);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.9),
      0 0 0 2.5px rgba(0, 0, 0, 0.49),
      0 4px 12px rgba(0, 0, 0, 0.52),
      0 0 18px rgba(0, 0, 0, 0.34);
  transform: translate(-50%, -50%);
  transition: width 80ms ease, height 80ms ease;
  z-index: 8;
}

.post-edit-platform-draw-cursor.post-edit-platform-draw-cursor-eraser {
  background: transparent;
  border: 1.5px dashed rgba(255, 255, 255, 0.95);
  box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.64),
      0 0 0 2.5px rgba(255, 255, 255, 0.6),
      0 4px 12px rgba(0, 0, 0, 0.52),
      0 0 18px rgba(0, 0, 0, 0.34);
}

.post-edit-platform-drawing-clear {
  position: absolute;
  top: 12px;
  right: 56px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(19, 20, 23, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e8e9eb;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.27);
}

.post-edit-platform-drawing-clear:hover {
  background: rgba(27, 28, 31, 0.78);
}

/* Hue slot — sits between the preview and the right stretcher when drawing
   is on. Collapses entirely when drawing is off. */
.post-edit-platform-drawing-hue-slot {
  display: none;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.post-edit-shell[data-drawing-active="true"] .post-edit-platform-drawing-hue-slot {
  display: flex;
}

.post-edit-platform-drawing-hue-rail {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 44px;
  padding: 12px 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  min-height: 0;
}

.post-edit-platform-drawing-hue-track {
  position: relative;
  flex: 1 1 auto;
  width: 18px;
  min-height: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(to bottom,
    hsl(0, 100%, 50%) 0%,
    hsl(60, 100%, 50%) 16.6%,
    hsl(120, 100%, 50%) 33.3%,
    hsl(180, 100%, 50%) 50%,
    hsl(240, 100%, 50%) 66.6%,
    hsl(300, 100%, 50%) 83.3%,
    hsl(360, 100%, 50%) 100%);
  cursor: pointer;
  touch-action: none;
}

.post-edit-platform-drawing-hue-thumb {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 12px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.post-edit-platform-drawing-hue-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Eraser toggle: square button at the bottom of the hue rail. Mirrors the
   hue swatch's footprint so the rail keeps a clean vertical rhythm. */
.post-edit-platform-drawing-eraser-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: background 120ms, border-color 120ms, color 120ms;
}

.post-edit-platform-drawing-eraser-toggle vaadin-icon {
  width: 14px;
  height: 14px;
  --lumo-icon-size-m: 14px;
}

.post-edit-platform-drawing-eraser-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

.post-edit-platform-drawing-eraser-toggle.active {
  background: rgba(122, 176, 226, 0.85);
  border-color: #e8e9eb;
  color: #18191c;
}

/* Action bar: holds the cog (settings toggle) plus the image and audio buttons.
   Desktop: vertical strip on the left side. Compact: horizontal bar at the top. */
.post-edit-action-bar {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  width: 72px;
  min-width: 72px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  background: rgba(26, 27, 30, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}

.post-edit-action-bar .post-edit-preview-media-button {
  width: 54px;
  min-width: 54px;
  height: 54px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}

.post-edit-action-bar .post-edit-preview-media-button:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
}

.post-edit-action-bar .post-edit-preview-media-button vaadin-icon {
  width: 24px;
  height: 24px;
}

.post-edit-action-bar .post-edit-action-bar-at {
  width: 24px;
  height: 24px;
  font-size: 22px;
}

/* The cog is only useful in compact mode (where it toggles the settings card).
   Hide it on desktop so the bar shows only the media/audio actions. */
.post-edit-action-bar .post-edit-compact-bar-button {
  display: none;
}

/* Drawing mode shrinks the action bar to just the pen + size + undo/redo.
   Every button marked .post-edit-action-collapsible smoothly collapses to 0
   height. The negative margin compensates for the flex gap (4px) on the
   action bar so the bar fully shrinks instead of leaving phantom 4px slots
   behind. */
.post-edit-action-bar .post-edit-action-collapsible {
  overflow: hidden;
  max-height: 54px;
  opacity: 1;
  transition: max-height 220ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 160ms ease,
              margin-top 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.post-edit-shell[data-drawing-active="true"] .post-edit-action-bar .post-edit-action-collapsible {
  max-height: 0;
  opacity: 0;
  margin-top: -4px;
  pointer-events: none;
}

/* Inverse of .post-edit-action-collapsible: buttons that appear ONLY in
   drawing mode (size selector, etc). Use the same max-height collapse
   trick so the toolbar grows smoothly when drawing is toggled on. */
.post-edit-action-bar .post-edit-action-draw-only {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: -4px;
  pointer-events: none;
  transition: max-height 220ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 160ms ease,
              margin-top 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.post-edit-shell[data-drawing-active="true"] .post-edit-action-bar .post-edit-action-draw-only {
  max-height: 54px;
  opacity: 1;
  margin-top: 0;
  pointer-events: auto;
}

/* The size button: a white dot whose diameter mirrors the current brush
   width — gives the user a glanceable "this is how thick" cue without
   opening the popup. */
.post-edit-action-size-indicator {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e8e9eb;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.34);
  transition: width 140ms ease, height 140ms ease;
}

/* Floating size popup: positioned in viewport coords by the JS handler;
   contains the four preset chips + the continuous slider. */
.post-edit-size-popup {
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  min-width: 220px;
  background: rgba(22, 22, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
  color: #e1e2e4;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  user-select: none;
}

.post-edit-size-popup-chips {
  display: flex;
  gap: 6px;
  justify-content: space-between;
}

.post-edit-size-popup-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 60px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}

.post-edit-size-popup-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}

.post-edit-size-popup-chip.active {
  background: rgba(122, 176, 226, 0.24);
  border-color: rgba(122, 176, 226, 0.9);
}

.post-edit-size-popup-chip-dot {
  border-radius: 50%;
  background: #e8e9eb;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.34);
  flex: 0 0 auto;
}

.post-edit-size-popup-chip-label {
  font-size: 10px;
  color: rgba(232, 233, 236, 0.72);
  letter-spacing: 0.02em;
}

.post-edit-size-popup-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  outline: none;
  cursor: pointer;
}

.post-edit-size-popup-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e8e9eb;
  border: 2px solid rgba(122, 176, 226, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.34);
  cursor: grab;
}

.post-edit-size-popup-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e8e9eb;
  border: 2px solid rgba(122, 176, 226, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.34);
  cursor: grab;
}

.post-edit-compact-bar-button {
  width: 56px;
  min-width: 56px;
  height: 56px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(32, 33, 36, 0.88);
  color: #e1e2e4;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.post-edit-compact-bar-button:hover {
  background: rgba(38, 39, 42, 0.96);
  border-color: rgba(255, 255, 255, 0.18);
}

.post-edit-compact-bar-button vaadin-icon {
  width: 22px;
  height: 22px;
}

.post-edit-shell[data-settings-open="true"] .post-edit-compact-bar-button {
  background: linear-gradient(180deg, #e3e4e6 0%, #cdced0 100%);
  color: #191a1d;
  border-color: rgba(255, 255, 255, 0.3);
}

.post-edit-phone-audio-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 28px);
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(22, 24, 26, 0.68);
  color: #f3f8ff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}

.post-edit-phone-audio-badge vaadin-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.post-edit-phone-audio-badge span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-edit-audio-overlay {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  max-height: 38%;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top left, rgba(122, 176, 226, 0.08) 0%, rgba(122, 176, 226, 0) 34%),
    linear-gradient(180deg, rgba(27, 28, 31, 0.96) 0%, rgba(21, 22, 25, 0.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 42px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-sizing: border-box;
  transform: translateX(-50%);
  overflow: hidden auto;
}

.post-edit-audio-overlay.hidden {
  display: none;
}

.post-edit-audio-overlay[data-collapsed="true"] {
  gap: 0;
  max-height: none;
  padding-bottom: 14px;
}

.post-edit-audio-overlay-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.post-edit-audio-overlay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(34, 55, 76, 0.92) 0%, rgba(26, 42, 58, 0.92) 100%);
  border: 1px solid rgba(122, 176, 226, 0.28);
  color: rgba(141, 214, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.post-edit-audio-overlay-icon vaadin-icon {
  width: 18px;
  height: 18px;
}

.post-edit-audio-overlay-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.post-edit-audio-overlay-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 233, 236, 0.54);
}

.post-edit-audio-overlay-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(232, 233, 236, 0.95);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.post-edit-audio-overlay-subtitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(232, 233, 236, 0.64);
  font-size: 12px;
  line-height: 1.3;
}

.post-edit-audio-overlay-toggle {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(38, 39, 42, 0.96) 0%, rgba(30, 30, 34, 0.96) 100%);
  color: #e8e9eb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.post-edit-audio-overlay-toggle:hover {
  background: linear-gradient(180deg, rgba(43, 44, 47, 0.96) 0%, rgba(33, 34, 37, 0.96) 100%);
}

.post-edit-audio-overlay-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.post-edit-audio-overlay[data-collapsed="true"] .post-edit-audio-overlay-body {
  display: none;
}

.post-edit-audio-overlay .post-edit-audio-timeline {
  padding: 14px 16px;
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(29, 30, 33, 0.96) 0%, rgba(24, 25, 28, 0.94) 100%);
}

.post-audio-picker-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.92fr) minmax(320px, 1fr);
  gap: 16px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.post-audio-picker-list,
.post-audio-picker-preview {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--app-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.035);
  box-sizing: border-box;
}

.post-audio-picker-list {
  overflow: auto;
  padding: 8px;
}

.post-audio-picker-row {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 7px 10px;
  border-radius: 14px;
  color: var(--app-text);
}

.post-audio-picker-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.post-audio-picker-row.selected {
  background: rgba(122, 176, 226, 0.13);
  color: #f3f9ff;
}

.post-audio-picker-row-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  text-align: left;
}

.post-audio-picker-preview {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 18px;
  color: var(--app-muted);
}

.post-audio-picker-preview.empty {
  justify-items: center;
  text-align: center;
}

.post-audio-picker-preview-card {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.post-audio-picker-preview-title {
  min-width: 0;
  overflow: hidden;
  color: #f5f5f5;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-audio-picker-preview-meta {
  color: var(--app-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.post-audio-picker-preview-audio {
  width: 100%;
  min-width: 0;
}

.post-edit-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.post-edit-platform-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(26, 27, 30, 0.78);
  box-sizing: border-box;
}

.post-edit-platform-tab-button {
  flex: 1 1 108px;
  min-height: 36px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(209, 210, 212, 0.78);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.post-edit-platform-tab-button:hover {
  color: #e8e9eb;
  background: rgba(255, 255, 255, 0.04);
}

.post-edit-platform-tab-button.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e8e9eb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.post-edit-account-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.post-edit-account-option {
  min-height: 38px;
  padding: 0 14px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(209, 210, 212, 0.82);
  font-size: 0.86rem;
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.post-edit-account-option:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  color: #e8e9eb;
}

.post-edit-account-option.selected {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #e8e9eb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.post-edit-platform-content {
  width: 100%;
  min-width: 0;
}

.post-edit-platform-stack {
  display: grid;
  gap: 8px;
}

.post-edit-platform-placeholder p {
  margin: 0;
  color: #ababab;
  line-height: 1.6;
}

.post-edit-form,
.post-edit-panel,
.post-media-picker {
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.018) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.post-edit-form {
  gap: 12px;
}

.post-edit-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-edit-panel-hint {
  margin: -4px 0 2px;
  color: #9a9a9a;
  font-size: 0.8rem;
  line-height: 1.5;
}

.post-edit-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 2px;
}

.post-edit-account-empty {
  color: #9a9a9a;
  font-size: 0.84rem;
  font-style: italic;
}

.post-edit-editor-panel {
  min-height: 0;
}

.post-edit-channel-row {
  padding-top: 6px;
  gap: 10px;
}

.post-edit-checkbox-stack {
  gap: 10px;
  align-items: flex-start;
}

.post-edit-radio-group {
  width: 100%;
}

.post-channel-toggle {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, #202124 0%, #1b1c1f 100%);
  color: #7d7d7d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 120ms ease;
}

.post-channel-toggle:hover {
  border-color: rgba(255, 255, 255, 0.16);
  color: #a7a7a7;
}

.post-channel-toggle:active {
  transform: translateY(1px);
}

.post-channel-toggle.selected {
  border-color: rgba(122, 176, 226, 0.42);
  background: linear-gradient(180deg, rgba(122, 176, 226, 0.22) 0%, rgba(122, 176, 226, 0.12) 100%);
  color: #7ab0e2;
  box-shadow: 0 0 0 1px rgba(122, 176, 226, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.post-channel-toggle-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.7);
  opacity: 0.78;
  transition: filter 120ms ease, opacity 120ms ease;
}

.post-channel-toggle.selected .post-channel-toggle-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(54%) saturate(1913%) hue-rotate(176deg) brightness(102%) contrast(102%);
  opacity: 1;
}

.post-media-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.post-media-picker-header {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.post-media-picker-header .post-media-search {
  flex: 1 1 auto;
  min-width: 0;
}

.post-media-upload {
  flex: 0 0 min(320px, 38%);
  min-width: 220px;
}

.post-media-search::part(input-field) {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: #232427;
  box-shadow: none;
}

.post-media-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: 12px;
  align-items: start;
  min-height: 0;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.post-media-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 4px 2px 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.post-media-list.scrollable {
  padding-right: 8px;
}

.post-media-explorer-tree {
  width: 100%;
  flex: 0 0 auto;
  overflow: visible;
}

.post-media-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  background: #1d1d1d;
  min-height: 0;
  height: 100%;
  max-height: none;
  min-width: 0;
  max-width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

.post-edit-workspace > *,
.post-edit-setup > *,
.post-edit-media-section > *,
.post-media-picker > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.post-media-preview.empty {
  justify-content: center;
  color: #a7a7a7;
}

.post-media-preview-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

.post-media-preview-title {
  color: #f5f5f5;
  font-size: 0.92rem;
  font-weight: 600;
  overflow-wrap: break-word;
}

.post-media-preview-meta {
  color: #9f9f9f;
  font-size: 0.76rem;
}

.post-media-preview-image,
.post-media-preview-video {
  width: 100%;
  flex: 1 1 auto;
  min-height: 240px;
  object-fit: contain;
  border-radius: 14px;
  background: #111;
}

.post-media-preview-video {
  min-height: 220px;
  display: block;
}

.post-media-empty {
  padding: 16px;
  border-radius: 14px;
  background: #212225;
  color: #a7a7a7;
}

vaadin-dialog-overlay[theme~="post-edit"] vaadin-text-area::part(input-field),
vaadin-dialog-overlay[theme~="post-edit"] vaadin-date-time-picker::part(input-field) {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: #242528;
  box-shadow: none;
}

vaadin-dialog-overlay[theme~="post-edit"] vaadin-text-area.post-edit-editor-field {
  min-height: 0;
  height: 100%;
}

vaadin-dialog-overlay[theme~="post-edit"] vaadin-text-area.post-edit-editor-field::part(input-field) {
  min-height: 220px;
}

vaadin-dialog-overlay[theme~="post-edit"] vaadin-text-area.post-edit-tags-field {
  min-height: 170px;
}

vaadin-dialog-overlay[theme~="post-edit"] vaadin-text-area::part(label),
vaadin-dialog-overlay[theme~="post-edit"] vaadin-date-time-picker::part(label) {
  color: #c2c3c5;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

vaadin-dialog-overlay[theme~="post-edit"] vaadin-text-area::part(helper-text) {
  color: #919191;
}

vaadin-dialog-overlay[theme~="post-edit"] vaadin-checkbox {
  color: #dedfe1;
}

vaadin-dialog-overlay[theme~="post-edit"] vaadin-form-layout {
  row-gap: 14px;
}

vaadin-dialog-overlay[theme~="post-edit"] vaadin-text-area,
vaadin-dialog-overlay[theme~="post-edit"] vaadin-date-time-picker {
  width: 100%;
  min-width: 0;
}

vaadin-dialog-overlay[theme~="post-edit"] vaadin-button[theme~="primary"] {
  border: 1px solid var(--app-button-primary-border);
  border-radius: var(--app-radius-control-lg);
  background: var(--app-button-primary-surface);
  color: var(--app-button-primary-text);
}

vaadin-dialog-overlay[theme~="post-edit"] vaadin-button[theme~="primary"]:hover {
  background: var(--app-button-primary-surface-hover);
}

vaadin-dialog-overlay[theme~="post-edit"] vaadin-button[theme~="tertiary"] {
  color: #cecfd1;
}

@media (max-width: 1100px) {
  vaadin-dialog[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(content),
  vaadin-dialog-overlay[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(content) {
    padding: 36px 12px 0;
  }

  /* Compact mode restores the original grid layout: bar on top, preview/dialog
     overlapping below in the content area, footer at the bottom. The new
     desktop flex nesting (main-row / preview-area) is flattened via
     display: contents so each child can be re-targeted via grid-area. */
  .post-edit-shell,
  .post-edit-shell[data-drawing-active="true"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "bar"
      "content"
      "footer";
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    overflow: hidden;
    height: 100%;
  }

  .post-edit-main-row,
  .post-edit-preview-area {
    display: contents;
  }

  /* Stretchers serve no purpose in compact mode — collapse them. */
  .post-edit-preview-stretcher {
    display: none;
  }

  /* Hue slot is overlaid on the content area when drawing is on. */
  .post-edit-platform-drawing-hue-slot {
    grid-area: content;
    pointer-events: none;
    z-index: 30;
    position: relative;
  }
  .post-edit-shell[data-drawing-active="true"] .post-edit-platform-drawing-hue-slot {
    pointer-events: none;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 8px;
  }
  .post-edit-shell[data-drawing-active="true"] .post-edit-platform-drawing-hue-rail {
    height: 440px;
    max-height: 80%;
    pointer-events: auto;
    background: #1c1c1c;
    border-color: rgba(255, 255, 255, 0.18);
  }

  /* Compact mode: action bar becomes a horizontal strip across the top of the dialog.
     All buttons (cog, image, audio) sit side by side. */
  .post-edit-action-bar {
    grid-area: bar;
    position: relative;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 14px 14px;
    width: auto;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    background:
      linear-gradient(180deg, rgba(33, 34, 37, 0.96) 0%, rgba(27, 28, 31, 0.98) 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    z-index: 20;
  }

  /* Cog is hidden on desktop, but visible in compact mode where it toggles the settings card. */
  .post-edit-action-bar .post-edit-compact-bar-button {
    display: inline-flex;
  }

  .post-edit-media-section,
  .post-edit-main-dialog-box {
    grid-area: content;
    position: relative;
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 14px;
    box-sizing: border-box;
  }

  .post-edit-actions-row {
    grid-area: footer;
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
    padding: 14px 22px;
  }

  /* Let the preview shell + device use the full width of the compact viewport
     instead of being capped at 710px. */
  .post-edit-platform-preview-shell,
  .post-edit-platform-preview-shell-instagram,
  .post-edit-platform-preview-shell-youtube {
    max-width: 100%;
    min-width: 0;
  }

  .post-edit-preview-layout {
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    padding-right: 0;
    box-sizing: border-box;
  }

  .post-edit-preview-stack {
    min-width: 0;
    max-width: 100%;
  }

  .post-edit-platform-preview-device {
    max-width: 100%;
    min-width: 0;
  }

  /* Editor card slides down from above the content area; cog toggles between hidden / visible. */
  .post-edit-main-dialog-box {
    transform: translateY(-105%);
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 10;
    border-radius: 18px;
    background:
      radial-gradient(circle at top right, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 28%),
      linear-gradient(180deg, #1d1e21 0%, #17181b 100%);
  }

  .post-edit-shell[data-settings-open="true"] .post-edit-main-dialog-box {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* The Preview/Setup/Description compact tab bar is no longer used in this mode. */
  .post-edit-compact-tab-bar {
    display: none;
  }

  .post-edit-workspace {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 14px;
  }

  .post-edit-section {
    width: 100%;
  }

  .post-edit-platform-preview-device {
    width: 100%;
  }

  .post-edit-channel-row-hero {
    gap: 14px;
  }

  .post-edit-channel-row-hero .post-channel-toggle {
    width: 72px;
    min-width: 72px;
    height: 72px;
    border-radius: 18px;
  }

  .post-edit-channel-row-hero .post-channel-toggle-icon {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 960px) {
  .post-edit-content {
    padding: 8px 20px 16px;
  }

  .post-edit-setup-grid,
  .post-media-grid,
  .post-audio-picker-grid {
    grid-template-columns: 1fr;
  }

  .post-media-picker-header {
    flex-direction: column;
  }

  .post-media-upload {
    flex-basis: auto;
    width: 100%;
    min-width: 0;
  }

  .post-edit-audio-overlay {
    width: calc(100% - 2px);
    max-width: calc(100% - 2px);
    bottom: 10px;
    padding: 10px;
    border-radius: 18px;
    max-height: calc(100% - 20px);
  }

  .post-edit-audio-overlay[data-collapsed="true"] {
    max-height: none;
  }
}

@media (max-height: 940px) {
  .post-edit-platform-preview-device {
    width: 100%;
  }
}

@media (max-height: 840px) {
  vaadin-dialog[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(content),
  vaadin-dialog-overlay[theme~="post-edit"]:not([theme~="post-media-picker-dialog"])::part(content) {
    padding: 40px 24px 0;
  }

  vaadin-dialog-overlay[theme~="post-edit"]::part(header) {
    padding: 18px 18px 8px;
  }

  vaadin-dialog-overlay[theme~="post-edit"]::part(footer) {
    padding: 10px 18px 16px;
  }

  .post-edit-content {
    padding: 6px 18px 12px;
  }

  .post-edit-workspace {
    column-gap: 20px;
    row-gap: 14px;
  }

  .post-edit-platform-preview-device {
    width: 100%;
    padding: 0;
    border-radius: 30px;
  }

  .post-edit-platform-preview-card {
    padding: 12px;
    border-radius: inherit;
  }

  .post-edit-platform-media-stage {
    border-radius: 20px;
  }
}

@media (max-height: 720px) {
  vaadin-dialog-overlay[theme~="post-media-picker-dialog"]::part(content) {
    border-radius: 22px;
  }

  .post-edit-content {
    padding: 4px 14px 10px;
  }

  .post-edit-platform-preview-device {
    width: 100%;
    padding: 0;
    border-radius: 24px;
  }

  .post-edit-platform-preview-card {
    padding: 10px;
    border-radius: inherit;
  }

  .post-edit-platform-media-stage {
    border-radius: 18px;
  }

  .post-edit-form,
  .post-edit-panel,
  .post-media-picker {
    padding: 16px 18px;
  }
}

.post-section-label {
  color: #a8a8a8;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.post-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #d1d2d4;
  font-size: 0.84rem;
  line-height: 1;
  white-space: nowrap;
}

.post-chip-strong {
  border-color: #666;
  background: linear-gradient(180deg, #e1e2e4 0%, #cdced0 100%);
  color: #191a1d;
  font-weight: 700;
}

.post-card-channels .post-channel-chip {
  border-color: color-mix(in srgb, var(--type-accent) 38%, transparent);
  background: var(--type-tint);
  color: #e1e2e4;
  font-weight: 600;
}

.post-hashtag-chip {
  border-color: rgba(255, 255, 255, 0.06);
  background: transparent;
  color: rgba(232, 233, 236, 0.62);
  font-weight: 500;
}

.post-description {
  margin: 0;
  color: rgba(225, 226, 228, 0.86);
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 92ch;
  white-space: pre-wrap;
}

.posts-empty-state {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px;
  border: 1px dashed var(--app-border-strong);
  border-radius: 16px;
  background: #1b1c1f;
  color: var(--app-muted);
}

.media-card {
  border: 1px solid var(--app-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--app-surface-1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  position: relative;
}

.media-preview {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  background: #000;
}

.media-video-preview {
  pointer-events: none;
}

.media-image-wrap {
  position: relative;
}

.media-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
  z-index: 1;
}

.media-card-top-actions {
  position: absolute;
  top: 12px;
  left: 56px;
  right: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 2;
}

.media-type-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(19, 20, 23, 0.68);
  color: rgba(232, 233, 236, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  z-index: 2;
}

.media-type-badge vaadin-icon {
  width: 13px;
  height: 13px;
}

.media-select-action {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  min-width: 32px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(19, 20, 23, 0.72);
  color: #e8e9eb;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.media-select-action vaadin-icon,
.media-select-action svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 120ms ease, transform 120ms ease;
}

.media-select-action:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(23, 24, 27, 0.84);
  transform: translateY(-1px);
}

.media-select-action.selected {
  border-color: rgba(122, 176, 226, 0.9);
  background: linear-gradient(180deg, rgba(122, 176, 226, 0.96) 0%, rgba(67, 154, 219, 0.96) 100%);
  box-shadow: 0 10px 24px rgba(21, 93, 140, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.media-select-action.selected vaadin-icon,
.media-select-action.selected svg {
  opacity: 1;
  transform: scale(1);
}

.media-card.selected {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 1px rgba(122, 176, 226, 0.2), 0 20px 34px rgba(0, 0, 0, 0.24);
}

.media-card.dragging {
  opacity: 0.28;
}

.media-card.drag-ghost {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  right: auto;
  pointer-events: none;
  opacity: 0.96;
  transform: rotate(-1deg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.26);
}

.media-card:hover .media-card-top-actions,
.media-card:focus-within .media-card-top-actions,
.media-card.selected .media-card-top-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.media-card:hover .media-image-wrap::after,
.media-card:focus-within .media-image-wrap::after,
.media-card.selected .media-image-wrap::after {
  opacity: 1;
}

.media-icon-action {
  min-width: 36px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(19, 20, 23, 0.72);
  color: #e8e9eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.media-icon-action vaadin-icon,
.media-icon-action svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.media-icon-action:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(23, 24, 27, 0.84);
  transform: translateY(-1px);
}

.media-icon-action:active,
.media-select-action:active {
  transform: translateY(0);
}

.media-icon-link {
  text-decoration: none;
}

.media-card-summary {
  padding: 8px 10px 10px;
  color: var(--app-muted);
  font-size: var(--lumo-font-size-xs);
  line-height: 1.25;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.audio-grid {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 18px;
  box-sizing: border-box;
}

.audio-grid .audio-row {
  margin-bottom: 10px;
}

.audio-empty-state-shell {
  padding: 18px;
  box-sizing: border-box;
}

.audio-row {
  display: grid;
  grid-template-columns: 40px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 0%, rgba(122, 176, 226, 0.11) 0%, rgba(122, 176, 226, 0) 28%),
    linear-gradient(180deg, #1e1e22 0%, #191a1d 100%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  box-sizing: border-box;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.audio-row:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 14% 0%, rgba(122, 176, 226, 0.16) 0%, rgba(122, 176, 226, 0) 30%),
    linear-gradient(180deg, #202124 0%, #1a1b1e 100%);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.audio-row.selected,
.audio-row.playing {
  border-color: rgba(122, 176, 226, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(122, 176, 226, 0.12),
    0 18px 34px rgba(0, 0, 0, 0.24);
}

.audio-row-select,
.audio-row-play {
  position: static;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
}

.audio-row-select {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(19, 20, 23, 0.62);
}

.audio-row-select svg {
  opacity: 0;
  transform: scale(0.78);
  transition: opacity 120ms ease, transform 120ms ease;
}

.audio-row-select.selected {
  border-color: rgba(122, 176, 226, 0.9);
  background: linear-gradient(180deg, rgba(122, 176, 226, 0.96) 0%, rgba(67, 154, 219, 0.96) 100%);
}

.audio-row-select.selected svg {
  opacity: 1;
  transform: scale(1);
}

.audio-row-play {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(122, 176, 226, 0.32);
  border-radius: 999px;
  background: rgba(122, 176, 226, 0.12);
  color: #e8f6ff;
  font: inherit;
  appearance: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 18px rgba(0, 0, 0, 0.22);
  -webkit-tap-highlight-color: transparent;
}

.audio-row-play:hover {
  border-color: rgba(122, 176, 226, 0.56);
  background: rgba(122, 176, 226, 0.18);
}

vaadin-button.audio-row-play::part(overlay),
vaadin-button.audio-row-select::part(overlay),
vaadin-button.audio-row-play::part(ripple),
vaadin-button.audio-row-select::part(ripple) {
  display: none;
}

.audio-row-play:active,
vaadin-button.audio-row-select[active] {
  background: rgba(122, 176, 226, 0.16);
}

.audio-play-symbol {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.audio-play-glyph {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
  fill: currentColor;
  opacity: 1;
  transform: scale(1);
  transition: opacity 120ms ease, transform 120ms ease;
}

.audio-pause-glyph {
  opacity: 0;
  transform: scale(0.82);
}

.audio-row-play.playing .audio-play-glyph:not(.audio-pause-glyph),
.audio-row-play[data-playing="true"] .audio-play-glyph:not(.audio-pause-glyph) {
  opacity: 0;
  transform: scale(0.82);
}

.audio-row-play.playing .audio-pause-glyph,
.audio-row-play[data-playing="true"] .audio-pause-glyph {
  opacity: 1;
  transform: scale(1);
}

.audio-row-main {
  display: grid;
  grid-template-columns: minmax(170px, 0.34fr) minmax(260px, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.audio-row-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.audio-row-title {
  min-width: 0;
  overflow: hidden;
  color: #e1e2e4;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-row-meta {
  min-width: 0;
  overflow: hidden;
  color: var(--app-muted);
  font-size: 0.78rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-track {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.audio-track-time {
  color: rgba(232, 233, 236, 0.58);
  font-size: 0.74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}

.audio-track-waveform-shell {
  position: relative;
  min-width: 0;
  height: 54px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 45%),
    rgba(255, 255, 255, 0.035);
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}

.audio-track-waveform-shell::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
}

.audio-track-progress {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 0%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.08));
  pointer-events: none;
}

.audio-track-waveform {
  position: relative;
  z-index: 2;
  display: block;
  height: 100%;
  min-width: 0;
}

.audio-waveform-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.76;
  transition: opacity 140ms ease;
}

.audio-track-waveform-shell.audio-waveform-ready .audio-waveform-canvas,
.audio-row.playing .audio-waveform-canvas,
.audio-stage-player.playing .audio-waveform-canvas {
  opacity: 0.96;
}

.audio-track-element {
  display: none;
}

.audio-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.audio-row-actions .media-icon-action {
  position: static;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
}

.audio-preview-stage-body {
  min-height: 260px;
}

.audio-stage-player {
  display: grid;
  justify-items: center;
  gap: 24px;
  width: min(900px, 100%);
  padding: 28px;
  box-sizing: border-box;
}

.audio-stage-icon {
  width: 104px;
  height: 104px;
  border-radius: 30px;
}

.audio-stage-icon vaadin-icon {
  width: 48px;
  height: 48px;
}

.audio-stage-controls {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: 100%;
}

.audio-stage-controls .audio-row-play {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
}

.audio-stage-track .audio-track-waveform-shell {
  height: 82px;
}

.audio-stage-track .audio-track-waveform {
  gap: 1px;
}

.synapse-mini-audio-player {
  position: fixed;
  right: 58px;
  bottom: 22px;
  z-index: 1000;
  width: min(360px, calc(100vw - 78px));
  min-width: 0;
  padding: 12px;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 0%, rgba(122, 176, 226, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(30, 31, 34, 0.96) 0%, rgba(22, 24, 26, 0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 22px 54px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.98);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    right 180ms ease,
    width 180ms ease,
    height 180ms ease,
    padding 180ms ease,
    border-radius 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.synapse-mini-audio-player[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.synapse-mini-audio-player[data-playing="true"] {
  border-color: rgba(122, 176, 226, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 58px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(122, 176, 226, 0.08);
}

.synapse-mini-audio-player[data-collapsed="true"] {
  right: 0;
  width: 42px;
  height: 58px;
  padding: 0;
  border-right: 0;
  border-radius: 16px 0 0 16px;
}

.synapse-mini-audio-player audio {
  display: none;
}

.synapse-mini-audio-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 9px 10px;
  min-width: 0;
}

.synapse-mini-audio-play,
.synapse-mini-audio-skip,
.synapse-mini-audio-close,
.synapse-mini-audio-collapse,
.synapse-mini-audio-loop,
.synapse-mini-audio-track {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.synapse-mini-audio-player[data-collapsed="true"] .synapse-mini-audio-body,
.synapse-mini-audio-player[data-collapsed="true"] .synapse-mini-audio-close {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.synapse-mini-audio-transport {
  display: grid;
  grid-row: 1 / span 2;
  grid-template-columns: 26px 42px 26px;
  align-items: center;
  gap: 4px;
}

.synapse-mini-audio-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(122, 176, 226, 0.34);
  border-radius: 999px;
  background: rgba(122, 176, 226, 0.13);
  color: #f2fbff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 22px rgba(0, 0, 0, 0.28);
}

.synapse-mini-audio-play:hover {
  border-color: rgba(122, 176, 226, 0.58);
  background: rgba(122, 176, 226, 0.2);
}

.synapse-mini-audio-skip {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(232, 233, 236, 0.7);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    opacity 140ms ease;
}

.synapse-mini-audio-skip-icon {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.synapse-mini-audio-skip:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #e8e9eb;
}

.synapse-mini-audio-skip:disabled {
  opacity: 0.36;
  cursor: default;
}

.synapse-mini-audio-skip:disabled:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(232, 233, 236, 0.7);
}

.synapse-mini-audio-play-icon,
.synapse-mini-audio-pause-icon {
  grid-area: 1 / 1;
  display: block;
  transition: opacity 120ms ease, transform 120ms ease;
}

.synapse-mini-audio-play-icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
}

.synapse-mini-audio-pause-icon {
  width: 13px;
  height: 15px;
  opacity: 0;
  transform: scale(0.84);
  background:
    linear-gradient(90deg, currentColor 0 4px, transparent 4px 9px, currentColor 9px 13px);
}

.synapse-mini-audio-play[data-playing="true"] .synapse-mini-audio-play-icon {
  opacity: 0;
  transform: scale(0.84);
}

.synapse-mini-audio-play[data-playing="true"] .synapse-mini-audio-pause-icon {
  opacity: 1;
  transform: scale(1);
}

.synapse-mini-audio-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(22, 24, 26, 0.88);
  color: rgba(232, 233, 236, 0.76);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
  transform: translate(0, 0) scale(0.86);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    opacity 140ms ease,
    transform 180ms ease,
    box-shadow 140ms ease;
}

.synapse-mini-audio-player:hover .synapse-mini-audio-close,
.synapse-mini-audio-player:focus-within .synapse-mini-audio-close,
.synapse-mini-audio-close:hover,
.synapse-mini-audio-close:focus-visible {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  transform: translate(22px, -22px) scale(1);
}

.synapse-mini-audio-close:hover {
  border-color: rgba(255, 118, 118, 0.38);
  background: rgba(34, 21, 21, 0.94);
  color: #ffb7b7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.22);
}

.synapse-mini-audio-close-icon {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.5;
}

.synapse-mini-audio-collapse {
  position: absolute;
  top: 50%;
  right: -36px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 0;
  border-radius: 0 14px 14px 0;
  background: rgba(22, 24, 26, 0.9);
  color: rgba(232, 233, 236, 0.72);
  box-shadow: 8px 10px 22px rgba(0, 0, 0, 0.26);
  transform: translateY(-50%);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    transform 180ms ease;
}

.synapse-mini-audio-collapse:hover {
  border-color: rgba(122, 176, 226, 0.32);
  background: rgba(18, 28, 34, 0.96);
  color: #f2fbff;
}

.synapse-mini-audio-collapse-icon {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
}

.synapse-mini-audio-player[data-collapsed="true"] .synapse-mini-audio-collapse {
  inset: 0;
  width: 42px;
  height: 58px;
  border: 0;
  border-radius: 16px 0 0 16px;
  background:
    radial-gradient(circle at 20% 0%, rgba(122, 176, 226, 0.18), transparent 44%),
    rgba(22, 24, 26, 0.94);
  box-shadow: none;
  transform: none;
}

.synapse-mini-audio-player[data-collapsed="true"] .synapse-mini-audio-collapse-icon {
  transform: rotate(180deg);
}

.synapse-mini-audio-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.synapse-mini-audio-loop {
  min-width: 44px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(232, 233, 236, 0.62);
  font-size: 0.67rem;
  font-weight: 850;
  line-height: 1;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.synapse-mini-audio-loop:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(232, 233, 236, 0.84);
}

.synapse-mini-audio-loop[data-active="true"] {
  border-color: rgba(122, 176, 226, 0.42);
  background: rgba(122, 176, 226, 0.16);
  color: #eff9ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(122, 176, 226, 0.08);
}

.synapse-mini-audio-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.synapse-mini-audio-title,
.synapse-mini-audio-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.synapse-mini-audio-title {
  color: #e2e3e5;
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.2;
}

.synapse-mini-audio-meta {
  color: rgba(232, 233, 236, 0.56);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
}

.synapse-mini-audio-time {
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 40px;
  color: rgba(232, 233, 236, 0.58);
  font-size: 0.68rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.synapse-mini-audio-track {
  position: relative;
  grid-column: 2 / span 2;
  min-width: 0;
  height: 30px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  overflow: hidden;
}

.synapse-mini-audio-progress {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 0%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.06));
  pointer-events: none;
}

.synapse-mini-audio-waveform {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

.synapse-mini-audio-waveform-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.84;
  transition: opacity 160ms ease;
}

.synapse-mini-audio-waveform.loading .synapse-mini-audio-waveform-canvas {
  opacity: 0.66;
}

.synapse-mini-audio-waveform.ready .synapse-mini-audio-waveform-canvas {
  opacity: 0.96;
}

@media (max-width: 720px) {
  .synapse-mini-audio-player {
    right: 48px;
    bottom: 12px;
    width: calc(100vw - 60px);
  }
}

@media (max-width: 1180px) {
  .audio-row {
    grid-template-columns: 40px 48px minmax(0, 1fr);
  }

  .audio-row-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .audio-row-actions {
    grid-column: 3;
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  .audio-grid {
    padding: 14px;
  }

  .audio-row {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
  }

  .audio-row-play {
    grid-column: 1;
  }

  .audio-row-main,
  .audio-row-actions {
    grid-column: 2;
  }

  .audio-track {
    grid-template-columns: minmax(0, 1fr);
  }

  .audio-track-time {
    display: none;
  }

  .audio-stage-controls {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .audio-stage-track {
    width: 100%;
  }
}

.media-empty-state {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  border: 1px dashed var(--app-border-strong);
  color: var(--app-muted);
  background: var(--app-surface-1);
}

@media (max-width: 1180px) {
  .media-main-layout {
    flex-direction: column;
  }

  .media-main-layout .posts-left-rail {
    width: 100%;
    min-width: 0;
    max-width: none;
    border-right: none;
    border-bottom: 1px solid var(--app-border);
  }

  .media-main-layout .posts-left-rail.collapsed {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .media-main-layout .posts-left-rail .media-rail-resize-handle {
    display: none;
  }

  .media-main-layout .posts-left-rail-header {
    display: none;
  }

  .media-main-layout .posts-rail-toggle {
    display: flex;
  }

  .media-main-layout .posts-left-rail.collapsed .posts-rail-toggle {
    display: flex;
  }

  .media-main-layout .posts-rail-section-folders {
    display: flex;
  }

  .media-main-layout .posts-rail-section-folders .media-folder-scroller {
    height: auto !important;
    max-height: none;
    min-height: 0;
  }

  .media-main-layout .posts-rail-section-folders .media-folder-scroller::part(content) {
    overflow-x: hidden;
    overflow-y: visible;
  }

  .media-main-layout .posts-rail-section-folders .media-folder-rail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    padding: 14px 12px 12px;
    min-width: 0;
  }

  .media-main-layout .posts-rail-section-folders .media-folder-button {
    min-height: 40px;
    border-radius: 12px;
  }

  .media-main-layout .posts-rail-section-folders .media-folder-tree {
    gap: 1px;
  }

  .media-main-layout .posts-rail-section-folders .media-explorer-row {
    padding-left: min(calc(var(--media-tree-depth, 0) * 14px), 84px);
  }

  .media-main-layout .posts-rail-section-folders .media-explorer-toggle,
  .media-main-layout .posts-rail-section-folders .media-explorer-toggle-placeholder {
    width: 24px;
    min-width: 24px;
    height: 24px;
  }

  .media-main-layout .posts-rail-section-folders .media-folder-explorer-header {
    gap: 10px;
  }

  .media-main-layout .posts-rail-section-folders .media-folder-nav-row {
    gap: 6px;
  }

  .media-main-layout .posts-rail-section-folders .media-folder-location-card {
    padding: 12px;
  }

  .media-main-layout .posts-rail-section-folders .media-folder-path-drop-zone {
    padding: 8px 10px;
  }

  .media-main-layout .posts-rail-section-folders .media-explorer-item-content {
    padding-right: 10px;
  }

  .media-main-layout .posts-rail-section-folders .media-explorer-toggle vaadin-icon {
    width: 16px;
    height: 16px;
  }

  .media-main-layout .posts-rail-section-folders .media-explorer-file-meta,
  .media-main-layout .posts-rail-section-folders .media-explorer-count {
    font-size: 0.68rem;
  }

  .media-preview-stage {
    margin: 8px 0 12px;
    padding: 14px;
  }

  .media-preview-stage-header {
    gap: 12px;
    flex-wrap: wrap;
  }

  .media-preview-stage-title,
  .media-preview-stage-meta {
    white-space: normal;
  }

  .media-preview-stage-body {
    min-height: 260px;
    padding: 10px;
  }

  .media-preview-stage-asset {
    max-height: 360px;
  }

  .media-storage-primary-row,
  .media-storage-bulk-row {
    flex-wrap: wrap;
  }

  .media-storage-primary-row .media-search-field {
    min-width: 0;
    width: auto !important;
  }

  .media-storage-primary-row .media-upload {
    min-width: 260px;
  }

  .media-storage-action-panel .media-action-row vaadin-button {
    min-width: 0;
  }
}

@media (max-width: 1000px) {
  .media-content {
    padding: 14px;
  }

  .settings-api-title-row {
    gap: 12px;
  }

  .media-heading-row {
    gap: 12px;
  }

  .media-stat-group {
    width: 100%;
    justify-content: flex-start;
  }

  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}

.dashboard-page {
  background: var(--app-bg);
  color: var(--app-text);
}

.ai-prompt-title {
  color: #e1e2e4;
  font-size: 1rem;
  font-weight: 700;
}

.ai-prompt-output {
  margin: 0;
  color: #b8c7d6;
  line-height: 1.5;
  white-space: pre-wrap;
}

vaadin-dialog-overlay[theme~="ai-prompt-edit"]::part(overlay) {
  width: min(920px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: #1c1d20;
  color: var(--app-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

vaadin-dialog-overlay[theme~="ai-prompt-edit"]::part(backdrop) {
  background: rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

vaadin-dialog-overlay[theme~="ai-prompt-edit"]::part(content) {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
  min-width: 0;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 100%),
    #1c1d20;
  overflow: hidden;
}

vaadin-dialog-overlay[theme~="ai-prompt-edit"]::part(header) {
  flex: 0 0 auto;
  padding: 18px 22px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #1e1e22;
}

vaadin-dialog-overlay[theme~="ai-prompt-edit"]::part(title) {
  color: #e1e2e4;
  font-size: 1rem;
  font-weight: 800;
}

vaadin-dialog-overlay[theme~="ai-prompt-edit"]::part(footer) {
  flex: 0 0 auto;
  gap: 10px;
  padding: 13px 22px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #1e1e22;
}

vaadin-dialog-overlay[theme~="ai-prompt-edit"] vaadin-button[theme~="primary"] {
  border: 1px solid var(--app-button-primary-border);
  border-radius: var(--app-radius-control-lg);
  background: var(--app-button-primary-surface);
  color: var(--app-button-primary-text);
}

vaadin-dialog-overlay[theme~="ai-prompt-edit"] vaadin-button[theme~="primary"]:hover {
  background: var(--app-button-primary-surface-hover);
}

vaadin-dialog-overlay[theme~="ai-prompt-edit"] vaadin-button[theme~="tertiary"] {
  color: #cecfd1;
}

@media (max-width: 720px) {
  vaadin-dialog-overlay[theme~="ai-prompt-edit"]::part(overlay) {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 14px;
  }

  vaadin-dialog-overlay[theme~="ai-prompt-edit"]::part(header) {
    padding: 15px 16px 10px;
  }

  vaadin-dialog-overlay[theme~="ai-prompt-edit"]::part(footer) {
    padding: 12px 16px 14px;
  }
}

.content-category-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 20px;
  box-sizing: border-box;
}

.content-category-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--app-border);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(180deg, #1e1f22 0%, #1a1b1e 100%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
}

.campaign-slot-grid {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.campaign-slot-card {
  gap: 16px;
  border-color: rgba(191, 175, 255, 0.16);
  background:
    radial-gradient(circle at top right, rgba(110, 196, 255, 0.12) 0%, rgba(110, 196, 255, 0) 34%),
    linear-gradient(180deg, #17181d 0%, #101114 100%);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.campaign-slot-card:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 209, 255, 0.28);
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.26);
}

.campaign-slot-card.selected {
  border-color: rgba(255, 255, 255, 0.42);
  background:
    radial-gradient(circle at top right, rgba(110, 196, 255, 0.18) 0%, rgba(110, 196, 255, 0) 36%),
    linear-gradient(180deg, #1b1d23 0%, #111318 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 28px 54px rgba(0, 0, 0, 0.22);
}

.campaign-slot-card:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow:
    0 0 0 2px rgba(139, 209, 255, 0.18),
    0 24px 48px rgba(0, 0, 0, 0.26);
}

.campaign-slot-meta {
  flex-wrap: wrap;
}

.campaign-slot-state {
  border-color: rgba(139, 209, 255, 0.34);
  background: rgba(102, 186, 255, 0.12);
  color: #d8efff;
}

.campaign-slot-description {
  margin-top: -4px;
}

.campaign-slot-platforms,
.campaign-slot-posts {
  justify-content: flex-start;
}

.campaign-slot-platform-chip,
.campaign-slot-post-chip {
  background: rgba(255, 255, 255, 0.05);
}

.campaign-slot-hint {
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
  line-height: 1.4;
}

.campaign-slot-actions {
  gap: 10px;
  flex-wrap: wrap;
}

.campaign-slot-timeline {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 84px;
  padding: 16px 14px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.018) 100%);
  overflow: hidden;
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
  box-sizing: border-box;
}

.campaign-slot-timeline-lane {
  position: relative;
  height: 28px;
  margin: 0 10px;
}

.campaign-slot-timeline-bar {
  position: absolute;
  inset: 12px 0 auto;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(115, 196, 255, 0.26) 0%, rgba(235, 245, 255, 0.08) 100%);
}

.campaign-slot-timeline-marker {
  position: absolute;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: #6ec4ff;
  box-shadow: 0 10px 18px rgba(53, 148, 255, 0.28);
  transform: translateX(-50%);
  box-sizing: border-box;
}

.campaign-slot-timeline-labels {
  margin-top: 8px;
}

.campaign-slot-timeline-label {
  color: #c2ccd8;
  font-size: 0.78rem;
  font-weight: 600;
}

.campaign-editor-content {
  gap: 14px;
  height: auto;
  min-height: 100%;
  overflow: visible;
}

.campaign-planner-header {
  flex-wrap: nowrap;
  align-items: center;
}

.campaign-editor-basic-form {
  padding-top: 0;
}

.campaign-editor-timeline-panel,
.campaign-editor-form {
  gap: 12px;
}

.campaign-editor-narrative {
  gap: 12px;
}

.campaign-editor-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.campaign-platform-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.012) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  box-sizing: border-box;
}

.campaign-platform-item:hover {
  border-color: rgba(255, 255, 255, 0.11);
  background:
    radial-gradient(circle at top right, rgba(110, 196, 255, 0.06) 0%, rgba(110, 196, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.014) 100%);
}

.campaign-platform-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(122, 176, 226, 0.2);
  border-color: rgba(122, 176, 226, 0.28);
}

.campaign-platform-item:active {
  transform: translateY(1px);
}

.campaign-platform-item.active {
  border-color: rgba(122, 176, 226, 0.24);
  background:
    radial-gradient(circle at top right, rgba(122, 176, 226, 0.14) 0%, rgba(122, 176, 226, 0) 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(122, 176, 226, 0.08);
}

.campaign-platform-header {
  gap: 12px;
  min-width: 0;
}

.campaign-platform-icon-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-width: 46px;
  height: 46px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #202124 0%, #1b1c1f 100%);
}

.campaign-platform-icon {
  width: 19px;
  height: 19px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.7);
  opacity: 0.82;
  transition: filter 120ms ease, opacity 120ms ease;
}

.campaign-platform-item.active .campaign-platform-icon {
  filter: brightness(0) saturate(100%) invert(70%) sepia(54%) saturate(1913%) hue-rotate(176deg) brightness(102%) contrast(102%);
  opacity: 1;
}

.campaign-platform-copy {
  gap: 4px;
  min-width: 0;
}

.campaign-platform-name {
  color: var(--app-text);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.2;
}

.campaign-platform-description {
  color: rgba(232, 233, 236, 0.66);
  font-size: 0.78rem;
  line-height: 1.4;
}

.campaign-platform-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 233, 236, 0.66);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.campaign-platform-status.active {
  border-color: rgba(122, 176, 226, 0.22);
  background: rgba(122, 176, 226, 0.12);
  color: #8ed0ff;
}

.campaign-platform-settings {
  min-width: 0;
  padding-top: 2px;
}

.campaign-platform-settings-row {
  gap: 12px;
}

.campaign-platform-settings-fields {
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.campaign-platform-settings-copy {
  gap: 4px;
  min-width: 0;
}

.campaign-platform-settings-label {
  color: #edf6ff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.campaign-platform-settings-note {
  color: rgba(232, 233, 236, 0.62);
  font-size: 0.75rem;
  line-height: 1.4;
}

.campaign-platform-cadence,
.campaign-platform-time {
  min-width: 0;
}

.campaign-editor-section-label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(110, 196, 255, 0.12);
  color: #d9f0ff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.campaign-setup-content {
  gap: 14px;
  padding-top: 10px;
}

vaadin-details.campaign-setup-details {
  width: 100%;
  padding: 12px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(110, 196, 255, 0.05) 0%, rgba(110, 196, 255, 0) 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0.012) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  box-sizing: border-box;
}

vaadin-details.campaign-setup-details::part(summary) {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(110, 196, 255, 0.1) 0%, rgba(110, 196, 255, 0) 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.018) 100%);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
}

vaadin-details.campaign-setup-details[opened]::part(summary) {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

vaadin-details.campaign-setup-details::part(toggle) {
  color: #d8efff;
}

vaadin-details.campaign-setup-details::part(content) {
  padding: 14px 4px 0;
}

.campaign-setup-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.campaign-setup-summary-title {
  color: var(--app-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.campaign-setup-summary-meta {
  color: #b8c7d7;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}

.campaign-setup-summary-note {
  color: rgba(232, 233, 236, 0.72);
  font-size: 0.84rem;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.campaign-editor-timeline-footer,
.campaign-post-library-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.campaign-editor-timeline-footer {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.campaign-post-library-inline {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.campaign-post-library-heading {
  gap: 4px;
  min-width: 0;
}

.campaign-post-library-title {
  color: var(--app-text);
  font-size: 1rem;
  font-weight: 700;
}

.campaign-post-library-subtitle {
  color: rgba(232, 233, 236, 0.68);
  font-size: 0.82rem;
  line-height: 1.4;
}

.campaign-post-library-search {
  min-width: 240px;
}

.campaign-post-library-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}

.campaign-prompt-browser-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}

vaadin-dialog-overlay[theme~="generation-prompt-browser-dialog"]::part(overlay) {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: linear-gradient(180deg, #212225 0%, #1d1e21 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.41);
  color: #e1e2e4;
  overflow: hidden;
}

vaadin-dialog-overlay[theme~="generation-prompt-browser-dialog"]::part(backdrop) {
  background: rgba(0, 0, 0, 0.34);
}

vaadin-dialog-overlay[theme~="generation-prompt-browser-dialog"]::part(header) {
  padding: 18px 22px 6px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

vaadin-dialog-overlay[theme~="generation-prompt-browser-dialog"]::part(title) {
  color: #e1e2e4;
  font-size: 1.05rem;
  font-weight: 700;
}

vaadin-dialog-overlay[theme~="generation-prompt-browser-dialog"]::part(content) {
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

vaadin-dialog-overlay[theme~="generation-prompt-browser-dialog"]::part(footer) {
  padding: 12px 22px 18px;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.generation-prompt-content {
  gap: 12px;
  padding: 0;
}

.generation-prompt-toolbar {
  padding: 0 4px;
}

.generation-prompt-summary {
  color: var(--app-text-subtle, rgba(232, 233, 236, 0.7));
  font-size: 0.9rem;
  white-space: nowrap;
}

.generation-prompt-scroller {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.generation-prompt-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 4px 8px;
}

.generation-prompt-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--app-text-subtle, rgba(232, 233, 236, 0.65));
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.generation-prompt-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.generation-prompt-card-header {
  gap: 8px;
}

.generation-prompt-kind-icon {
  width: 18px;
  height: 18px;
  color: var(--app-text-subtle, rgba(232, 233, 236, 0.75));
}

.generation-prompt-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.generation-prompt-badge-kind {
  background: rgba(120, 170, 255, 0.16);
  color: rgba(180, 210, 255, 0.95);
}

.generation-prompt-badge-status {
  background: rgba(255, 255, 255, 0.08);
  color: var(--app-text);
}

.generation-prompt-status-pending {
  background: rgba(255, 196, 0, 0.16);
  color: rgba(255, 215, 120, 0.95);
}

.generation-prompt-status-rendering {
  background: rgba(80, 170, 255, 0.18);
  color: rgba(170, 215, 255, 0.95);
}

.generation-prompt-status-completed {
  background: rgba(80, 220, 130, 0.16);
  color: rgba(170, 240, 195, 0.95);
}

.generation-prompt-status-failed {
  background: rgba(255, 100, 100, 0.18);
  color: rgba(255, 180, 180, 0.95);
}

.generation-prompt-status-cancelled {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(232, 233, 236, 0.6);
}

.generation-prompt-context {
  font-size: 0.82rem;
  color: var(--app-text-subtle, rgba(232, 233, 236, 0.65));
}

.generation-prompt-text {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  line-height: 1.45;
  color: var(--app-text);
  font-size: 0.95rem;
}

.generation-prompt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.generation-prompt-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.78rem;
}

.generation-prompt-meta-label {
  color: var(--app-text-subtle, rgba(232, 233, 236, 0.55));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
}

.generation-prompt-meta-value {
  color: var(--app-text);
}

.generation-prompt-failure {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 80, 80, 0.12);
  color: rgba(255, 200, 200, 0.95);
  font-size: 0.82rem;
}

.generation-prompt-output-link {
  font-size: 0.85rem;
  color: rgba(180, 210, 255, 0.95);
}

.generation-prompt-actions {
  justify-content: flex-end;
}

.generation-prompt-export {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.generation-prompt-export[disabled],
.generation-prompt-export:has(vaadin-button[disabled]) {
  pointer-events: none;
  opacity: 0.55;
}

.campaign-post-library-scroller {
  max-height: min(40vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.campaign-editor-post-pool-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campaign-editor-post-pool-heading {
  color: var(--app-text);
  font-size: 1rem;
  font-weight: 700;
}

.campaign-post-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 4px 2px 2px;
  box-sizing: border-box;
}

.campaign-post-library-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--app-muted);
}

.campaign-post-library-empty > span:first-child {
  color: var(--app-text);
  font-weight: 700;
}

.campaign-editor-timeline-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campaign-editor-timeline-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--app-text);
}

.campaign-editor-timeline-viewport {
  display: flex;
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;
  padding-bottom: 8px;
  overscroll-behavior: contain;
}

.campaign-editor-timeline-track-shell {
  display: flex;
  justify-content: flex-start;
  min-width: 100%;
  width: max-content;
}

.campaign-editor-timeline-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 220px);
  gap: 14px;
  min-width: max-content;
}

.campaign-editor-timeline-day {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 320px;
  max-height: none;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  box-sizing: border-box;
}

.campaign-editor-timeline-day.today {
  border-color: rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.022) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 36px rgba(0, 0, 0, 0.22);
}

.campaign-editor-timeline-day.past {
  border-color: rgba(255, 255, 255, 0.035);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 100%);
  opacity: 0.62;
}

.campaign-editor-timeline-day.past .campaign-editor-empty-slot {
  color: rgba(232, 233, 236, 0.45);
}

.campaign-editor-timeline-day.past.today {
  opacity: 1;
}

.campaign-editor-timeline-day-unscheduled {
  background:
    linear-gradient(180deg, rgba(255, 214, 130, 0.08) 0%, rgba(255, 255, 255, 0.015) 100%);
}

.campaign-editor-timeline-day-label {
  color: var(--app-text);
  font-size: 0.95rem;
  font-weight: 700;
}

.campaign-editor-timeline-day-meta {
  color: var(--app-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.campaign-editor-timeline-events {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: visible;
  padding-right: 4px;
}

.campaign-editor-empty-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  color: var(--app-muted);
  text-align: center;
  box-sizing: border-box;
}

.campaign-editor-post-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.campaign-editor-post-pool-card {
  border-color: rgba(110, 196, 255, 0.14);
  background:
    radial-gradient(circle at top right, rgba(110, 196, 255, 0.11) 0%, rgba(110, 196, 255, 0) 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.018) 100%);
}

.campaign-post-library-card {
  min-height: 0;
}

.campaign-post-library-card.assigned {
  border-color: rgba(110, 196, 255, 0.24);
}

.campaign-editor-post-card.draggable {
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.campaign-editor-post-card.draggable:hover {
  border-color: rgba(110, 196, 255, 0.26);
  background:
    radial-gradient(circle at top right, rgba(110, 196, 255, 0.14) 0%, rgba(110, 196, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.campaign-editor-post-card.draggable:active {
  cursor: grabbing;
}

/* Account timetable cards reuse the planner card visuals but carry their own
   drag marker (.account-timeline-card) so they never collide with a leaked
   planner drag listener. Mirror the planner's draggable affordances here. */
.campaign-editor-post-card.account-timeline-card {
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.campaign-editor-post-card.account-timeline-card:hover {
  border-color: rgba(110, 196, 255, 0.26);
  background:
    radial-gradient(circle at top right, rgba(110, 196, 255, 0.14) 0%, rgba(110, 196, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.campaign-editor-post-card.account-timeline-card:active {
  cursor: grabbing;
}

/* Sits directly under the account top bar — a touch of breathing room above
   the hero card that follows it. */
.account-editor-timeline-panel {
  margin-bottom: 12px;
}

.campaign-editor-post-card.dragging {
  opacity: 0.28;
}

.campaign-editor-post-card.drag-ghost {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  right: auto;
  pointer-events: none;
  opacity: 0.96;
  transform: rotate(-1deg);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.26);
}

.campaign-editor-post-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.campaign-editor-post-title {
  color: var(--app-text);
  font-weight: 700;
  min-width: 0;
}

.campaign-editor-post-time {
  display: inline-flex;
  justify-content: center;
  min-width: 48px;
  color: #9ed8ff;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.campaign-editor-post-time-stack {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.campaign-editor-post-time-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

vaadin-button.campaign-editor-post-time-step {
  width: 22px;
  min-width: 22px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 1px solid rgba(158, 216, 255, 0.16);
  border-radius: 7px;
  background: rgba(110, 196, 255, 0.08);
  color: #bfe9ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

vaadin-button.campaign-editor-post-time-step:hover {
  border-color: rgba(158, 216, 255, 0.32);
  background: rgba(110, 196, 255, 0.15);
  color: #e8e9eb;
}

.campaign-editor-post-time.unscheduled {
  color: #f2c27c;
}

.campaign-editor-post-description {
  color: #c6d2de;
  font-size: 0.84rem;
  line-height: 1.45;
}

.campaign-editor-post-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.campaign-editor-post-channel {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #dde6ef;
  font-size: 0.74rem;
  font-weight: 700;
}

.campaign-post-library-state {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 233, 236, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.campaign-post-library-state.assigned {
  background: rgba(110, 196, 255, 0.14);
  color: #dbf1ff;
}

.campaign-editor-post-drag-hint {
  color: rgba(232, 233, 236, 0.6);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
}

.campaign-editor-timeline-day.campaign-drop-target-active {
  border-color: rgba(110, 196, 255, 0.34);
  background:
    radial-gradient(circle at top right, rgba(110, 196, 255, 0.12) 0%, rgba(110, 196, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow: inset 0 0 0 1px rgba(110, 196, 255, 0.12);
}

.content-category-header {
  gap: 14px;
  margin: 0;
}

.content-category-swatch {
  width: 22px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.content-category-title-block {
  gap: 4px;
  margin: 0;
}

.mailing-list-grid-hint {
  padding-inline: 4px;
}

.mailing-list-batch-toolbar {
  gap: 8px;
  padding-inline: 4px;
}

.mailing-list-batch-selection {
  flex: 1 1 220px;
  min-width: 180px;
  font-weight: 600;
}

.mailing-list-batch-clear {
  min-height: 34px;
  padding-inline: 12px;
  border-radius: 999px;
}

.mailing-list-import-upload {
  min-width: 0;
}

.mailing-list-import-upload::part(primary-buttons) {
  padding: 0;
}

.mailing-list-import-upload::part(drop-label),
.mailing-list-import-upload::part(file-list) {
  display: none;
}

.mailing-list-import-upload::part(upload-button) {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--app-border-strong);
  border-radius: 12px;
  background: #202124;
  color: var(--app-text);
  font-weight: 600;
  box-shadow: none;
}

.mailing-list-import-upload::part(upload-button):hover {
  border-color: #4a4a4a;
  background: #26272a;
}

.mailing-list-download-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--app-border-strong);
  border-radius: 12px;
  background: #202124;
  color: var(--app-text);
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
}

.mailing-list-download-link:hover {
  border-color: #4a4a4a;
  background: #26272a;
}

.mailing-list-download-link vaadin-icon {
  width: 1rem;
  height: 1rem;
}

.mailing-list-grid-shell {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--app-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #1e1f22 0%, #191a1d 100%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  box-sizing: border-box;
}

.mailing-list-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  background: transparent;
  --vaadin-grid-background: transparent;
  --vaadin-grid-cell-background: transparent;
  --vaadin-grid-header-background: #1f2023;
}

.mailing-list-grid::part(header-row) {
  background: linear-gradient(180deg, rgba(34, 35, 38, 0.98) 0%, rgba(30, 31, 34, 0.98) 100%);
}

.mailing-list-grid::part(first-header-row) {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow: hidden;
}

.mailing-list-grid::part(header-cell) {
  min-height: 54px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(34, 35, 38, 0.98) 0%, rgba(30, 31, 34, 0.98) 100%);
  color: var(--app-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.mailing-list-grid::part(body-cell) {
  min-height: 78px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  color: var(--app-text);
  cursor: pointer;
}

.mailing-list-grid::part(row):hover {
  background: rgba(255, 255, 255, 0.025);
}

.mailing-list-grid::part(last-row-cell) {
  border-bottom: none;
}

.mailing-grid-contact,
.mailing-grid-updated {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 0;
}

.mailing-grid-contact-title,
.mailing-grid-updated-primary {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #e1e2e4;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.mailing-grid-contact-meta,
.mailing-grid-updated-secondary {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #a7a7a7;
  font-size: 0.8rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.mailing-grid-chip {
  width: fit-content;
  max-width: 100%;
}

.mailing-grid-status-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.mailing-grid-chip-muted {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #bcbcbc;
}

.mailing-grid-status-chip {
  font-weight: 700;
}

.mailing-grid-status-chip-subscribed {
  border-color: rgba(122, 176, 226, 0.28);
  background: rgba(122, 176, 226, 0.14);
  color: #e6f4ff;
}

.mailing-grid-status-chip-unsubscribed {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #cbccce;
}

.mailing-grid-status-chip-missing-email {
  border-color: rgba(255, 214, 153, 0.22);
  background: rgba(255, 214, 153, 0.08);
  color: #ffe3bf;
}

.mailing-grid-status-chip-invalid-email {
  border-color: rgba(255, 139, 139, 0.28);
  background: rgba(255, 139, 139, 0.14);
  color: #ffeaea;
}

.mailing-grid-formality-chip-formal {
  border-color: rgba(163, 208, 255, 0.2);
  background: rgba(163, 208, 255, 0.08);
  color: #d9ecff;
}

.mailing-grid-formality-chip-informal {
  border-color: rgba(255, 214, 153, 0.2);
  background: rgba(255, 214, 153, 0.08);
  color: #ffe3bf;
}

.mailing-grid-actions {
  margin: 0;
  gap: 8px;
  justify-content: flex-end;
}

.mailing-grid-action {
  min-height: 34px;
  padding-inline: 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.notifications-grid-status-chip {
  font-weight: 700;
}

.notifications-grid-status-chip-success {
  border-color: rgba(120, 227, 168, 0.28);
  background: rgba(120, 227, 168, 0.14);
  color: #e9fff1;
}

.notifications-grid-status-chip-failure {
  border-color: rgba(255, 139, 139, 0.28);
  background: rgba(255, 139, 139, 0.14);
  color: #ffeaea;
}

.notifications-grid-details {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  color: var(--app-text);
}

.notifications-grid-details::part(summary) {
  min-height: 34px;
  padding: 0;
  color: #e0e0e2;
  font-size: 0.82rem;
  font-weight: 600;
}

.notifications-grid-details::part(content) {
  padding: 10px 0 0;
}

.notifications-grid-details-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

.notifications-grid-details-label {
  color: #cdced0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.notifications-grid-details-body {
  color: #f5d8d8;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.notifications-grid-details-placeholder {
  color: #9c9c9c;
}

.mailing-contact-groups-members,
.mailing-contact-groups-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.mailing-contact-groups-selected-label {
  padding-inline: 4px;
  margin-top: 4px;
}

.mailing-contact-groups-selected {
  min-height: 72px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.mailing-contact-groups-selected-empty {
  color: #a7a7a7;
  font-size: 0.82rem;
  line-height: 1.5;
}

.mailing-list-empty-state {
  align-self: center;
  width: min(520px, 100%);
  margin: auto;
  text-align: center;
}

.scheduled-mails-page {
  min-width: 0;
}

.scheduled-mails-filter-row {
  align-items: center;
}

.scheduled-mails-filter {
  min-width: 200px;
}

.scheduled-mails-list {
  padding-top: 10px;
}

.scheduled-mail-card {
  cursor: pointer;
  user-select: text;
  touch-action: auto;
  grid-template-columns: 72px 170px minmax(0, 1fr);
}

.scheduled-mail-card.archived {
  cursor: default;
}

.scheduled-mail-card .post-card-meta {
  padding-left: 14px;
}

.scheduled-mail-card:active {
  cursor: default;
}

.scheduled-mail-card.scheduled .post-card-rail {
  background: linear-gradient(180deg, #ffe2ab 0%, #d48a27 100%);
}

.scheduled-mail-card.without-date .post-card-rail {
  background: linear-gradient(180deg, #e4ebf7 0%, #71839b 100%);
}

.scheduled-mail-card.overdue .post-card-rail {
  background: linear-gradient(180deg, #ffc0af 0%, #c85f3d 100%);
}

.scheduled-mail-card.archived .post-card-rail {
  background: linear-gradient(180deg, #a8a8a8 0%, #5d5d5d 100%);
}

.scheduled-mail-status-chip {
  width: fit-content;
  font-weight: 700;
}

.scheduled-mail-status-chip-scheduled {
  border-color: rgba(255, 209, 140, 0.28);
  background: rgba(255, 209, 140, 0.14);
  color: #fff2d3;
}

.scheduled-mail-status-chip-draft {
  border-color: rgba(173, 194, 219, 0.24);
  background: rgba(173, 194, 219, 0.12);
  color: #edf4ff;
}

.scheduled-mail-status-chip-archived {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #cbccce;
}

.scheduled-mail-info-chip {
  width: fit-content;
  max-width: 100%;
}

.scheduled-mail-card-rail-time {
  margin-top: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(25, 26, 29, 0.24);
  color: rgba(25, 26, 29, 0.88);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.scheduled-mail-card .post-card-rail-day {
  font-size: 1.04rem;
}

.scheduled-mail-card .post-card-rail-month {
  font-size: 0.62rem;
}

.scheduled-mail-card.scheduled-mail-card-collapsed {
  row-gap: 0;
}

.scheduled-mail-card.scheduled-mail-card-collapsed .post-card-info,
.scheduled-mail-card.scheduled-mail-card-collapsed .scheduled-mail-card-subject,
.scheduled-mail-card.scheduled-mail-card-collapsed .scheduled-mail-card-preview,
.scheduled-mail-card.scheduled-mail-card-collapsed .scheduled-mail-card-content {
  display: none;
}

.scheduled-mail-card.scheduled-mail-card-collapsed .post-card-body {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
  gap: 0;
}

.scheduled-mail-card.scheduled-mail-card-collapsed .post-card-description-column {
  padding: 0 0 0 18px;
}

.scheduled-mail-card.scheduled-mail-card-collapsed .scheduled-mail-card-title {
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scheduled-mail-card.scheduled-mail-card-collapsed .scheduled-mail-card-title-copy {
  min-width: 0;
}

.scheduled-mail-card.scheduled-mail-card-collapsed .post-card-meta {
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 6px;
}

.scheduled-mail-card-lifecycle {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scheduled-mail-card-lifecycle-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scheduled-mail-card-lifecycle-label {
  color: #9e9e9e;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scheduled-mail-card-lifecycle-value {
  color: #cbccce;
  font-size: 0.84rem;
  line-height: 1.45;
}

.scheduled-mail-card-header {
  gap: 20px;
}

.scheduled-mail-card-title-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.scheduled-mail-card-title {
  color: #e1e2e4;
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.25;
}

.scheduled-mail-card-subject {
  color: #bfbfbf;
  font-size: 0.92rem;
  line-height: 1.45;
}

.scheduled-mail-card-preview {
  margin-top: 6px;
}

.scheduled-mail-card-content {
  margin: 6px 0 0;
  color: #a8a8a8;
  font-size: 0.88rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.scheduled-mails-empty-state {
  align-self: center;
  width: min(620px, 100%);
  margin: auto;
  text-align: center;
}

.scheduled-mail-edit-recipients-panel {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.02);
  box-sizing: border-box;
}

.scheduled-mail-edit-recipients-panel {
  gap: 14px;
  align-self: start;
}

.scheduled-mail-edit-recipients-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.scheduled-mail-edit-recipients-header > :first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.scheduled-mail-edit-recipients-title {
  color: #e1e2e4;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.scheduled-mail-edit-recipients-subtitle {
  color: #a8a8a8;
  font-size: 0.84rem;
  line-height: 1.55;
}

.scheduled-mail-edit-recipients-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scheduled-mail-edit-recipients-list {
  display: grid;
  gap: 10px;
}

.scheduled-mail-recipient-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
}

.scheduled-mail-recipient-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.scheduled-mail-recipient-title {
  color: #e1e2e4;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.3;
}

.scheduled-mail-recipient-subtitle,
.scheduled-mail-recipient-meta {
  color: #a8a8a8;
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.scheduled-mail-recipient-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.scheduled-mail-recipient-remove {
  color: #d1d2d4;
}

.scheduled-mail-edit-recipients-empty {
  width: 100%;
  margin: 0;
}

.email-designer-page {
  gap: 12px;
  min-width: 0;
  padding: 10px 12px 12px;
  box-sizing: border-box;
}

.email-designer-page .media-heading-row {
  width: 100%;
  gap: 12px;
  flex-wrap: nowrap;
  align-items: flex-end;
}

.email-designer-page .media-heading {
  gap: 4px;
}

.email-designer-main {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.email-designer-main > * {
  min-width: 0;
}

.email-designer-rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 12px 8px;
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(122, 176, 226, 0.08), transparent 28%),
    linear-gradient(180deg, #1e1f22 0%, #191a1d 100%);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}

.email-designer-rail-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.email-designer-rail > .email-designer-rail-group:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.email-designer-rail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  color: #cdced0;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.email-designer-rail-button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e8e9eb;
  border-color: rgba(255, 255, 255, 0.14);
}

.email-designer-rail-button[disabled],
.email-designer-rail-button[disabled]:hover {
  opacity: 0.38;
  cursor: default;
  background: rgba(255, 255, 255, 0.02);
  color: #888888;
}

.email-designer-rail-button.active,
.email-designer-rail-button.active:hover {
  background: linear-gradient(135deg, rgba(122, 176, 226, 0.32), rgba(122, 176, 226, 0.14));
  border-color: rgba(122, 176, 226, 0.32);
  color: #e8e9eb;
  box-shadow: inset 0 0 0 1px rgba(122, 176, 226, 0.18);
}

.email-designer-rail-button-primary {
  background: linear-gradient(180deg, #e1e2e4 0%, #cfd0d2 100%);
  border-color: rgba(255, 255, 255, 0.4);
  color: #18191c;
}

.email-designer-rail-button-primary:hover {
  background: linear-gradient(180deg, #e8e9eb 0%, #d7d8da 100%);
  color: #18191c;
}

.email-designer-rail-button-primary[disabled],
.email-designer-rail-button-primary[disabled]:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.06);
  color: #888888;
}

.email-designer-rail-button-return {
  border-color: rgba(255, 255, 255, 0.12);
}

.email-designer-rail-button vaadin-icon,
.email-designer-rail-button vaadin-icon svg {
  width: 18px;
  height: 18px;
}

.email-designer-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  flex: 0 0 auto;
}

.email-designer-status-bar .email-designer-workspace-title {
  font-size: 1rem;
  font-weight: 700;
  color: #e1e2e4;
}

.email-designer-status-bar .email-designer-workspace-meta {
  font-size: 0.78rem;
  color: var(--app-muted);
}

.email-designer-studio {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, #1e1f22 0%, #191a1d 100%);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  transition: width 160ms ease, min-width 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.email-designer-studio {
  display: flex;
  flex-direction: column;
}

.email-designer-workspace-title {
  color: #e1e2e4;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.2;
}

.email-designer-workspace-meta {
  color: #a7a7a7;
  font-size: 0.84rem;
  line-height: 1.45;
}

.email-designer-pane-tabs::part(tabs) {
  gap: 4px;
  padding: 0;
  margin: 0;
  box-shadow: none;
  border-bottom: 0;
}

.email-designer-pane-tabs {
  box-shadow: none;
}

.email-designer-pane-tabs::before,
.email-designer-pane-tabs::after {
  display: none;
  background: transparent;
}

vaadin-tab.email-designer-pane-tab::part(content) {
  padding: 0;
  width: 100%;
}

vaadin-tab.email-designer-pane-tab::before,
vaadin-tab.email-designer-pane-tab::after {
  display: none;
}

.email-designer-workspace-content {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 14px;
}

.email-designer-workspace-content > * {
  min-width: 0;
  min-height: 0;
}

.email-designer-tab-view {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-height: 0;
}

.email-designer-tab-view-setup,
.email-designer-tab-view-recipients {
  overflow: auto;
}

.email-designer-tab-view-recipients {
  padding: 0 18px 22px;
  box-sizing: border-box;
}

.email-designer-tab-view-setup .email-designer-meta-form {
  margin: 0 18px 22px;
  padding: 20px 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.email-designer-meta-form {
  row-gap: 20px;
  column-gap: 14px;
}

.email-designer-tab-view-email .email-designer-surface {
  width: auto !important;
  max-width: none;
  margin: 0 18px 22px;
}

.email-designer-tab-view-recipients .email-designer-recipients-layout {
  margin: 0;
}

.email-designer-recipients-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.email-designer-recipients-layout > * {
  min-width: 0;
  min-height: 0;
}

.email-designer-recipients-panel {
  gap: 16px;
}

.email-designer-recipients-header {
  align-items: center;
}

.email-designer-recipients-list {
  gap: 12px;
}

.email-designer-recipients-overview {
  min-height: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.email-designer-recipients-overview-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 4px 4px 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.email-designer-recipients-overview-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 4px 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.email-designer-recipients-overview-search {
  flex: 1 1 220px;
  min-width: 180px;
}

.email-designer-recipients-overview-filter {
  flex: 1 1 150px;
  min-width: 140px;
  max-width: 180px;
}

.email-designer-recipients-overview-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 440px;
  border-radius: 22px;
  overflow: hidden;
  box-sizing: border-box;
}

.email-designer-recipients-grid {
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.email-designer-recipients-grid::part(header-cell) {
  min-height: 48px;
  overflow: hidden;
}

.email-designer-recipients-grid::part(body-cell) {
  min-height: 68px;
  overflow: hidden;
}

.email-designer-recipients-grid .mailing-grid-contact,
.email-designer-recipients-grid .mailing-grid-status-group,
.email-designer-recipients-grid-action-shell {
  min-width: 0;
}

.email-designer-recipients-grid .mailing-grid-contact-title,
.email-designer-recipients-grid .mailing-grid-contact-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-designer-recipients-grid-action-shell {
  display: flex;
  justify-content: flex-end;
}

.email-designer-recipients-grid-action {
  min-height: 34px;
  padding-inline: 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.email-designer-recipients-overview-meta {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-designer-recipients-overview-empty {
  width: min(280px, 100%);
  margin: auto;
  text-align: center;
}

.email-designer-recipients-audience-chip-included {
  border-color: rgba(255, 224, 177, 0.22);
  background: rgba(255, 224, 177, 0.1);
  color: #ffe4b6;
}

.email-designer-recipients-audience-chip-available {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #bcbcbc;
}

.email-designer-send-planner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
  padding: 16px 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  box-sizing: border-box;
}

.email-designer-send-planner.scheduled {
  border-color: rgba(255, 224, 177, 0.18);
  background: linear-gradient(180deg, rgba(255, 224, 177, 0.08), rgba(255, 255, 255, 0.03));
}

.email-designer-send-planner.past {
  border-color: rgba(255, 120, 120, 0.24);
}

.email-designer-send-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.email-designer-send-label {
  color: #e0e0e2;
  font-size: 0.86rem;
  font-weight: 700;
}

.email-designer-send-summary {
  color: #c9cacc;
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: right;
}

.email-designer-send-planner.scheduled .email-designer-send-summary {
  color: #fff2d3;
}

.email-designer-send-planner.past .email-designer-send-summary {
  color: #ffb6b6;
}

.email-designer-send-presets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.email-designer-send-preset-group {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.email-designer-send-preset-label {
  color: #bdbdbd;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.email-designer-send-preset-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.email-designer-send-preset-button {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding-inline: 12px;
  border-radius: var(--app-radius-control-md);
  color: #d2d4d6;
  font-size: 0.84rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.email-designer-send-preset-button::part(label) {
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-designer-send-preset-button:hover,
.email-designer-send-preset-button.active {
  background: rgba(255, 224, 177, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 177, 0.22);
  color: #fff2d3;
}

.email-designer-send-custom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.email-designer-send-custom-picker::part(input-field) {
  min-height: 40px;
  border-radius: 8px;
  background: rgba(20, 21, 24, 0.38);
}

.email-designer-send-clear {
  align-self: flex-end;
  min-height: 40px;
  border-radius: 8px;
  color: #c9cacc;
}

.email-designer-surface {
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  overflow: hidden;
  justify-content: center;
}

.email-designer-surface > * {
  min-width: 0;
}

.email-designer-pane {
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.email-designer-pane-preview {
  flex: 1 1 50%;
  min-height: 640px;
}

.email-designer-pane-code {
  flex: 1 1 50%;
  min-width: 0;
  max-width: none;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  transition: flex 180ms ease, min-width 180ms ease, max-width 180ms ease, width 180ms ease;
}

.email-designer-pane-code.collapsed {
  flex: 0 0 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  width: 56px !important;
}

.email-designer-pane-code.collapsed .email-designer-pane-header-copy,
.email-designer-pane-code.collapsed .email-designer-pane-tabs,
.email-designer-pane-code.collapsed .email-designer-pane-content {
  display: none;
}

.email-designer-pane-code.collapsed .email-designer-pane-header {
  padding: 12px 8px;
  justify-content: center;
  border-bottom: 0;
}

.email-designer-pane-header-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.email-designer-pane-collapse {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border-radius: 8px;
  color: #c9cacc;
  background: rgba(255, 255, 255, 0.03);
}

.email-designer-pane-collapse:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e8e9eb;
}

.email-designer-pane-tabs {
  display: flex;
  width: fit-content;
  margin: 8px 18px 0;
  padding: 0;
  border: 0;
  background: transparent;
}

vaadin-tab.email-designer-pane-tab {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  color: #a8a8a8;
  font-size: 0.8rem;
  font-weight: 700;
}

vaadin-tab.email-designer-pane-tab[selected] {
  background: rgba(122, 176, 226, 0.12);
  box-shadow: inset 0 0 0 1px rgba(122, 176, 226, 0.18);
  color: #e0e0e2;
}

.email-designer-pane-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 0 18px 18px;
  box-sizing: border-box;
  overflow: hidden;
}

.email-designer-pane-content > * {
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.email-designer-pane-view {
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.email-designer-pane-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 18px 10px;
  border-bottom: 0;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.email-designer-pane-header-copy {
  overflow-wrap: anywhere;
}

.email-designer-pane-title,
.email-designer-pane-meta {
  overflow-wrap: anywhere;
}

.email-designer-pane-code .email-designer-pane-header {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.email-designer-pane-title {
  color: #e0e0e2;
  font-size: 0.95rem;
  font-weight: 700;
}

.email-designer-pane-meta {
  color: #a8a8a8;
  font-size: 0.82rem;
  line-height: 1.5;
}

.email-designer-pane-view-html {
  padding-top: 14px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.email-designer-html-editor {
  min-height: 320px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.email-designer-pane-view-ai {
  padding: 0 0 18px;
  box-sizing: border-box;
}

.email-designer-ai-chat-scroller {
  min-height: 0;
}

.email-designer-ai-chat-scroller::part(content) {
  display: flex;
  min-height: 100%;
}

.email-designer-ai-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0 8px;
  box-sizing: border-box;
}

.email-designer-ai-chat-empty {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.02);
  color: #1e1f22;
  line-height: 1.55;
}

.email-designer-ai-chat-empty > span:first-child {
  color: #e0e0e2;
  font-weight: 700;
}

.email-designer-ai-chat-bubble {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: fit-content;
  max-width: min(100%, 520px);
  min-width: 0;
  padding: 14px 16px;
  border-radius: 20px;
  box-sizing: border-box;
}

.email-designer-ai-chat-bubble.assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.email-designer-ai-chat-bubble.user {
  align-self: flex-end;
  background: rgba(255, 224, 177, 0.11);
  border: 1px solid rgba(255, 224, 177, 0.14);
}

.email-designer-ai-chat-bubble.loading {
  color: #c9cacc;
}

.email-designer-ai-chat-bubble.html-applied {
  box-shadow: inset 0 0 0 1px rgba(255, 224, 177, 0.08);
}

.email-designer-ai-chat-role {
  color: #9e9e9e;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.email-designer-ai-chat-content {
  color: #dfe0e2;
  font-size: 0.9rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.email-designer-ai-chat-html-details {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.email-designer-ai-chat-html-details::part(summary) {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #cfd0d2;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.email-designer-ai-chat-html-details::part(content) {
  padding-top: 10px;
}

.email-designer-ai-chat-html-code {
  margin: 0;
  padding: 12px 14px;
  max-height: 240px;
  overflow: auto;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: #dcdddf;
  font-family: "SFMono-Regular", "Cascadia Code", "IBM Plex Mono", Consolas, monospace;
  font-size: 0.77rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.email-designer-ai-chat-apply-note {
  color: #fff0ce;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
}

.email-designer-ai-chat-composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}

.email-designer-ai-chat-input-row {
  gap: 10px;
  align-items: center;
}

.email-designer-ai-chat-attach {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 8px;
}

.email-designer-ai-chat-input {
  flex: 1 1 auto;
  min-width: 0;
}

.email-designer-ai-chat-input::part(input-field) {
  min-height: 52px;
  padding-inline: 16px;
  border-radius: 18px;
  background: rgba(20, 21, 24, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.email-designer-ai-chat-input::part(value) {
  font-size: 0.95rem;
}

.email-designer-ai-chat-send {
  flex: 0 0 auto;
  min-height: 40px;
  border-radius: 999px;
  white-space: nowrap;
}

.email-designer-ai-chat-send.generating {
  border-color: rgba(255, 255, 255, 0.14);
}

.email-designer-ai-chat-attachment-tray:empty {
  display: none;
}

.email-designer-ai-chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.agent-page {
  background: var(--app-bg);
  color: var(--app-text);
}

.agent-page-workspace {
  gap: 18px;
  min-width: 0;
  min-height: 0;
  padding: 14px 18px 18px;
  box-sizing: border-box;
}

.agent-conversation-rail {
  flex: 0 0 clamp(272px, 24vw, 320px);
  width: auto;
  min-width: 272px;
  max-width: 320px;
  gap: 14px;
  min-height: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 28px;
  background:
      radial-gradient(circle at top right, rgba(122, 176, 226, 0.08) 0%, rgba(122, 176, 226, 0) 40%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.015) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}

.agent-conversation-rail-heading {
  gap: 8px;
}

.agent-conversation-rail-title {
  color: #f4f7fb;
  font-size: 1.05rem;
  font-weight: 700;
}

.agent-conversation-rail-subtitle {
  color: var(--app-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.agent-conversation-new {
  align-self: stretch;
  margin-top: 4px;
}

.agent-conversation-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}

.agent-conversation-item {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: none;
  text-align: left;
  overflow: hidden;
}

/* The clickable region — title + preview + meta. Carries the row padding and
   the select-on-click behaviour. Sits next to the action cluster so tapping an
   action never also selects the row. */
.agent-conversation-clickable {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 16px;
  cursor: pointer;
}

/* Rename / delete cluster — hidden until the row is hovered or focused. */
.agent-conversation-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 6px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.agent-conversation-item:hover .agent-conversation-actions,
.agent-conversation-item:focus-within .agent-conversation-actions {
  opacity: 1;
}

.agent-conversation-action {
  min-width: 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 9px;
  color: rgba(244, 247, 251, 0.6);
}

.agent-conversation-action:hover {
  color: #f4f7fb;
  background: rgba(255, 255, 255, 0.08);
}

.agent-conversation-action-danger:hover {
  color: #ff8080;
  background: rgba(255, 90, 90, 0.14);
}

/* Recency group header (Today / Yesterday / …). */
.agent-conversation-group-header {
  padding: 8px 6px 2px;
  color: var(--app-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agent-conversation-empty {
  padding: 18px 12px;
  color: var(--app-muted);
  font-size: 0.85rem;
  text-align: center;
}

.agent-conversation-search {
  margin-top: 4px;
}

.agent-conversation-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.09);
}

.agent-conversation-item.active {
  background:
      radial-gradient(circle at top right, rgba(122, 176, 226, 0.12) 0%, rgba(122, 176, 226, 0) 44%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.025) 100%);
  border-color: rgba(122, 176, 226, 0.18);
  box-shadow: inset 0 0 0 1px rgba(122, 176, 226, 0.08);
}

.agent-conversation-text {
  gap: 6px;
  min-width: 0;
  align-items: flex-start;
}

.agent-conversation-title {
  color: #f4f7fb;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.agent-conversation-preview {
  color: #d2dae4;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: normal;
}

.agent-conversation-meta {
  color: var(--app-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.agent-panel {
  gap: 14px;
  min-width: 0;
  min-height: 0;
  padding: 0 16px 16px;
  box-sizing: border-box;
}

.agent-page-chat-panel {
  gap: 10px;
  padding: 0 8px 10px;
}

.agent-page-chat-panel .agent-panel-header {
  gap: 8px;
  padding: 0;
}

.agent-page-chat-panel .agent-composer {
  /* Standalone /agent route used to add inner padding here; with
     the composer now absolutely positioned in the workspace, that
     padding pushed the floating block inward off-center. The
     drawer + standalone contexts behave identically now. */
  padding: 0;
}

.agent-page-chat-panel .agent-chat-messages {
  padding: 14px 14px 10px;
}

/* Heading row mirrors the composer footer's pill-bar design — single
   rounded container hosting [Chats] [Chat|Phases] [Codex|Claude]
   as flat sub-controls. The per-control pill styling
   (.agent-conversation-drawer-toggle / .agent-provider-tabs /
   .agent-workspace-tabs) is suppressed below when the controls live
   inside this bar; only the SELECTED state's blue gradient remains as
   the active-tab signal. */
.agent-panel-header {
  gap: 4px;
  padding: 4px 6px;
  margin: 8px 12px 4px;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}

/* When the conversation toggle, workspace tabs, and provider tabs
   sit INSIDE the header bar, drop their individual outer pill
   styling so the bar reads as ONE composite control. Selected
   tabs still get the gradient highlight (rule lower in this file). */
.agent-panel-header .agent-conversation-drawer-toggle {
  background: transparent;
  box-shadow: none;
}

.agent-panel-header .agent-conversation-drawer-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}

.agent-panel-header .agent-provider-tabs {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Right-aligned slot in the heading row. Used for the drawer's collapse
 * chevron (MainLayout) but also extensible to any other top-right
 * affordance the panel needs in the future. */
.agent-panel-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.agent-panel-body {
  display: flex;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Pill-button tab styling — applied to BOTH the provider tabs
   (Codex / Claude, now icon-only in the heading row) AND the
   workspace tabs (Chat / Phases, also in the heading row). Replaces
   Vaadin's default underline-and-text styling with the same rounded-
   capsule look used by primary buttons elsewhere in the app, so the
   agent drawer matches the application's visual language. */
.agent-provider-tabs {
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
}

/* Compact variant — used for the tabs that now live in the heading
   row. Smaller padding, smaller margin, lighter font, icon-only sizing
   for the provider tabs. */
.agent-tabs-compact {
  padding: 3px;
  margin: 0 6px;
}

.agent-tabs-compact vaadin-tab {
  min-height: 26px !important;
  padding: 0 12px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
}

/* Provider tabs are now icon-only — square'ish tab with the icon
   centred. Suppress any text rendering (we never set any, but defend
   against future text additions). Icons are intentionally bigger
   than the workspace tabs' text so the model-switcher reads at a
   glance. */
.agent-provider-tabs.agent-tabs-compact vaadin-tab {
  padding: 0 12px !important;
  min-width: 40px;
  min-height: 32px !important;
}

.agent-provider-tabs.agent-tabs-compact vaadin-tab vaadin-icon,
.agent-provider-tabs.agent-tabs-compact vaadin-tab iron-icon {
  width: 22px;
  height: 22px;
}

/* Disabled provider tab — greyed out + click blocked. Applied when
   the backend (Claude sidecar / OpenAI key) isn't reachable, so the
   user can't switch to an unusable provider. Override Vaadin's
   default disabled selector AND the .provider-tab-disabled class
   set from Java so styling holds regardless of the disable path. */
.agent-provider-tabs.agent-tabs-compact vaadin-tab[disabled],
.agent-provider-tabs.agent-tabs-compact vaadin-tab.provider-tab-disabled {
  opacity: 0.32;
  cursor: not-allowed !important;
  pointer-events: none;
}

.agent-provider-tabs.agent-tabs-compact vaadin-tab[disabled] vaadin-icon,
.agent-provider-tabs.agent-tabs-compact vaadin-tab.provider-tab-disabled vaadin-icon {
  color: rgba(244, 247, 251, 0.4);
}

/* Hide Vaadin's default selection indicator (underline / inset shadow)
   — the pill background carries the "selected" signal instead. */
.agent-provider-tabs::part(tabs) {
  gap: 4px;
}

.agent-provider-tabs vaadin-tab {
  min-height: 32px;
  padding: 0 18px;
  border-radius: 999px;
  color: rgba(244, 247, 251, 0.62);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  transition: background 140ms ease, color 140ms ease;
  /* Kill the default Vaadin selection indicator (rendered as a
     box-shadow inset under the tab text) so the pill bg is the
     only selection signal. */
  box-shadow: none !important;
}

.agent-provider-tabs vaadin-tab::before,
.agent-provider-tabs vaadin-tab::after {
  display: none !important;
}

.agent-provider-tabs vaadin-tab:hover {
  color: rgba(244, 247, 251, 0.92);
  background: rgba(255, 255, 255, 0.04);
}

.agent-provider-tabs vaadin-tab[selected] {
  color: #f4f7fb;
  background: linear-gradient(135deg, rgba(122, 176, 226, 0.92), rgba(120, 158, 255, 0.88));
  box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 2px 10px rgba(122, 176, 226, 0.28) !important;
}

.agent-workspace {
  flex: 1 1 auto;
  gap: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  /* Position context for the absolutely-positioned composer. The
     chat scroller fills the entire workspace; the composer floats
     in front of it at the bottom (Claude.ai / ChatGPT pattern).
     Border / radius / gradient bg / inset shadow removed — chat
     reads as a flat area; only the composer overlay carries
     visual weight at the bottom. */
  position: relative;
}

/* "Chats" button in the heading row — icon + label. Rounded-square
   radius (12px) matches the composer buttons (Add file / cog / ⋮ /
   Send) so the agent panel reads as one consistent button system
   rather than a mix of pills and squares. */
.agent-conversation-drawer-toggle {
  min-height: 32px;
  height: 32px;
  padding: 0 14px;
  border-radius: 12px;
  color: rgba(244, 247, 251, 0.85);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.agent-conversation-drawer-toggle vaadin-icon,
.agent-conversation-drawer-toggle iron-icon {
  width: 14px;
  height: 14px;
}

.agent-conversation-drawer-toggle.open {
  background: linear-gradient(135deg, rgba(122, 176, 226, 0.92), rgba(120, 158, 255, 0.88));
  color: #f4f7fb;
  box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 2px 10px rgba(122, 176, 226, 0.28);
}

.agent-conversation-drawer {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  max-width: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  border-width: 0;
  transition:
      flex-basis 180ms ease,
      width 180ms ease,
      max-width 180ms ease,
      opacity 140ms ease,
      padding 180ms ease,
      border-width 180ms ease;
}

/* When chats are active, the conversation list takes over the FULL
   panel-body width (workspace + phasesView are hidden in tandem via
   the .chats-active rules below). Previous side-drawer width was
   ~42 % of the panel; now it stretches edge-to-edge. */
.agent-conversation-drawer.open {
  flex: 1 1 auto;
  flex-basis: auto;
  width: 100%;
  max-width: 100%;
  padding: 12px;
  opacity: 1;
  pointer-events: auto;
  border-width: 0;
}

/* Hide workspace + phases when the conversation list takes over. */
.agent-panel-body.chats-active .agent-workspace {
  display: none !important;
}

.agent-conversation-drawer .agent-conversation-rail-subtitle {
  font-size: 0.78rem;
}

.agent-conversation-drawer .agent-conversation-item {
  border-radius: 16px;
}

.agent-conversation-drawer .agent-conversation-clickable {
  padding: 12px 13px;
}

.agent-conversation-drawer .agent-conversation-title {
  font-size: 0.86rem;
}

.agent-conversation-drawer .agent-conversation-preview {
  font-size: 0.78rem;
  line-height: 1.4;
}

.agent-conversation-drawer .agent-conversation-meta {
  font-size: 0.7rem;
}

/* ---- Agents drawer (running background agents) ---- */
/* Reuses .agent-conversation-drawer / .agent-conversation-item for the
   expand animation + card skin; these rules add the per-run badge, the
   cancel affordance, and the empty state. */
.agent-agents-item {
  display: flex;
  align-items: center;
}

.agent-agents-kind {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 9px;
  margin-bottom: 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 247, 251, 0.9);
  background: rgba(122, 176, 226, 0.14);
  box-shadow: inset 0 0 0 1px rgba(122, 176, 226, 0.28);
}

/* Family accents — deck / account / image / render read distinctly. */
.agent-agents-kind-deck {
  background: rgba(160, 120, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(160, 120, 255, 0.3);
}

.agent-agents-kind-account_chat,
.agent-agents-kind-account_post_gen {
  background: rgba(120, 220, 170, 0.15);
  box-shadow: inset 0 0 0 1px rgba(120, 220, 170, 0.3);
}

.agent-agents-kind-image_editor,
.agent-agents-kind-image_render {
  background: rgba(255, 190, 110, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 190, 110, 0.3);
}

.agent-agents-cancel {
  flex: 0 0 auto;
  color: rgba(255, 140, 140, 0.95);
}

.agent-agents-cancel vaadin-icon,
.agent-agents-cancel iron-icon {
  width: 13px;
  height: 13px;
}

.agent-agents-empty {
  display: block;
  padding: 24px 12px;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(244, 247, 251, 0.55);
}

.agent-chat-scroller {
  background: transparent;
}

.agent-chat-messages {
  display: flex;
  flex-direction: column;
  /* Tighter vertical rhythm — was 12px; rows now read as a conversation
     log rather than as bubbles stacked with breathing room. */
  gap: 4px;
  padding: 10px 12px 8px;
  box-sizing: border-box;
  /* Fill the scroller so short conversations stay top-anchored. */
  min-height: 100%;
  /* Reserve clearance so the last message scrolls to a stop ABOVE
     the floating composer (composer is absolutely positioned and
     overlays the scroller). This clearance MUST live on the slotted
     content div, not on the scroller's shadow parts — <vaadin-scroller>
     renders only `<slot></slot>` and exposes no `part="content"`, so a
     `::part(content)` rule silently matches nothing.
     --agent-composer-height is set by a ResizeObserver in
     AgentChatPanel.installComposerHeightObserver so the clearance
     tracks the composer's actual rendered height as the textarea
     grows / shrinks. +60 = composer's bottom inset (40 px) + a small
     breathing gap so the last message doesn't kiss the composer edge.
     Fallback covers the moment between attach and the first observer
     tick. */
  padding-bottom: calc(var(--agent-composer-height, 280px) + 60px);
}

.agent-chat-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 620px;
  padding: 14px 16px;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.02);
}

.agent-chat-empty > span:first-child {
  color: #f4f7fb;
  font-size: 0.95rem;
  font-weight: 700;
}

.agent-chat-empty > span:last-child {
  color: var(--app-muted);
  line-height: 1.55;
  font-size: 0.86rem;
}

/* Flat conversation rows — no full-width bubble background, just a
   left accent strip to mark role. Density over decoration; matches
   the streaming-CLI feel the user asked for. */
.agent-chat-bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 6px 10px 6px 12px;
  border-radius: 0;
  border-left: 2px solid transparent;
  background: transparent;
  box-sizing: border-box;
}

.agent-chat-bubble.assistant {
  align-self: stretch;
  border-left-color: rgba(255, 255, 255, 0.18);
}

.agent-chat-bubble.user {
  align-self: stretch;
  border-left-color: rgba(122, 176, 226, 0.62);
  background: rgba(122, 176, 226, 0.04);
}

.agent-chat-bubble.loading {
  color: #d3d7de;
}

.agent-chat-role {
  color: #9aa8ba;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agent-chat-content {
  color: #f4f6f8;
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Live progress trail inside the in-flight assistant bubble.
   Each row is one event from the SSE stream — thinking blocks,
   tool calls, tool results, accumulating text. */
.agent-chat-live-trail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
}

.agent-chat-live-step {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  color: #cdd5df;
  overflow-wrap: anywhere;
}

.agent-chat-live-step-thinking {
  color: #98a3b3;
  font-style: italic;
}

.agent-chat-live-step-tool-name {
  color: #d8e4f5;
  font-weight: 600;
}

.agent-chat-live-step-tool-args {
  color: #8b95a4;
  font-size: 0.78rem;
}

.agent-chat-live-step-result-ok {
  color: #7fb88a;
}

.agent-chat-live-step-result-error {
  color: #e08585;
}

.agent-chat-live-step-text {
  color: #f4f6f8;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
  margin-top: 4px;
}

.agent-message-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
  width: min(360px, 100%);
}

.agent-message-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.agent-image-viewer-trigger {
  cursor: zoom-in;
}

.agent-image-viewer-trigger:focus-visible {
  outline: 2px solid rgba(122, 176, 226, 0.82);
  outline-offset: 2px;
}

.agent-image-viewer-dialog::part(overlay) {
  background: rgba(8, 10, 14, 0.94);
}

.agent-image-viewer-dialog::part(content) {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.agent-image-viewer-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(94vw, 1280px);
  max-height: 92vh;
  padding: 44px 18px 18px;
  box-sizing: border-box;
}

.agent-image-viewer-image {
  max-width: 100%;
  max-height: calc(92vh - 96px);
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 20px 72px rgba(0, 0, 0, 0.32);
}

.agent-image-viewer-caption {
  max-width: 100%;
  overflow: hidden;
  color: #dbe7f4;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-image-viewer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  color: #f4f7fb;
}

.agent-message-footer {
  gap: 10px;
  margin-top: 2px;
  min-width: 0;
  flex-wrap: wrap;
}

.agent-message-undo {
  padding-inline: 0;
  color: #a8c7ff;
}

.agent-message-undo[disabled] {
  color: rgba(168, 199, 255, 0.42);
}

.agent-message-redo {
  padding-inline: 0;
  color: #b8e0af;
}

.agent-message-redo[disabled] {
  color: rgba(184, 224, 175, 0.42);
}

.agent-message-undo-status {
  color: var(--app-muted);
  font-size: 0.78rem;
  line-height: 1.45;
  min-width: 0;
}

/* Composer floats at the bottom of the workspace, OVERLAYING the
   chat scroller (which extends behind it). Modern chat-app pattern
   — last messages scroll into the clearance reserved by the
   scroller's padding-bottom. Width-capped and centred so the
   block doesn't stretch edge-to-edge in a wide drawer. */
.agent-composer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  margin: 0 auto;
  max-width: min(620px, calc(100% - 80px));
  gap: 0;
  padding: 0;
  border-top: 0;
  background: transparent;
  box-sizing: border-box;
  /* Sit above the chat content + Vaadin's Scroller shadow parts. */
  z-index: 3;
  /* Layered drop shadow — a close, tight shadow defines the edge
     and a wider, softer one anchors the composer above the chat
     content (especially when long messages scroll behind it). */
  filter:
      drop-shadow(0 2px 6px rgba(0, 0, 0, 0.34))
      drop-shadow(0 16px 40px rgba(0, 0, 0, 0.41));
}

.agent-composer-input {
  width: 100%;
}

/* The composer's single unified box — the text input, the attachment tray and
   the footer pill bar all live inside this ONE bordered/rounded container. It
   owns the outline, background and corner rounding; the children inside are
   transparent + borderless, so there is exactly one box instead of two halves
   (input drew top+sides, footer drew bottom+sides) faked-fused with a negative
   margin. flex column stacks the children flush with no inter-element gap. */
.agent-composer-box {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  background: #1c1e22;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  overflow: hidden;
}

/* Attachment chips sit between the input and the footer inside the box —
   inset them so they don't butt against the box border when shown. */
.agent-composer-box .agent-attachment-tray {
  padding: 2px 10px 6px;
}

/* Push the input field above the indicator so the overlapping
   region hides the pill's bottom behind the input's top edge. */
.agent-composer-input {
  position: relative;
  z-index: 1;
}

/* The input now lives INSIDE .agent-composer-box, which draws the outline,
   background and rounding for the whole composer. So the field itself is
   transparent, square and borderless — no more half-outline faking. Min-height
   64px keeps the floating composer compact at rest; the user can still
   drag-resize / type multi-line up to the max-height set in Java. */
.agent-composer-input::part(input-field) {
  min-height: 64px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.agent-composer-input::part(value) {
  font-size: 1rem;
  line-height: 1.7;
}

.agent-attachment-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.agent-attachment-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(240px, 100%);
  min-width: 0;
  padding: 6px 8px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  box-sizing: border-box;
}

.agent-attachment-thumb {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.agent-attachment-name {
  min-width: 0;
  overflow: hidden;
  color: #edf3fa;
  font-size: 0.82rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-attachment-remove {
  flex: 0 0 auto;
  color: #9aa8ba;
}

.agent-attachment-chip-document {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.28);
}

.agent-attachment-doc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: #93c5fd;
}

.agent-attachment-doc-type {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(147, 197, 253, 0.18);
  color: #dbeafe;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.agent-attachment-doc-truncated {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(248, 180, 0, 0.18);
  color: #facc15;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.agent-message-doc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.agent-message-doc-list .agent-attachment-chip {
  max-width: 100%;
}

/* Composer footer pill bar — sleek single-line bar fused to the
   bottom of the text input. Top corners are square; only the
   bottom corners round so input + footer read as ONE block.
   Border-top is dropped (input's inset shadow already draws a
   line where they meet, doubling would look like 2 px). Bg matches
   the input's solid colour so the composite reads as one opaque
   block over the chat scrolling behind it. */
/* The footer pill bar sits inside .agent-composer-box, which draws the outline,
   background and bottom rounding. So the footer itself is transparent and
   borderless — no half-border, and no negative-margin glue (the box's flex
   column already stacks it flush against the input above). */
.agent-composer-footer {
  gap: 4px;
  align-items: center;
  padding: 4px 6px 4px 8px;
  background: transparent;
}

.agent-add-file-upload {
  flex: 0 0 auto;
}

.agent-add-file-upload vaadin-upload-file-list {
  display: none;
}

.agent-add-file-button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 12px;
  white-space: nowrap;
  color: rgba(244, 247, 251, 0.85);
  font-size: 0.78rem;
  font-weight: 600;
}

.agent-add-file-button:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Inline "% used" context pill — secondary text, no background,
   colour-shifts to amber/orange as utilisation rises (handled in
   refreshUsageFooter Java side). */
.agent-composer-context-usage {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0 8px;
  white-space: nowrap;
  cursor: help;
}

/* Cog + ellipsis icon-buttons in the pill bar. Compact, ghosted
   until hover. Same rounded-square radius as the rest of the
   buttons in the agent interface. */
.agent-composer-settings-toggle,
.agent-composer-actions-toggle {
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 12px;
  color: rgba(244, 247, 251, 0.65);
  background: transparent;
}

.agent-composer-settings-toggle:hover,
.agent-composer-actions-toggle:hover {
  color: rgba(244, 247, 251, 0.95);
  background: rgba(255, 255, 255, 0.06);
}

/* Popovers anchored to the cog + ⋮ buttons — padded panel with the
   selects / buttons stacked. */
.agent-composer-settings-popover vaadin-popover-overlay::part(overlay),
.agent-composer-actions-popover vaadin-popover-overlay::part(overlay) {
  padding: 12px;
  border-radius: 14px;
  background: rgba(22, 26, 34, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Icon-only send button — rounded square (NOT circular) carrying
   the up-arrow glyph. Slightly larger than the cog/⋮ icon buttons
   so it reads as the primary action. Same border-radius (12px) as
   the rest of the buttons in the agent interface so the visual
   language stays consistent across the panel. */
.agent-send-button {
  min-width: 36px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 12px;
  flex: 0 0 auto;
}

.agent-send-button vaadin-icon,
.agent-send-button iron-icon {
  width: 20px;
  height: 20px;
}

/* Make the arrow glyph visually heavier — Vaadin's ARROW_UP is a
   single-stroke SVG; setting a non-trivial stroke-width on its
   inner shapes thickens every line. The fallback color is currentColor
   so the icon picks up the button's foreground. */
.agent-send-button vaadin-icon svg,
.agent-send-button vaadin-icon svg * {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.agent-send-button.generating {
  border-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 980px) {
  .agent-page-workspace {
    flex-direction: column;
    gap: 14px;
    padding: 12px;
  }

  .agent-conversation-rail {
    flex-basis: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .agent-conversation-list {
    max-height: 240px;
  }
}

@media (max-height: 860px) {
  .agent-page-workspace {
    padding-top: 10px;
    padding-bottom: 12px;
  }

  .agent-conversation-rail {
    padding: 14px;
  }

  .agent-page-chat-panel {
    padding-bottom: 8px;
  }

  .agent-conversation-rail-title {
    font-size: 0.98rem;
  }

  .agent-page-chat-panel .agent-composer-input::part(input-field) {
    min-height: 132px;
  }
}

@media (max-width: 560px) {
  .agent-page-workspace {
    gap: 12px;
    padding: 10px;
  }

  .agent-conversation-rail,
  .agent-page-chat-panel {
    border-radius: 22px;
  }

  .agent-conversation-rail {
    padding: 14px;
  }
}

.email-designer-ai-chat-attachment-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(100%, 260px);
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

.email-designer-ai-chat-attachment-thumb {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
  background: #191a1d;
}

.email-designer-ai-chat-attachment-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.email-designer-ai-chat-attachment-name {
  overflow: hidden;
  color: #dfe0e2;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-designer-ai-chat-attachment-meta {
  color: #a9a9a9;
  font-size: 0.72rem;
  line-height: 1.3;
}

.email-designer-ai-chat-attachment-remove {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border-radius: 8px;
}

vaadin-text-area.email-designer-html-editor::part(input-field) {
  height: 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 12px;
  background: rgba(20, 21, 24, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 !important;
}

.email-designer-html-editor::part(value) {
  font-family: "SFMono-Regular", "Cascadia Code", "IBM Plex Mono", Consolas, monospace;
  font-size: 0.83rem;
  line-height: 1.6;
  color: #dedfe1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.email-designer-preview-mode-button {
  min-height: 28px;
  padding-inline: 12px;
  border-radius: var(--app-radius-control-sm);
  color: #cfcfcf;
}

.email-designer-preview-mode-button.active {
  background: rgba(255, 224, 177, 0.12);
  color: #fff2d3;
}

.email-designer-preview-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  flex: 1 1 auto;
  background: transparent;
  overflow: auto;
}

.email-designer-preview-stage {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 640px;
  min-width: 0;
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
  border: 0;
  border-radius: 16px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.email-designer-preview-stage.mobile {
  width: min(100%, 430px);
}

.email-designer-preview-viewport {
  width: 100%;
  height: auto;
  min-height: 100%;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 12px;
  overflow: visible;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.email-designer-preview-viewport iframe {
  display: block;
  width: 100%;
  min-height: 100%;
  border: 0;
}

@media (max-width: 1180px) {

  .settings-api-domain-selector-grid,
  .settings-api-workspace-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-api-workspace-rail {
    position: static;
  }

  .settings-api-workspace-rail-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .settings-api-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-category-list {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .email-designer-main {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .email-designer-pane-preview {
    min-height: 640px;
  }

  .email-designer-preview-shell {
    padding: 20px;
  }

  .email-designer-preview-stage {
    min-height: 640px;
    padding: 14px;
  }
}

@media (max-width: 1040px) {
  .email-designer-page {
    height: auto !important;
    min-height: 100%;
    overflow: visible;
  }

  .email-designer-main,
  .email-designer-main.collapsed {
    grid-template-columns: minmax(0, 1fr);
    flex: 0 0 auto;
    overflow: visible;
  }

  .email-designer-studio,
  .email-designer-workspace-content,
  .email-designer-tab-view,
  .email-designer-tab-view-email {
    height: auto !important;
    overflow: visible;
  }

  .email-designer-surface {
    height: auto !important;
    overflow: visible;
  }
}

@media (max-width: 1180px) {
  .email-designer-recipients-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-designer-recipients-overview-filters {
    padding-bottom: 10px;
  }

  .email-designer-recipients-overview-shell {
    min-height: 360px;
  }

  .email-designer-main {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .email-designer-rail {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    height: auto;
    padding: 8px 12px;
    border-radius: 16px;
  }

  .email-designer-rail-group {
    flex-direction: row;
    gap: 6px;
    padding-top: 0;
    padding-left: 12px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  .email-designer-rail > .email-designer-rail-group:first-of-type {
    padding-left: 0;
    border-left: 0;
  }

  .email-designer-rail-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin: 0;
  }

  .email-designer-surface {
    flex-direction: column;
  }

  .email-designer-pane-code,
  .email-designer-pane-preview {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto;
  }

  .email-designer-pane-code {
    order: 2;
    min-height: 460px;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    transition: min-height 180ms ease;
  }

  /* Vertical collapse for the code pane at medium widths */
  .email-designer-pane-code.collapsed {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .email-designer-pane-code.collapsed .email-designer-pane-header {
    border-bottom: 0;
    padding: 12px 18px;
  }

  .email-designer-pane-code.collapsed .email-designer-pane-header-copy {
    display: flex;
  }

  /* Full-width collapse bar at the top of the code pane.
     Click anywhere on the bar to toggle. */
  .email-designer-pane-code .email-designer-pane-header {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }

  .email-designer-pane-collapse {
    width: 100%;
    min-width: 0;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
  }

  /* Rotate just the chevron inside the bar so the icon points up/down
     instead of left/right. */
  .email-designer-pane-collapse vaadin-icon,
  .email-designer-pane-collapse vaadin-icon svg {
    transform: rotate(90deg);
  }

  .email-designer-pane-preview {
    order: 1;
    min-height: 0 !important;
    height: min(72vh, 760px) !important;
    max-height: min(72vh, 760px) !important;
    border-top: none;
    display: flex;
    flex-direction: column;
  }

  .email-designer-pane-preview .email-designer-pane-header {
    flex: 0 0 auto;
  }

  .email-designer-pane-preview .email-designer-preview-shell {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  .email-designer-pane-content,
  .email-designer-pane-view,
  .email-designer-pane-view-html {
    height: auto !important;
  }

  .email-designer-pane-view-ai {
    height: min(680px, 72vh) !important;
    min-height: 460px;
  }

  .email-designer-html-editor {
    min-height: 380px;
  }

  .email-designer-preview-stage {
    min-height: 0;
  }
}

@media (max-width: 680px) {
  .email-designer-rail {
    padding: 8px 10px;
    gap: 6px;
  }

  .email-designer-rail-group {
    gap: 4px;
    padding-left: 8px;
  }

  .email-designer-rail-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .email-designer-status-bar {
    padding: 8px 14px;
    gap: 8px;
  }

  .email-designer-status-bar .email-designer-workspace-title {
    font-size: 0.94rem;
  }

  .email-designer-status-bar .email-designer-workspace-meta {
    font-size: 0.72rem;
  }
}

@media (max-width: 780px) {

  .settings-api-title-row {
    align-items: flex-start;
  }

  .settings-api-overview-stat {
    white-space: normal;
  }

  .settings-api-domain-selector-grid,
  .settings-api-workspace-rail-list,
  .settings-api-insight-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-api-domain-selector,
  .settings-api-workspace-selector,
  .settings-api-workspace-rail {
    padding: 16px;
    border-radius: 22px;
  }

  .settings-api-panel,
  .settings-api-domain-panel-mailing {
    padding: 16px;
    border-radius: 22px;
  }

  .settings-api-workspace-title-row {
    align-items: flex-start;
  }

  .settings-api-workspace-stats {
    justify-content: flex-start;
  }

  .settings-api-accounts-shell {
    padding-top: 16px;
  }

  .settings-api-workspace-title {
    font-size: 1.2rem;
  }

  .settings-api-account-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-account-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-account-row-actions {
    justify-content: space-between;
    align-self: stretch;
  }

  .mailing-list-grid-shell {
    padding: 6px;
    border-radius: 20px;
  }

  .email-designer-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-designer-main.collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-designer-page .media-heading-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .email-designer-pane-tabs {
    padding-inline: 18px;
  }

  .email-designer-pane-preview {
    min-height: 0;
  }

  .email-designer-surface {
    flex-direction: column;
  }

  .email-designer-pane-code {
    min-width: 0;
    border-left: none;
    border-top: none;
  }

  .email-designer-preview-shell {
    padding: 18px 18px 22px;
  }

  .email-designer-preview-stage {
    width: 100%;
    max-width: 100%;
    min-height: 500px;
    padding: 14px;
  }

  .email-designer-preview-viewport {
    padding: 12px;
  }

  .email-designer-tab-view-setup .email-designer-meta-form,
  .email-designer-tab-view-email .email-designer-surface {
    margin-inline: 18px;
  }

  .email-designer-tab-view-recipients {
    padding-inline: 18px;
  }

  .email-designer-ai-chat-composer {
    padding-inline: 18px;
  }

  .email-designer-ai-chat-messages {
    padding-inline: 18px;
  }

  .scheduled-mails-filter {
    min-width: 180px;
  }

  .mailing-grid-contact-title,
  .mailing-grid-updated-primary {
    font-size: 0.9rem;
  }

  .posts-heading-toggle {
    width: auto;
  }
}

@media (max-width: 860px) {
  .scheduled-mail-card .post-card-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .scheduled-mail-card-header {
    gap: 12px;
  }

  .scheduled-mail-recipient-row {
    flex-direction: column;
    align-items: stretch;
  }

  .scheduled-mail-recipient-actions {
    justify-content: space-between;
  }

  .email-designer-page {
    gap: 14px;
    padding: 12px;
  }

  .email-designer-page .media-heading-row {
    gap: 12px;
  }

  .email-designer-page .media-heading {
    width: 100%;
  }

  .email-designer-pane-tabs {
    padding-inline: 14px;
  }

  .email-designer-recipients-overview-search,
  .email-designer-recipients-overview-filter {
    flex: 1 1 100%;
    min-width: 0;
  }

  .email-designer-tab-view-setup .email-designer-meta-form,
  .email-designer-tab-view-email .email-designer-surface {
    margin-inline: 14px;
  }

  .email-designer-tab-view-recipients {
    padding-inline: 14px;
  }

  .email-designer-preview-shell {
    padding: 12px;
  }

  .email-designer-preview-stage {
    min-height: 460px;
    border-radius: 22px;
  }

  .email-designer-ai-chat-composer {
    align-items: stretch;
    padding-inline: 14px;
  }

  .email-designer-ai-chat-input-row {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .email-designer-ai-chat-send {
    flex: 0 0 auto;
  }

  .email-designer-ai-chat-messages {
    padding-inline: 14px;
  }
}

@media (max-width: 620px) {
  .email-designer-page {
    padding: 10px;
  }

  .email-designer-studio {
    border-radius: 18px;
  }

  .email-designer-meta-form,
.email-designer-pane-header {
    padding-inline: 14px;
  }

  .email-designer-workspace-title {
    font-size: 1.08rem;
  }

  .email-designer-send-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .email-designer-send-summary {
    text-align: left;
  }

  .email-designer-send-custom-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-designer-send-preset-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .email-designer-send-preset-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .email-designer-send-clear {
    width: 100%;
    justify-content: center;
  }

  .email-designer-pane-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .email-designer-pane-tabs::-webkit-scrollbar {
    display: none;
  }

  vaadin-tab.email-designer-pane-tab {
    flex: 1 0 auto;
    justify-content: center;
  }

  .email-designer-pane-code {
    min-height: 500px;
  }

  .email-designer-pane-view-ai {
    height: 620px !important;
    min-height: 0;
  }

  .email-designer-html-editor {
    margin: 14px;
    min-height: 400px;
  }

  .email-designer-ai-chat-bubble {
    max-width: 100%;
    border-radius: 12px;
  }

  .email-designer-ai-chat-input-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }

  .email-designer-ai-chat-attach {
    width: 42px;
    min-width: 42px;
    height: 42px;
  }

  .email-designer-ai-chat-send {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }

  .email-designer-ai-chat-attachment-chip {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .email-designer-preview-shell {
    padding: 10px;
  }

  .email-designer-preview-stage {
    min-height: 420px;
    padding: 8px;
    border-radius: 14px;
  }

  .email-designer-preview-viewport {
    padding: 8px;
    border-radius: 12px;
  }
}

@media (max-width: 420px) {
  .email-designer-page {
    padding: 8px;
  }

  .email-designer-meta-form {
    padding: 12px;
  }

  .email-designer-send-preset-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .email-designer-pane-header {
    padding: 14px 12px 12px;
  }

  .email-designer-pane-code {
    min-height: 460px;
  }

  .email-designer-html-editor {
    margin: 12px;
    min-height: 360px;
  }

  .email-designer-pane-view-ai {
    height: 580px !important;
  }

  .email-designer-ai-chat-messages {
    padding: 14px 12px 8px;
  }

  .email-designer-ai-chat-composer {
    padding: 12px 12px 0;
  }

  .email-designer-preview-stage {
    min-height: 360px;
  }
}

.admin-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.admin-preview-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0 28px;
}

.admin-preview-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--app-border);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--app-surface-1) 0%, #131313 100%);
}

.admin-preview-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.admin-preview-platform {
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-preview-status-ready,
.admin-preview-status-blocked {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--lumo-font-size-s);
}

.admin-preview-status-ready {
  background: rgba(88, 196, 130, 0.18);
  color: #9be6b6;
}

.admin-preview-status-blocked {
  background: rgba(255, 99, 99, 0.16);
  color: #ffb0b0;
}

.admin-preview-title {
  margin: 0;
  font-size: 1.2rem;
}

.admin-preview-summary {
  color: var(--app-muted);
}

.admin-request-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-request-label {
  font-weight: 600;
}

.admin-request-endpoint {
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
  word-break: break-all;
}

.calendar-page {
  min-width: 0;
}

.calendar-toolbar {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 20px;
  background: linear-gradient(180deg, #1e1e22 0%, #191a1d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.calendar-main-layout {
  min-width: 0;
  gap: 14px;
}

.calendar-sidebar {
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: 24px;
  background: linear-gradient(180deg, #1e1e22 0%, #191a1d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.calendar-sidebar-header {
  gap: 10px;
  padding-bottom: 12px;
}

.calendar-sidebar-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
}

.calendar-sidebar-meta {
  color: var(--app-muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.calendar-sidebar-filters {
  gap: 8px;
}

.calendar-sidebar-filter-button {
  min-height: 34px;
  padding-inline: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--app-radius-pill);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(232, 233, 236, 0.72);
  font-size: 0.76rem;
  font-weight: 700;
}

.calendar-sidebar-filter-button:hover {
  background: rgba(255, 255, 255, 0.06);
}

.calendar-sidebar-filter-button.active {
  border-color: var(--app-button-primary-border);
  background: var(--app-button-primary-surface);
  color: var(--app-button-primary-text);
}

.calendar-sidebar-scroller {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.calendar-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 2px;
}

.calendar-sidebar-post {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--calendar-post-outline-color, rgba(255, 255, 255, 0.06));
  border-radius: 16px;
  background: linear-gradient(180deg, #202124 0%, #1b1c1f 100%);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.calendar-sidebar-post.draggable {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.calendar-sidebar-post.dragging {
  opacity: 0.28;
}

.calendar-sidebar-post.drag-ghost {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  right: auto;
  pointer-events: none;
  opacity: 0.96;
  transform: rotate(-1deg);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.29);
}

.calendar-sidebar-post.scheduled.clickable {
  cursor: pointer;
}

.calendar-sidebar-post.draggable.clickable {
  cursor: grab;
}

.calendar-sidebar-post.scheduled.clickable:hover {
  background: linear-gradient(180deg, #242528 0%, #1e1e22 100%);
}

.calendar-sidebar-post.draggable:active {
  cursor: grabbing;
}

.calendar-sidebar-post.scheduled.clickable:active {
  transform: translateY(1px);
}

.calendar-sidebar-post.selected {
  box-shadow: inset 0 0 0 1px rgba(225, 226, 228, 0.16);
}

.calendar-sidebar-post.archived {
  opacity: 0.7;
}

.calendar-sidebar-post-id {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(232, 233, 236, 0.66);
}

.calendar-sidebar-post-date {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.25;
}

.calendar-sidebar-post-platforms {
  color: var(--app-muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.calendar-sidebar-post-description {
  color: #e1e2e4;
  font-size: 0.82rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.calendar-sidebar-post-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 22px;
}

.calendar-sidebar-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.calendar-sidebar-badge-without-date {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(232, 233, 236, 0.82);
}

.calendar-sidebar-badge-archived {
  background: rgba(255, 99, 99, 0.14);
  color: #ffb5b5;
}

.calendar-sidebar-badge-post {
  background: rgba(53, 132, 207, 0.22);
  color: #dcecff;
}

.calendar-sidebar-badge-story {
  background: rgba(126, 50, 148, 0.28);
  color: #f6dcff;
}

.calendar-sidebar-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: var(--app-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.calendar-navigation-group {
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-navigation-group vaadin-button {
  min-height: 40px;
}

.calendar-range-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.calendar-range-label {
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.calendar-range-meta {
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
  line-height: 1.35;
}

.calendar-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--app-border);
  background: #1a1b1e;
}

.calendar-mode-button {
  min-height: 38px;
  padding-inline: 14px;
  border-radius: var(--app-radius-control-lg);
  color: rgba(232, 233, 236, 0.72);
}

.calendar-mode-button:hover {
  background: rgba(255, 255, 255, 0.05);
}

.calendar-mode-button.active {
  border: 1px solid var(--app-button-primary-border);
  background: var(--app-button-primary-surface);
  color: var(--app-button-primary-text);
}

.calendar-surface {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: auto;
}

.calendar-surface > * {
  width: 100%;
  min-height: 0;
}

.calendar-month-shell,
.calendar-week-shell,
.calendar-year-shell {
  width: 100%;
  min-height: 0;
}

.calendar-month-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendar-month-weekday-row,
.calendar-month-grid {
  min-width: 980px;
}

.calendar-month-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.calendar-month-weekday {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--app-muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--app-border);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.calendar-month-day {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 168px;
  padding: 12px;
  background: linear-gradient(180deg, #1e1e22 0%, #191a1d 100%);
}

.calendar-month-day.outside-month {
  background: #1a1b1e;
  color: rgba(232, 233, 236, 0.44);
}

.calendar-month-day.today {
  box-shadow: inset 0 0 0 1px rgba(225, 226, 228, 0.22);
}

.calendar-month-day.selected {
  background: linear-gradient(180deg, #232427 0%, #1c1d20 100%);
}

.calendar-month-day.calendar-drop-target-active {
  background: linear-gradient(180deg, #27282b 0%, #1e1f22 100%);
  box-shadow: inset 0 0 0 1px rgba(225, 226, 228, 0.16);
}

.calendar-month-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calendar-day-number {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.calendar-day-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(232, 233, 236, 0.8);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
}

.calendar-month-post-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.calendar-month-post,
.calendar-week-post {
  border: 1px solid var(--calendar-post-outline-color, rgba(255, 255, 255, 0.08));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.calendar-month-post {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 12px;
}

.calendar-month-post.draggable,
.calendar-week-post.draggable {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.calendar-month-post.dragging,
.calendar-week-post.dragging {
  opacity: 0.28;
}

.calendar-month-post:active,
.calendar-week-post:active {
  cursor: grabbing;
}

.calendar-month-post.drag-ghost,
.calendar-week-post.drag-ghost {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  right: auto;
  pointer-events: none;
  opacity: 0.96;
  transform: translateY(-1px);
  border-color: var(--calendar-post-outline-color, #8a8a8a);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.29);
}

.calendar-post-time {
  color: rgba(232, 233, 236, 0.62);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.calendar-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calendar-post-type-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.calendar-post-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.calendar-post-type-post {
  border: 1px solid rgba(91, 184, 255, 0.24);
  background: rgba(32, 91, 148, 0.34);
  color: #dcecff;
}

.calendar-post-type-story {
  border: 1px solid rgba(221, 128, 255, 0.24);
  background: rgba(89, 32, 111, 0.46);
  color: #f6dcff;
}

.calendar-post-platform-icons {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  flex: 0 0 auto;
}

.calendar-post-platform-icon {
  width: 12px;
  height: 12px;
  background: var(--app-accent);
  opacity: 0.92;
  -webkit-mask-image: var(--calendar-post-platform-icon);
  mask-image: var(--calendar-post-platform-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.calendar-post-label {
  font-size: 0.82rem;
  line-height: 1.35;
  color: #e1e2e4;
  overflow-wrap: anywhere;
}

.calendar-month-more {
  color: var(--app-muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
}

.calendar-week-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calendar-week-header,
.calendar-week-grid {
  min-width: 1120px;
}

.calendar-week-header {
  display: grid;
  grid-template-columns: 84px repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.calendar-week-header > div:first-child {
  min-height: 74px;
}

.calendar-week-day-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 74px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #1e1e22 0%, #191a1d 100%);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.calendar-week-day-header.today {
  box-shadow: inset 0 0 0 1px rgba(225, 226, 228, 0.2);
}

.calendar-week-day-header.selected {
  background: linear-gradient(180deg, #222326 0%, #1b1c1f 100%);
}

.calendar-week-day-name {
  color: var(--app-muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.calendar-week-day-date {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
}

.calendar-week-day-count {
  color: var(--app-muted);
  font-size: 0.75rem;
  line-height: 1.25;
}

.calendar-week-scroller {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--app-border);
  border-radius: 24px;
  background: linear-gradient(180deg, #1c1d20 0%, #191a1d 100%);
}

.calendar-week-grid {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  min-height: 100%;
}

.calendar-week-time-rail {
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #1b1c1f 0%, #18191c 100%);
}

.calendar-week-time-label {
  position: absolute;
  right: 14px;
  transform: translateY(-50%);
  color: rgba(232, 233, 236, 0.52);
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.04em;
}

.calendar-week-columns {
  display: grid;
  grid-template-columns: repeat(var(--calendar-week-day-count), minmax(0, 1fr));
  position: relative;
}

.calendar-week-day-column {
  position: relative;
  min-width: 0;
  background: linear-gradient(180deg, #1d1e21 0%, #191a1d 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.calendar-week-day-column:first-child {
  border-left: none;
}

.calendar-week-day-column.calendar-drop-target-active {
  background: linear-gradient(180deg, #222326 0%, #1c1d20 100%);
  box-shadow: inset 0 0 0 1px rgba(225, 226, 228, 0.12);
}

.calendar-week-grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

.calendar-week-post {
  position: absolute;
  left: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 14px;
  z-index: 1;
}

.calendar-year-shell {
  display: flex;
  flex-direction: column;
}

.calendar-year-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.calendar-year-month {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--app-border);
  background: linear-gradient(180deg, #1e1e22 0%, #191a1d 100%);
}

.calendar-year-month.today {
  box-shadow: inset 0 0 0 1px rgba(225, 226, 228, 0.18);
}

.calendar-year-month.selected {
  background: linear-gradient(180deg, #222326 0%, #1b1c1f 100%);
}

.calendar-year-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calendar-year-month-button {
  padding: 0;
  color: #e1e2e4;
  font-size: 1rem;
  font-weight: 700;
}

.calendar-year-month-button::part(label) {
  line-height: 1.1;
}

.calendar-year-month-summary {
  color: var(--app-muted);
  font-size: 0.76rem;
  line-height: 1.2;
  white-space: nowrap;
}

.calendar-year-weekday-row,
.calendar-year-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.calendar-year-weekday {
  display: inline-flex;
  justify-content: center;
  color: var(--app-muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-year-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(232, 233, 236, 0.86);
  font-size: 0.78rem;
  line-height: 1;
}

.calendar-year-day.outside-month {
  opacity: 0.34;
}

.calendar-year-day.has-posts {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.calendar-year-day.today {
  background: linear-gradient(180deg, #e1e2e4 0%, #cfd0d2 100%);
  color: #18191c;
}

.calendar-year-day.calendar-drop-target-active {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.image-editor-heading-row {
  align-items: stretch;
  flex-wrap: nowrap;
}

.image-editor-heading-copy {
  min-width: 0;
  width: auto;
  flex: 1 1 auto;
}

.image-editor-heading-back-button {
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 0;
  height: auto;
  padding-inline: 14px;
}

.image-editor-heading-back-button vaadin-icon,
.image-editor-heading-back-button::part(prefix) {
  margin: 0;
}

.image-editor-heading-export-button {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
}

.image-editor-workspace {
  /* Default width of the right (text / shape) drawer; overridden live by the
   * left-edge resize drag (clamped in JS). */
  --image-editor-drawer-width: 400px;
  /* Positioning context for the text / shape inspector drawers, which are
   * absolutely-positioned overlays pinned to the right edge (see below) rather
   * than grid columns — so opening one floats OVER the canvas instead of
   * squeezing it. */
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 22px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 12px 0 22px;
  align-items: stretch;
  box-sizing: border-box;
}

/* Suspend width transitions while dragging so the drawer tracks the pointer 1:1. */
.image-editor-workspace.drawer-resizing .image-editor-text-drawer,
.image-editor-workspace.drawer-resizing .image-editor-shape-drawer {
  transition: none;
  user-select: none;
}

/* ---------------------------------------------------------------------------
 * Decks list — row-per-deck layout mirroring the posts list. Replaces the old
 * card grid (image-editor-project-grid) that DeckProjectsView used. Each row
 * is a horizontal flex container: thumbnail / icon on the left, title + meta
 * stacked in the middle, action buttons on the right.
 * ------------------------------------------------------------------------- */
.deck-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  box-sizing: border-box;
  min-height: 100%;
  width: 100%;
}

.deck-list-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  border: 1px dashed var(--app-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  color: var(--lumo-secondary-text-color);
  text-align: center;
}

.deck-list-empty > :first-child {
  font-size: 16px;
  font-weight: 600;
  color: var(--lumo-body-text-color);
}

.deck-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background: linear-gradient(180deg, #1e1f22 0%, #191a1d 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.deck-row:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.26);
}

/* Image/Video editor project selectors add a leading multi-select checkbox column
 * ahead of the shared 3-column deck-row grid. Scoped to those two pages so the
 * deck-craft selector (which reuses .deck-row without a checkbox) is untouched. */
.image-editor-projects-page .deck-row,
.video-editor-projects-page .deck-row {
  grid-template-columns: auto 96px minmax(0, 1fr) auto;
}

.deck-row-select {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
}

.deck-row-selected {
  border-color: var(--lumo-primary-color, #3b82f6);
  box-shadow: 0 0 0 1px var(--lumo-primary-color, #3b82f6);
}

.media-bulk-bar {
  gap: 8px;
  padding: 4px 2px;
}

.media-bulk-count {
  font-weight: 600;
  margin-right: 4px;
}

.media-search-field {
  max-width: 340px;
}

/* ---------------------------------------------------------------------------
 * Deck editor — collapsible left thumbnail rail + right inspector drawer.
 * Both panels collapse via a chevron in their own header strip. The chevron
 * itself stays visible in the collapsed state so the user can expand again.
 * Pure-CSS — the toggle just flips a `.collapsed` class on the panel.
 * ------------------------------------------------------------------------- */

.deck-row-thumb {
  width: 96px;
  height: 54px;          /* 16:9 thumbnail aspect */
  border-radius: 8px;
  background-color: #16171a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lumo-tertiary-text-color);
  flex-shrink: 0;
}

.deck-row-thumb-empty vaadin-icon {
  width: 22px;
  height: 22px;
}

.deck-row-middle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.deck-row-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--lumo-body-text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-row-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.deck-row-meta {
  font-size: 12px;
  color: var(--lumo-secondary-text-color);
}

.deck-row-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid currentColor;
}

.deck-row-status-saved {
  color: rgba(170, 255, 200, 0.85);
}

.deck-row-status-empty {
  color: rgba(255, 200, 130, 0.85);
}

.deck-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.deck-row-open {
  font-size: 13px;
}

@media (max-width: 720px) {
  .deck-row {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    padding: 10px 12px;
  }
  .deck-row-thumb { width: 72px; height: 40px; }
  .deck-row-open { display: none; }   /* row click + delete only on narrow */
}

.image-editor-project-dialog-body {
  min-width: min(420px, calc(100vw - 64px));
  padding-top: 6px;
}

.image-editor-tool-rail {
  display: grid;
  align-content: stretch;
  min-height: 0;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--lumo-contrast-10pct, rgba(255, 255, 255, 0.1));
  border-radius: 26px;
  /* Solid deck-inspector-style fill (was a translucent gradient that read as
   * glassy/see-through). */
  background: var(--lumo-base-color, #191a1d);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  transition: padding 180ms ease;
}

.image-editor-rail-main,
.image-editor-drawer-detail-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
  min-width: 0;
}

/* Rail header: the Tools/Layers/Instructions tab row + the collapse chevron. */
.image-editor-rail-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-editor-rail-header .image-editor-rail-tabs {
  flex: 1 1 auto;
  min-width: 0;
}

.image-editor-rail-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Deck-style collapse chevron for the left rail (mirrors the drawer chevrons). */
.image-editor-rail-collapse {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #f6e7c8;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.image-editor-rail-collapse:hover {
  background: rgba(246, 231, 200, 0.12);
  border-color: rgba(246, 231, 200, 0.28);
}

.image-editor-rail-collapse-icon {
  width: 16px;
  height: 16px;
  transition: transform 180ms ease;
}

/* Collapsed: slim strip — only the chevron remains, rotated to point back out. */
.image-editor-tool-rail.collapsed {
  padding: 18px 6px;
}

.image-editor-tool-rail.collapsed .image-editor-rail-tabs,
.image-editor-tool-rail.collapsed .image-editor-rail-panels {
  display: none;
}

.image-editor-tool-rail.collapsed .image-editor-rail-header {
  justify-content: center;
}

.image-editor-tool-rail.collapsed .image-editor-rail-collapse-icon {
  transform: rotate(180deg);
}

/* Narrow the workspace's first grid column when the rail is collapsed, so the
 * canvas reclaims the freed width. */
.image-editor-workspace:has(.image-editor-tool-rail.collapsed) {
  grid-template-columns: 46px minmax(0, 1fr);
}

.image-editor-rail-tab-button {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--app-radius-control-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.02) 100%);
  color: #f6e7c8;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.image-editor-rail-tab-button:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.image-editor-rail-tab-button.active {
  border-color: rgba(246, 231, 200, 0.28);
  background: linear-gradient(180deg, rgba(246, 231, 200, 0.16) 0%, rgba(246, 231, 200, 0.07) 100%);
  box-shadow: inset 0 0 0 1px rgba(246, 231, 200, 0.14);
}

.image-editor-rail-tab-button::part(label) {
  width: 100%;
  text-align: center;
}

.image-editor-rail-panels,
.image-editor-rail-panel {
  min-height: 0;
  min-width: 0;
}

/* Instructions rail tab — per-page directions for the AI that fills a template page. */
.image-editor-page-instructions-scope {
  display: block;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(246, 231, 200, 0.62);
  padding: 2px 0 8px;
}

.image-editor-instructions-panel .image-editor-page-instructions-field {
  --vaadin-input-field-border-radius: var(--app-radius-control-md);
}

.image-editor-instructions-panel .image-editor-page-instructions-field::part(input-field) {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.image-editor-instructions-panel .image-editor-page-instructions-field textarea {
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Instructions tab, level 1: the template-wide manual, above the per-page block. */
.image-editor-template-manual-section {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(246, 231, 200, 0.12);
}

.image-editor-instructions-panel .image-editor-template-manual-field {
  --vaadin-input-field-border-radius: var(--app-radius-control-md);
}

.image-editor-instructions-panel .image-editor-template-manual-field::part(input-field) {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.image-editor-instructions-panel .image-editor-template-manual-field textarea {
  font-size: 0.82rem;
  line-height: 1.5;
}

.image-editor-instructions-panel .image-editor-template-manual-field::part(label),
.image-editor-instructions-panel .image-editor-template-manual-field::part(helper-text) {
  font-size: 0.72rem;
  color: rgba(246, 231, 200, 0.62);
}

/* Instructions tab, level 2 heading: "This page". */
.image-editor-instructions-section-heading {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(246, 231, 200, 0.5);
  padding-bottom: 4px;
}

/* Per-page usage cap: "how many slides of one post may reuse this layout" + its unlimited toggle. */
.image-editor-page-max-uses-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(246, 231, 200, 0.12);
}

.image-editor-page-max-uses-row .image-editor-page-max-uses-field {
  flex: 1 1 auto;
  min-width: 0;
  --vaadin-input-field-border-radius: var(--app-radius-control-md);
}

.image-editor-page-max-uses-row .image-editor-page-max-uses-field::part(input-field) {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.image-editor-page-max-uses-row .image-editor-page-max-uses-field::part(label),
.image-editor-page-max-uses-row .image-editor-page-max-uses-field::part(helper-text) {
  font-size: 0.72rem;
  color: rgba(246, 231, 200, 0.62);
}

.image-editor-page-max-uses-row .image-editor-page-max-uses-toggle {
  flex: 0 0 auto;
  padding-bottom: 6px;
  font-size: 0.78rem;
}

.image-editor-drawer-detail-header {
  display: flex;
  align-items: center;
  min-height: 36px;
}

.image-editor-drawer-back-button {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: var(--app-radius-control-md);
}

.image-editor-drawer-back-icon {
  width: 16px;
  height: 16px;
}

.image-editor-drawer-detail-panels {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.image-editor-tools-header-divider {
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(246, 231, 200, 0.18) 16%, rgba(246, 231, 200, 0.18) 84%, rgba(255, 255, 255, 0.02) 100%);
}

.image-editor-tools-body {
  display: grid;
  grid-template-columns: 72px 1px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.image-editor-tools-divider {
  align-self: stretch;
  width: 1px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(246, 231, 200, 0.18) 18%, rgba(246, 231, 200, 0.18) 82%, rgba(255, 255, 255, 0.02) 100%);
}

.image-editor-tool-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.image-editor-tools-body .image-editor-tool-tabs {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.image-editor-tool-tab-button {
  min-height: 74px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--app-radius-control-2xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.025) 100%);
  color: #f6e7c8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.image-editor-tool-tab-button:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.image-editor-tool-tab-button.active {
  border-color: rgba(246, 231, 200, 0.28);
  background: linear-gradient(180deg, rgba(246, 231, 200, 0.16) 0%, rgba(246, 231, 200, 0.07) 100%);
  box-shadow: inset 0 0 0 1px rgba(246, 231, 200, 0.14);
}

.image-editor-tools-body .image-editor-tool-tab-button {
  position: relative;
  width: 72px;
  min-height: 72px;
  border-color: transparent;
  border-radius: var(--app-radius-control-xl);
  background: transparent;
  color: rgba(246, 231, 200, 0.52);
  box-shadow: none;
}

.image-editor-tools-body .image-editor-tool-tab-button:hover {
  border-color: transparent;
  background: transparent;
  color: rgba(246, 231, 200, 0.82);
  box-shadow: none;
}

.image-editor-tools-body .image-editor-tool-tab-button.active {
  border-color: transparent;
  background: transparent;
  color: #f6e7c8;
  box-shadow: none;
}

.image-editor-tools-body .image-editor-tool-tab-button.active::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 4px;
  height: 28px;
  border-radius: 999px;
  background: rgba(246, 231, 200, 0.9);
  transform: translateY(-50%);
}

.image-editor-tool-tab-button::part(label) {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.image-editor-tool-tab-icon {
  width: 28px;
  height: 28px;
}

.image-editor-tool-tab-text-icon {
  color: inherit;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}

.image-editor-tool-panels {
  min-height: 0;
  min-width: 0;
}

.image-editor-tools-body .image-editor-tool-panels {
  min-height: 0;
  min-width: 0;
}

.image-editor-tools-body .image-editor-tool-panel-copy,
.image-editor-tools-body .image-editor-tool-copy {
  display: none;
}

.image-editor-tools-body .image-editor-tool-panel {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.image-editor-tools-body .image-editor-tool-body {
  grid-template-columns: auto;
  justify-content: start;
  padding: 18px;
}

.image-editor-tool-panel {
  display: grid;
  gap: 14px;
  min-height: 0;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.025);
  box-sizing: border-box;
}

.image-editor-transform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.image-editor-tool-panel-copy {
  display: grid;
  gap: 4px;
}

.image-editor-tool-panel-title {
  color: #e1e2e4;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.25;
}

.image-editor-tool-panel-hint {
  color: #b0b0b0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.image-editor-tool-button {
  min-height: 82px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--app-radius-control-2xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.025) 100%);
  color: inherit;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.image-editor-tool-button:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.image-editor-tool-button[disabled] {
  opacity: 0.54;
}

.image-editor-tool-button::part(label) {
  width: 100%;
}

.image-editor-tool-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  box-sizing: border-box;
}

.image-editor-tool-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(247, 242, 230, 0.16) 0%, rgba(216, 204, 175, 0.08) 100%);
  color: #f6e7c8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.image-editor-tool-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.image-editor-tool-title {
  color: #e1e2e4;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
}

.image-editor-tool-hint {
  color: #b0b0b0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.image-editor-text-preset-grid {
  display: grid;
  gap: 10px;
}

.image-editor-text-preset-button {
  min-height: 96px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--app-radius-control-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.025) 100%);
  color: inherit;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.image-editor-text-preset-button:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.035) 100%);
}

.image-editor-text-preset-button::part(label) {
  width: 100%;
}

.image-editor-text-preset-body {
  display: grid;
  align-content: center;
  gap: 10px;
  width: 100%;
  min-height: 96px;
  padding: 18px;
  box-sizing: border-box;
}

.image-editor-text-preset-preview {
  color: #f3efe6;
  line-height: 1;
  white-space: nowrap;
}

.image-editor-text-preset-preview-headline {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
  font-weight: 700;
}

.image-editor-text-preset-preview-body {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.image-editor-text-preset-preview-caption {
  color: #d9c7a0;
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.image-editor-text-preset-label {
  color: #b6b6b6;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.image-editor-image-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.image-editor-image-option-button {
  min-height: 110px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.025) 100%);
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.image-editor-image-option-button:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.035) 100%);
}

.image-editor-image-option-button::part(label) {
  width: 100%;
}

.image-editor-image-option-body {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 12px;
  box-sizing: border-box;
}

.image-editor-image-option-preview {
  position: relative;
  width: 62px;
  height: 46px;
}

.image-editor-image-option-preview::before,
.image-editor-image-option-preview::after {
  content: "";
  position: absolute;
  border-radius: 12px;
}

.image-editor-image-option-preview-base::before {
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(242, 242, 238, 1) 100%);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(17, 17, 17, 0.08);
}

.image-editor-image-option-preview-overlay::before {
  left: 8px;
  top: 8px;
  width: 34px;
  height: 26px;
  background: rgba(241, 223, 184, 0.22);
  box-shadow: inset 0 0 0 2px rgba(241, 223, 184, 0.56);
}

.image-editor-image-option-preview-overlay::after {
  right: 4px;
  bottom: 2px;
  width: 38px;
  height: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 244, 240, 1) 100%);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.14),
    inset 0 0 0 1px rgba(17, 17, 17, 0.08);
}

.image-editor-image-option-label {
  color: #e0e1e3;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.image-editor-shape-browser,
.image-editor-shape-browser-view,
.image-editor-shape-section {
  display: grid;
  align-content: start;
  min-height: 0;
  min-width: 0;
}

.image-editor-shape-category-detail {
  grid-template-rows: auto minmax(0, 1fr);
}

.image-editor-shape-browser-view {
  gap: 18px;
}

.image-editor-shape-section {
  gap: 10px;
}

.image-editor-shape-section-title {
  color: #e1e2e4;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
}

.image-editor-shape-recent-grid,
.image-editor-shape-category-grid,
.image-editor-shape-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

.image-editor-emoji-grid {
  align-content: start;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-height: clamp(240px, calc(100vh - 340px), 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-color: rgba(246, 231, 200, 0.28) transparent;
  scrollbar-width: thin;
}

.image-editor-shape-category-header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.image-editor-shape-category-back-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: var(--app-radius-control-md);
  color: #f6e7c8;
}

.image-editor-shape-category-back-button::part(label) {
  display: grid;
  place-items: center;
}

.image-editor-shape-category-back-button vaadin-icon {
  width: 16px;
  height: 16px;
}

.image-editor-shape-category-title {
  min-width: 0;
  color: #e1e2e4;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.2;
}

.image-editor-shape-category-button {
  min-height: 106px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--app-radius-control-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.025) 100%);
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.image-editor-shape-category-button:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.035) 100%);
}

.image-editor-shape-category-button::part(label) {
  width: 100%;
  height: 100%;
}

.image-editor-shape-category-body {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  width: 100%;
  min-height: 106px;
  padding: 12px 6px;
  box-sizing: border-box;
}

.image-editor-shape-category-preview {
  position: relative;
  width: 58px;
  height: 46px;
}

.image-editor-shape-category-preview::before,
.image-editor-shape-category-preview::after {
  content: "";
  position: absolute;
}

.image-editor-shape-category-preview-basic::before {
  left: 4px;
  top: 8px;
  width: 30px;
  height: 24px;
  border-radius: 6px;
  background: rgba(246, 231, 200, 0.18);
  box-shadow: inset 0 0 0 2px rgba(246, 231, 200, 0.72);
}

.image-editor-shape-category-preview-basic::after {
  right: 4px;
  bottom: 5px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(126, 189, 174, 0.2);
  box-shadow: inset 0 0 0 2px rgba(126, 189, 174, 0.78);
}

.image-editor-shape-category-preview-angles::before {
  left: 7px;
  top: 8px;
  width: 30px;
  height: 30px;
  background: rgba(246, 231, 200, 0.72);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.image-editor-shape-category-preview-angles::after {
  right: 4px;
  bottom: 8px;
  width: 30px;
  height: 24px;
  background: rgba(126, 189, 174, 0.2);
  clip-path: polygon(28% 0%, 100% 32%, 72% 100%, 0% 68%);
}

.image-editor-shape-category-preview-polygons::before {
  left: 4px;
  top: 7px;
  width: 31px;
  height: 28px;
  background: rgba(246, 231, 200, 0.72);
  clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}

.image-editor-shape-category-preview-polygons::after {
  right: 4px;
  bottom: 5px;
  width: 29px;
  height: 29px;
  background: rgba(126, 189, 174, 0.2);
  clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 2% 35%, 39% 34%);
}

.image-editor-shape-category-preview-arrows::before {
  left: 2px;
  top: 12px;
  width: 52px;
  height: 22px;
  background: rgba(246, 231, 200, 0.72);
  clip-path: polygon(0% 28%, 60% 28%, 60% 0%, 100% 50%, 60% 100%, 60% 72%, 0% 72%);
}

.image-editor-shape-category-preview-arrows::after {
  left: 8px;
  bottom: 5px;
  width: 38px;
  height: 16px;
  background: rgba(126, 189, 174, 0.2);
  clip-path: polygon(0% 22%, 38% 22%, 100% 50%, 38% 78%, 0% 78%, 44% 50%);
}

.image-editor-shape-category-preview-lines::before {
  left: 4px;
  right: 4px;
  top: 18px;
  height: 0;
  border-top: 4px solid rgba(246, 231, 200, 0.84);
  border-radius: 999px;
  transform: rotate(-14deg);
}

.image-editor-shape-category-preview-lines::after {
  left: 12px;
  right: 12px;
  bottom: 13px;
  height: 0;
  border-top: 3px solid rgba(126, 189, 174, 0.76);
  border-radius: 999px;
  transform: rotate(12deg);
}

.image-editor-shape-category-preview-emojis::before {
  content: "\1F600";
  left: 4px;
  top: 6px;
  color: #f6e7c8;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.55rem;
  line-height: 1;
}

.image-editor-shape-category-preview-emojis::after {
  content: "\2728";
  right: 2px;
  bottom: 4px;
  color: rgba(126, 189, 174, 0.9);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.55rem;
  line-height: 1;
}

.image-editor-shape-category-label {
  width: 100%;
  color: #e0e1e3;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

.image-editor-emoji-option-button {
  aspect-ratio: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--app-radius-control-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.025) 100%);
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.image-editor-emoji-option-button:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.035) 100%);
}

.image-editor-emoji-option-button::part(label) {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-editor-emoji-option-preview {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.34rem;
  line-height: 1;
}

.image-editor-emoji-load-more-button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--app-radius-control-md);
  background: rgba(255, 255, 255, 0.035);
  color: #f6e7c8;
}

.image-editor-emoji-load-more-button:hover {
  border-color: rgba(246, 231, 200, 0.16);
  background: rgba(246, 231, 200, 0.08);
}

.image-editor-emoji-load-more-button::part(label) {
  width: 100%;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.image-editor-shape-option-button {
  min-height: 96px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--app-radius-control-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.025) 100%);
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.image-editor-shape-option-button:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.035) 100%);
}

.image-editor-shape-option-button::part(label) {
  width: 100%;
}

.image-editor-shape-option-body {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
  min-height: 96px;
  padding: 12px 6px;
  box-sizing: border-box;
}

.image-editor-shape-option-preview {
  position: relative;
  width: 56px;
  height: 42px;
  --shape-preview-width: 46px;
  --shape-preview-height: 32px;
  --shape-preview-radius: 10px;
}

.image-editor-shape-option-preview::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--shape-preview-width);
  height: var(--shape-preview-height);
  transform: translate(-50%, -50%);
  background: rgba(246, 231, 200, 0.18);
  box-shadow: inset 0 0 0 2px rgba(246, 231, 200, 0.72);
  border-radius: var(--shape-preview-radius);
}

.image-editor-shape-option-preview-rect::before {
  --shape-preview-radius: 0px;
}

.image-editor-shape-option-preview-rounded::before {
  --shape-preview-width: 50px;
  --shape-preview-height: 36px;
  --shape-preview-radius: 8px;
}

.image-editor-shape-option-preview-circle::before {
  --shape-preview-width: 38px;
  --shape-preview-height: 38px;
  --shape-preview-radius: 999px;
}

.image-editor-shape-option-preview-halfcircle::before {
  --shape-preview-width: 48px;
  --shape-preview-height: 24px;
  background: rgba(246, 231, 200, 0.72);
  box-shadow: none;
  border-radius: 999px 999px 0 0;
}

.image-editor-shape-option-preview-halfcircle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: rgba(246, 231, 200, 0.18);
  border-radius: 999px 999px 0 0;
}

.image-editor-shape-option-preview-pill::before {
  --shape-preview-width: 58px;
  --shape-preview-height: 24px;
  --shape-preview-radius: 999px;
}

.image-editor-shape-option-preview-diamond::before {
  --shape-preview-width: 46px;
  --shape-preview-height: 34px;
  background: rgba(246, 231, 200, 0.72);
  box-shadow: none;
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.image-editor-shape-option-preview-diamond::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 26px;
  transform: translate(-50%, -50%);
  background: rgba(246, 231, 200, 0.18);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.image-editor-shape-option-preview-rhombus::before {
  --shape-preview-width: 48px;
  --shape-preview-height: 34px;
  background: rgba(246, 231, 200, 0.72);
  box-shadow: none;
  border-radius: 0;
  clip-path: polygon(28% 0%, 100% 32%, 72% 100%, 0% 68%);
}

.image-editor-shape-option-preview-rhombus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 26px;
  transform: translate(-50%, -50%);
  background: rgba(246, 231, 200, 0.18);
  clip-path: polygon(28% 0%, 100% 32%, 72% 100%, 0% 68%);
}

.image-editor-shape-option-preview-triangle::before {
  --shape-preview-width: 44px;
  --shape-preview-height: 36px;
  background: rgba(246, 231, 200, 0.72);
  box-shadow: none;
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.image-editor-shape-option-preview-triangle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 28px;
  transform: translate(-50%, -50%);
  background: rgba(246, 231, 200, 0.18);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.image-editor-shape-option-preview-pentagon::before {
  --shape-preview-width: 44px;
  --shape-preview-height: 38px;
  background: rgba(246, 231, 200, 0.72);
  box-shadow: none;
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.image-editor-shape-option-preview-pentagon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 30px;
  transform: translate(-50%, -50%);
  background: rgba(246, 231, 200, 0.18);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.image-editor-shape-option-preview-hexagon::before {
  --shape-preview-width: 50px;
  --shape-preview-height: 34px;
  background: rgba(246, 231, 200, 0.72);
  box-shadow: none;
  border-radius: 0;
  clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}

.image-editor-shape-option-preview-hexagon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 26px;
  transform: translate(-50%, -50%);
  background: rgba(246, 231, 200, 0.18);
  clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}

.image-editor-shape-option-preview-octagon::before {
  --shape-preview-width: 46px;
  --shape-preview-height: 38px;
  background: rgba(246, 231, 200, 0.72);
  box-shadow: none;
  border-radius: 0;
  clip-path: polygon(28% 0%, 72% 0%, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0% 72%, 0% 28%);
}

.image-editor-shape-option-preview-octagon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 30px;
  transform: translate(-50%, -50%);
  background: rgba(246, 231, 200, 0.18);
  clip-path: polygon(28% 0%, 72% 0%, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0% 72%, 0% 28%);
}

.image-editor-shape-option-preview-trapezoid::before {
  --shape-preview-width: 50px;
  --shape-preview-height: 34px;
  background: rgba(246, 231, 200, 0.72);
  box-shadow: none;
  border-radius: 0;
  clip-path: polygon(18% 0%, 82% 0%, 100% 100%, 0% 100%);
}

.image-editor-shape-option-preview-trapezoid::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 26px;
  transform: translate(-50%, -50%);
  background: rgba(246, 231, 200, 0.18);
  clip-path: polygon(18% 0%, 82% 0%, 100% 100%, 0% 100%);
}

.image-editor-shape-option-preview-star::before {
  --shape-preview-width: 46px;
  --shape-preview-height: 42px;
  background: rgba(246, 231, 200, 0.72);
  box-shadow: none;
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 2% 35%, 39% 34%);
}

.image-editor-shape-option-preview-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 32px;
  transform: translate(-50%, -50%);
  background: rgba(246, 231, 200, 0.18);
  clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 2% 35%, 39% 34%);
}

.image-editor-shape-option-preview-arrow::before {
  --shape-preview-width: 54px;
  --shape-preview-height: 34px;
  background: rgba(246, 231, 200, 0.72);
  box-shadow: none;
  border-radius: 0;
  clip-path: polygon(0% 24%, 58% 24%, 58% 0%, 100% 50%, 58% 100%, 58% 76%, 0% 76%);
}

.image-editor-shape-option-preview-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 26px;
  transform: translate(-50%, -50%);
  background: rgba(246, 231, 200, 0.18);
  clip-path: polygon(0% 24%, 58% 24%, 58% 0%, 100% 50%, 58% 100%, 58% 76%, 0% 76%);
}

.image-editor-shape-option-preview-chevron::before {
  --shape-preview-width: 52px;
  --shape-preview-height: 34px;
  background: rgba(246, 231, 200, 0.72);
  box-shadow: none;
  border-radius: 0;
  clip-path: polygon(0% 20%, 38% 20%, 100% 50%, 38% 80%, 0% 80%, 44% 50%);
}

.image-editor-shape-option-preview-chevron::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 26px;
  transform: translate(-50%, -50%);
  background: rgba(246, 231, 200, 0.18);
  clip-path: polygon(0% 20%, 38% 20%, 100% 50%, 38% 80%, 0% 80%, 44% 50%);
}

.image-editor-shape-option-preview-line::before {
  left: 6px;
  right: 6px;
  top: 50%;
  width: auto;
  height: 0;
  border-top: 4px solid rgba(246, 231, 200, 0.84);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transform: translateY(-50%) rotate(-16deg);
}

.image-editor-shape-option-preview-line::after {
  content: "";
  position: absolute;
  left: calc(50% - 4px);
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f6e7c8;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.45);
}

.image-editor-shape-option-label {
  width: 100%;
  color: #e0e1e3;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

.image-editor-stage-card {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, rgba(30, 31, 34, 0.98) 0%, rgba(25, 26, 29, 0.96) 100%);
  box-sizing: border-box;
}

.image-editor-panel-eyebrow {
  color: rgba(232, 233, 236, 0.52);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.image-editor-stage-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  height: 100%;
  min-height: 0;
  padding: 18px;
}

.image-editor-stage-header {
  display: grid;
  gap: 6px;
}

.image-editor-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 0 2px;
  min-width: 0;
}

.image-editor-toolbar-button,
.image-editor-toolbar-chip-button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--app-radius-control-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.025) 100%);
  color: #e1e2e4;
  font: inherit;
  cursor: pointer;
  transition:
      background var(--app-button-transition),
      border-color var(--app-button-transition),
      color var(--app-button-transition),
      box-shadow var(--app-button-transition);
}

.image-editor-toolbar-button:hover,
.image-editor-toolbar-chip-button:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.image-editor-toolbar-button[disabled],
.image-editor-toolbar-chip-button[disabled] {
  opacity: 0.44;
  cursor: default;
}

.image-editor-toolbar-button {
  display: inline-flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  box-sizing: border-box;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
}

.image-editor-toolbar-history-button {
  position: relative;
  font-size: 0;
}

.image-editor-toolbar-history-button .image-editor-toolbar-history-button-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.image-editor-toolbar-delete-button {
  margin-left: auto;
  color: #f3d8d1;
}

.image-editor-toolbar-delete-button:hover {
  border-color: rgba(224, 125, 108, 0.3);
  background: linear-gradient(180deg, rgba(224, 125, 108, 0.16) 0%, rgba(224, 125, 108, 0.06) 100%);
}

.image-editor-toolbar-delete-icon {
  width: 18px;
  height: 18px;
}

.image-editor-toolbar-transparency-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: min(320px, 100%);
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}

.image-editor-toolbar-transparency-group.disabled,
.image-editor-toolbar-popover-control.disabled {
  opacity: 0.5;
}

.image-editor-toolbar-label {
  color: rgba(232, 233, 236, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.image-editor-toolbar-transparency {
  flex: 1 1 auto;
  min-width: 120px;
  accent-color: #efe3c4;
}

.image-editor-toolbar-transparency-value {
  min-width: 44px;
  color: #f3eee4;
  font-size: 0.83rem;
  font-weight: 700;
  text-align: right;
}

.image-editor-toolbar-popover-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.image-editor-toolbar-canvas-button {
  position: relative;
}

.image-editor-toolbar-layers-button {
  position: relative;
  display: grid;
  place-items: center;
}

.image-editor-toolbar-layers-icon {
  position: relative;
  width: 20px;
  height: 18px;
  pointer-events: none;
}

.image-editor-toolbar-layers-shape {
  position: absolute;
  width: 12px;
  height: 8px;
  border: 2px solid rgba(246, 231, 200, 0.82);
  border-radius: 4px;
  background: rgba(246, 231, 200, 0.08);
  box-sizing: border-box;
}

.image-editor-toolbar-layers-shape-back {
  left: 1px;
  top: 8px;
  opacity: 0.42;
}

.image-editor-toolbar-layers-shape-middle {
  left: 4px;
  top: 5px;
  opacity: 0.68;
}

.image-editor-toolbar-layers-shape-front {
  left: 7px;
  top: 2px;
}

.image-editor-toolbar-canvas-button::before,
.image-editor-toolbar-canvas-button::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.image-editor-toolbar-canvas-button::before {
  inset: 10px;
  border: 2px solid rgba(246, 231, 200, 0.82);
  border-radius: 7px;
}

.image-editor-toolbar-canvas-button::after {
  right: 9px;
  bottom: 9px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(246, 231, 200, 0.82);
  border-bottom: 2px solid rgba(246, 231, 200, 0.82);
}

.image-editor-toolbar-fill-button::before {
  background: var(--swatch-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.image-editor-toolbar-border-button::before {
  border: 3px solid var(--swatch-color);
  background: transparent;
}

.image-editor-toolbar-shadow-button::before {
  inset: 11px 12px 13px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 4px 4px 10px var(--swatch-color);
}

/* Gradient sub-editor (Fill popover for shapes + Background panel for the workspace). Reuses the
   existing labeled-control / chip-button / colour-picker styling; this just groups it as a section. */
.image-editor-gradient-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.image-editor-gradient-controls input[type="range"] {
  width: 100%;
  accent-color: #6ea8fe;
}

/* Advanced multi-stop gradient bar + draggable stop chips (ported from the deck). */
.image-editor-grad-barwrap {
  padding: 4px 7px 18px;
}

.image-editor-grad-bar {
  position: relative;
  width: 100%;
  height: 26px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: copy;
  touch-action: none;
  /* checkerboard behind so translucent stops read clearly */
  background-color: #1c1e22;
}

.image-editor-grad-stops {
  position: relative;
  width: 100%;
  height: 16px;
  margin-top: 3px;
  touch-action: none;
}

.image-editor-grad-stop {
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.34);
  cursor: grab;
  touch-action: none;
  box-sizing: border-box;
}

.image-editor-grad-stop.active {
  border-color: #6ea8fe;
  box-shadow: 0 0 0 1px rgba(110, 168, 254, 0.5), 0 1px 3px rgba(0, 0, 0, 0.34);
}

.image-editor-grad-stop:active {
  cursor: grabbing;
}

.image-editor-grad-stop-edit {
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-editor-grad-stop-edit .image-editor-color-picker {
  flex: 1 1 auto;
  min-width: 0;
}

/* ===========================================================================
 * STYLE-tab Fill panels — the Gradient / Advanced Gradient / Image editors that
 * the Fill dropdown reveals. Matches the advanced-gradient mockup.
 * =========================================================================== */

/* Detail panels get the same top divider + spacing as the collapsible-section details. */
.image-editor-text-drawer .image-editor-grad-simple-panel,
.image-editor-text-drawer .image-editor-advgrad-panel,
.image-editor-text-drawer .image-editor-fillimg-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.image-editor-text-drawer .image-editor-grad-simple-panel[hidden],
.image-editor-text-drawer .image-editor-advgrad-panel[hidden],
.image-editor-text-drawer .image-editor-fillimg-panel[hidden] {
  display: none;
}

/* Advanced-gradient bar sits flush at the top of its panel (no extra bottom room — the square
 * handles render right beneath it via the shared .image-editor-grad-stops row). */
.image-editor-text-drawer .image-editor-advgrad-panel .image-editor-grad-barwrap {
  padding: 2px 7px 4px;
}

.image-editor-text-drawer .image-editor-grad-simple-colors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The shared "type icons + swap + Angle: dial + stepper" row. */
.image-editor-text-drawer .image-editor-grad-typeangle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.image-editor-text-drawer .image-editor-grad-type-group {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}

/* Linear / radial toggle buttons show a miniature of the gradient they select. */
.image-editor-text-drawer .image-editor-grad-typebtn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--lumo-contrast-20pct);
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
}

.image-editor-text-drawer .image-editor-grad-typebtn-linear {
  background: linear-gradient(135deg, #cbd0d6, #23262b);
}

.image-editor-text-drawer .image-editor-grad-typebtn-radial {
  background: radial-gradient(circle at 50% 50%, #cbd0d6, #23262b);
}

.image-editor-text-drawer .image-editor-grad-typebtn.active {
  border-color: #6ea8fe;
  box-shadow: 0 0 0 1px rgba(110, 168, 254, 0.55);
}

.image-editor-text-drawer .image-editor-grad-reverse {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--lumo-contrast-20pct);
  background: transparent;
  color: var(--lumo-body-text-color);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.image-editor-text-drawer .image-editor-grad-reverse:hover {
  background: var(--lumo-contrast-10pct);
}

.image-editor-text-drawer .image-editor-grad-angle-label {
  flex: 0 0 auto;
  color: var(--lumo-secondary-text-color);
  font-size: 0.8rem;
}

/* Angle dial — display-only indicator, rotated to match the numeric stepper (reuses the shadow dial). */
.image-editor-text-drawer .image-editor-grad-dial {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--lumo-contrast-30pct);
  position: relative;
  transition: transform 120ms ease;
}

.image-editor-text-drawer .image-editor-grad-dial::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lumo-body-text-color);
  transform: translateX(-50%);
}

.image-editor-text-drawer .image-editor-grad-typeangle-row .image-editor-stepper {
  flex: 1 1 auto;
  min-width: 96px;
}

/* Image-fill panel: a preview thumbnail beside the Choose button, then Fit + Scale rows. */
.image-editor-text-drawer .image-editor-fillimg-choose-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-editor-text-drawer .image-editor-fillimg-preview {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 7px;
  border: 1px solid var(--lumo-contrast-20pct);
  background-color: #1c1e22;
  background-size: cover;
  background-position: center;
}

.image-editor-text-drawer .image-editor-fillimg-preview.empty {
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.08) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}

.image-editor-text-drawer .image-editor-fillimg-choose-row .image-editor-toolbar-chip-button {
  flex: 1 1 auto;
}

.image-editor-font-popover {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 8;
  display: grid;
  gap: 14px;
  width: min(420px, calc(100vw - 80px));
  min-width: 280px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, rgba(30, 31, 34, 0.99) 0%, rgba(25, 26, 29, 0.98) 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26);
  box-sizing: border-box;
}

.image-editor-drawer-detail-shell .image-editor-font-popover {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Right-side Text inspector drawer (deck-inspector idol). Sits as an implicit
 * 3rd column of .image-editor-workspace, appearing only when a text overlay is
 * selected (the `hidden` attribute — toggled by syncToolbar — display:none's it,
 * so no dead column exists when it's away). Same dark card shell as the tool
 * rail; the fontPopover is hosted flat inside it (chrome stripped, like the
 * left detail shell). A header chevron collapses it to a slim rail.
 * ------------------------------------------------------------------------- */
.image-editor-text-drawer {
  /* Overlay, not a grid column: absolutely pinned to the right edge of the
   * workspace (its positioned ancestor) so it floats OVER the canvas when a
   * text overlay is selected. The stage keeps its full `1fr` width and never
   * rescales — the drawer just slides on top. `hidden` (display:none) removes
   * it entirely when nothing is selected. */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  width: var(--image-editor-drawer-width, 400px);
  min-width: var(--image-editor-drawer-width, 400px);
  min-height: 0;
  padding: 18px;
  border: 1px solid var(--lumo-contrast-10pct, rgba(255, 255, 255, 0.1));
  border-radius: 26px;
  /* Solid deck-inspector-style fill (was a translucent gradient). */
  background: var(--lumo-base-color, #191a1d);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  transition: width 180ms ease, min-width 180ms ease, padding 180ms ease;
}

/* Author `display: grid` above would otherwise beat the UA `[hidden]` rule, so
 * the drawer would never disappear. Restore hide-when-hidden explicitly (the
 * `hidden` attribute is toggled by syncToolbar), removing it from the grid. */
.image-editor-text-drawer[hidden] {
  display: none !important;
}

/* Left-edge drag handle for both right drawers — resize wider/narrower (deck style). */
.image-editor-drawer-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  width: 8px;
  cursor: col-resize;
  z-index: 5;
  touch-action: none;
}

.image-editor-drawer-resize::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: var(--lumo-contrast-20pct);
  opacity: 0;
  transition: opacity 120ms ease;
}

.image-editor-drawer-resize:hover::after,
.image-editor-workspace.drawer-resizing .image-editor-drawer-resize::after {
  opacity: 1;
}

/* No drag handle while the drawer is collapsed to its slim rail. */
.image-editor-text-drawer.collapsed .image-editor-drawer-resize,
.image-editor-shape-drawer.collapsed .image-editor-drawer-resize {
  display: none;
}

.image-editor-text-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
}

.image-editor-text-drawer-collapse {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #f6e7c8;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 180ms ease;
}

.image-editor-text-drawer-collapse:hover {
  background: rgba(246, 231, 200, 0.12);
  border-color: rgba(246, 231, 200, 0.28);
}

.image-editor-text-drawer-collapse-icon {
  width: 16px;
  height: 16px;
}

.image-editor-text-drawer-body {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

/* Host the fontPopover flat inside the drawer — strip the floating-card chrome
 * so only the controls show (mirrors the left detail-shell treatment). Without
 * this the popover falls back to its position:absolute base rule and breaks. */
.image-editor-text-drawer .image-editor-font-popover {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* The drawer has its own "Text" header, so the popover's own title is redundant. */
.image-editor-text-drawer .image-editor-font-popover-header {
  display: none;
}

/* Collapsed: slim rail — only the chevron remains, rotated to point back out. */
.image-editor-text-drawer.collapsed {
  width: 46px;
  min-width: 46px;
  padding: 18px 6px;
}

.image-editor-text-drawer.collapsed .image-editor-text-drawer-body {
  display: none;
}

.image-editor-text-drawer.collapsed .image-editor-text-drawer-header {
  justify-content: center;
}

.image-editor-text-drawer.collapsed .image-editor-text-drawer-collapse {
  transform: rotate(180deg);
}

/* Style / Layout sub-tab toggle inside the text drawer (deck pill-toggle parity). */
.image-editor-text-subtabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.image-editor-text-subtab-button {
  min-height: 34px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(232, 233, 236, 0.7);
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.image-editor-text-subtab-button:hover {
  color: #f6e7c8;
}

.image-editor-text-subtab-button.active {
  background: rgba(246, 231, 200, 0.16);
  color: #f6e7c8;
  box-shadow: inset 0 0 0 1px rgba(246, 231, 200, 0.14);
}

/* The two sub-panels stack like the popover used to; only one shows at a time. */
.image-editor-text-subpanel {
  display: grid;
  gap: 14px;
}

.image-editor-text-subpanel[hidden] {
  display: none !important;
}

/* Layout-tab numeric inputs (text inset, indents) — dark editor field. */
.image-editor-rt-num {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #e0e1e3;
  font: inherit;
  box-sizing: border-box;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.image-editor-rt-num:hover {
  border-color: rgba(246, 231, 200, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

.image-editor-rt-num:focus,
.image-editor-rt-num:focus-visible {
  outline: none;
  border-color: rgba(246, 231, 200, 0.45);
  box-shadow: 0 0 0 3px rgba(246, 231, 200, 0.12);
}

/* ---- Deck-parity additions: grouped blocks, floating More popover, tab-stop rows ---- */
.image-editor-font-block {
  display: grid;
  gap: 10px;
}

/* Floating "More text options" popover — portaled to <body> and positioned by JS, so it needs its
 * own surface + elevation (it lives outside the drawer's styled context while open). */
.image-editor-more-popover-panel {
  display: grid;
  gap: 10px;
  width: 300px;
  max-height: 72vh;
  overflow-y: auto;
  padding: 14px;
  background: var(--lumo-base-color);
  border: 1px solid var(--lumo-contrast-20pct);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

.image-editor-more-popover-panel[hidden] {
  display: none !important;
}

.image-editor-more-trigger {
  min-width: 40px;
}

/* Tab-stop editor rows (rendered dynamically by the JS). */
.image-editor-tabs-list {
  display: grid;
  gap: 8px;
}

.image-editor-tab-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 6px;
  align-items: center;
}

.image-editor-tab-row .image-editor-tab-pos {
  min-height: 34px;
}

.image-editor-tab-row select {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid var(--lumo-contrast-20pct);
  background: var(--lumo-contrast-5pct);
  color: var(--lumo-body-text-color);
  padding: 0 6px;
}

.image-editor-tabs-add {
  margin-top: 6px;
}

/* ===========================================================================
 * DECK-INSPECTOR VISUAL MATCH — flatten the text drawer from the dark-gold card
 * into the deck's flat Lumo look: base surface, grayscale --lumo-contrast-*
 * accents (no gold), pill toggles, section labels. Scoped to .image-editor-text-drawer
 * so the shape drawer keeps its existing chrome. Overrides the base rules above +
 * later in the file (higher specificity or later source order).
 * =========================================================================== */
.image-editor-text-drawer {
  border: none;
  border-left: 1px solid var(--lumo-contrast-10pct);
  border-radius: 0;
  background: var(--lumo-base-color);
  box-shadow: none;
  padding: 16px;
  gap: 12px;
}

.image-editor-text-drawer-collapse {
  color: var(--lumo-body-text-color);
  background: transparent;
  border: 1px solid var(--lumo-contrast-20pct);
  border-radius: 6px;
}

.image-editor-text-drawer-collapse:hover {
  background: var(--lumo-contrast-10pct);
  border-color: var(--lumo-contrast-40pct);
}

/* Style / Layout / Arrange pill toggle — deck track + fill. */
.image-editor-text-drawer .image-editor-text-subtabs {
  background: var(--lumo-contrast-10pct);
  border: none;
  border-radius: 8px;
  padding: 4px;
}

.image-editor-text-drawer .image-editor-text-subtab-button {
  color: var(--lumo-secondary-text-color);
  border-radius: 6px;
  font-weight: 600;
}

.image-editor-text-drawer .image-editor-text-subtab-button:hover {
  color: var(--lumo-body-text-color);
}

.image-editor-text-drawer .image-editor-text-subtab-button.active {
  background: var(--lumo-contrast-30pct);
  color: var(--lumo-body-text-color);
  box-shadow: none;
}

/* Section field labels — deck uppercase caption. */
.image-editor-text-drawer .image-editor-font-label {
  color: var(--lumo-secondary-text-color);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Button groups (alignment, indent, vertical, bullets) — icons ride a contrast
   track, evenly distributed, active fill is a grayscale pill (not gold). */
.image-editor-text-drawer .image-editor-font-toggle-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  background: var(--lumo-contrast-10pct);
  border-radius: 10px;
  padding: 5px;
  gap: 4px;
  min-height: 48px;
  box-sizing: border-box;
}

/* Each button shares the track width equally (2 arrows → two halves, 4 aligns → quarters). */
.image-editor-text-drawer .image-editor-font-toggle-group > .image-editor-toolbar-chip-button {
  flex: 1 1 0;
  min-width: 0;
}

.image-editor-text-drawer .image-editor-toolbar-chip-button {
  border: none;
  background: transparent;
  color: var(--lumo-body-text-color);
  border-radius: 8px;
  min-height: 32px;
}

.image-editor-text-drawer .image-editor-toolbar-chip-button:hover {
  background: var(--lumo-contrast-20pct);
}

.image-editor-text-drawer .image-editor-toolbar-chip-button.active {
  border: none;
  background: var(--lumo-contrast-30pct);
  color: var(--lumo-body-text-color);
}

/* Native selects + numeric fields — deck pill: filled contrast surface, borderless,
   fully rounded, taller. */
.image-editor-text-drawer .image-editor-rt-num,
.image-editor-text-drawer select,
.image-editor-text-drawer .image-editor-font-family,
.image-editor-text-drawer .image-editor-font-weight {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background: var(--lumo-contrast-10pct);
  border: 1px solid transparent;
  border-radius: 22px;
  color: var(--lumo-body-text-color);
  box-sizing: border-box;
}

.image-editor-text-drawer .image-editor-rt-num:hover,
.image-editor-text-drawer select:hover,
.image-editor-text-drawer .image-editor-font-family:hover,
.image-editor-text-drawer .image-editor-font-weight:hover {
  background: var(--lumo-contrast-20pct);
  border-color: transparent;
}

.image-editor-text-drawer .image-editor-rt-num:focus,
.image-editor-text-drawer .image-editor-rt-num:focus-visible,
.image-editor-text-drawer select:focus,
.image-editor-text-drawer .image-editor-font-family:focus,
.image-editor-text-drawer .image-editor-font-weight:focus {
  outline: none;
  border-color: var(--lumo-primary-color);
  box-shadow: none;
}

/* Divider between sections (deck sectionDivider). Applied to labeled groups. */
.image-editor-text-drawer .image-editor-font-group + .image-editor-font-group,
.image-editor-text-drawer .image-editor-font-size-row + .image-editor-font-size-row {
  border-top: 1px solid var(--lumo-contrast-10pct);
  padding-top: 12px;
}

/* ===========================================================================
 * DECK TOP-TAB HEADER — the collapse chevron now sits at the LEFT of the header
 * and the Style/Layout/Arrange/Meta tabs render as a horizontal underlined tab
 * bar (deck inspector's top tabs), replacing the boxed 2x2 pill grid.
 * =========================================================================== */
.image-editor-text-drawer-header {
  justify-content: flex-start;
  gap: 4px;
  min-height: 34px;
}

/* Plain borderless chevron (deck iconBtn look). */
.image-editor-text-drawer .image-editor-text-drawer-collapse {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--lumo-secondary-text-color);
}

.image-editor-text-drawer .image-editor-text-drawer-collapse:hover {
  background: var(--lumo-contrast-10pct);
  color: var(--lumo-body-text-color);
  border: none;
}

/* Horizontal underlined tab bar. */
.image-editor-text-drawer-header .image-editor-text-subtabs {
  display: flex;
  flex: 1 1 auto;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  align-self: stretch;
  box-shadow: inset 0 -1px 0 var(--lumo-contrast-10pct);
}

.image-editor-text-drawer-header .image-editor-text-subtab-button {
  flex: 1 1 0;
  min-height: 34px;
  padding: 0 4px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent !important;
  color: var(--lumo-secondary-text-color);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0;
  box-shadow: none !important;
  transition: color 120ms ease, border-color 120ms ease;
}

.image-editor-text-drawer-header .image-editor-text-subtab-button:hover {
  color: var(--lumo-body-text-color);
}

.image-editor-text-drawer-header .image-editor-text-subtab-button.active {
  background: transparent !important;
  color: var(--lumo-body-text-color);
  border-bottom-color: var(--lumo-primary-color);
  box-shadow: none !important;
}

/* Collapsed state: hide the tab bar too (only the chevron remains). */
.image-editor-text-drawer.collapsed .image-editor-text-subtabs {
  display: none;
}

/* Section labels — deck sectionLabel: mixed-case, white, 13px (not uppercase). */
.image-editor-text-drawer .image-editor-font-label {
  text-transform: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--lumo-body-text-color);
}

/* Chip button icons (alignment, indent, vertical). */
.image-editor-text-drawer .image-editor-toolbar-chip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.image-editor-text-drawer .image-editor-chip-icon {
  width: 16px;
  height: 16px;
  color: currentColor;
}

/* Emphasis B / I / U / S letters preview their own effect. */
.image-editor-text-drawer .image-editor-font-style-toggle {
  min-width: 32px;
  font-weight: 700;
  font-size: 0.9rem;
}

.image-editor-text-drawer .image-editor-font-style-toggle[data-style-action="italic"] {
  font-style: italic;
}

.image-editor-text-drawer .image-editor-font-style-toggle[data-style-action="underline"] {
  text-decoration: underline;
}

.image-editor-text-drawer .image-editor-font-style-toggle[data-style-action="line-through"] {
  text-decoration: line-through;
}

/* ===========================================================================
 * TEXT COLOR — deck colorSelector look: an inline row (label left, control
 * right) whose trigger is a flush [ current-colour swatch | rainbow wheel ]
 * pair instead of the boxed swatch + hex + "COLOR" field.
 * =========================================================================== */
.image-editor-text-drawer .image-editor-text-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-editor-text-drawer .image-editor-text-color-row .image-editor-font-label {
  margin: 0;
}

.image-editor-text-drawer .image-editor-color-compact {
  width: auto;
  flex: 0 0 auto;
}

/* Trigger: flush swatch + wheel pair, no field chrome. */
.image-editor-text-drawer .image-editor-color-compact .image-editor-color-picker-trigger {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 0;
  width: auto;
  min-height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}

.image-editor-text-drawer .image-editor-color-compact.open .image-editor-color-picker-trigger {
  border: none;
  box-shadow: none;
}

/* Deck shows only swatch + wheel — drop the hex value and the "COLOR" caret. */
.image-editor-text-drawer .image-editor-color-compact .image-editor-color-picker-trigger-value,
.image-editor-text-drawer .image-editor-color-compact .image-editor-color-picker-trigger-caret {
  display: none;
}

/* Left half: the current-colour swatch (background-color is set by JS). */
.image-editor-text-drawer .image-editor-color-compact .image-editor-color-picker-trigger-swatch {
  width: 44px;
  height: 26px;
  border-radius: 6px 0 0 6px;
  border: 1px solid var(--lumo-contrast-20pct);
  border-right: none;
  box-shadow: none;
}

/* Right half: the rainbow colour wheel with a white centre dot. */
.image-editor-text-drawer .image-editor-color-compact .image-editor-color-picker-trigger::after {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 0 6px 6px 0;
  border: 1px solid var(--lumo-contrast-20pct);
  background:
    radial-gradient(circle at center, #ffffff 0 4px, rgba(255, 255, 255, 0) 5px),
    conic-gradient(from 0deg, #ff2d2d, #ffd72d, #5dff2d, #2dffd2, #2d7dff, #d22dff, #ff2d2d);
}

/* Small right-aligned trigger → open the panel leftward so it stays in-drawer. */
.image-editor-text-drawer .image-editor-color-compact .image-editor-color-picker-panel {
  left: auto;
  right: 0;
}

/* ===========================================================================
 * FONT BLOCK — deck arrangement: full-width font row, then a Weight + pt-Size
 * stepper row, an unlabelled track-less emphasis row, and an inline
 * Character Styles row.
 * =========================================================================== */

/* Weight + Size share one row: weight fills, size stepper stays natural width. */
.image-editor-text-drawer .image-editor-font-weight-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.image-editor-text-drawer .image-editor-font-weight-row .image-editor-font-weight {
  flex: 1 1 auto;
  min-width: 0;
}

.image-editor-text-drawer .image-editor-font-weight-row .image-editor-stepper {
  flex: 0 0 auto;
}

/* pt stepper: [−] [value] pt [+] inside one pill. */
.image-editor-text-drawer .image-editor-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0 6px;
  background: var(--lumo-contrast-10pct);
  border: 1px solid transparent;
  border-radius: 22px;
  box-sizing: border-box;
}

/* The number input inside the stepper is borderless/transparent (the pill IS the field). */
.image-editor-text-drawer .image-editor-stepper .image-editor-rt-num {
  width: 40px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: center;
  color: var(--lumo-body-text-color);
  -moz-appearance: textfield;
  appearance: textfield;
}

.image-editor-text-drawer .image-editor-stepper .image-editor-rt-num:hover,
.image-editor-text-drawer .image-editor-stepper .image-editor-rt-num:focus,
.image-editor-text-drawer .image-editor-stepper .image-editor-rt-num:focus-visible {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

.image-editor-text-drawer .image-editor-stepper .image-editor-rt-num::-webkit-outer-spin-button,
.image-editor-text-drawer .image-editor-stepper .image-editor-rt-num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.image-editor-text-drawer .image-editor-stepper-suffix {
  color: var(--lumo-secondary-text-color);
  font-size: 0.78rem;
  padding: 0 2px;
}

.image-editor-text-drawer .image-editor-stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--lumo-secondary-text-color);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.image-editor-text-drawer .image-editor-stepper-btn:hover {
  background: var(--lumo-contrast-20pct);
  color: var(--lumo-body-text-color);
}

/* Emphasis: plain track-less button row (B / I / U / S / gear). */
.image-editor-text-drawer .image-editor-emphasis-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.image-editor-text-drawer .image-editor-emphasis-group .image-editor-toolbar-chip-button {
  min-width: 30px;
  min-height: 30px;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: var(--lumo-body-text-color);
  border-radius: 8px;
}

.image-editor-text-drawer .image-editor-emphasis-group .image-editor-toolbar-chip-button:hover {
  background: var(--lumo-contrast-10pct);
}

.image-editor-text-drawer .image-editor-emphasis-group .image-editor-toolbar-chip-button.active {
  background: var(--lumo-contrast-30pct);
  color: var(--lumo-body-text-color);
}

.image-editor-text-drawer .image-editor-emphasis-group .image-editor-more-trigger {
  font-size: 0.95rem;
  color: var(--lumo-body-text-color);
}

/* Character Styles: inline label + dropdown (like Text Color). */
.image-editor-text-drawer .image-editor-char-styles-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.image-editor-text-drawer .image-editor-char-styles-row .image-editor-font-label {
  margin: 0;
  flex: 0 0 auto;
  color: var(--lumo-secondary-text-color);
}

.image-editor-text-drawer .image-editor-char-styles-row .image-editor-char-styles {
  flex: 1 1 auto;
  min-width: 0;
}

/* ===========================================================================
 * SPACING — collapsible section: header + rotating chevron, a "Lines" unit pill
 * with a value stepper on the Line row, and inline label + pt steppers for the
 * paragraph rows.
 * =========================================================================== */
.image-editor-text-drawer .image-editor-section {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--lumo-contrast-10pct);
  padding-top: 14px;
}

.image-editor-text-drawer .image-editor-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.image-editor-text-drawer .image-editor-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--lumo-body-text-color);
}

.image-editor-text-drawer .image-editor-section-chevron {
  width: 16px;
  height: 16px;
  color: var(--lumo-primary-color);
  transition: transform 150ms ease;
}

.image-editor-text-drawer .image-editor-section.collapsed .image-editor-section-chevron {
  transform: rotate(-90deg);
}

.image-editor-text-drawer .image-editor-section-body {
  display: grid;
  gap: 12px;
}

.image-editor-text-drawer .image-editor-section.collapsed .image-editor-section-body {
  display: none;
}

/* Line row: unit pill (fills) + value stepper. */
.image-editor-text-drawer .image-editor-spacing-line-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.image-editor-text-drawer .image-editor-lines-unit {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 16px;
  background: var(--lumo-contrast-10pct);
  border-radius: 22px;
  color: var(--lumo-body-text-color);
  font-size: 0.95rem;
}

.image-editor-text-drawer .image-editor-spacing-line-row .image-editor-stepper {
  flex: 0 0 auto;
}

/* Before/After paragraph: inline grey label + pt stepper pushed to the right. */
.image-editor-text-drawer .image-editor-spacing-para-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.image-editor-text-drawer .image-editor-spacing-para-row .image-editor-font-label {
  margin: 0;
  flex: 1 1 auto;
  color: var(--lumo-secondary-text-color);
}

.image-editor-text-drawer .image-editor-spacing-para-row .image-editor-stepper {
  flex: 0 0 auto;
}

/* ===========================================================================
 * BULLETS & LISTS — collapsible with the list-kind dropdown pinned in the
 * header, a full-width bullet-style dropdown, and an "Indent:" row of two
 * captioned steppers (Bullet / Text).
 * =========================================================================== */
.image-editor-text-drawer .image-editor-section-header-trailing {
  margin-left: auto;
  flex: 0 0 auto;
  width: 132px;
}

.image-editor-text-drawer .image-editor-bullet-indent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.image-editor-text-drawer .image-editor-bullet-indent-label {
  flex: 0 0 auto;
  padding-top: 12px;
  color: var(--lumo-secondary-text-color);
  font-size: 0.8rem;
}

.image-editor-text-drawer .image-editor-bullet-indent-col {
  display: grid;
  gap: 4px;
  justify-items: center;
  flex: 1 1 0;
  min-width: 0;
}

/* Let the indent steppers fill their column so both fit without overflowing. */
.image-editor-text-drawer .image-editor-bullet-indent-col .image-editor-stepper {
  width: 100%;
}

.image-editor-text-drawer .image-editor-bullet-indent-col .image-editor-stepper .image-editor-rt-num {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
}

.image-editor-text-drawer .image-editor-field-caption {
  font-size: 0.72rem;
  color: var(--lumo-secondary-text-color);
}

/* ===========================================================================
 * STYLE / LAYOUT segmented toggle — sits under the Paragraph Style dropdown in
 * the Text tab and switches the two styletab content panels. Deck pill toggle:
 * contrast track, active segment is a filled contrast pill. Hairlines above and
 * below separate it from the Label dropdown and the Font block.
 * =========================================================================== */
.image-editor-text-drawer .image-editor-seg-toggle {
  display: flex;
  gap: 4px;
  padding: 5px;
  margin: 6px 0;
  background: var(--lumo-contrast-10pct);
  border-radius: 12px;
  box-sizing: border-box;
}

.image-editor-text-drawer .image-editor-seg-button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--lumo-secondary-text-color);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.image-editor-text-drawer .image-editor-seg-button:hover {
  color: var(--lumo-body-text-color);
}

.image-editor-text-drawer .image-editor-seg-button.active {
  background: var(--lumo-contrast-30pct);
  color: var(--lumo-body-text-color);
}

/* Full-width hairlines framing the toggle (deck look). */
.image-editor-text-drawer .image-editor-text-text-panel > .image-editor-seg-toggle {
  position: relative;
}

.image-editor-text-drawer .image-editor-text-text-panel > .image-editor-seg-toggle::before,
.image-editor-text-drawer .image-editor-text-text-panel > .image-editor-seg-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--lumo-contrast-10pct);
}

.image-editor-text-drawer .image-editor-text-text-panel > .image-editor-seg-toggle::before {
  top: -10px;
}

.image-editor-text-drawer .image-editor-text-text-panel > .image-editor-seg-toggle::after {
  bottom: -10px;
}

.image-editor-text-drawer .image-editor-styletab-panel {
  display: grid;
  gap: 14px;
}

.image-editor-text-drawer .image-editor-styletab-panel[hidden] {
  display: none !important;
}

/* ===========================================================================
 * LAYOUT segment — inline stepper rows (Columns / Text Inset / Border Offset /
 * Paragraph Background), a 3-up Indents grid, and the Paragraph Borders block.
 * =========================================================================== */
.image-editor-text-drawer .image-editor-inline-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.image-editor-text-drawer .image-editor-inline-row .image-editor-font-label {
  margin: 0;
  flex: 1 1 auto;
  color: var(--lumo-secondary-text-color);
}

.image-editor-text-drawer .image-editor-inline-row .image-editor-stepper,
.image-editor-text-drawer .image-editor-inline-row .image-editor-color-picker {
  flex: 0 0 auto;
}

/* Indents: three captioned steppers across (reuses the bullet-indent column style). */
.image-editor-text-drawer .image-editor-indents-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Paragraph Borders block. */
.image-editor-text-drawer .image-editor-block-heading {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--lumo-body-text-color);
}

.image-editor-text-drawer .image-editor-para-borders-block {
  display: grid;
  gap: 12px;
}

/* Row: style dropdown (fills) + compact colour + width stepper. */
.image-editor-text-drawer .image-editor-para-border-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-editor-text-drawer .image-editor-para-border-top-row .image-editor-rt-para-border-style {
  flex: 1 1 auto;
  min-width: 0;
}

.image-editor-text-drawer .image-editor-para-border-top-row .image-editor-color-picker,
.image-editor-text-drawer .image-editor-para-border-top-row .image-editor-stepper {
  flex: 0 0 auto;
}

/* Row: border-side track (fills) + the Frame square button. */
.image-editor-text-drawer .image-editor-para-border-sides-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.image-editor-text-drawer .image-editor-para-border-sides-row > .image-editor-font-toggle-group:first-child {
  flex: 1 1 auto;
}

.image-editor-text-drawer .image-editor-para-border-sides-row > .image-editor-font-toggle-group:last-child {
  flex: 0 0 auto;
  min-width: 56px;
}

/* Rounded-corners check toggle: a circle that fills when active + a label. */
.image-editor-text-drawer .image-editor-check-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: var(--lumo-body-text-color);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.image-editor-text-drawer .image-editor-check-toggle::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--lumo-contrast-30pct);
  background: transparent;
  transition: background 120ms ease, border-color 120ms ease;
}

.image-editor-text-drawer .image-editor-check-toggle.active {
  background: transparent;
}

.image-editor-text-drawer .image-editor-check-toggle.active::before {
  background: var(--lumo-primary-color);
  border-color: var(--lumo-primary-color);
}

/* ===========================================================================
 * STYLE tab (Keynote box appearance) — Fill / Border / Shadow / Opacity groups.
 * =========================================================================== */
.image-editor-text-drawer .image-editor-boxstyle-group {
  display: grid;
  gap: 10px;
}

.image-editor-text-drawer .image-editor-tstyle-opacity-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-editor-text-drawer .image-editor-boxstyle-slider {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--lumo-primary-color);
}

.image-editor-text-drawer .image-editor-tstyle-opacity-row .image-editor-stepper {
  flex: 0 0 auto;
}

/* Preview chip in each Fill/Border/Shadow section header (solid colour when the
   feature is on, a white chip with a diagonal red line when off). Overrides the
   132px header-trailing width used by the Bullets dropdown. */
.image-editor-text-drawer .image-editor-style-preview {
  width: 52px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 6px;
  border: 1px solid var(--lumo-contrast-20pct);
  background-color: #101010;
}

.image-editor-text-drawer .image-editor-style-preview.none {
  background-color: #ffffff;
  background-image: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    #e0483a calc(50% - 1px),
    #e0483a calc(50% + 1px),
    transparent calc(50% + 1px));
}

/* Detail controls (colour / width / blur / offset) show only when enabled. */
.image-editor-text-drawer .image-editor-tstyle-detail {
  display: grid;
  gap: 12px;
}

.image-editor-text-drawer .image-editor-tstyle-detail[hidden] {
  display: none !important;
}

/* Divider above the Opacity group. */
.image-editor-text-drawer .image-editor-tstyle-opacity-group {
  border-top: 1px solid var(--lumo-contrast-10pct);
  padding-top: 14px;
}

/* Quick-style presets — 2x3 grid of one-click fill swatches (deck "Shape Styles"). */
.image-editor-text-drawer .image-editor-quickstyles-block {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding-bottom: 4px;
}

.image-editor-text-drawer .image-editor-quickstyles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}

.image-editor-text-drawer .image-editor-quickstyle-swatch {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid var(--lumo-contrast-10pct);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.image-editor-text-drawer .image-editor-quickstyle-swatch:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.image-editor-text-drawer .image-editor-quickstyles-label {
  text-align: center;
  color: var(--lumo-body-text-color);
  font-weight: 600;
}

/* Shadow angle row: "Angle:" label + a dial indicator + degree stepper + colour. */
.image-editor-text-drawer .image-editor-shadow-angle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-editor-text-drawer .image-editor-shadow-angle-label {
  flex: 0 0 auto;
  color: var(--lumo-secondary-text-color);
  font-size: 0.8rem;
}

.image-editor-text-drawer .image-editor-shadow-dial {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--lumo-contrast-30pct);
  position: relative;
  transition: transform 120ms ease;
}

.image-editor-text-drawer .image-editor-shadow-dial::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lumo-body-text-color);
  transform: translateX(-50%);
}

.image-editor-text-drawer .image-editor-shadow-angle-row .image-editor-stepper {
  flex: 1 1 auto;
}

.image-editor-text-drawer .image-editor-shadow-angle-row .image-editor-color-picker {
  flex: 0 0 auto;
}

/* ===========================================================================
 * ARRANGE tab — layer-order grid, position, and rotate/flip groups.
 * =========================================================================== */
.image-editor-text-drawer .image-editor-arrange-order-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  background: var(--lumo-contrast-10pct);
  border-radius: 12px;
}

.image-editor-text-drawer .image-editor-arrange-order-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 56px;
  padding: 8px 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--lumo-body-text-color);
  cursor: pointer;
  transition: background 120ms ease;
}

.image-editor-text-drawer .image-editor-arrange-order-btn:hover {
  background: var(--lumo-contrast-20pct);
}

.image-editor-text-drawer .image-editor-arrange-order-icon {
  width: 22px;
  height: 22px;
}

.image-editor-text-drawer .image-editor-arrange-order-label {
  font-size: 0.78rem;
  color: var(--lumo-secondary-text-color);
}

/* Groups with a divider above. */
.image-editor-text-drawer .image-editor-arrange-group {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--lumo-contrast-10pct);
  padding-top: 14px;
}

/* Two captioned columns side by side (Angle | Flip). */
.image-editor-text-drawer .image-editor-arrange-row2 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.image-editor-text-drawer .image-editor-arrange-col {
  display: grid;
  gap: 4px;
  justify-items: center;
  flex: 1 1 0;
  min-width: 0;
}

/* Rotate: dial indicator + angle stepper. */
.image-editor-text-drawer .image-editor-rotate-angle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.image-editor-text-drawer .image-editor-rotate-angle-row .image-editor-stepper {
  flex: 1 1 auto;
}

.image-editor-text-drawer .image-editor-rotate-dial {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--lumo-contrast-30pct);
  position: relative;
  transition: transform 120ms ease;
}

.image-editor-text-drawer .image-editor-rotate-dial::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lumo-body-text-color);
  transform: translateX(-50%);
}

/* Action segmented rows — Lock / Unlock and Group / Ungroup. */
.image-editor-text-drawer .image-editor-action-seg {
  display: flex;
  gap: 4px;
  padding: 5px;
  background: var(--lumo-contrast-10pct);
  border-radius: 12px;
}

.image-editor-text-drawer .image-editor-action-seg-button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--lumo-body-text-color);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 120ms ease;
}

.image-editor-text-drawer .image-editor-action-seg-button:hover {
  background: var(--lumo-contrast-20pct);
}

.image-editor-text-drawer .image-editor-action-seg-button.active {
  background: var(--lumo-contrast-30pct);
}

/* Guard the drawer body against horizontal overflow from any panel. */
.image-editor-text-drawer-body {
  overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
 * Right-side Shape / Image inspector drawer — same right-drawer chrome as the
 * text drawer. Hosts the relocated fill/border/shadow (Style tab) and the
 * transform position/rotation (Arrange tab); shown by syncToolbar for box/image
 * overlays. Sits in the same implicit workspace column 3 as the text drawer
 * (they never show at once).
 * ------------------------------------------------------------------------- */
.image-editor-shape-drawer {
  /* Overlay pinned to the workspace's right edge — same as the text drawer.
   * Floats OVER the canvas instead of taking a grid column, so selecting a
   * shape/image never rescales the stage. */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  width: var(--image-editor-drawer-width, 400px);
  min-width: var(--image-editor-drawer-width, 400px);
  min-height: 0;
  padding: 18px;
  border: 1px solid var(--lumo-contrast-10pct, rgba(255, 255, 255, 0.1));
  border-radius: 26px;
  /* Solid deck-inspector-style fill (was a translucent gradient). */
  background: var(--lumo-base-color, #191a1d);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  transition: width 180ms ease, min-width 180ms ease, padding 180ms ease;
}

.image-editor-shape-drawer[hidden] {
  display: none !important;
}

/* Deck top-tab header: collapse chevron at the LEFT + horizontal underlined tabs. */
.image-editor-shape-drawer-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 34px;
}

.image-editor-shape-drawer .image-editor-shape-drawer-collapse {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--lumo-secondary-text-color);
  cursor: pointer;
  transition: background 120ms ease, transform 180ms ease;
}

.image-editor-shape-drawer .image-editor-shape-drawer-collapse:hover {
  background: var(--lumo-contrast-10pct);
  color: var(--lumo-body-text-color);
}

.image-editor-shape-drawer-collapse-icon {
  width: 16px;
  height: 16px;
}

.image-editor-shape-drawer-body {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  display: grid;
  gap: 14px;
  align-content: start;
}

/* Horizontal underlined tab bar (replaces the boxed 2-col grid). */
.image-editor-shape-drawer-header .image-editor-shape-subtabs {
  display: flex;
  flex: 1 1 auto;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  align-self: stretch;
  box-shadow: inset 0 -1px 0 var(--lumo-contrast-10pct);
}

.image-editor-shape-drawer-header .image-editor-shape-subtab-button {
  flex: 1 1 0;
  min-height: 34px;
  padding: 0 4px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--lumo-secondary-text-color);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.image-editor-shape-drawer-header .image-editor-shape-subtab-button:hover {
  color: var(--lumo-body-text-color);
}

.image-editor-shape-drawer-header .image-editor-shape-subtab-button.active {
  background: transparent;
  color: var(--lumo-body-text-color);
  border-bottom-color: var(--lumo-primary-color);
  box-shadow: none;
}

.image-editor-shape-subpanel {
  display: grid;
  gap: 18px;
}

.image-editor-shape-subpanel[hidden] {
  display: none !important;
}

/* Host the relocated frame popovers flat inside the drawer (strip the floating
 * card chrome) — each keeps its Fill/Border/Shadow header as a section label. */
.image-editor-shape-drawer .image-editor-font-popover {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.image-editor-shape-drawer .image-editor-toolbar-style-popover {
  width: 100%;
}

/* ===========================================================================
 * Deck neutral palette for the shape/image drawer content (mirrors the text
 * drawer): grayscale contrast accents (no gold), pill fields, section labels.
 * =========================================================================== */
.image-editor-shape-drawer .image-editor-font-label,
.image-editor-shape-drawer .image-editor-font-popover-title {
  color: var(--lumo-body-text-color);
  text-transform: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
}

.image-editor-shape-drawer .image-editor-font-popover-hint {
  color: var(--lumo-secondary-text-color);
}

/* Pill fields (dropdowns + numeric). */
.image-editor-shape-drawer .image-editor-rt-num,
.image-editor-shape-drawer select {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background: var(--lumo-contrast-10pct);
  border: 1px solid transparent;
  border-radius: 22px;
  color: var(--lumo-body-text-color);
  box-sizing: border-box;
}

.image-editor-shape-drawer .image-editor-rt-num:hover,
.image-editor-shape-drawer select:hover {
  background: var(--lumo-contrast-20pct);
}

.image-editor-shape-drawer .image-editor-rt-num:focus,
.image-editor-shape-drawer select:focus {
  outline: none;
  border-color: var(--lumo-primary-color);
  box-shadow: none;
}

/* Button groups (fill/border/shadow toggles) ride a neutral contrast track. */
.image-editor-shape-drawer .image-editor-font-toggle-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  background: var(--lumo-contrast-10pct);
  border-radius: 10px;
  padding: 5px;
  gap: 4px;
  min-height: 44px;
  box-sizing: border-box;
}

.image-editor-shape-drawer .image-editor-font-toggle-group > .image-editor-toolbar-chip-button {
  flex: 1 1 0;
  min-width: 0;
}

.image-editor-shape-drawer .image-editor-toolbar-chip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--lumo-body-text-color);
  border-radius: 8px;
  min-height: 32px;
}

.image-editor-shape-drawer .image-editor-toolbar-chip-button:hover {
  background: var(--lumo-contrast-20pct);
}

.image-editor-shape-drawer .image-editor-toolbar-chip-button.active {
  background: var(--lumo-contrast-30pct);
  color: var(--lumo-body-text-color);
}

/* Collapsed: slim rail — only the chevron remains, rotated to point back out. */
.image-editor-shape-drawer.collapsed {
  width: 46px;
  min-width: 46px;
  padding: 18px 6px;
}

.image-editor-shape-drawer.collapsed .image-editor-shape-subtabs,
.image-editor-shape-drawer.collapsed .image-editor-shape-drawer-body {
  display: none;
}

.image-editor-shape-drawer.collapsed .image-editor-shape-drawer-header {
  justify-content: center;
}

.image-editor-shape-drawer.collapsed .image-editor-shape-drawer-collapse {
  transform: rotate(180deg);
}

.image-editor-toolbar-style-popover {
  width: min(220px, calc(100vw - 80px));
  min-width: 0;
}

.image-editor-drawer-detail-shell .image-editor-toolbar-style-popover,
.image-editor-drawer-detail-shell .image-editor-toolbar-canvas-popover,
.image-editor-drawer-detail-shell .image-editor-toolbar-layers-popover,
.image-editor-drawer-detail-shell .image-editor-toolbar-border-popover,
.image-editor-drawer-detail-shell .image-editor-toolbar-shadow-popover {
  width: 100%;
}

.image-editor-toolbar-canvas-popover {
  width: min(260px, calc(100vw - 80px));
}

.image-editor-toolbar-layers-popover {
  width: min(264px, calc(100vw - 80px));
}

.image-editor-toolbar-border-popover {
  width: min(340px, calc(100vw - 80px));
}

.image-editor-toolbar-shadow-popover {
  width: min(320px, calc(100vw - 80px));
}

.image-editor-toolbar-layers-control .image-editor-font-popover,
.image-editor-toolbar-canvas-control .image-editor-font-popover,
.image-editor-toolbar-border-control .image-editor-font-popover,
.image-editor-toolbar-shadow-control .image-editor-font-popover,
.image-editor-toolbar-font-control .image-editor-font-popover {
  left: auto;
  right: 0;
}

.image-editor-toolbar-layers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.image-editor-toolbar-background-image-section {
  display: grid;
  gap: 8px;
}

.image-editor-toolbar-background-image-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.image-editor-toolbar-background-action-button {
  margin: 0;
  min-height: 38px;
  border-radius: var(--app-radius-control-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  color: #f3eee4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.image-editor-toolbar-background-action-button:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.095) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.image-editor-toolbar-background-action-button[disabled] {
  opacity: 0.44;
}

.image-editor-toolbar-background-action-button::part(label) {
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
}

.image-editor-toolbar-background-image-status {
  overflow: hidden;
  color: #acacac;
  font-size: 0.76rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-editor-toolbar-layers-group {
  display: grid;
  gap: 8px;
}

.image-editor-toolbar-layers-group-label {
  color: rgba(232, 233, 236, 0.68);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.image-editor-toolbar-layers-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.image-editor-font-popover-header,
.image-editor-font-popover-copy {
  display: grid;
  gap: 4px;
}

.image-editor-font-popover-title {
  color: #e1e2e4;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.25;
}

.image-editor-font-popover-hint {
  color: #acacac;
  font-size: 0.78rem;
  line-height: 1.45;
}

.image-editor-font-control,
.image-editor-font-group,
.image-editor-font-size-row {
  display: grid;
  gap: 8px;
}

.image-editor-toolbar-range-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}

.image-editor-canvas-dimension-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.image-editor-canvas-size-section {
  display: grid;
  gap: 10px;
}

.image-editor-canvas-ratio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.image-editor-canvas-ratio-button {
  justify-content: center;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.image-editor-toolbar-range-value {
  min-width: 46px;
  color: #efe3c4;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: right;
}

.image-editor-font-label {
  color: rgba(232, 233, 236, 0.66);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.image-editor-toolbar-corner-input,
.image-editor-transform-input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #e0e1e3;
  font: inherit;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Native <select> dropdowns in the text / shape toolbars.
 * Previously these rendered as browser-default white boxes — font-weight,
 * list, and baseline had no rule at all, and even the styled ones kept the
 * OS chevron + a white option popup. Unify them into the dark editor field
 * look: flat translucent field, champagne focus ring, a custom chevron, and
 * a dark option list (Chromium/Firefox both honor background/color on
 * <option>, which is where this editor runs and exports from).
 * ------------------------------------------------------------------------- */
.image-editor-font-family,
.image-editor-font-weight,
.image-editor-rt-bullets,
.image-editor-rt-baseline,
.image-editor-rt-para-border-style,
.image-editor-toolbar-border-style {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 42px;
  padding: 0 38px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23f6e7c8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  color: #e0e1e3;
  font: inherit;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.image-editor-font-family:hover,
.image-editor-font-weight:hover,
.image-editor-rt-bullets:hover,
.image-editor-rt-baseline:hover,
.image-editor-rt-para-border-style:hover,
.image-editor-toolbar-border-style:hover {
  border-color: rgba(246, 231, 200, 0.28);
  background-color: rgba(255, 255, 255, 0.06);
}

.image-editor-font-family:focus,
.image-editor-font-family:focus-visible,
.image-editor-font-weight:focus,
.image-editor-font-weight:focus-visible,
.image-editor-rt-bullets:focus,
.image-editor-rt-bullets:focus-visible,
.image-editor-rt-baseline:focus,
.image-editor-rt-baseline:focus-visible,
.image-editor-rt-para-border-style:focus,
.image-editor-rt-para-border-style:focus-visible,
.image-editor-toolbar-border-style:focus,
.image-editor-toolbar-border-style:focus-visible {
  outline: none;
  border-color: rgba(246, 231, 200, 0.45);
  box-shadow: 0 0 0 3px rgba(246, 231, 200, 0.12);
}

/* Dark option popup — kills the white browser list. */
.image-editor-font-family option,
.image-editor-font-weight option,
.image-editor-rt-bullets option,
.image-editor-rt-baseline option,
.image-editor-rt-para-border-style option,
.image-editor-toolbar-border-style option {
  background: #212225;
  color: #e0e1e3;
}

.image-editor-layers-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.image-editor-layers-empty {
  padding: 16px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  color: #9e9e9e;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

.image-editor-layer-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.025) 100%);
  color: inherit;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.image-editor-layer-item:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 100%);
}

.image-editor-layer-item.selected {
  border-color: rgba(246, 231, 200, 0.16);
}

.image-editor-layer-item.active {
  border-color: rgba(246, 231, 200, 0.3);
  background: linear-gradient(180deg, rgba(246, 231, 200, 0.14) 0%, rgba(246, 231, 200, 0.06) 100%);
}

.image-editor-layer-item-badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(246, 231, 200, 0.12);
  color: #efe3c4;
  font-size: 0.78rem;
  font-weight: 800;
}

.image-editor-layer-item-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.image-editor-layer-item-title {
  color: #e1e2e4;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
}

.image-editor-layer-item-meta {
  color: #a7a7a7;
  font-size: 0.76rem;
  line-height: 1.4;
}

.image-editor-toolbar-border-radius,
.image-editor-toolbar-border-width,
.image-editor-toolbar-border-opacity,
.image-editor-toolbar-character-spacing,
.image-editor-toolbar-line-spacing,
.image-editor-toolbar-shadow-direction,
.image-editor-toolbar-shadow-distance,
.image-editor-toolbar-shadow-blur,
.image-editor-toolbar-shadow-spread,
.image-editor-toolbar-shadow-opacity {
  width: 100%;
  min-width: 120px;
  accent-color: #efe3c4;
}

.image-editor-toolbar-corner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.image-editor-toolbar-corner-field {
  display: grid;
  gap: 6px;
}

.image-editor-toolbar-corner-label {
  color: rgba(232, 233, 236, 0.58);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.image-editor-font-family:disabled,
.image-editor-font-size:disabled,
.image-editor-toolbar-character-spacing:disabled,
.image-editor-toolbar-line-spacing:disabled,
.image-editor-toolbar-border-radius:disabled,
.image-editor-toolbar-border-width:disabled,
.image-editor-toolbar-border-opacity:disabled,
.image-editor-transform-input:disabled,
.image-editor-toolbar-shadow-direction:disabled,
.image-editor-toolbar-shadow-distance:disabled,
.image-editor-toolbar-shadow-blur:disabled,
.image-editor-toolbar-shadow-spread:disabled,
.image-editor-toolbar-shadow-opacity:disabled,
.image-editor-toolbar-corner-input:disabled,
.image-editor-toolbar-border-style:disabled {
  opacity: 0.46;
  cursor: default;
}

.image-editor-color-picker {
  position: relative;
  width: 100%;
}

/* When open, lift the whole picker (and therefore its floating panel) above the
   controls stacked below it — otherwise later rows paint over the panel and it
   looks like the picker is behind unrelated menu points. */
.image-editor-color-picker.open {
  z-index: 200;
}

.image-editor-color-picker-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #f3f3f3;
  font: inherit;
  text-align: left;
  box-sizing: border-box;
}

.image-editor-color-picker.open .image-editor-color-picker-trigger {
  border-color: rgba(246, 231, 200, 0.28);
  box-shadow: 0 0 0 1px rgba(246, 231, 200, 0.12);
}

.image-editor-color-picker.disabled .image-editor-color-picker-trigger {
  opacity: 0.46;
  cursor: default;
}

.image-editor-color-picker-trigger-swatch,
.image-editor-color-picker-preview {
  background: #ffffff;
}

.image-editor-color-picker-trigger-swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.image-editor-color-picker-trigger-value {
  min-width: 0;
  color: #f3f3f3;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.image-editor-color-picker-trigger-caret {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.image-editor-color-picker-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 200;
  display: grid;
  gap: 12px;
  width: min(290px, calc(100vw - 72px));
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, rgba(24, 24, 24, 0.99) 0%, rgba(16, 16, 16, 0.98) 100%);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.34);
  box-sizing: border-box;
}

.image-editor-color-picker-panel[hidden] {
  display: none;
}

.image-editor-color-picker-surface {
  position: relative;
  height: 176px;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  cursor: crosshair;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.image-editor-color-picker-surface-white,
.image-editor-color-picker-surface-black {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.image-editor-color-picker-surface-white {
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.image-editor-color-picker-surface-black {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}

.image-editor-color-picker-surface-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.24);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.image-editor-color-picker-strip {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.image-editor-color-picker-preview {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.image-editor-color-picker-hue {
  width: 100%;
  margin: 0;
  appearance: none;
  height: 14px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 34%, #00ffff 51%, #0000ff 68%, #ff00ff 85%, #ff0000 100%);
}

.image-editor-color-picker-hue::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.24);
}

.image-editor-color-picker-hue::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.24);
}

.image-editor-color-picker-alpha-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.image-editor-color-picker-alpha-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.image-editor-color-picker-alpha-value {
  min-width: 38px;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 700;
  color: #f3f3f3;
}

.image-editor-color-picker-alpha {
  width: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  height: 14px;
  border-radius: 999px;
  outline: none;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* Transparent → current solid colour, over a checkerboard so transparency reads clearly. */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--picker-alpha-solid, #ffffff) 100%),
    conic-gradient(#9a9a9a 0 25%, #ffffff 0 50%, #9a9a9a 0 75%, #ffffff 0) 0 0 / 10px 10px;
}

.image-editor-color-picker-alpha::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.24);
}

.image-editor-color-picker-alpha::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.24);
}

.image-editor-color-picker-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.image-editor-color-picker-channel {
  display: grid;
  gap: 6px;
}

.image-editor-color-picker-channel-input {
  width: 100%;
  min-height: 40px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
}

.image-editor-color-picker-channel-input::-webkit-outer-spin-button,
.image-editor-color-picker-channel-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.image-editor-color-picker-channel-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.image-editor-color-picker.disabled .image-editor-color-picker-hue,
.image-editor-color-picker.disabled .image-editor-color-picker-channel-input {
  opacity: 0.46;
  cursor: default;
}

.image-editor-color-picker-channel-label {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.image-editor-font-size-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.image-editor-font-size {
  width: 100%;
  accent-color: #efe3c4;
}

.image-editor-font-size-value {
  min-width: 52px;
  color: #f3eee4;
  font-size: 0.83rem;
  font-weight: 700;
  text-align: right;
}

.image-editor-font-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.image-editor-toolbar-chip-button {
  min-height: 38px;
  padding: 0 12px;
  font-size: 0.84rem;
  font-weight: 700;
}

.image-editor-toolbar-chip-button.active {
  border-color: rgba(246, 231, 200, 0.44);
  background: linear-gradient(180deg, rgba(246, 231, 200, 0.24) 0%, rgba(246, 231, 200, 0.12) 100%);
  color: #fff3d6;
}

.image-editor-stage {
  position: relative;
  min-height: 0;
  height: 100%;
  border-radius: 24px;
  /* auto (not hidden) so a zoomed-in canvas can be panned with the scrollbars */
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(24, 25, 28, 0.08);
  background:
    linear-gradient(180deg, rgba(233, 233, 230, 0.98) 0%, rgba(222, 222, 218, 1) 100%);
}

.image-editor-stage.empty {
  border: 1px dashed rgba(255, 255, 255, 0.12);
}

/* Positioned wrapper so the zoom control overlays the stage corner and stays put while the
   (scrollable) stage is panned when zoomed in. Fills the stage-card's flexible grid row. */
.image-editor-stage-wrap {
  position: relative;
  min-height: 0;
  min-width: 0;
  display: flex;
}

.image-editor-stage-wrap > .image-editor-stage {
  flex: 1 1 auto;
  min-width: 0;
}

.image-editor-zoom-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(27, 28, 31, 0.82);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
}

.image-editor-zoom-value {
  min-width: 50px;
  padding: 0 2px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #e0e0e2;
  user-select: none;
}

.image-editor-empty-stage {
  display: grid;
  gap: 10px;
  max-width: 420px;
  padding: 32px;
  text-align: center;
  color: #b9b9b9;
  line-height: 1.6;
}

.image-editor-empty-stage > :first-child {
  color: #e1e2e4;
  font-size: 1.08rem;
  font-weight: 700;
}

.image-editor-canvas-surface {
  position: relative;
  flex: 0 0 auto;
  /* Auto margins centre the canvas when it fits AND keep every edge reachable by scroll when it is
     zoomed larger than the stage (flexbox auto margins collapse to 0 on overflow). */
  margin: auto;
  border-radius: 2px;
  /* `visible` (was `hidden`) lets overlays dragged past the page edge keep painting
     into the surrounding stage instead of being clipped away; the portion that
     spills outside the page frame is ghosted by the overlay-layer mask below.
     Export paths re-derive from the model and clip at the page edge independently,
     so neither the bleed nor the ghosting leaks into downloads. */
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 249, 247, 1) 100%);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px rgba(25, 26, 29, 0.06);
}

/* Off-page ghosting veil. A transparent box the exact size of the page (inset:0 of
 * the surface) whose huge box-shadow spread fills EVERYTHING outside the page frame.
 * The colour matches the stage background (.image-editor-stage), so over the empty
 * grey margins it is invisible (grey over grey), while over the part of an overlay
 * that spills past the page edge it blends the overflow toward the background — the
 * exact result of reducing that overlay's opacity there (0.55 alpha ~= 45% opacity).
 * box-shadow (vs a real element or a mask) never expands the stage's scroll area and
 * is clipped to the stage viewport, and it sidesteps the mask/overflow-clipping
 * fragility entirely. z-index:3 paints above the overlay layer (2) so off-page
 * overlays are faded, but below the selection marquee (10); pointer-events:none keeps
 * off-page overlays fully draggable. Editor-only — exports re-derive from the model
 * and clip at the page edge, so this never reaches a download. */
.image-editor-offpage-dimmer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 0 9999px rgba(228, 228, 224, 0.55);
}

.image-editor-stage-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  z-index: 1;
}

.image-editor-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
}

.image-editor-selection-marquee {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  border: 1px solid rgba(25, 26, 29, 0.72);
  background: rgba(246, 231, 200, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
  box-sizing: border-box;
}

.image-editor-selection-marquee[hidden] {
  display: none;
}

/* Keynote-style group selection box: one outline that grows to contain every selected
 * overlay (drawn by renderGroupSelectionBox when 2+ overlays are selected). The box is
 * click-through — drag any member to move the whole set — while its 8 handles scale the
 * group proportionally. Sits above the off-page dimmer so it stays crisp near the edge. */
.image-editor-group-box {
  position: absolute;
  z-index: 11;
  pointer-events: none;
  border: 1.5px solid #191a1d;
  box-sizing: border-box;
}

.image-editor-group-box[hidden] {
  display: none;
}

.image-editor-group-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #e8e9eb;
  border-radius: 999px;
  background: #191a1d;
  box-sizing: border-box;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
  pointer-events: auto;
}

.image-editor-group-handle[data-handle="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.image-editor-group-handle[data-handle="n"]  { left: calc(50% - 6px); top: -7px; cursor: ns-resize; }
.image-editor-group-handle[data-handle="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.image-editor-group-handle[data-handle="e"]  { right: -7px; top: calc(50% - 6px); cursor: ew-resize; }
.image-editor-group-handle[data-handle="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.image-editor-group-handle[data-handle="s"]  { left: calc(50% - 6px); bottom: -7px; cursor: ns-resize; }
.image-editor-group-handle[data-handle="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.image-editor-group-handle[data-handle="w"]  { left: -7px; top: calc(50% - 6px); cursor: ew-resize; }

/* Rotation dot for the multi-select group box — floats above top-center, joined by a stem,
 * spins the whole selection about its centroid. */
.image-editor-group-rotate-handle {
  position: absolute;
  left: calc(50% - 6px);
  top: -34px;
  width: 12px;
  height: 12px;
  border: 2px solid #e8e9eb;
  border-radius: 999px;
  background: #191a1d;
  box-sizing: border-box;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
  pointer-events: auto;
  cursor: grab;
}

.image-editor-group-rotate-handle::after {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: 12px;
  width: 2px;
  height: 22px;
  background: #191a1d;
  pointer-events: none;
}

/* While 2+ overlays are selected, hide the per-overlay outline + handles so only the single
 * group box shows (the whole point: one growing outline, not N separate ones). */
.image-editor-overlay-layer.has-multi-selection
  .image-editor-overlay-shell.selected > .image-editor-overlay-selection {
  display: none !important;
}

/* Smart alignment guides: thin lines shown while dragging/resizing when an edge or center of the
 * moving box snaps to the canvas or another overlay. Span the full surface; sit above overlays but
 * are click-through. Magenta reads clearly on both the white canvas and dark shapes. */
.image-editor-align-guide {
  position: absolute;
  z-index: 12;
  pointer-events: none;
  background: #ff2d7e;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.35);
}

.image-editor-align-guide-v {
  top: 0;
  bottom: 0;
  width: 1px;
}

.image-editor-align-guide-h {
  left: 0;
  right: 0;
  height: 1px;
}

.image-editor-align-guide[hidden] {
  display: none;
}

.image-editor-context-menu {
  position: absolute;
  z-index: 12;
  display: grid;
  gap: 6px;
  min-width: 180px;
  padding: 8px;
  border: 1px solid rgba(25, 26, 29, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
  box-sizing: border-box;
}

.image-editor-context-menu[hidden] {
  display: none;
}

.image-editor-context-menu-action {
  appearance: none;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #191a1d;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.image-editor-context-menu-action:hover {
  background: rgba(25, 26, 29, 0.08);
}

.image-editor-context-menu-action.disabled,
.image-editor-context-menu-action:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.image-editor-context-menu-action.disabled:hover,
.image-editor-context-menu-action:disabled:hover {
  background: transparent;
}

.image-editor-context-submenu {
  position: relative;
  display: grid;
  gap: 0;
}

.image-editor-context-submenu[hidden] {
  display: none;
}

.image-editor-context-submenu.disabled > .image-editor-context-submenu-panel {
  display: none !important;
}

.image-editor-context-submenu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.image-editor-context-submenu-trigger::after {
  content: ">";
  color: rgba(25, 26, 29, 0.54);
  font-size: 0.82rem;
  font-weight: 800;
}

.image-editor-context-submenu-panel {
  display: none;
  position: absolute;
  top: -8px;
  left: calc(100% - 4px);
  z-index: 13;
  min-width: 168px;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(25, 26, 29, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
  box-sizing: border-box;
}

.image-editor-context-submenu:not(.disabled):hover > .image-editor-context-submenu-panel,
.image-editor-context-submenu:not(.disabled):focus-within > .image-editor-context-submenu-panel {
  display: grid;
}

.image-editor-context-submenu-panel .image-editor-context-menu-action {
  min-height: 34px;
  font-size: 0.8rem;
  font-weight: 600;
}

.image-editor-overlay-shell {
  position: absolute;
  pointer-events: auto;
  cursor: move;
  touch-action: none;
  box-sizing: border-box;
  user-select: none;
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.image-editor-overlay-shell.selected {
  z-index: 3;
}

.image-editor-overlay-selection {
  position: absolute;
  inset: -8px;
  display: none;
  border: 2px solid #191a1d;
  border-radius: 0;
  pointer-events: none;
  z-index: 5;
}

.image-editor-overlay-shell.selected > .image-editor-overlay-selection {
  display: block;
}

.image-editor-overlay-handle {
  display: none;
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #e8e9eb;
  border-radius: 999px;
  background: #191a1d;
  box-sizing: border-box;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
  pointer-events: auto;
}

.image-editor-overlay-shell.active-selection > .image-editor-overlay-selection > .image-editor-overlay-handle {
  display: block;
}

.image-editor-overlay-handle[data-handle="line-start"],
.image-editor-overlay-handle[data-handle="line-toggle"],
.image-editor-overlay-handle[data-handle="line-end"] {
  display: none;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.image-editor-overlay-shell:not(.image-editor-overlay-shell-line) > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="line-start"],
.image-editor-overlay-shell:not(.image-editor-overlay-shell-line) > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="line-toggle"],
.image-editor-overlay-shell:not(.image-editor-overlay-shell-line) > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="line-end"] {
  display: none !important;
}

.image-editor-overlay-shell-line > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="nw"],
.image-editor-overlay-shell-line > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="n"],
.image-editor-overlay-shell-line > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="ne"],
.image-editor-overlay-shell-line > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="e"],
.image-editor-overlay-shell-line > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="se"],
.image-editor-overlay-shell-line > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="s"],
.image-editor-overlay-shell-line > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="sw"],
.image-editor-overlay-shell-line > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="w"] {
  display: none !important;
}

.image-editor-overlay-shell-line.active-selection > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="line-start"],
.image-editor-overlay-shell-line.active-selection > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="line-toggle"],
.image-editor-overlay-shell-line.active-selection > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="line-end"] {
  display: block;
}

.image-editor-overlay-line-handle {
  border-color: #e8e9eb;
  background: #191a1d;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.26);
}

.image-editor-overlay-line-handle[data-handle="line-start"],
.image-editor-overlay-line-handle[data-handle="line-end"] {
  cursor: grab;
}

.image-editor-overlay-line-handle[data-handle="line-toggle"] {
  width: 16px;
  height: 16px;
  border-color: #191a1d;
  background: #f7f1df;
  cursor: grab;
}

.image-editor-overlay-line-handle[data-handle="line-toggle"].curved {
  background: #191a1d;
  border-color: #f7f1df;
}

/* On-canvas advanced-gradient handles: a start dot, an end dot, and a connector line. Positioned by
 * updateGradientSelectionHandles and gated on the [hidden] attribute it sets, so they appear only for a
 * singly-selected box carrying an advanced-gradient fill (deck-style origin/direction control). */
.image-editor-overlay-handle[data-handle="grad-start"],
.image-editor-overlay-handle[data-handle="grad-end"] {
  display: none !important;
  width: 16px;
  height: 16px;
  border: 2px solid #e8e9eb;
  background: #1e40af;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
}

.image-editor-overlay-handle[data-handle="grad-start"] {
  background: #e8e9eb;
  border-color: #1e40af;
}

.image-editor-overlay-handle[data-handle="grad-start"]:active,
.image-editor-overlay-handle[data-handle="grad-end"]:active {
  cursor: grabbing;
}

.image-editor-overlay-shell.active-selection > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="grad-start"]:not([hidden]),
.image-editor-overlay-shell.active-selection > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="grad-end"]:not([hidden]) {
  display: block !important;
}

.image-editor-overlay-grad-line {
  display: none;
  position: absolute;
  height: 2px;
  background: #e8e9eb;
  transform-origin: 0 50%;
  pointer-events: none;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.49);
  z-index: 4;
}

.image-editor-overlay-shell.active-selection > .image-editor-overlay-selection > .image-editor-overlay-grad-line:not([hidden]) {
  display: block;
}

.image-editor-overlay-handle[data-handle="nw"] {
  left: -7px;
  top: -7px;
  cursor: nwse-resize;
}

.image-editor-overlay-handle[data-handle="n"] {
  left: calc(50% - 6px);
  top: -7px;
  cursor: ns-resize;
}

.image-editor-overlay-handle[data-handle="ne"] {
  right: -7px;
  top: -7px;
  cursor: nesw-resize;
}

.image-editor-overlay-handle[data-handle="e"] {
  right: -7px;
  top: calc(50% - 6px);
  cursor: ew-resize;
}

.image-editor-overlay-handle[data-handle="se"] {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.image-editor-overlay-handle[data-handle="s"] {
  left: calc(50% - 6px);
  bottom: -7px;
  cursor: ns-resize;
}

.image-editor-overlay-handle[data-handle="sw"] {
  left: -7px;
  bottom: -7px;
  cursor: nesw-resize;
}

.image-editor-overlay-handle[data-handle="w"] {
  left: -7px;
  top: calc(50% - 6px);
  cursor: ew-resize;
}

/* Rotation dot: a handle floating above the top-center of the selection, joined to the
 * outline by a short stem (Keynote/deck style). Dragging it spins the overlay about its
 * centre via the 'rotate' drag mode. */
.image-editor-overlay-handle[data-handle="rotate"] {
  left: calc(50% - 6px);
  top: -34px;
  cursor: grab;
}

.image-editor-overlay-handle[data-handle="rotate"]::after {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: 12px;
  width: 2px;
  height: 22px;
  background: #191a1d;
  pointer-events: none;
}

/* Line shapes rotate via their endpoints, so no rotation dot. */
.image-editor-overlay-shell-line > .image-editor-overlay-selection > .image-editor-overlay-handle[data-handle="rotate"] {
  display: none !important;
}

.image-editor-overlay-shell-text {
  border: 0 solid transparent;
  border-radius: 18px;
  background: transparent;
  backdrop-filter: none;
}

.image-editor-overlay-shell.frame-active {
  box-shadow: none;
}

.image-editor-overlay-shell-box,
.image-editor-overlay-shell-image {
  background: transparent;
  box-shadow: none;
}

.image-editor-overlay-shell-line {
  border: 0 solid transparent;
  border-radius: 0;
  background: transparent;
}

.image-editor-overlay-shell:active {
  cursor: move;
}

.image-editor-overlay-input {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 12px 18px;
  border: none;
  outline: none;
  background: transparent;
  color: #b7b7b7;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.18;
  box-sizing: border-box;
  cursor: text;
  resize: none;
  /* Never a scrollbar on a canvas element: the shell grows to contain its text instead
     (fitOverlayToText in ImageEditorView). `hidden auto` used to put a scrollbar down the
     right edge of every box whose text outgrew it — a design artefact that is not in the
     design, and that the server renderer never draws. */
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
}

.image-editor-overlay-shape {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  border-radius: inherit;
  background: transparent;
}

/* Text-in-shape / text-on-image: a box or image overlay's contenteditable text layer sits ON TOP of
   the SVG shape / picture, filling the shell so the text is centred over the fill/border. The
   shape/img stays static behind it; only the input is lifted out of flow so the children don't stack. */
.image-editor-overlay-shell-box > .image-editor-overlay-input,
.image-editor-overlay-shell-image > .image-editor-overlay-input {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.image-editor-overlay-shape-path {
  vector-effect: non-scaling-stroke;
  box-sizing: border-box;
}

/* Icons are image overlays carrying an inline SVG (see IconLibraryService). Unlike a photo they must
   never be cropped, so they letterbox inside a non-square box — mirrored by the server renderer's
   renderImage(). Keyed off the overlay's data-icon-name, which survives a save/restore round-trip. */
.image-editor-overlay-shell[data-icon-name] .image-editor-overlay-image {
  object-fit: contain;
}

/* Post-type editor → Post length: exact/min slide count, the open-end toggle and its max. */
.account-editor-slide-count-row {
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
}

.account-editor-slide-count-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.account-editor-slide-count-block .media-subtitle {
  font-size: 0.7rem;
  line-height: 1.45;
}

/* The open-end tile sits in a field row, so it should match the inputs' height rather than the
   toggle grid's card proportions. */
.account-editor-slide-count-row .account-editor-toggle-tile {
  flex: 1 1 190px;
  min-height: 56px;
}

/* Meta tab (both inspectors) — flags describing what an element IS to downstream automation,
   not how it looks. Today: Exchangeable. */
.image-editor-meta-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px 2px;
}

.image-editor-meta-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: var(--app-radius-control-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.image-editor-meta-toggle:hover {
  border-color: rgba(246, 231, 200, 0.24);
}

.image-editor-meta-toggle-input {
  width: 15px;
  height: 15px;
  accent-color: #f6e7c8;
  cursor: pointer;
  flex: 0 0 auto;
}

.image-editor-meta-toggle-input:disabled {
  cursor: default;
  opacity: 0.4;
}

.image-editor-meta-toggle-caption {
  font-size: 0.82rem;
  font-weight: 600;
  color: #f6e7c8;
}

.image-editor-meta-flag {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.image-editor-meta-hint {
  display: block;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(246, 231, 200, 0.6);
  padding: 0 2px;
}

/* Icon picker: search row + result swatches, reusing the emoji grid's layout. */
.image-editor-icon-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 10px;
}

.image-editor-icon-color-input {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--app-radius-control-md);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.image-editor-icon-option-preview {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto;
  pointer-events: none;
}

.image-editor-icon-empty {
  display: block;
  padding: 14px 2px;
  font-size: 0.78rem;
  color: rgba(246, 231, 200, 0.6);
}

.image-editor-shape-category-preview-icons::before {
  content: "★";
  font-size: 18px;
  line-height: 1;
  color: #f6e7c8;
}

/* Imported-element library: the "Elements" category tile, the empty-state hint in its grid,
   and the "Import elements" action pinned to the bottom of the Tools tab. */
.image-editor-shape-category-preview-elements::before {
  content: "◈";
  font-size: 18px;
  line-height: 1;
  color: #f6e7c8;
}

.image-editor-shape-empty-hint {
  display: block;
  grid-column: 1 / -1;
  padding: 14px 2px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(246, 231, 200, 0.6);
}

.image-editor-tools-footer {
  display: grid;
  gap: 2px;
  padding-top: 4px;
  border-top: 1px solid rgba(246, 231, 200, 0.12);
}

/* The "Import pptx" shortcut is a Vaadin Upload wearing a plain button: Upload owns the native
   file chooser, so the button has to come from one. Strip the component's own chrome (drop zone,
   file list, sizing) so only the button shows and it lines up with the row above it. */
.image-editor-import-pptx-upload {
  width: 100%;
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.image-editor-import-pptx-upload::part(drop-label),
.image-editor-import-pptx-upload::part(commands),
.image-editor-import-pptx-upload [slot="drop-label"],
.image-editor-import-pptx-upload vaadin-upload-file-list {
  display: none !important;
}

.image-editor-import-pptx-button {
  width: 100%;
  margin: 0;
}

.image-editor-import-elements-button {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(246, 231, 200, 0.82);
}

.image-editor-import-elements-button:hover {
  color: #f6e7c8;
}

.image-editor-import-elements-button vaadin-icon {
  width: 15px;
  height: 15px;
}

.image-editor-overlay-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.image-editor-overlay-input::placeholder {
  color: #1e1f22;
}

@media (max-width: 1100px) {
  .image-editor-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .image-editor-stage {
    min-height: 540px;
  }

  .image-editor-font-popover {
    width: min(420px, calc(100vw - 80px));
  }
}

@media (max-width: 760px) {
  .image-editor-heading-export-button {
    width: auto;
  }

  .image-editor-workspace {
    gap: 16px;
    padding: 12px 0 18px;
  }

  .image-editor-tool-rail,
  .image-editor-stage-card {
    border-radius: 22px;
  }

  .image-editor-tool-button {
    min-height: 74px;
  }

  .image-editor-tools-body {
    grid-template-columns: 64px 1px minmax(0, 1fr);
    gap: 12px;
  }

  .image-editor-tools-body .image-editor-tool-tab-button {
    width: 64px;
    min-height: 64px;
    border-radius: 18px;
  }

  .image-editor-rail-tab-button {
    min-height: 46px;
  }

  .image-editor-tool-tab-button {
    min-height: 66px;
    border-radius: 18px;
  }

  .image-editor-tool-panel {
    padding: 14px;
    border-radius: 18px;
  }

  .image-editor-shape-category-button,
  .image-editor-shape-option-button {
    min-height: 96px;
  }

  .image-editor-stage-card {
    padding: 14px;
  }

  .image-editor-toolbar {
    gap: 10px;
  }

  .image-editor-toolbar-status {
    flex-basis: 100%;
  }

  .image-editor-transform-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .image-editor-shape-recent-grid,
  .image-editor-shape-category-grid,
  .image-editor-shape-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .image-editor-emoji-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .image-editor-toolbar-transparency-group {
    width: 100%;
  }

  .image-editor-font-popover {
    left: 0;
    right: auto;
    width: min(420px, calc(100vw - 32px));
    min-width: 0;
  }

  .image-editor-toolbar-style-popover {
    width: min(220px, calc(100vw - 32px));
  }

  .image-editor-font-size-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .image-editor-stage {
    min-height: 420px;
  }

  .image-editor-overlay-input {
    font-size: 1.06rem;
    padding: 11px 14px;
  }
}

@media (max-width: 1380px) {
  .calendar-year-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .calendar-month-day {
    min-height: 144px;
  }
}

@media (max-width: 1100px) {
  .calendar-toolbar {
    align-items: flex-start;
  }

  .calendar-main-layout {
    flex-direction: column;
  }

  .calendar-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 280px;
  }

  .calendar-range-block {
    order: -1;
    width: 100%;
  }

  .calendar-year-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .calendar-year-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-range-label {
    font-size: 1.04rem;
  }

  .calendar-mode-toggle {
    width: 100%;
  }

  .calendar-sidebar-filters {
    width: 100%;
  }

  .calendar-mode-button {
    flex: 1 1 0;
    justify-content: center;
  }

  .calendar-sidebar-filter-button {
    flex: 1 1 0;
    justify-content: center;
  }
}

.video-editor-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #0e0f10;
  color: var(--app-text);
}

.video-editor-header {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  padding: 16px 18px 0;
  box-sizing: border-box;
}

.video-editor-header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.video-editor-toolbar-button {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #f3f4f6;
  font-weight: 750;
}

.video-editor-render-button {
  background: linear-gradient(180deg, #edf2f7 0%, #cfd8e3 100%);
  color: #111318;
}

.video-editor-workspace {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(430px, 1fr) minmax(260px, 320px);
  gap: 12px;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 18px;
  box-sizing: border-box;
}

.video-editor-picker-column {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.video-editor-picker-rail {
  display: grid;
  grid-auto-rows: 38px;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.video-editor-picker-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(232, 233, 236, 0.68);
  appearance: none;
  cursor: pointer;
}

.video-editor-picker-toggle:hover,
.video-editor-picker-toggle[data-active="true"] {
  border-color: rgba(104, 211, 145, 0.42);
  background: rgba(104, 211, 145, 0.12);
  color: #eafff0;
}

.video-editor-picker-toggle vaadin-icon,
.video-editor-picker-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.video-editor-picker-stack,
.video-editor-editor-side {
  display: grid;
  min-width: 0;
  min-height: 0;
}

.video-editor-editor-side {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.video-editor-editor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.video-editor-editor-actions .video-editor-toolbar-button {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  justify-content: center;
}

.video-editor-editor-actions .video-editor-render-button {
  grid-column: 1 / -1;
}

.video-editor-panel {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(24, 25, 27, 0.98) 0%, rgba(16, 17, 19, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  box-sizing: border-box;
}

.video-editor-picker-panel,
.video-editor-inspector {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  overflow: hidden;
}

.video-editor-picker-panel[hidden] {
  display: none;
}

.video-editor-inspector {
  grid-template-rows: auto auto auto auto auto;
  align-content: start;
  overflow-y: auto;
}

.video-editor-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.video-editor-panel-title {
  min-width: 0;
  overflow: hidden;
  color: #f8fafc;
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-editor-panel-count {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(232, 233, 236, 0.64);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1;
}

.video-editor-search {
  --lumo-border-radius-m: 8px;
}

.video-editor-media-scroller {
  min-width: 0;
  min-height: 0;
}

.video-editor-media-grid {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding-right: 2px;
}

.video-editor-media-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 6px 10px;
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.video-editor-media-card:hover,
.video-editor-media-card.active {
  border-color: rgba(104, 211, 145, 0.42);
  background: rgba(104, 211, 145, 0.08);
}

.video-editor-media-card:hover {
  transform: translateY(-1px);
}

.video-editor-audio-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 5px 9px;
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
  box-sizing: border-box;
}

.video-editor-audio-card:hover,
.video-editor-audio-card.active {
  border-color: rgba(104, 211, 145, 0.42);
  background: rgba(104, 211, 145, 0.08);
}

.video-editor-audio-card-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(104, 211, 145, 0.22), rgba(46, 126, 80, 0.16)),
    rgba(0, 0, 0, 0.22);
  color: #eafff0;
}

.video-editor-audio-card-icon vaadin-icon,
.video-editor-audio-card-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.video-editor-media-thumb {
  position: relative;
  grid-row: 1 / span 2;
  aspect-ratio: 16 / 9;
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #070808;
}

.video-editor-media-thumb-image,
.video-editor-media-thumb-demo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-editor-media-thumb-demo {
  background:
    linear-gradient(135deg, rgba(104, 211, 145, 0.55) 0%, rgba(104, 211, 145, 0.06) 38%),
    linear-gradient(315deg, rgba(251, 191, 36, 0.44) 0%, rgba(59, 130, 246, 0.18) 52%, #101113 100%);
}

.video-editor-media-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #e8e9eb;
  background: rgba(0, 0, 0, 0.24);
}

.video-editor-media-play svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.video-editor-media-title,
.video-editor-media-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-editor-media-title {
  align-self: end;
  color: #f7fafc;
  font-size: 0.84rem;
  font-weight: 800;
}

.video-editor-media-meta {
  align-self: start;
  color: rgba(232, 233, 236, 0.56);
  font-size: 0.72rem;
  line-height: 1.25;
}

.video-editor-empty {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.video-editor-empty-title {
  color: #f4f6f8;
  font-size: 0.88rem;
  font-weight: 800;
}

.video-editor-empty-copy {
  color: rgba(232, 233, 236, 0.58);
  font-size: 0.78rem;
  line-height: 1.35;
}

.video-editor-preview-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
}

.video-editor-stage-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.video-editor-source-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.video-editor-source-title,
.video-editor-source-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-editor-source-title {
  color: #f8fafc;
  font-size: 0.98rem;
  font-weight: 850;
}

.video-editor-source-meta {
  color: rgba(232, 233, 236, 0.58);
  font-size: 0.76rem;
  line-height: 1.2;
}

.video-editor-stage-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.video-editor-icon-button,
.video-editor-play-button,
.video-editor-segment-button,
.video-editor-clip {
  margin: 0;
  border: 0;
  font: inherit;
  appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.video-editor-icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(232, 233, 236, 0.78);
}

.video-editor-icon-button:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.075);
  color: #e8e9eb;
}

.video-editor-icon-button vaadin-icon,
.video-editor-icon-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.video-editor-preview-viewport {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 300px;
  /* The frame below sizes itself against this box (cqw/cqh). It is a 1fr grid track, so its size
     never comes from its content. */
  container-type: size;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    #070808;
  background-size: 44px 44px;
}

.video-editor-preview-video,
.video-editor-preview-image,
.video-editor-preview-placeholder {
  grid-area: 1 / 1;
  /* The project's own frame (set as --preview-aspect on the viewport): a 9:16 reel previews tall, a
     16:9 cut previews wide. The WIDTH is the smallest of: the stage's width, 980px, and the width the
     stage's height allows at this ratio — so the box always keeps the frame's exact ratio. It used to
     be height:100% with a max-width, which squeezed a wide frame narrower than 16:9 whenever the cap
     hit, and object-fit:cover then trimmed both sides of every landscape still. */
  aspect-ratio: var(--preview-aspect, 16 / 9);
  width: min(100cqw, 980px, 100cqh * (var(--preview-aspect, 16 / 9)));
  height: auto;
  border-radius: 6px;
  object-fit: contain;
  background: #050607;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.36);
  transform-origin: center;
}

.video-editor-preview-video[hidden],
.video-editor-preview-image[hidden] {
  display: none;
}

.video-editor-preview-placeholder {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(48, 64, 82, 0.82) 0%, rgba(11, 13, 15, 0.92) 55%),
    #090a0b;
}

.video-editor-preview-placeholder[data-empty="false"] {
  opacity: 0;
  pointer-events: none;
}

.video-editor-placeholder-hero {
  width: min(60%, 520px);
  height: 34%;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(104, 211, 145, 0.82) 0%, rgba(59, 130, 246, 0.48) 55%, rgba(251, 191, 36, 0.56) 100%);
}

.video-editor-placeholder-title,
.video-editor-placeholder-caption {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.video-editor-placeholder-title {
  width: min(46%, 360px);
}

.video-editor-placeholder-caption {
  width: min(30%, 240px);
  opacity: 0.5;
}

.video-editor-placeholder-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: min(58%, 480px);
  height: 44px;
}

.video-editor-placeholder-waveform span {
  display: block;
  width: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
}

.video-editor-preview-overlay,
.video-editor-preview-guides {
  position: absolute;
  inset: 20px;
  pointer-events: none;
}

[data-preview-transform-layer] {
  pointer-events: none;
  touch-action: none;
  transform-origin: center;
}

[data-preview-transform-layer][data-active="true"] {
  pointer-events: auto;
  cursor: grab;
}

.video-editor-preview-transform-active[data-active="true"] {
  outline: 2px solid rgba(104, 211, 145, 0.9);
  outline-offset: 4px;
}

.video-editor-preview-video.video-editor-preview-transform-active[data-active="true"] {
  box-shadow:
    0 0 0 2px rgba(104, 211, 145, 0.9),
    0 22px 54px rgba(0, 0, 0, 0.36);
}

.video-editor-preview-transform-dragging,
body.video-editor-preview-editing {
  cursor: grabbing;
}

body.video-editor-preview-editing {
  user-select: none;
}

.video-editor-preview-title-layer {
  position: absolute;
  left: 7%;
  bottom: 10%;
  max-width: 58%;
  padding: 9px 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.52);
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 140ms ease, outline-color 120ms ease;
}

.video-editor-preview-title-layer[data-active="true"] {
  opacity: 1;
  transform: translateY(0);
}

.video-editor-preview-video-slate {
  position: absolute;
  top: 8%;
  left: 7%;
  display: grid;
  gap: 3px;
  max-width: 48%;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.48);
  color: #ffffff;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 140ms ease;
}

.video-editor-preview-video-slate[data-active="true"] {
  opacity: 1;
  transform: translateY(0);
}

.video-editor-preview-video-title,
.video-editor-preview-video-meta,
.video-editor-preview-lower-title,
.video-editor-preview-lower-meta,
.video-editor-preview-end-title,
.video-editor-preview-end-meta,
.video-editor-preview-audio-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-editor-preview-video-title {
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.1;
}

.video-editor-preview-video-meta {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
}

.video-editor-preview-lower-third {
  position: absolute;
  left: 7%;
  bottom: 10%;
  display: grid;
  gap: 4px;
  max-width: 46%;
  padding: 10px 13px 11px;
  border-left: 4px solid rgba(104, 211, 145, 0.92);
  border-radius: 6px;
  background: rgba(4, 8, 10, 0.7);
  color: #ffffff;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 140ms ease, outline-color 120ms ease;
}

.video-editor-preview-lower-third[data-active="true"] {
  opacity: 1;
  transform: translateX(0);
}

.video-editor-preview-lower-title {
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.1;
}

.video-editor-preview-lower-meta {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
}

.video-editor-preview-end-frame {
  position: absolute;
  inset: 8%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(11, 18, 22, 0.86), rgba(14, 16, 18, 0.54)),
    rgba(0, 0, 0, 0.46);
  color: #ffffff;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 140ms ease, outline-color 120ms ease;
}

.video-editor-preview-end-frame[data-active="true"] {
  opacity: 1;
  transform: scale(1);
}

.video-editor-preview-end-title {
  max-width: 72%;
  font-size: 1.55rem;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
}

.video-editor-preview-end-meta {
  max-width: 72%;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
}

.video-editor-preview-audio-layer {
  position: absolute;
  right: 7%;
  bottom: 10%;
  display: grid;
  grid-template-columns: auto minmax(0, 120px);
  align-items: center;
  gap: 10px;
  max-width: 32%;
  padding: 8px 10px;
  border: 1px solid rgba(104, 211, 145, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.54);
  color: #eafff0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 140ms ease, outline-color 120ms ease;
}

.video-editor-preview-audio-layer[data-active="true"] {
  opacity: 1;
  transform: translateY(0);
}

.video-editor-preview-audio-meters {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 54px;
  height: 22px;
}

.video-editor-preview-audio-meters span {
  width: 3px;
  height: var(--meter-height);
  border-radius: 999px;
  background: linear-gradient(180deg, #b6f7cf, #68d391);
  animation: video-editor-meter-pulse 820ms ease-in-out infinite alternate;
}

.video-editor-preview-audio-meters span:nth-child(2n) {
  animation-delay: 160ms;
}

.video-editor-preview-audio-meters span:nth-child(3n) {
  animation-delay: 280ms;
}

.video-editor-preview-audio-title {
  color: #eafff0;
  font-size: 0.7rem;
  font-weight: 850;
}

@keyframes video-editor-meter-pulse {
  from {
    transform: scaleY(0.62);
    opacity: 0.66;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

.video-editor-preview-badge {
  position: absolute;
  top: 8%;
  right: 7%;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.44);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 800;
}

.video-editor-preview-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(104, 211, 145, 0.86);
}

.video-editor-preview-handle.top-left {
  top: 11%;
  left: 6%;
  border-right: 0;
  border-bottom: 0;
}

.video-editor-preview-handle.top-right {
  top: 11%;
  right: 6%;
  border-left: 0;
  border-bottom: 0;
}

.video-editor-preview-handle.bottom-left {
  bottom: 11%;
  left: 6%;
  border-top: 0;
  border-right: 0;
}

.video-editor-preview-handle.bottom-right {
  right: 6%;
  bottom: 11%;
  border-top: 0;
  border-left: 0;
}

.video-editor-guide {
  position: absolute;
  background: rgba(255, 255, 255, 0.13);
}

.video-editor-guide.vertical {
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
}

.video-editor-guide.horizontal {
  left: 7%;
  right: 7%;
  top: 50%;
  height: 1px;
}

.video-editor-transport,
.video-editor-timeline-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.video-editor-play-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 84px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(104, 211, 145, 0.36);
  border-radius: 8px;
  background: rgba(104, 211, 145, 0.12);
  color: #eafff0;
  font-weight: 850;
}

.video-editor-play-icon-stack {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
}

.video-editor-play-icon {
  grid-area: 1 / 1;
  width: 14px;
  height: 14px;
  fill: currentColor;
  opacity: 1;
  transform: scale(1);
  transition: opacity 120ms ease, transform 120ms ease;
}

.video-editor-play-icon.pause {
  opacity: 0;
  transform: scale(0.84);
}

.video-editor-play-button[data-playing="true"] .video-editor-play-icon:not(.pause) {
  opacity: 0;
  transform: scale(0.84);
}

.video-editor-play-button[data-playing="true"] .video-editor-play-icon.pause {
  opacity: 1;
  transform: scale(1);
}

.video-editor-transport-label {
  line-height: 1;
}

.video-editor-timecode {
  flex: 0 0 auto;
  color: rgba(232, 233, 236, 0.72);
  font-size: 0.76rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.video-editor-scrubber {
  position: relative;
  flex: 1 1 auto;
  min-width: 80px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  cursor: pointer;
}

.video-editor-scrub-progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(104, 211, 145, 0.86), rgba(59, 130, 246, 0.82));
}

.video-editor-inspector-active {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: #f8fafc;
  font-size: 0.84rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-editor-inspector-section {
  display: grid;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.video-editor-section-title {
  color: rgba(232, 233, 236, 0.66);
  font-size: 0.76rem;
  font-weight: 850;
}

.video-editor-section-body {
  display: grid;
  gap: 10px;
}

.video-editor-segmented-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.video-editor-segment-button {
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  border-radius: 6px;
  background: transparent;
  color: rgba(232, 233, 236, 0.62);
  font-size: 0.74rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-editor-segment-button.active {
  background: rgba(255, 255, 255, 0.12);
  color: #e8e9eb;
}

.video-editor-range-control {
  display: grid;
  grid-template-columns: minmax(76px, 0.38fr) minmax(0, 1fr) 52px;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.video-editor-range-name,
.video-editor-range-value,
.video-editor-zoom-label {
  color: rgba(232, 233, 236, 0.58);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1;
}

.video-editor-range-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-editor-range-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.video-editor-range-input,
.video-editor-zoom-input {
  width: 100%;
  accent-color: #68d391;
}

.video-editor-timeline {
  /* Sized to the tracks it holds (a music bed adds a lane), capped so the preview keeps the stage. */
  flex: 0 0 auto;
  max-height: 44vh;
  align-self: stretch;
  width: calc(100% - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  margin: 0 18px 16px;
  padding: 12px;
  overflow: hidden;
}

.video-editor-timeline-controls {
  flex-wrap: wrap;
}

.video-editor-timeline-controls > .video-editor-panel-title {
  margin-right: auto;
}

.video-editor-zoom {
  display: grid;
  grid-template-columns: auto minmax(90px, 150px);
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* The scrolling viewport onto the timeline: more tracks than fit scroll down, a zoomed-in timeline
   scrolls across. */
.video-editor-timeline-lanes {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior-x: contain;
}

/* The timeline at the current zoom (--timeline-zoom, set by the editor; 1 = fits the lanes). Only the
   time part widens — the 84px track header column stays put. */
.video-editor-timeline-canvas {
  position: relative;
  display: grid;
  /* The ruler, then a row per track — however many the project has (music gets its own). */
  grid-template-rows: 28px;
  grid-auto-rows: auto;
  gap: 7px;
  width: calc(84px + (100% - 84px) * var(--timeline-zoom, 1));
  min-width: 100%;
  box-sizing: border-box;
}

/* The track headers stay in view while the lanes scroll across under them. */
.video-editor-track-header {
  position: sticky;
  left: 0;
  z-index: 5;
}

.video-editor-ruler,
.video-editor-track {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.video-editor-track {
  min-height: 48px;
  transition: min-height 140ms ease, opacity 140ms ease;
}

.video-editor-track[data-track-layer="video"] {
  min-height: 62px;
}

.video-editor-track.collapsed {
  min-height: 30px;
}

.video-editor-track.reordering {
  z-index: 6;
  opacity: 0.9;
}

.video-editor-ruler {
  position: relative;
}

.video-editor-ruler::before {
  content: "";
  grid-column: 2;
  align-self: end;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.video-editor-ruler-tick {
  position: absolute;
  bottom: 3px;
  transform: translateX(-50%);
  color: rgba(232, 233, 236, 0.46);
  font-size: 0.68rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.video-editor-track-header {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  padding: 5px;
  border-radius: 6px;
  /* Opaque: it is sticky, and clips scroll by underneath it. */
  background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), #141517;
  box-sizing: border-box;
}

.video-editor-track-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: rgba(232, 233, 236, 0.62);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-editor-track-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
}

.video-editor-track-control-button {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(232, 233, 236, 0.66);
  appearance: none;
  cursor: pointer;
}

.video-editor-track-control-button:hover,
.video-editor-track-control-button[data-active="true"] {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.11);
  color: #e8e9eb;
}

.video-editor-track-control-button[data-track-drag] {
  cursor: grab;
}

.video-editor-track-control-button[data-track-drag]:active {
  cursor: grabbing;
}

.video-editor-track-control-button vaadin-icon,
.video-editor-track-control-button svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  transition: transform 120ms ease;
}

.video-editor-track-control-button[data-track-collapse][data-active="true"] vaadin-icon,
.video-editor-track-control-button[data-track-collapse][data-active="true"] svg {
  transform: rotate(-90deg);
}

.video-editor-clip-lane {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px calc(100% / 9)),
    rgba(255, 255, 255, 0.035);
}

.video-editor-track[data-track-hidden="true"] .video-editor-clip-lane {
  opacity: 0.42;
  filter: grayscale(1) blur(0.7px);
}

.video-editor-track[data-track-hidden="true"] .video-editor-track-header {
  background: rgba(255, 255, 255, 0.025);
}

.video-editor-track[data-track-hidden="true"] .video-editor-track-label {
  color: rgba(232, 233, 236, 0.34);
}

.video-editor-track[data-track-hidden="true"] .video-editor-clip {
  filter: grayscale(1) brightness(0.68);
}

.video-editor-track[data-track-muted="true"]:not([data-track-hidden="true"]) .video-editor-track-header {
  background: rgba(255, 255, 255, 0.04);
}

.video-editor-track[data-track-muted="true"]:not([data-track-hidden="true"]) .video-editor-clip {
  box-shadow: inset 0 0 0 999px rgba(8, 14, 24, 0.18);
}

.video-editor-track.collapsed .video-editor-clip-lane {
  min-height: 0;
}

.video-editor-track.collapsed .video-editor-clip {
  display: none;
}

.video-editor-track.collapsed .video-editor-track-header {
  grid-template-rows: 1fr;
}

.video-editor-track.collapsed .video-editor-track-actions {
  align-self: center;
}

.video-editor-track.collapsed .video-editor-track-label {
  display: none;
}

.video-editor-clip {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: var(--clip-start);
  width: var(--clip-width);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 32px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #e8e9eb;
  font-size: 0.72rem;
  font-weight: 850;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: box-shadow 120ms ease, border-color 120ms ease, filter 120ms ease;
}

.video-editor-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.08) 36%, rgba(0, 0, 0, 0.26));
  opacity: 0;
}

.video-editor-clip:active,
.video-editor-clip.dragging {
  cursor: grabbing;
}

.video-editor-clip-name {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.video-editor-clip-speed {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(232, 233, 236, 0.84);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.video-editor-clip[data-speed-state="fast"] .video-editor-clip-speed {
  background: rgba(104, 211, 145, 0.24);
  color: #ddffe8;
}

.video-editor-clip[data-speed-state="slow"] .video-editor-clip-speed {
  background: rgba(251, 191, 36, 0.24);
  color: #fff1be;
}

.video-editor-clip-trim-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: 12px;
  cursor: ew-resize;
}

.video-editor-clip-trim-handle::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.video-editor-clip-trim-handle.start {
  left: 0;
}

.video-editor-clip-trim-handle.start::before {
  left: 4px;
}

.video-editor-clip-trim-handle.end {
  right: 0;
}

.video-editor-clip-trim-handle.end::before {
  right: 4px;
}

.video-editor-clip:hover .video-editor-clip-trim-handle::before,
.video-editor-clip.active .video-editor-clip-trim-handle::before,
.video-editor-clip.trimming-start .video-editor-clip-trim-handle.start::before,
.video-editor-clip.trimming-end .video-editor-clip-trim-handle.end::before {
  opacity: 1;
}

.video-editor-clip.trimming-start .video-editor-clip-trim-handle.start::before,
.video-editor-clip.trimming-end .video-editor-clip-trim-handle.end::before {
  background: #e8e9eb;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}

.video-editor-clip-video {
  background: #142033;
}

.video-editor-clip-video::after {
  opacity: 1;
}

/* ---- Video editor text drawer (parity with the image editor's text panel) ----
 * Floats over the right edge of the workspace (its positioned ancestor) while a text clip is selected,
 * like the image editor's drawer; the `hidden` attribute (toggled by syncTextDrawer) removes it. */
.video-editor-workspace {
  position: relative;
}

.video-editor-text-drawer {
  position: absolute;
  top: 0;
  right: 18px;
  bottom: 0;
  z-index: 20;
  display: grid;
  /* header, target switch, hint, apply-all, tabs, body — the hidden ones collapse to nothing. */
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  gap: 10px;
  width: min(360px, calc(100% - 36px));
  padding: 12px;
  background: #121315;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.34);
}

.video-editor-text-drawer[hidden] {
  display: none !important;
}

.video-editor-text-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.video-editor-text-drawer-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.video-editor-text-drawer-clip {
  overflow: hidden;
  color: rgba(232, 233, 236, 0.58);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-editor-text-drawer-tabs {
  display: flex;
  gap: 2px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.video-editor-text-drawer-tab {
  flex: 1 1 0;
  min-height: 32px;
  padding: 0 4px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: rgba(232, 233, 236, 0.58);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.video-editor-text-drawer-tab:hover {
  color: #f8fafc;
}

.video-editor-text-drawer-tab[data-active="true"] {
  border-bottom-color: #68d391;
  color: #f8fafc;
}

.video-editor-text-drawer-body {
  min-height: 0;
  overflow-y: auto;
}

.video-editor-text-drawer-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}

.video-editor-text-drawer-panel[hidden] {
  display: none;
}

.video-editor-text-number {
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  font-size: 12px;
}

.video-editor-text-color {
  width: 100%;
  height: 26px;
  padding: 0 2px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.video-editor-text-toggle[data-active="true"],
.video-editor-text-choice[data-active="true"] {
  background: rgba(255, 255, 255, 0.18);
  color: #e8e9eb;
}

.video-editor-text-toggle {
  min-width: 30px;
  font-weight: 700;
}

/* The text stage: laid exactly over the video frame (JS sets its box from the frame's layout), so the
 * caption's fractional geometry is measured against the frame, as the export renderer does. */
.video-editor-preview-text-stage {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}

/* The styled caption: a canvas box like an image-editor overlay — drag to move, handles to resize and
 * rotate, double-click to edit its words. */
.video-editor-preview-styled-text {
  position: absolute;
  display: flex;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: auto;
  touch-action: none;
  cursor: move;
  user-select: none;
}

.video-editor-preview-styled-text[hidden] {
  display: none;
}

.video-editor-preview-styled-text-content {
  min-width: 0;
  outline: none;
}

.video-editor-preview-styled-text[data-editing="true"] {
  cursor: text;
  user-select: text;
}

.video-editor-text-selection {
  position: absolute;
  inset: -6px;
  display: none;
  border: 1.5px solid #68d391;
  pointer-events: none;
}

.video-editor-preview-styled-text[data-selected="true"] > .video-editor-text-selection {
  display: block;
}

.video-editor-text-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #68d391;
  border-radius: 999px;
  background: #0b0c0d;
  box-sizing: border-box;
  pointer-events: auto;
}

.video-editor-preview-styled-text[data-editing="true"] .video-editor-text-handle {
  display: none;
}

.video-editor-text-handle[data-text-handle="nw"] { left: -6px; top: -6px; cursor: nwse-resize; }
.video-editor-text-handle[data-text-handle="n"] { left: calc(50% - 5px); top: -6px; cursor: ns-resize; }
.video-editor-text-handle[data-text-handle="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.video-editor-text-handle[data-text-handle="e"] { right: -6px; top: calc(50% - 5px); cursor: ew-resize; }
.video-editor-text-handle[data-text-handle="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.video-editor-text-handle[data-text-handle="s"] { left: calc(50% - 5px); bottom: -6px; cursor: ns-resize; }
.video-editor-text-handle[data-text-handle="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.video-editor-text-handle[data-text-handle="w"] { left: -6px; top: calc(50% - 5px); cursor: ew-resize; }

/* Rotation dot above the top edge, joined by a short stem (image editor / deck style). */
.video-editor-text-handle[data-text-handle="rotate"] {
  left: calc(50% - 5px);
  top: -30px;
  cursor: grab;
}

.video-editor-text-handle[data-text-handle="rotate"]::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.75px);
  top: 8px;
  width: 1.5px;
  height: 16px;
  background: #68d391;
}

.video-editor-text-snap-guide {
  position: absolute;
  background: #f472b6;
  pointer-events: none;
}

.video-editor-text-snap-guide[hidden] {
  display: none;
}

.video-editor-text-snap-guide.vertical {
  top: 0;
  bottom: 0;
  width: 1px;
}

.video-editor-text-snap-guide.horizontal {
  left: 0;
  right: 0;
  height: 1px;
}

/* Frame picker in the preview's stage header. */
.video-editor-format-select {
  min-width: 140px;
  margin-right: 8px;
}

/* ElevenLabs sample player in the API settings' voice test dialog. */
.settings-elevenlabs-preview {
  width: 100%;
  margin-top: 8px;
}

/* Audition result under the voice dropdown: the caption line plus its player. */
.settings-elevenlabs-preview-holder:not(:empty) {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  font-size: 12px;
}

/* Tail card of a capped media bin. */
.video-editor-media-more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  text-align: center;
}

.video-editor-media-more-title {
  font-size: 12px;
  font-weight: 600;
}

.video-editor-media-more-hint {
  font-size: 11px;
  opacity: 0.7;
}

/* A still previews the way it renders: filling the frame, so a zoom or pan never shows an edge. */
.video-editor-preview-image {
  object-fit: cover;
}

/* Transition-in picker in the inspector's Transitions section. */
.video-editor-transition-select {
  grid-column: 2 / -1;
  min-width: 0;
  width: 100%;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  font-size: 12px;
}

.video-editor-transition-select:disabled,
.video-editor-range-control[data-disabled="true"] {
  opacity: 0.45;
}

/* Still-image clips (slide shows): same filmstrip treatment as video, a greener base to tell them apart. */
.video-editor-clip-image {
  background: #17291f;
}

.video-editor-clip-image::after {
  opacity: 1;
}

.video-editor-clip-filmstrip {
  position: absolute;
  inset: 2px 12px;
  z-index: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow: hidden;
  pointer-events: none;
  background: #0c1118;
}

.video-editor-clip-filmstrip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--clip-filmstrip, linear-gradient(135deg, rgba(59, 130, 246, 0.82), rgba(104, 211, 145, 0.42)));
  background-position: left center;
  background-repeat: repeat-x;
  background-size: auto 100%;
  filter: saturate(1.08);
}

.video-editor-clip-filmstrip-frame {
  position: relative;
  z-index: 1;
  flex: 0 0 50px;
  min-width: 34px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.06));
  opacity: var(--frame-tone, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.video-editor-clip-filmstrip-frame:nth-child(2n) {
  opacity: 0.94;
}

.video-editor-clip-filmstrip-frame:nth-child(3n) {
  opacity: 0.84;
}

.video-editor-clip-filmstrip-demo::before {
  background:
    linear-gradient(120deg, rgba(104, 211, 145, 0.42), transparent 46%),
    linear-gradient(300deg, rgba(251, 191, 36, 0.3), rgba(59, 130, 246, 0.32));
}

.video-editor-clip-waveform {
  position: absolute;
  inset: 3px 12px;
  z-index: 0;
  overflow: hidden;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.video-editor-clip-waveform-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.92;
}

.video-editor-clip-waveform.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  animation: video-editor-waveform-loading 900ms ease-in-out infinite;
}

.video-editor-clip-waveform-demo,
.video-editor-clip-waveform.fallback {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.44) 0 2px,
      transparent 2px 6px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  mask-image: linear-gradient(180deg, transparent 5%, #0d0e11 20%, #0d0e11 80%, transparent 95%);
}

@keyframes video-editor-waveform-loading {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.video-editor-clip-title {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.76), rgba(180, 83, 9, 0.68));
}

.video-editor-clip-audio {
  background: linear-gradient(180deg, rgba(46, 126, 80, 0.92), rgba(17, 83, 49, 0.86));
}

.video-editor-clip-voice {
  background: linear-gradient(180deg, rgba(180, 76, 132, 0.9), rgba(121, 32, 78, 0.84));
}

.video-editor-clip-audio::after,
.video-editor-clip-voice::after {
  opacity: 1;
}

.video-editor-clip:hover,
.video-editor-clip.active {
  border-color: rgba(255, 255, 255, 0.46);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.video-editor-clip.dragging,
.video-editor-clip.trimming-start,
.video-editor-clip.trimming-end {
  z-index: 5;
  border-color: rgba(255, 255, 255, 0.72);
  filter: brightness(1.12);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.video-editor-clip.video-editor-clip-flash {
  animation: video-editor-clip-flash 520ms ease;
}

body.video-editor-timeline-editing {
  cursor: grabbing;
  user-select: none;
}

body.video-editor-timeline-editing *,
body.video-editor-track-reordering * {
  user-select: none !important;
}

body.video-editor-track-reordering {
  cursor: grabbing;
}

@keyframes video-editor-clip-flash {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
  }
  45% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.68), 0 0 28px rgba(255, 255, 255, 0.24);
  }
}

.video-editor-playhead {
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 84px;
  right: 0;
  z-index: 4;
  width: auto;
  pointer-events: none;
}

.video-editor-playhead::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--playhead-position, 0%);
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #e8e9eb;
  transform: translateX(-50%) rotate(45deg);
}

.video-editor-playhead::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--playhead-position, 0%);
  width: 2px;
  background: #e8e9eb;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.27), 0 0 18px rgba(255, 255, 255, 0.28);
  transform: translateX(-50%);
}

.video-editor-render-dialog-body {
  padding-top: 6px;
}

.video-editor-render-presets {
  display: grid;
  gap: 10px;
}

.video-editor-render-preset {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.video-editor-render-preset-title {
  color: #f8fafc;
  font-size: 0.9rem;
  font-weight: 850;
}

.video-editor-render-preset-meta {
  color: rgba(232, 233, 236, 0.58);
  font-size: 0.76rem;
}

@media (max-width: 1280px) {
  .video-editor-workspace {
    grid-template-columns: minmax(280px, 340px) minmax(420px, 1fr);
  }

  .video-editor-editor-side {
    grid-column: 1 / -1;
    grid-template-rows: auto;
  }

  .video-editor-editor-side .video-editor-inspector {
    display: none;
  }

  .video-editor-editor-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .video-editor-editor-actions .video-editor-render-button {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .video-editor-header-actions {
    justify-content: flex-start;
  }

  .video-editor-workspace {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }

  .video-editor-editor-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-editor-editor-actions .video-editor-render-button {
    grid-column: 1 / -1;
  }

  .video-editor-picker-column {
    min-height: 260px;
  }

  .video-editor-picker-panel {
    min-height: 260px;
  }

  .video-editor-preview-viewport {
    min-height: 260px;
  }

  .video-editor-timeline {
    flex-basis: 300px;
  }
}

@media (max-width: 640px) {
  .video-editor-header,
  .video-editor-workspace {
    padding-inline: 12px;
  }

  .video-editor-timeline {
    margin-inline: 12px;
  }

  .video-editor-media-card {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .video-editor-transport {
    flex-wrap: wrap;
  }

  .video-editor-scrubber {
    order: 4;
    flex-basis: 100%;
  }

  .video-editor-preview-title-layer {
    font-size: 0.95rem;
  }
}

/* ---- Deck v2 thumbnails ---------------------------------------------------
   Stable CSS classes for the slide-thumbnail strip so the editor can swap the
   .selected state on click without rebuilding the cached wrapper DOM. The
   wrapper carries data-slide-index for the JS class-toggle in
   applyThumbSelectionToDOM. */

/* ---- Deck v2 progressive image loading -----------------------------------
   The renderer initially paints image elements with a tiny (~96 px wide)
   variant of the source so the slide canvas mounts instantly with something
   recognisable. The browser-side editor JS preloads the full-resolution
   image and, on decode, swaps the background to the full URL and removes
   the blur via the .deck-image-loaded marker class.

   The blur(...) value is sized so a ~96-px LQIP scaled up to a 1920-px slide
   element still reads as the photo's dominant colours / composition without
   showing obvious pixellation. */

/* ---- Deck v2 tables -------------------------------------------------------
   The table outer wrapper is an extras element (drag/resize/rotate apply to
   the whole table). When the user double-clicks a cell, JS adds the
   .cell-edit-mode class to switch the table into a state where individual
   cells receive pointer events for selection + inline editing. */

/* ---- Table selection chrome ----------------------------------------------
   Keynote-style row/column header bars become visible only when the table is
   .selected. Resting tables stay clean — no chrome at all. The bars are
   light pills with dark labels (independent of the slide's colour theme)
   since they're an editor affordance, not slide content. */

/* ---- Formula Functions inspector panel ----------------------------------
   Right-drawer content shown while a formula bar is open. Two scrollable
   columns (categories | function names) with click + double-click semantics
   matching Keynote: single click selects, double click inserts. */

/* ---- Tooltips ------------------------------------------------------------
   Match the app's signature look: dark gradient surface with a soft cyan
   accent glow at the top, ultra-thin frosted-glass border, inset highlight,
   deep drop shadow. Style mirrors the dialog/popover surfaces so tooltips
   feel like part of the same family rather than Lumo defaults. */
vaadin-tooltip-overlay {
  --_tooltip-bg-top: #232427;
  --_tooltip-bg-bottom: #1b1c1f;
}

vaadin-tooltip-overlay::part(overlay) {
  background:
    radial-gradient(circle at top left, rgba(122, 176, 226, 0.16) 0%, rgba(122, 176, 226, 0) 60%),
    linear-gradient(180deg, var(--_tooltip-bg-top) 0%, var(--_tooltip-bg-bottom) 100%);
  color: var(--app-text);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.41),
    0 2px 6px rgba(0, 0, 0, 0.3);
  padding: 0;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

vaadin-tooltip-overlay::part(content) {
  color: var(--app-text);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  padding: 9px 13px;
  max-width: 280px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.26);
}

vaadin-tooltip-overlay::part(arrow) {
  display: none;
}

/* ============================================================
   Account editor (views/accounts/AccountEditorView)
   Card-based surface matching the app's post-edit / settings style.
   ============================================================ */
.account-editor-page .media-content {
  max-width: none;
  margin: 0;
  padding: 24px clamp(16px, 3vw, 40px) 48px;
  gap: 18px;
  min-width: 0;
  width: 100%;
}

.account-editor-page .media-heading-row {
  margin-bottom: 4px;
}

/* Section eyebrow stays a compact pill inside the flex-column page. */
.account-editor-page .campaign-editor-section-label {
  align-self: flex-start;
  margin-top: 6px;
}

/* ---- Native field skin (labels + input surfaces) for this view + its dialog ---- */
.account-editor-page vaadin-text-field::part(label),
.account-editor-page vaadin-text-area::part(label),
.account-editor-page vaadin-checkbox-group::part(label),
.account-editor-field-dialog vaadin-text-area::part(label) {
  color: rgba(232, 233, 236, 0.7);
  font-size: 0.84rem;
  font-weight: 800;
}

.account-editor-page vaadin-text-field::part(input-field),
.account-editor-page vaadin-text-area::part(input-field),
.account-editor-field-dialog vaadin-text-area::part(input-field) {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--app-radius-control-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.account-editor-page vaadin-text-field::part(input-field) {
  min-height: 46px;
}

.account-editor-page vaadin-text-field::part(input-field):hover,
.account-editor-page vaadin-text-area::part(input-field):hover,
.account-editor-field-dialog vaadin-text-area::part(input-field):hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.account-editor-page vaadin-text-field[focused]::part(input-field),
.account-editor-page vaadin-text-area[focused]::part(input-field),
.account-editor-field-dialog vaadin-text-area[focused]::part(input-field) {
  border-color: rgba(122, 176, 226, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 3px rgba(122, 176, 226, 0.13);
}

/* Reference material spans the full width beneath the knowledge grid. */
.account-editor-reference-card {
  width: 100%;
}

/* ---- Tabbed workspace (Timeline / Details / Campaigns) ---- */
.account-editor-tabs {
  width: 100%;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.account-editor-tab-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

/* Posts tab: a flat, full-width list of this account's posts. Its own card —
   deliberately NOT the workspace `.post-card` grid, which squeezes stacked
   children into fixed 56px/168px columns. */
.account-posts-panel {
  width: 100%;
}

.account-post-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 20px;
  border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, #1d1e21 0%, #18191c 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  cursor: default;
  user-select: text;
  transition: border-color 160ms ease, box-shadow 200ms ease, transform 180ms ease;
}

.account-post-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
  transform: translateY(-1px);
}

.account-post-card-title {
  font-weight: 700;
  font-size: var(--lumo-font-size-m);
  letter-spacing: 0.01em;
}

.account-post-card-when {
  color: var(--lumo-secondary-text-color);
  font-size: var(--lumo-font-size-s);
  white-space: nowrap;
}

.account-post-card-body {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.5;
  color: var(--lumo-body-text-color);
}

.account-post-card-body-empty {
  color: var(--lumo-secondary-text-color);
  font-style: italic;
}

.account-post-card-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

/* ---- Post "Content edit" chat dialog ---- */
/* The body is a flex column: transcript grows and scrolls, the composer
   island stays pinned at the bottom. */
.post-content-edit-body {
  height: 100%;
  min-height: 0;
  gap: 0;
}

.post-chat-scroller {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 4px 4px 12px 4px;
}

.post-chat-scroller > * {
  padding-inline: 2px;
}

/* Stopped-run banner sits just above the composer. */
.post-chat-stopped-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 10px 14px;
  border: 1px solid var(--lumo-error-color-50pct);
  border-radius: 12px;
  background: var(--lumo-error-color-10pct);
}

.post-chat-stopped-text {
  flex: 1 1 200px;
  color: var(--lumo-error-text-color);
  font-size: var(--lumo-font-size-s);
}

/* Floating composer island — the real-chat input row. */
.post-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: 18px;
  background: var(--lumo-base-color);
  box-shadow:
    0 -1px 0 var(--lumo-contrast-5pct),
    0 10px 28px rgba(0, 0, 0, 0.28);
}

.post-chat-input {
  flex: 1 1 auto;
  min-height: 48px;
  max-height: 168px;
  margin: 0;
  padding: 0;
}

.post-chat-input::part(input-field) {
  border-radius: 12px;
}

.post-chat-send {
  flex: 0 0 auto;
  min-width: 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

/* Campaigns tab: the relocated CampaignsView list on a card surface. */
.account-editor-campaigns-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-editor-campaigns-toolbar {
  margin-top: 2px;
}

/* Scheduled tasks tab */
.account-editor-scheduled-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tab header: label + subtitle on the left, "New scheduled task" on the right. */
.account-editor-scheduled-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.account-editor-scheduled-head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.account-editor-scheduled-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- Task cards ---- */
.account-editor-scheduled-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-left: 3px solid rgba(167, 139, 250, 0.8);
  transition: opacity 140ms ease, border-color 140ms ease;
}

.account-editor-scheduled-card.disabled {
  border-left-color: rgba(255, 255, 255, 0.18);
}

.account-editor-scheduled-card.disabled .account-editor-scheduled-card-badge,
.account-editor-scheduled-card.disabled .account-editor-scheduled-card-title-block,
.account-editor-scheduled-card.disabled .account-editor-scheduled-chips {
  opacity: 0.55;
}

.account-editor-scheduled-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.account-editor-scheduled-card-badge {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #c4b5fd;
  background: rgba(167, 139, 250, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.35);
}

.account-editor-scheduled-card-badge vaadin-icon {
  width: 18px;
  height: 18px;
}

.account-editor-scheduled-card-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 220px;
}

.account-editor-scheduled-cadence {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--app-muted);
}

.account-editor-scheduled-cadence vaadin-icon {
  width: 12px;
  height: 12px;
}

.account-editor-scheduled-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

.account-editor-scheduled-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 50px;
}

.account-editor-scheduled-chip {
  --chip-rgb: 122, 176, 226;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  color: rgba(232, 233, 236, 0.85);
  background: rgba(var(--chip-rgb), 0.12);
  border: 1px solid rgba(var(--chip-rgb), 0.3);
}

.account-editor-scheduled-chip.tone-next     { --chip-rgb: 74, 222, 128; }
.account-editor-scheduled-chip.tone-last     { --chip-rgb: 148, 163, 184; }
.account-editor-scheduled-chip.tone-renderer { --chip-rgb: 251, 146, 60; }

.account-editor-scheduled-chip vaadin-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: rgb(var(--chip-rgb));
}

.account-editor-scheduled-chip-key {
  font-weight: 700;
  color: rgb(var(--chip-rgb));
}

/* ---- New / edit task dialog ---- */
.account-editor-scheduled-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account-editor-scheduled-section {
  --section-rgb: 122, 176, 226;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
  border-radius: var(--app-radius-control-lg);
  border: 1px solid rgba(var(--section-rgb), 0.22);
  border-left: 3px solid rgb(var(--section-rgb));
  background: linear-gradient(180deg, rgba(var(--section-rgb), 0.07) 0%, rgba(255, 255, 255, 0.01) 70%);
}

.account-editor-scheduled-section.tone-what     { --section-rgb: 167, 139, 250; }
.account-editor-scheduled-section.tone-board    { --section-rgb: 251, 146, 60; }
.account-editor-scheduled-section.tone-schedule { --section-rgb: 74, 222, 128; }

.account-editor-scheduled-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.92rem;
}

.account-editor-scheduled-section-title vaadin-icon {
  width: 16px;
  height: 16px;
  color: rgb(var(--section-rgb));
}

.account-editor-scheduled-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

.account-editor-scheduled-row > * {
  flex: 1 1 150px;
  min-width: 0;
}

.account-editor-scheduled-section > vaadin-combo-box,
.account-editor-scheduled-section > vaadin-date-time-picker {
  width: 100%;
}

@media (max-width: 600px) {
  .account-editor-scheduled-chips {
    padding-left: 0;
  }
}

.account-editor-card {
  gap: 14px;
}

.account-editor-card-head {
  gap: 3px;
}

.account-editor-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ---- Clickable long-form field cards (brief / how-to-post / information) ---- */
.account-editor-field-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.account-editor-field-card:hover {
  border-color: rgba(122, 176, 226, 0.32);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
}

.account-editor-field-card:focus-visible {
  outline: 2px solid rgba(122, 176, 226, 0.5);
  outline-offset: 2px;
}

.account-editor-card-preview {
  color: var(--app-text);
  font-size: var(--lumo-font-size-s);
  line-height: 1.5;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.account-editor-card-preview.empty {
  color: var(--app-muted);
  font-style: italic;
}

.account-editor-card-edit-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
  color: #7ab0e2;
  font-size: var(--lumo-font-size-xs);
  font-weight: 600;
}

.account-editor-card-edit-hint vaadin-icon {
  width: 14px;
  height: 14px;
}

.account-editor-field-dialog-body {
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.account-editor-field-dialog-area {
  width: 100%;
}

/* ---- Post-type dialog: section eyebrows that group the fields ---- */
.account-editor-field-dialog .account-editor-section-eyebrow {
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 233, 236, 0.52);
}

/* ---- Post-type dialog: media-strategy icon toggle tiles ---- */
.account-editor-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  width: 100%;
  margin: 2px 0 4px;
}

/* Each tile carries its own accent (--tile-rgb, set by a tone-* class) so options are told apart
   at a glance; OFF is dim + neutral, ON fills with the accent colour. */
.account-editor-toggle-tile {
  --tile-rgb: 122, 176, 226;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--app-radius-control-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid rgba(var(--tile-rgb), 0.45);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.account-editor-toggle-tile.tone-green  { --tile-rgb: 74, 222, 128; }
.account-editor-toggle-tile.tone-violet { --tile-rgb: 167, 139, 250; }
.account-editor-toggle-tile.tone-orange { --tile-rgb: 251, 146, 60; }
.account-editor-toggle-tile.tone-pink   { --tile-rgb: 244, 114, 182; }
.account-editor-toggle-tile.tone-amber  { --tile-rgb: 250, 204, 21; }
.account-editor-toggle-tile.tone-teal   { --tile-rgb: 45, 212, 191; }
.account-editor-toggle-tile.tone-blue   { --tile-rgb: 122, 176, 226; }

.account-editor-toggle-tile:hover {
  border-color: rgba(var(--tile-rgb), 0.4);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.account-editor-toggle-tile:focus-visible {
  outline: 2px solid rgba(var(--tile-rgb), 0.6);
  outline-offset: 2px;
}

.account-editor-toggle-tile-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: rgba(var(--tile-rgb), 0.55);
  transition: color 140ms ease;
}

/* A small ON/OFF state pill so the state reads without relying on colour alone. */
.account-editor-toggle-tile::after {
  content: "OFF";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  color: rgba(232, 233, 236, 0.45);
  background: rgba(255, 255, 255, 0.06);
}

.account-editor-toggle-tile.selected::after {
  content: "ON";
  color: #0b1220;
  background: rgb(var(--tile-rgb));
}

.account-editor-toggle-tile-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.account-editor-toggle-tile-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(232, 233, 236, 0.82);
}

.account-editor-toggle-tile-sub {
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--app-muted);
}

.account-editor-toggle-tile-check {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex: 0 0 auto;
  margin-top: 12px;
  color: rgb(var(--tile-rgb));
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 140ms ease, transform 140ms ease;
}

.account-editor-toggle-tile:not(.selected) .account-editor-toggle-tile-text {
  opacity: 0.7;
}

.account-editor-toggle-tile.selected {
  border-color: rgba(var(--tile-rgb), 0.6);
  border-left-color: rgb(var(--tile-rgb));
  background: linear-gradient(180deg, rgba(var(--tile-rgb), 0.2) 0%, rgba(var(--tile-rgb), 0.07) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(var(--tile-rgb), 0.12);
}

.account-editor-toggle-tile.selected .account-editor-toggle-tile-icon {
  color: rgb(var(--tile-rgb));
}

.account-editor-toggle-tile.selected .account-editor-toggle-tile-title {
  color: #e8e9eb;
}

.account-editor-toggle-tile.selected .account-editor-toggle-tile-check {
  opacity: 1;
  transform: scale(1);
}

/* ---- Post-type dialog: two-column layout (guidance boxes | media + template) ---- */
.account-editor-posttype-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 18px;
  width: 100%;
  align-items: start;
}

.account-editor-posttype-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

@media (max-width: 820px) {
  .account-editor-posttype-columns {
    grid-template-columns: 1fr;
  }
}

/* ---- Post-type dialog: editable columns + read-only template preview to the right ---- */
.account-editor-posttype-layout {
  display: flex;
  gap: 18px;
  align-items: stretch;
  width: 100%;
}

.account-editor-posttype-layout > .account-editor-posttype-columns {
  flex: 1 1 auto;
  min-width: 0;
}

.account-editor-template-preview {
  flex: 0 0 500px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #1b1b1b 0%, #131313 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  max-height: 88vh;
  box-sizing: border-box;
}

/* Template generate dialog — the AI dials behind the header cog (model + effort). Collapsed by
   default; set off from the rest of the form so it reads as a per-run setting, not another field. */
.account-editor-template-ai-settings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
}

.account-editor-template-ai-settings .media-subtitle {
  font-size: 0.7rem;
  color: #8a8a8a;
}

.account-editor-template-preview-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f2f2f2;
}

.account-editor-template-preview-sub {
  font-size: 0.72rem;
  color: #9a9a9a;
  margin-top: -4px;
}

.account-editor-template-preview-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  padding: 24px;
  text-align: center;
  color: #8a8a8a;
  font-size: 0.82rem;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 14px;
}

.account-editor-template-preview-empty vaadin-icon {
  width: 26px;
  height: 26px;
  color: #6a6a6a;
}

/* Single-slide viewer: one page at a time with overlay prev/next arrows and a page counter. */
.account-editor-template-preview-viewer {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border-radius: 14px;
  background: #0f0f0f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.account-editor-template-preview-slide {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 10px;
}

.account-editor-template-preview-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.account-editor-template-preview-arrow:hover {
  background: rgba(0, 0, 0, 0.72);
}

.account-editor-template-preview-arrow[disabled] {
  opacity: 0.3;
  cursor: default;
}

.account-editor-template-preview-arrow-prev {
  left: 10px;
}

.account-editor-template-preview-arrow-next {
  right: 10px;
}

.account-editor-template-preview-counter {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}

/* Below this width the fixed 500px preview would crowd the editable columns, so drop it
   full-width beneath them (the columns keep their own 2→1 collapse at 820px). */
@media (max-width: 1200px) {
  .account-editor-posttype-layout {
    flex-direction: column;
  }

  .account-editor-template-preview {
    flex: 1 1 auto;
    max-height: none;
  }

  .account-editor-template-preview-slide {
    max-height: 62vh;
  }
}

/* ---- Post-type dialog: aspect-ratio ("Format") tile picker ---- */
.account-editor-aspect-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-editor-aspect-label {
  font-size: 0.84rem;
  font-weight: 800;
  color: rgba(232, 233, 236, 0.7);
}

.account-editor-aspect-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.account-editor-aspect-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 62px;
  padding: 8px 6px 7px;
  border-radius: var(--app-radius-control-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  cursor: pointer;
  user-select: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.account-editor-aspect-tile:hover {
  border-color: rgba(122, 176, 226, 0.32);
  transform: translateY(-1px);
}

.account-editor-aspect-tile:focus-visible {
  outline: 2px solid rgba(122, 176, 226, 0.5);
  outline-offset: 2px;
}

.account-editor-aspect-frame-wrap {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-editor-aspect-frame {
  border-radius: 3px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 140ms ease, background 140ms ease;
}

.account-editor-aspect-name {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(232, 233, 236, 0.72);
}

.account-editor-aspect-ratio {
  font-size: 0.64rem;
  line-height: 1;
  color: var(--app-muted);
}

.account-editor-aspect-tile.selected {
  border-color: rgba(122, 176, 226, 0.55);
  background: linear-gradient(180deg, rgba(122, 176, 226, 0.16) 0%, rgba(122, 176, 226, 0.06) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.account-editor-aspect-tile.selected .account-editor-aspect-frame {
  border-color: #8fd0ff;
  background: rgba(122, 176, 226, 0.28);
}

.account-editor-aspect-tile.selected .account-editor-aspect-name {
  color: #e8e9eb;
}

.account-editor-card vaadin-text-field,
.account-editor-card vaadin-text-area,
.account-editor-card vaadin-checkbox-group {
  width: 100%;
}

.account-editor-reference-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.account-editor-reference-grid:empty {
  display: none;
}

.account-editor-page vaadin-upload {
  border-radius: 12px;
}

/* ---- Full-width profile header (the top bar) ---- */
.account-editor-header {
  padding: 18px 22px;
  width: 100%;
}

.account-editor-header-row {
  gap: 20px;
  align-items: flex-start;
}

/* Header avatar: a square as tall as name field + description combined. The exact px size (and the
   top offset that lines it up with the name) is set inline by a ResizeObserver in AccountEditorView;
   120px is only the pre-measure fallback. */
.account-editor-header .account-editor-avatar-column {
  align-self: flex-start;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}

/* Tall, slim back arrow running the full height of the avatar beside it. */
.account-editor-header .account-editor-back-button {
  height: auto;
  width: 26px;
  min-width: 26px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  color: rgba(232, 233, 236, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.account-editor-header .account-editor-back-button:hover {
  color: #e8e9eb;
  background: rgba(255, 255, 255, 0.09);
}

.account-editor-header .account-editor-back-button vaadin-icon {
  width: 16px;
  height: 16px;
}

.account-editor-header .account-editor-avatar-stack {
  position: relative;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 18px;
}

.account-editor-header .account-editor-avatar {
  width: 100%;
  height: 100%;
  border-radius: 18px;
}

/* "Change photo" floats over the bottom edge of the avatar. */
.account-editor-avatar-upload {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  padding: 0;
  border: none;
  background: none;
  min-width: 0;
  opacity: 0;
  transition: opacity 140ms ease;
}

.account-editor-avatar-stack:hover .account-editor-avatar-upload,
.account-editor-avatar-upload:focus-within,
.account-editor-avatar-stack:has(.account-editor-avatar-placeholder:not([hidden])) .account-editor-avatar-upload {
  opacity: 1;
}

.account-editor-avatar-upload vaadin-button {
  white-space: nowrap;
  background: rgba(10, 14, 24, 0.72);
  backdrop-filter: blur(6px);
  color: #e8e9eb;
}

.account-editor-header-identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-editor-header-identity vaadin-text-field,
.account-editor-header-identity vaadin-text-area {
  width: 100%;
}

/* Name input + action buttons on one line, bottom-aligned to the input. */
.account-editor-header-name-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.account-editor-header-name-row > vaadin-text-field {
  flex: 1 1 260px;
  width: auto;
  min-width: 200px;
}

/* Platform toggles + AI buttons + Active, pushed to the right edge of the bar. */
.account-editor-header-actions {
  flex: 0 0 auto;
  margin-left: auto;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  /* match the name input's height so the buttons centre on it */
  min-height: var(--lumo-text-field-size, 2.25rem);
  padding-bottom: var(--lumo-space-xs, 0.25rem);
}

/* "Generate post" with "Generate slide show video" stacked underneath, same width. */
.account-editor-generate-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

/* Active / Inactive toggle button */
.account-editor-active-toggle {
  margin-left: 6px;
  font-weight: 700;
  border-radius: 999px;
  padding: 0 14px;
  color: rgba(232, 233, 236, 0.6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.account-editor-active-toggle.selected {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.14);
  border-color: rgba(74, 222, 128, 0.5);
}

.account-editor-platform-row {
  gap: 8px;
  flex-wrap: wrap;
}

.account-editor-avatar-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.account-editor-avatar-stack {
  width: 132px;
  height: 132px;
}

.account-editor-avatar {
  width: 132px;
  height: 132px;
  border-radius: 20px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.account-editor-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--app-muted, rgba(232, 233, 236, 0.4));
}

.account-editor-avatar-placeholder vaadin-icon {
  width: 44px;
  height: 44px;
}

/* ---- Card grid: flow across the full width ---- */
.account-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
  align-items: start;
}

.account-editor-grid > .account-editor-card {
  height: 100%;
}

/* Linked platform groups sit side by side and fill the row */
.account-editor-linked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: start;
  width: 100%;
}

/* Details tab: the default-media toggle tiles in a single row above Account knowledge */
.account-editor-media-defaults-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0;
}

/* Linked accounts tab: per-platform dropdown + removable entries */
.account-editor-linked-picker {
  --platform-rgb: 122, 176, 226;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border-radius: var(--app-radius-control-lg);
  border: 1px solid rgba(var(--platform-rgb), 0.22);
  border-top: 3px solid rgb(var(--platform-rgb));
  background: linear-gradient(180deg, rgba(var(--platform-rgb), 0.08) 0%, rgba(255, 255, 255, 0.015) 60%);
}

/* Brand colours per platform */
.account-editor-linked-picker.platform-instagram { --platform-rgb: 225, 48, 108; }
.account-editor-linked-picker.platform-linkedin  { --platform-rgb: 10, 102, 194; }
.account-editor-linked-picker.platform-youtube   { --platform-rgb: 255, 48, 48; }

.account-editor-linked-picker .account-editor-card-title {
  color: rgb(var(--platform-rgb));
  filter: brightness(1.35);
}

.account-editor-linked-picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-editor-linked-picker-icon,
.account-editor-linked-entry-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
  /* dark line-awesome glyph → white; the brand colour comes from the box border/title instead
     (a filter would also recolour any background, so no badge fill here) */
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.account-editor-linked-picker-add {
  display: flex;
  align-items: center;
  gap: 6px;
}

.account-editor-linked-picker-combo {
  flex: 1 1 auto;
  min-width: 0;
}

.account-editor-linked-entries {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-editor-linked-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--app-radius-control-lg);
  border: 1px solid rgba(var(--platform-rgb), 0.45);
  border-left: 3px solid rgb(var(--platform-rgb));
  background: linear-gradient(180deg, rgba(var(--platform-rgb), 0.16) 0%, rgba(var(--platform-rgb), 0.05) 100%);
}

.account-editor-linked-entry-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

@media (max-width: 820px) {
  .account-editor-grid {
    grid-template-columns: 1fr;
  }
  .account-editor-header-row {
    flex-direction: column;
    align-items: stretch;
  }
  .account-editor-avatar-column {
    align-items: flex-start;
  }
  .account-editor-header-actions {
    margin-left: 0;
  }
}

/* ---- Account cards (AccountsView): no buttons, status corner top-left ---- */
.account-card {
  position: relative;
  overflow: hidden;
  padding-top: 42px;
  gap: 12px;
  user-select: none;
}

.account-card-status {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 12px;
  border-radius: 22px 0 14px 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-card-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.account-card-status.active {
  color: #8fd6a8;
  background: rgba(84, 186, 122, 0.16);
  box-shadow: inset -1px -1px 0 rgba(84, 186, 122, 0.28);
}

.account-card-status.inactive {
  color: #e59a9a;
  background: rgba(214, 96, 96, 0.15);
  box-shadow: inset -1px -1px 0 rgba(214, 96, 96, 0.26);
}

.account-card .campaign-slot-description {
  margin: 0;
  text-align: justify;
  hyphens: auto;
}

/* Platform logos + counts, pinned to the card's bottom-left (cards in a row share one height). */
.account-card-platforms {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.account-card-platform {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--app-muted);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
}

.account-card-platform-icon {
  width: 18px;
  height: 18px;
  color: var(--app-text);
  fill: currentColor;
}

.account-card-platforms .campaign-slot-platform-chip {
  font-size: 0.78rem;
}

/* ---- Account tile avatar (AccountsView cards) ---- */
.account-tile-header {
  gap: 12px;
}

.account-tile-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.account-tile-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--app-muted, rgba(232, 233, 236, 0.55));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

/* ---- Video editor: compact chrome, so the preview gets the height ----
 * No page header (removed in VideoEditorView), no transport under the preview (the timeline bar plays),
 * and both remaining bars sized to their 28px buttons. */
.video-editor-page {
  padding-top: 10px;
  gap: 8px;
}

.video-editor-preview-panel {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
}

.video-editor-stage-header {
  min-height: 28px;
  gap: 8px;
}

.video-editor-source-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.video-editor-source-title {
  flex: 0 1 auto;
  font-size: 0.85rem;
  line-height: 1.2;
}

.video-editor-source-meta {
  flex: 1 1 auto;
  font-size: 0.72rem;
}

.video-editor-stage-actions {
  gap: 4px;
}

.video-editor-stage-actions .video-editor-icon-button,
.video-editor-timeline-controls .video-editor-icon-button {
  width: 28px;
  height: 28px;
}

.video-editor-stage-actions .video-editor-format-select {
  height: 28px;
  padding-block: 0;
  margin-right: 4px;
}

.video-editor-timeline {
  gap: 6px;
  padding: 6px 12px 12px;
}

.video-editor-timeline-controls {
  flex-wrap: nowrap;
  min-height: 28px;
  gap: 6px;
}

.video-editor-timeline-controls > .video-editor-panel-title {
  font-size: 0.85rem;
}

.video-editor-timeline-controls .video-editor-play-button {
  height: 28px;
  min-width: 72px;
  padding: 0 10px;
}

/* ---- Video editor: keyframe timeline ----
 * The Keyframes button swaps the tracks for one clip's animation (data-keyframe-mode on the timeline). */
.video-editor-keyframe-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  margin: 0 0 0 6px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(232, 233, 236, 0.78);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
}

.video-editor-keyframe-toggle:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.2);
  color: #e8e9eb;
}

.video-editor-keyframe-toggle[data-active="true"] {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.14);
  color: #fde68a;
}

.video-editor-keyframe-toggle:disabled {
  opacity: 0.4;
  cursor: default;
}

.video-editor-keyframe-toggle-icon {
  width: 12px;
  height: 12px;
}

.video-editor-timeline[data-keyframe-mode="true"] > .video-editor-timeline-lanes {
  display: none;
}

.video-editor-keyframe-panel {
  display: grid;
  grid-template-rows: auto auto minmax(44px, auto) auto;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.video-editor-keyframe-panel[hidden] {
  display: none;
}

.video-editor-keyframe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.video-editor-keyframe-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.video-editor-keyframe-title-icon {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  color: #fbbf24;
  align-self: center;
}

.video-editor-keyframe-clip-name {
  overflow: hidden;
  color: #f8fafc;
  font-size: 0.85rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-editor-keyframe-clip-range {
  flex: 0 0 auto;
  color: rgba(232, 233, 236, 0.52);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.video-editor-keyframe-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.video-editor-keyframe-actions .video-editor-icon-button {
  width: 28px;
  height: 28px;
}

.video-editor-keyframe-actions .video-editor-icon-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.video-editor-keyframe-ease {
  width: 120px;
  height: 28px;
  padding-block: 0;
}

.video-editor-keyframe-back {
  height: 28px;
  margin-left: 6px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #f3f4f6;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
}

/* Ruler and lane share the label column width so ticks line up with the diamonds. */
.video-editor-keyframe-ruler {
  position: relative;
  height: 18px;
  margin-left: 84px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: ew-resize;
  touch-action: none;
}

.video-editor-keyframe-tick {
  position: absolute;
  bottom: 3px;
  transform: translateX(-50%);
  color: rgba(232, 233, 236, 0.46);
  font-size: 0.68rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.video-editor-keyframe-lane-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.video-editor-keyframe-lane-label {
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 233, 236, 0.62);
  font-size: 0.72rem;
  font-weight: 850;
}

.video-editor-keyframe-lane {
  position: relative;
  min-height: 44px;
  border-radius: 6px;
  background:
    linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(251, 191, 36, 0.18) calc(50% - 0.5px),
      rgba(251, 191, 36, 0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    rgba(255, 255, 255, 0.035);
  touch-action: none;
  cursor: ew-resize;
}

.video-editor-keyframe-diamond {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 2px solid #fbbf24;
  border-radius: 2px;
  background: #1a1b1d;
  transform: translate(-50%, -50%) rotate(45deg);
  cursor: grab;
  z-index: 2;
}

.video-editor-keyframe-diamond[data-at-playhead="true"] {
  background: rgba(251, 191, 36, 0.45);
}

.video-editor-keyframe-diamond[data-selected="true"] {
  border-color: #e8e9eb;
  background: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3);
}

.video-editor-keyframe-diamond[data-ease="hold"] {
  border-radius: 0;
}

.video-editor-keyframe-diamond[data-outside="true"] {
  opacity: 0.35;
}

.video-editor-keyframe-playhead {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: #68d391;
  pointer-events: none;
  z-index: 1;
}

.video-editor-keyframe-playhead[hidden] {
  display: none;
}

.video-editor-keyframe-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-left: 84px;
}

.video-editor-keyframe-value {
  display: grid;
  grid-template-columns: auto 72px auto;
  align-items: center;
  gap: 6px;
}

.video-editor-keyframe-value-name,
.video-editor-keyframe-value-unit {
  color: rgba(232, 233, 236, 0.58);
  font-size: 0.72rem;
  font-weight: 750;
}

/* The last tick sits on the lane's right edge: hang its label inward instead of clipping it. */
.video-editor-keyframe-tick:last-child:not(:first-child) {
  transform: translateX(-100%);
}

/* ---- Video editor: rich caption words (inline editing) ---- */
.video-editor-rich-paragraph {
  margin: 0;
  min-height: 1em;
}

.video-editor-preview-styled-text[data-editing="true"] {
  outline: none;
}

.video-editor-preview-styled-text[data-editing="true"] .video-editor-preview-styled-text-content {
  cursor: text;
  caret-color: currentColor;
}

.video-editor-preview-styled-text[data-editing="true"] > .video-editor-text-selection {
  display: block;
  border-style: dashed;
}

/* A keyframe that changes the caption's words or formatting: a dot inside the diamond. */
.video-editor-keyframe-diamond[data-look="true"]::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 1px;
  background: #c084fc;
}

/* ---- Speech-matched captions: their own keyframe row, and a drawer pointed at the lit word ---- */
.video-editor-keyframe-lane-row[hidden] {
  display: none;
}

/* The per-word row is a thin strip — there is one key per spoken word, and nothing to drag. */
.video-editor-keyframe-lane-look {
  min-height: 26px;
  background:
    linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(192, 132, 252, 0.22) calc(50% - 0.5px),
      rgba(192, 132, 252, 0.22) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    rgba(255, 255, 255, 0.03);
  cursor: default;
}

.video-editor-keyframe-diamond[data-spoken="true"] {
  width: 11px;
  height: 11px;
  border-color: #c084fc;
  cursor: pointer;
}

.video-editor-keyframe-diamond[data-spoken="true"][data-selected="true"] {
  border-color: #e8e9eb;
  background: #c084fc;
  box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.3);
}

.video-editor-keyframe-highlight[hidden] {
  display: none;
}

.video-editor-text-target {
  margin-bottom: 2px;
}

.video-editor-text-target[hidden] {
  display: none;
}

.video-editor-text-target-hint {
  display: none;
  color: rgba(192, 132, 252, 0.9);
  font-size: 0.74rem;
}

/* Pointed at the lit word: only what a single word can carry is shown — no paragraph, box or chip. */
.video-editor-text-drawer[data-text-mode="highlight"] .video-editor-text-target-hint {
  display: block;
}

.video-editor-text-drawer[data-text-mode="highlight"] .video-editor-text-drawer-tabs,
.video-editor-text-drawer[data-text-mode="highlight"] [data-text-section="paragraph"],
.video-editor-text-drawer[data-text-mode="highlight"] [data-text-section="background"],
.video-editor-text-drawer[data-text-mode="highlight"] [data-text-section="box"] {
  display: none;
}

.video-editor-text-drawer[data-text-mode="highlight"] [data-text-drawer-panel="box"] {
  display: none;
}

/* The Highlight button carries the speech keys' purple, so it reads as belonging to them. */
.video-editor-keyframe-highlight {
  border-color: rgba(192, 132, 252, 0.5);
  background: rgba(192, 132, 252, 0.16);
  color: #f3e8ff;
}

.video-editor-keyframe-highlight:hover:not(:disabled) {
  border-color: rgba(192, 132, 252, 0.8);
  background: rgba(192, 132, 252, 0.26);
  color: #e8e9eb;
}

/* The word's own trimmings belong to the lit word only — hidden while the drawer is on the caption. */
.video-editor-text-drawer [data-text-section="word"] {
  display: none;
}

.video-editor-text-drawer[data-text-mode="highlight"] [data-text-section="word"] {
  display: grid;
}

.video-editor-text-clear {
  width: 100%;
  min-height: 26px;
  border-radius: 6px;
  font-size: 0.76rem;
}

.video-editor-text-apply-all {
  width: 100%;
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #f3f4f6;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
}

.video-editor-text-apply-all:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.11);
}

.video-editor-text-drawer[data-text-mode="highlight"] .video-editor-text-apply-all {
  border-color: rgba(192, 132, 252, 0.5);
  background: rgba(192, 132, 252, 0.16);
  color: #f3e8ff;
}

.video-editor-text-apply-all[data-done="true"] {
  border-color: rgba(104, 211, 145, 0.6);
  background: rgba(104, 211, 145, 0.18);
  color: #eafff0;
}

/* Past the last clip there is nothing to play: dim that stretch and draw the line the playhead stops at. */
.video-editor-timeline-end {
  position: absolute;
  top: 28px;
  bottom: 0;
  /* --content-end is a fraction of the lane (0-1), set by the editor from the last clip's end. */
  left: calc(84px + (100% - 84px) * var(--content-end, 1));
  right: 0;
  z-index: 3;
  pointer-events: none;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 9, 10, 0.45);
}

.video-editor-timeline-end[hidden] {
  display: none;
}

/* ---- Account editor: Instagram Insights tab (AccountInsightsPanel + InstagramInsightsCharts) ----
   Chart colours are validated for the dark surface: series-1 blue / series-2 orange pass the CVD +
   contrast checks against #1e1e22; the heatmap is a one-hue ramp whose lowest step recedes. */
.ig-insights {
  --ig-series-1: #3987e5;
  --ig-series-2: #d95926;
  --ig-grid: #2c2c2a;
  --ig-baseline: #383835;
  --ig-tick: #898781;
  --ig-up: #0ca30c;
  --ig-down: #e66767;
  --ig-surface: var(--app-surface-1, #1e1e22);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.ig-insights-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.ig-insights-stamp,
.ig-insights-muted,
.ig-insights-card-subtitle,
.ig-insights-tile-note,
.ig-insights-footer {
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
}

.ig-insights-stamp {
  margin-inline-start: auto;
  padding-bottom: 10px;
}

.ig-insights-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.ig-insights-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  box-sizing: border-box;
  padding: 18px 20px;
  background: var(--ig-surface);
  border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
}

.ig-insights-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--app-text);
}

.ig-insights-card-subtitle {
  margin-top: -6px;
}

.ig-insights-subheading {
  display: block;
  margin: 8px 0 6px;
  font-size: var(--lumo-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-muted);
}

.ig-insights-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  min-width: 0;
}

.ig-insights-loading {
  gap: 14px;
}

.ig-insights-message-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ig-insights-notice,
.ig-insights-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: var(--lumo-font-size-s);
  line-height: 1.45;
}

.ig-insights-notice {
  background: rgba(250, 178, 25, 0.08);
  border: 1px solid rgba(250, 178, 25, 0.28);
  color: var(--app-text);
}

.ig-insights-notice vaadin-icon {
  color: #fab219;
  flex: none;
  width: 18px;
  height: 18px;
}

.ig-insights-tip {
  margin-top: 6px;
  padding: 8px 0 0;
  color: var(--app-text);
}

.ig-insights-tip vaadin-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--app-muted);
}

/* Profile header */
.ig-insights-profile {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.ig-insights-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--app-surface-2);
  color: var(--app-muted);
}

.ig-insights-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-insights-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 240px;
  min-width: 0;
}

.ig-insights-name {
  font-size: 1.2rem;
  font-weight: 600;
}

.ig-insights-handle {
  color: var(--app-accent);
  font-size: var(--lumo-font-size-s);
  text-decoration: none;
}

.ig-insights-bio {
  margin-top: 4px;
  font-size: var(--lumo-font-size-s);
  line-height: 1.45;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ig-insights-profile-stats {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}

.ig-insights-hero,
.ig-insights-counter {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ig-insights-hero-value {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
}

.ig-insights-counters {
  display: flex;
  gap: 24px;
}

.ig-insights-counter-value {
  font-size: 1.4rem;
  font-weight: 600;
}

/* KPI tiles */
.ig-insights-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.ig-insights-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--ig-surface);
  border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  min-width: 0;
}

.ig-insights-tile-label {
  font-size: var(--lumo-font-size-s);
  color: var(--app-muted);
}

.ig-insights-tile-value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
}

.ig-insights-delta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.ig-insights-delta {
  font-size: var(--lumo-font-size-s);
  font-weight: 600;
}

.ig-insights-delta.up {
  color: var(--ig-up);
}

.ig-insights-delta.down {
  color: var(--ig-down);
}

.ig-insights-delta.flat {
  color: var(--app-muted);
}

/* SVG charts */
.ig-insights-html {
  min-width: 0;
}

.ig-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ig-chart-grid {
  stroke: var(--ig-grid);
  stroke-width: 1;
}

.ig-chart-baseline {
  stroke: var(--ig-baseline);
  stroke-width: 1;
}

.ig-chart-tick {
  fill: var(--ig-tick);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ig-chart-line {
  fill: none;
  stroke: var(--ig-series-1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ig-chart-area {
  fill: var(--ig-series-1);
  opacity: 0.1;
}

.ig-chart-bar {
  fill: var(--ig-series-1);
}

.ig-chart-end,
.ig-chart-dot {
  fill: var(--ig-series-1);
  stroke: var(--ig-surface);
  stroke-width: 2;
}

.ig-chart-end-label {
  fill: var(--app-text);
  font-size: 12px;
  font-weight: 600;
}

.ig-chart-guide {
  stroke: var(--app-muted);
  stroke-width: 1;
}

.ig-chart-hover .ig-chart-guide,
.ig-chart-hover .ig-chart-dot {
  opacity: 0;
  transition: opacity 80ms ease;
}

.ig-chart-hover:hover .ig-chart-guide,
.ig-chart-hover:hover .ig-chart-dot {
  opacity: 1;
}

.ig-chart-hover:hover .ig-chart-bar {
  fill: #5598e7;
}

.ig-chart-empty {
  padding: 28px 0;
  text-align: center;
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
}

.ig-chart-table {
  margin-top: 6px;
  font-size: var(--lumo-font-size-s);
  color: var(--app-muted);
}

.ig-chart-table summary {
  cursor: pointer;
  width: fit-content;
}

.ig-chart-table table {
  margin-top: 8px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ig-chart-table th,
.ig-chart-table td {
  padding: 3px 18px 3px 0;
  text-align: left;
  color: var(--app-text);
  border-bottom: 1px solid var(--ig-grid);
}

.ig-chart-table th {
  color: var(--app-muted);
  font-weight: 500;
}

/* Horizontal bar lists */
.ig-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ig-bar-row {
  display: grid;
  grid-template-columns: minmax(84px, 38%) 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: var(--lumo-font-size-s);
}

.ig-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-bar-track {
  height: 10px;
  min-width: 0;
}

.ig-bar-fill {
  display: block;
  height: 100%;
  background: var(--ig-series-1);
  border-radius: 0 4px 4px 0;
}

.ig-bar-row:hover .ig-bar-fill {
  background: #5598e7;
}

.ig-bar-value {
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--app-text);
}

/* Two-part split bar */
.ig-split-bar {
  display: flex;
  gap: 2px;
  height: 14px;
}

.ig-split-a,
.ig-split-b {
  display: block;
  height: 100%;
}

.ig-split-a {
  background: var(--ig-series-1);
  border-radius: 4px 0 0 4px;
}

.ig-split-b {
  background: var(--ig-series-2);
  border-radius: 0 4px 4px 0;
}

.ig-split-a:only-child,
.ig-split-b:only-child {
  border-radius: 4px;
}

.ig-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
  font-size: var(--lumo-font-size-s);
}

.ig-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ig-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.ig-key-a {
  background: var(--ig-series-1);
}

.ig-key-b {
  background: var(--ig-series-2);
}

/* Weekday × hour heatmap */
.ig-heatmap {
  display: grid;
  grid-template-columns: 34px repeat(24, minmax(0, 1fr));
  gap: 2px;
  align-items: center;
}

.ig-heat-hour,
.ig-heat-day {
  font-size: 11px;
  color: var(--ig-tick);
  font-variant-numeric: tabular-nums;
}

.ig-heat-cell {
  display: block;
  height: 20px;
  border-radius: 3px;
}

.ig-heat-0 { background: #1f1f1f; }
.ig-heat-1 { background: #104281; }
.ig-heat-2 { background: #1c5cab; }
.ig-heat-3 { background: #2a78d6; }
.ig-heat-4 { background: #5598e7; }
.ig-heat-5 { background: #9ec5f4; }

.ig-heatmap .ig-heat-cell:hover {
  outline: 2px solid var(--app-text);
  outline-offset: -1px;
}

.ig-heat-scale {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--ig-tick);
}

.ig-heat-scale .ig-heat-cell {
  width: 12px;
  height: 12px;
}

.ig-heat-scale span:first-child {
  margin-inline-end: 4px;
}

.ig-heat-scale span:last-child {
  margin-inline-start: 4px;
}

/* "Instagram has nothing to report yet" state */
.ig-insights-empty-state {
  gap: 14px;
  border-color: rgba(250, 178, 25, 0.28);
  background: linear-gradient(180deg, rgba(250, 178, 25, 0.06), transparent 120px), var(--ig-surface);
}

.ig-insights-empty-state .ig-insights-message-head vaadin-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: #fab219;
}

.ig-insights-empty-lead {
  max-width: 76ch;
  font-size: var(--lumo-font-size-s);
  line-height: 1.55;
  color: var(--app-text);
}

.ig-insights-empty-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.ig-insights-empty-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
}

.ig-insights-empty-fact-value {
  font-size: var(--lumo-font-size-s);
  line-height: 1.4;
  color: var(--app-text);
}

/* Posts grid */
.ig-insights-grid {
  --vaadin-grid-cell-background: transparent;
  background: transparent;
}

.ig-insights-thumb {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--app-surface-2);
  color: var(--app-muted);
}

.ig-insights-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ig-insights-caption-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 4px 0;
}

.ig-insights-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ig-insights-open {
  font-size: var(--lumo-font-size-xs);
  color: var(--app-accent);
  text-decoration: none;
}

.ig-insights-caption {
  font-size: var(--lumo-font-size-s);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Live stories */
.ig-insights-stories {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ig-insights-story {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ig-insights-story-numbers {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ig-insights-footer {
  padding: 0 4px 8px;
}

@media (max-width: 640px) {
  .ig-insights-card {
    padding: 14px 16px;
  }

  .ig-insights-hero-value {
    font-size: 40px;
  }

  .ig-insights-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ig-insights-tile-value {
    font-size: 1.4rem;
  }

  .ig-insights-stamp {
    margin-inline-start: 0;
    padding-bottom: 0;
    width: 100%;
  }

  .ig-heatmap {
    grid-template-columns: 28px repeat(24, minmax(0, 1fr));
    gap: 1px;
  }

  .ig-heat-hour {
    font-size: 9px;
  }

  .ig-heat-cell {
    height: 14px;
    border-radius: 2px;
  }
}

/* ---- Account editor: "Topics covered" (AccountTopicHistoryPanel) ---- */
.account-topics {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.account-topics-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-topics-head vaadin-text-field {
  flex: 1 1 auto;
}

.account-topics-count,
.account-topics-empty,
.account-topics-meta {
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
}

.account-topics-count {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.account-topics-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.account-topics-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.account-topics-row:hover {
  background: var(--app-surface-2);
  border-color: var(--app-border, rgba(255, 255, 255, 0.1));
}

.account-topics-topic {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--lumo-font-size-s);
}

.account-topics-meta {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .account-topics-row {
    flex-direction: column;
    gap: 2px;
  }

  .account-topics-topic {
    white-space: normal;
  }
}

/* ---- Global dashboard (views/dashboard/DashboardView) -------------------------------------- */

.overview {
  --overview-surface: var(--app-surface-1, #1e1e22);
  --overview-up: #0ca30c;
  --overview-down: #e66767;
  --overview-instagram: #c13584;
  --overview-youtube: #ff4e45;
  --overview-linkedin: #3d8fd9;
}

.overview-scroller {
  width: 100%;
}

.overview-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px clamp(16px, 3vw, 32px) 40px;
}

.overview-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}

.overview-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.overview-title {
  font-size: var(--lumo-font-size-xxl);
  font-weight: 600;
  line-height: 1.2;
}

.overview-muted,
.overview-tile-note {
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
}

.overview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.overview-period {
  width: 170px;
}

.overview-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Tiles */

.overview-hero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.overview-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 16px;
  background: var(--overview-surface);
  border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
}

.overview-hero-tile {
  gap: 8px;
  padding: 18px 20px;
  border-radius: 16px;
}

.overview-tile-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.overview-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--app-accent) 16%, transparent);
  color: var(--app-accent);
}

.overview-tile-icon vaadin-icon {
  width: 18px;
  height: 18px;
}

.overview-tile-label {
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
}

.overview-tile-value {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.overview-hero-value {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.overview-delta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.overview-delta {
  font-size: var(--lumo-font-size-s);
  font-weight: 600;
}

.overview-delta.up {
  color: var(--overview-up);
}

.overview-delta.down {
  color: var(--overview-down);
}

.overview-delta.flat {
  color: var(--app-muted);
}

.overview-skeleton {
  min-height: 132px;
  background: linear-gradient(90deg, var(--overview-surface) 0%, var(--app-surface-2, #232427) 50%, var(--overview-surface) 100%);
  background-size: 200% 100%;
  animation: overview-shimmer 1.4s ease-in-out infinite;
}

@keyframes overview-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .overview-skeleton {
    animation: none;
  }
}

/* Sections */

.overview-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.overview-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.overview-section-title {
  font-size: var(--lumo-font-size-l);
  font-weight: 600;
}

.overview-message {
  box-sizing: border-box;
  padding: 22px 24px;
  background: var(--overview-surface);
  border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  align-items: flex-start;
}

.overview-message-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.overview-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.overview-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--app-accent) 10%, transparent);
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
}

.overview-notice vaadin-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--app-accent);
}

/* Followers by platform */

.overview-split {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  background: var(--overview-surface);
  border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
}

.overview-split-bar {
  display: flex;
  gap: 2px;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
}

.overview-split-segment {
  flex-basis: 0;
  min-width: 4px;
}

.overview-split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.overview-split-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-split-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.overview-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.overview-split-segment.platform-instagram,
.overview-swatch.platform-instagram {
  background: var(--overview-instagram);
}

.overview-split-segment.platform-youtube,
.overview-swatch.platform-youtube {
  background: var(--overview-youtube);
}

.overview-split-segment.platform-linkedin,
.overview-swatch.platform-linkedin {
  background: var(--overview-linkedin);
}

/* Profiles table */

.overview-table {
  display: flex;
  flex-direction: column;
  background: var(--overview-surface);
  border: 1px solid var(--app-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  overflow: hidden;
}

.overview-row {
  display: grid;
  grid-template-columns: minmax(220px, 2.4fr) repeat(5, minmax(72px, 1fr));
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--app-border, rgba(255, 255, 255, 0.08));
}

.overview-row:first-child {
  border-top: none;
}

.overview-row-head {
  padding-block: 10px;
  color: var(--app-muted);
  font-size: var(--lumo-font-size-s);
}

.overview-row-head > span:not(:first-child),
.overview-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.overview-row.has-error .overview-cell {
  color: var(--app-muted);
}

.overview-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.overview-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--app-surface-2, #232427);
}

.overview-avatar-fallback {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 600;
  color: var(--app-muted);
}

.overview-avatar-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overview-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.overview-chip-stale {
  color: #e8b04a;
  border-color: color-mix(in srgb, #e8b04a 60%, transparent);
}

.overview-row.is-stale .overview-cell {
  color: color-mix(in srgb, var(--app-text) 75%, transparent);
}

.overview-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.overview-status.refreshing::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, var(--app-accent) 30%, transparent);
  border-top-color: var(--app-accent);
  border-radius: 50%;
  animation: overview-spin 0.8s linear infinite;
}

.overview-status.warning {
  color: #e8b04a;
}

@keyframes overview-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .overview-status.refreshing::before {
    animation: none;
  }
}

.overview-profile-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.overview-profile-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.overview-chip {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--lumo-font-size-xs);
  color: var(--app-text);
  background: var(--app-surface-2, #232427);
  border: 1px solid currentColor;
}

.overview-chip.platform-instagram {
  border-color: color-mix(in srgb, var(--overview-instagram) 70%, transparent);
}

.overview-chip.platform-youtube {
  border-color: color-mix(in srgb, var(--overview-youtube) 70%, transparent);
}

.overview-chip.platform-linkedin {
  border-color: color-mix(in srgb, var(--overview-linkedin) 70%, transparent);
}

.overview-row-error {
  color: var(--overview-down);
  font-size: var(--lumo-font-size-s);
}

@media (max-width: 1000px) {
  .overview-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .overview-row-head {
    display: none;
  }

  .overview-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px 16px;
  }

  .overview-profile {
    grid-column: 1 / -1;
  }

  .overview-cell {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .overview-cell::before {
    content: attr(data-label);
    color: var(--app-muted);
    font-size: var(--lumo-font-size-xs);
  }
}

@media (max-width: 480px) {
  .overview-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-period {
    width: 150px;
  }
}

/* Insights tab: last-known data is on screen while a refresh runs */
.ig-insights-stamp.refreshing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ig-insights-stamp.refreshing::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, var(--app-accent) 30%, transparent);
  border-top-color: var(--app-accent);
  border-radius: 50%;
  animation: overview-spin 0.8s linear infinite;
}

/* ---- Merged calendar (views/calendar/CalendarView): mails next to posts and stories ---------- */

.calendar-post-type-mail {
  border: 1px solid rgba(70, 214, 170, 0.28);
  background: rgba(25, 128, 104, 0.34);
  color: #d6fff2;
}

.calendar-sidebar-badge-mail {
  background: rgba(25, 128, 104, 0.3);
  color: #d6fff2;
}

/* Mails carry no content-category colour, so give them a quiet teal edge to tell them apart. */
.calendar-month-post.calendar-item-mail,
.calendar-week-post.calendar-item-mail {
  --calendar-post-outline-color: rgba(70, 214, 170, 0.45);
}

.calendar-kind-filter {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.calendar-kind-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding-inline: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--app-radius-pill);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(232, 233, 236, 0.55);
  font-size: 0.76rem;
  font-weight: 700;
}

.calendar-kind-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--calendar-kind-color);
  opacity: 0.35;
}

.calendar-kind-chip.active {
  border-color: color-mix(in srgb, var(--calendar-kind-color) 55%, transparent);
  background: color-mix(in srgb, var(--calendar-kind-color) 16%, transparent);
  color: #e8e9eb;
}

.calendar-kind-chip.active::before {
  opacity: 1;
}

.calendar-kind-chip-post {
  --calendar-kind-color: #7ab0e2;
}

.calendar-kind-chip-story {
  --calendar-kind-color: #dd80ff;
}

.calendar-kind-chip-mail {
  --calendar-kind-color: #46d6aa;
}

/* ---- Files library (one library for images, videos, audio and files) ---- */

.library-category-rail {
  display: grid;
  gap: 10px;
  padding: 18px 18px 0;
}

.library-category-list {
  display: grid;
  gap: 6px;
}

.library-category-button {
  min-height: 42px;
  cursor: pointer;
}

.library-category-content {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 0 12px;
  box-sizing: border-box;
}

.library-category-content .media-folder-label {
  flex: 1 1 auto;
  text-align: left;
}

.library-category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 9px;
  background: rgba(122, 176, 226, 0.1);
  color: var(--app-accent);
}

.library-category-icon svg,
.library-category-icon vaadin-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.library-category-button.active .library-category-icon {
  background: var(--app-accent);
  color: #151619;
}

.library-category-button.active .media-folder-count {
  background: rgba(122, 176, 226, 0.28);
  color: #e8e9eb;
}

.posts-left-rail.collapsed .library-category-rail {
  padding: 12px 8px 0;
}

.posts-left-rail.collapsed .library-category-rail > .media-folder-section-label,
.posts-left-rail.collapsed .library-category-content .media-folder-label,
.posts-left-rail.collapsed .library-category-content .media-folder-count {
  display: none;
}

.posts-left-rail.collapsed .library-category-content {
  justify-content: center;
  padding: 0;
}

.library-content {
  display: grid;
  align-content: start;
  min-width: 0;
}

.library-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 0;
  color: #c0c1c3;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.library-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.library-grid .media-preview {
  height: 220px;
}

.library-card {
  cursor: pointer;
}

.library-card.selected {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 1px rgba(122, 176, 226, 0.4), 0 12px 28px rgba(0, 0, 0, 0.25);
}

.library-card.dragging,
.audio-row.dragging {
  opacity: 0.45;
}

.library-card-caption {
  display: grid;
  gap: 2px;
  padding: 10px 10px 0;
  min-width: 0;
}

.library-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--app-text);
}

.library-card-caption .media-card-summary {
  padding: 0 0 10px;
}

.library-file-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(circle at 50% 30%, rgba(122, 176, 226, 0.12) 0%, rgba(122, 176, 226, 0) 60%),
    linear-gradient(180deg, #1d1e21 0%, #17181b 100%);
  color: var(--app-accent);
}

.library-file-tile > svg,
.library-file-tile > vaadin-icon {
  width: 56px;
  height: 56px;
  fill: currentColor;
}

.library-file-tile-extension {
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #d8d9db;
  font-size: var(--lumo-font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.library-project-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(122, 176, 226, 0.4);
  background: rgba(19, 20, 23, 0.72);
  color: var(--app-accent);
  font-size: var(--lumo-font-size-xs);
  font-weight: 600;
  backdrop-filter: blur(6px);
}

.library-audio-list {
  height: auto;
}

.library-audio-list .audio-row {
  margin-bottom: 10px;
}

.library-preview-frame {
  width: 100%;
  height: min(70vh, 720px);
  border: 0;
  border-radius: 12px;
  background: #ffffff;
}

.library-preview-audio {
  width: 100%;
}

.library-preview-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px;
  color: var(--app-muted);
  text-align: center;
}

.library-preview-fallback > svg,
.library-preview-fallback > vaadin-icon {
  width: 48px;
  height: 48px;
  fill: var(--app-accent);
  color: var(--app-accent);
}

.library-drop-zone.drop-target {
  border-color: #dedfe1;
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 720px) {
  .library-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    padding: 12px;
  }

  .library-grid .media-preview {
    height: 160px;
  }
}