.create-page .media-mode-switcher {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (min-width: 901px) {
  .create-page .input-panel-content,
  .create-page .image-composer-panel,
  .create-page .video-composer-panel {
    min-height: 425px;
  }

  .create-page .media-mode-btn {
    justify-content: flex-start;
    padding-inline: 10px;
  }
}

.create-page .media-mode-btn {
  border: 1px solid transparent;
  color: #b8b1cb;
}

.create-page .media-mode-btn:hover,
.create-page .media-mode-btn:focus-visible {
  border-color: rgba(190, 164, 255, 0.25);
  background: rgba(155, 108, 255, 0.12);
  color: #f4f0ff;
}

.create-page .media-mode-btn.active {
  border-color: rgba(213, 197, 255, 0.4);
  background: var(--studio-gradient);
  color: #fff;
  box-shadow:
    0 10px 24px rgba(74, 51, 185, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.create-page .tab-item {
  border: 1px solid rgba(205, 191, 255, 0.13);
  background: rgba(155, 108, 255, 0.065);
  color: #c8c0dd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.create-page .tab-item:hover,
.create-page .tab-item:focus-visible {
  border-color: rgba(177, 144, 255, 0.4);
  background: rgba(155, 108, 255, 0.16);
  color: #f4f0ff;
}

.create-page .tab-item.active {
  border-color: rgba(205, 184, 255, 0.54);
  background: linear-gradient(135deg, rgba(166, 108, 255, 0.42), rgba(88, 72, 232, 0.27));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 7px 18px rgba(60, 43, 148, 0.2);
}

.create-page .tab-item:disabled,
.create-page .media-mode-btn:disabled {
  border-color: rgba(205, 191, 255, 0.07);
  background: rgba(155, 108, 255, 0.035);
  color: rgba(216, 207, 239, 0.42);
  opacity: 1;
  cursor: not-allowed;
}

.create-page .upload-card,
.create-page .video-upload-card,
.create-page .prompt-textarea,
.create-page .media-mention-editor,
.create-page .setting-select-inline,
.create-page .model-selector-trigger,
.create-page .create-select-trigger {
  border-color: var(--create-glass-line);
  background: var(--create-glass-control);
  color: var(--studio-text);
  box-shadow: var(--create-glass-highlight);
}

.create-page .upload-card:hover,
.create-page .video-upload-card:hover,
.create-page .model-selector-trigger:hover,
.create-page .create-select-trigger:hover,
.create-page .create-select-shell.is-open .create-select-trigger {
  border-color: var(--create-glass-line-strong);
  background: var(--create-glass-control-hover);
}

.create-page .prompt-textarea:focus,
.create-page .media-mention-editor:focus,
.create-page .setting-select-inline:focus,
.create-page .model-selector-trigger:focus {
  border-color: rgba(188, 157, 255, 0.72);
  background: rgba(20, 17, 31, 0.68);
  box-shadow:
    0 0 0 3px rgba(155, 108, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.create-page .prompt-textarea::placeholder,
.create-page .media-mention-editor:empty::before {
  color: #938ca7;
}

.create-page .btn-add-image,
.create-page .task-edit-btn,
.create-page .task-resend-btn,
.create-page .task-action-btn {
  border-color: rgba(205, 191, 255, 0.18) !important;
  background: rgba(155, 108, 255, 0.09) !important;
  color: #e5deff !important;
}

.create-page .btn-add-image:hover,
.create-page .task-edit-btn:hover,
.create-page .task-resend-btn:hover,
.create-page .task-action-btn:hover {
  border-color: rgba(184, 153, 255, 0.48) !important;
  background: rgba(155, 108, 255, 0.18) !important;
}

.create-page .composer-cue-chip,
.create-page .image-counter,
.create-page .task-meta-chip,
.create-page .task-time-chip,
.create-page .task-retention-chip,
.create-page .gallery-source-chip {
  border-color: rgba(205, 191, 255, 0.12);
  background: rgba(8, 10, 15, 0.4);
  color: #bdb5d0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

/* Points-cost chip: unified with the Create-page reference style. */
.create-page .point-cost-preview {
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: #181818;
  color: #a3a3a3;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
}

.create-page .message-content,
.create-page .task-card {
  border-color: var(--create-glass-line);
  background:
    linear-gradient(135deg, rgba(166, 108, 255, 0.055), transparent 28%),
    var(--create-glass-panel-strong);
  box-shadow:
    0 22px 58px rgba(3, 4, 8, 0.26),
    var(--create-glass-highlight);
  -webkit-backdrop-filter: blur(22px) saturate(132%);
  backdrop-filter: blur(22px) saturate(132%);
}

.create-page .task-card {
  border-left-color: rgba(184, 153, 255, 0.55);
}

.create-page .create-select-menu,
.create-page .model-dropdown-inline,
.create-page .media-mention-popover {
  border-color: var(--create-glass-line-strong);
  background: rgba(17, 19, 27, 0.78);
  box-shadow:
    0 22px 58px rgba(2, 3, 7, 0.5),
    var(--create-glass-highlight);
  -webkit-backdrop-filter: blur(26px) saturate(142%);
  backdrop-filter: blur(26px) saturate(142%);
}

.create-page .create-select-option:hover,
.create-page .create-select-option.is-keyboard-active,
.create-page .model-option-inline:hover {
  background: rgba(155, 108, 255, 0.16);
  color: #f4f0ff;
}

.create-page .create-select-option.is-selected,
.create-page .model-option-inline.selected {
  background: linear-gradient(135deg, rgba(166, 108, 255, 0.3), rgba(88, 72, 232, 0.18));
  color: #f7f4ff;
}

.create-page .nav-user-area .nav-login-btn,
.create-page .user-avatar-trigger,
.create-page .nav-points,
.create-page .user-dropdown {
  border-color: var(--create-glass-line) !important;
  background-color: rgba(15, 18, 24, 0.64) !important;
  box-shadow: var(--create-glass-highlight) !important;
  -webkit-backdrop-filter: blur(18px) saturate(132%) !important;
  backdrop-filter: blur(18px) saturate(132%) !important;
}

.create-page .user-avatar-trigger.has-avatar {
  background-position: center;
  background-size: cover;
}

@media (max-width: 700px) {
  .create-page .input-panel {
    background: rgba(15, 18, 24, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(132%);
    backdrop-filter: blur(20px) saturate(132%);
  }

  .create-page .user-avatar-trigger {
    width: 36px;
    height: 36px;
    min-height: 36px;
    flex: 0 0 36px;
  }

  .create-page .message-content,
  .create-page .task-card {
    -webkit-backdrop-filter: blur(18px) saturate(126%);
    backdrop-filter: blur(18px) saturate(126%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .create-page .input-panel,
  .create-page .message-content,
  .create-page .task-card,
  .create-page .create-select-menu,
  .create-page .model-dropdown-inline,
  .create-page .media-mention-popover {
    background: rgba(17, 20, 26, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Keep task content and spacing, but let results sit directly on the workspace. */
.create-page .task-card {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.create-page .task-card::before {
  content: none;
}

/* Shared short-screen density for authentication, profile, gallery, and team
   overlays. Normal-height desktops keep the existing spacious composition. */
@media (min-width: 901px) and (max-height: 820px) {
  #loginModal .auth-form-panel {
    padding: 24px 34px;
  }

  #loginModal .auth-form-inner {
    max-width: 340px;
  }

  #loginModal .auth-visual-overlay {
    padding: 32px !important;
  }

  #loginModal .auth-visual-title {
    font-size: 40px !important;
  }

  #loginModal .auth-form-title {
    font-size: 24px !important;
  }

  #loginModal .auth-form-desc {
    margin-bottom: 18px;
  }

  #loginModal .auth-tabs {
    margin-bottom: 16px;
  }

  #loginModal .auth-tab {
    padding: 9px 12px;
  }

  #loginModal .form-group {
    margin-bottom: 12px;
  }

  #loginModal .form-label {
    margin-bottom: 6px;
  }

  #loginModal .form-input {
    min-height: 42px;
    padding: 10px 13px;
  }

  #loginModal .auth-link {
    margin-bottom: 12px;
  }

  #loginModal .form-actions {
    margin-top: 18px;
  }

  #loginModal .btn-primary {
    min-height: 42px;
    padding: 10px 14px;
  }

  #loginModal .auth-footer-note {
    margin-top: 16px;
  }

  #loginModal .modal-close {
    top: 14px;
    right: 14px;
  }

  #editProfileModal .modal-box.profile-modal-box {
    max-height: calc(100dvh - 20px) !important;
    padding: 20px !important;
  }

  #editProfileModal .avatar-upload-area {
    margin: 16px 0;
    padding: 12px;
  }

  #editProfileModal .form-group {
    margin-bottom: 12px;
  }

  #editProfileModal .form-actions {
    margin-top: 16px;
  }

  .gallery-content {
    padding: 16px 24px 28px;
  }

  .team-header {
    min-height: 60px;
    padding: 10px 20px;
  }

  .team-scroll-area {
    height: calc(100dvh - 60px);
  }

  .team-empty,
  .team-dashboard {
    padding: 16px 20px 28px;
  }
}