/*
 * Shared admin UI system
 * Keeps the established layout and business interactions intact while
 * normalizing typography, color, surface depth, forms and modal treatments.
 */
:root {
  --geo-ui-primary: #0e9cff;
  --geo-ui-primary-hover: #0786da;
  --geo-ui-primary-active: #066ead;
  --geo-ui-primary-soft: #edf8ff;
  --geo-ui-cyan: #18c5d1;
  --geo-ui-ink: #223042;
  --geo-ui-text: #39485a;
  --geo-ui-muted: #66768a;
  --geo-ui-subtle: #8a98a9;
  --geo-ui-canvas: #e9eff5;
  --geo-ui-ground: #dde5ec;
  --geo-ui-surface: #ffffff;
  --geo-ui-surface-soft: #f7fafc;
  --geo-ui-border: #d7e2ec;
  --geo-ui-border-strong: #c4d3e0;
  --geo-ui-success: #0eaa83;
  --geo-ui-success-soft: #eaf8f4;
  --geo-ui-warning: #d98614;
  --geo-ui-warning-soft: #fff6e6;
  --geo-ui-danger: #e94f65;
  --geo-ui-danger-soft: #fff0f3;
  --geo-ui-info-soft: #eef7ff;
  --geo-ui-radius-sm: 8px;
  --geo-ui-radius-md: 12px;
  --geo-ui-radius-lg: 16px;
  --geo-ui-shadow-card: 0 8px 24px rgba(35, 68, 99, .055);
  --geo-ui-shadow-modal: 0 24px 70px rgba(19, 43, 66, .25);
  --geo-ui-focus: 0 0 0 3px rgba(14, 156, 255, .16);
  --geo-ui-modal-edge: 24px;
  --geo-ui-modal-gutter: 36px;
  color-scheme: light;
}

/* Article and image-text task editors: keep every label beside its control on desktop. */
.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) {
  --creation-task-label-width: 118px;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-form-body {
  gap: 16px;
  padding-block: 24px 28px;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-form-body > label {
  display: grid;
  grid-template-columns: var(--creation-task-label-width) minmax(0, 1fr) !important;
  align-items: start;
  column-gap: 16px;
  row-gap: 7px;
  min-width: 0;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-form-body > label > span:first-child {
  align-self: center;
  padding-top: 0;
  color: var(--geo-ui-text);
  font-weight: 600;
  line-height: 44px;
  text-align: right;
  white-space: nowrap;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-form-body > label > :is(input, select) {
  grid-column: 2;
  min-width: 0;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-form-body > label > small {
  grid-column: 2;
  margin: 0;
  color: var(--geo-ui-muted);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-form-body > hr {
  width: auto;
  margin: 1px 0 1px calc(var(--creation-task-label-width) + 16px);
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-range {
  grid-template-columns: var(--creation-task-label-width) minmax(0, 1fr) auto !important;
  align-items: center;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-range > span:first-child {
  grid-column: 1;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-range > input[type="range"] {
  grid-column: 2;
  width: 100%;
  height: auto;
  padding: 0;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-range > b {
  grid-column: 3;
  min-width: 42px;
  color: var(--geo-ui-primary-active);
  text-align: right;
  white-space: nowrap;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-form-body > :is(.reference-radio-row, .task-status-row) {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-choice-layout {
  display: grid;
  grid-template-columns: var(--creation-task-label-width) minmax(0, 1fr);
  align-items: start;
  column-gap: 16px;
  row-gap: 7px;
  min-width: 0;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-choice-label {
  display: block;
  grid-column: 1;
  padding: 7px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--geo-ui-text);
  font-size: inherit;
  font-weight: 600;
  line-height: 30px;
  text-align: right;
  white-space: nowrap;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-choice-label::before {
  content: none;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-choice-options {
  display: flex;
  grid-column: 2;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.user-portal .user-task-modal .task-choice-options > label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-choice-layout > small {
  grid-column: 2;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--geo-ui-muted);
  line-height: 1.65;
}

@media (max-width: 720px) {
  .user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-form-body > label,
  .user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-choice-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 8px;
  }

  .user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-form-body > label > span:first-child,
  .user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-choice-label {
    grid-column: 1;
    padding: 0;
    line-height: 1.5;
    text-align: left;
  }

  .user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-form-body > label > :is(input, select),
  .user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-form-body > label > small,
  .user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-choice-options,
  .user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-choice-layout > small {
    grid-column: 1;
  }

  .user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-form-body > hr {
    margin-inline: 0;
  }

  .user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-range {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-range > span:first-child {
    grid-column: 1 / -1;
  }

  .user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-range > input[type="range"] {
    grid-column: 1;
  }

  .user-portal :is(.user-article-task-modal, .user-image-text-task-modal) .task-range > b {
    grid-column: 2;
  }
}

/* Portal tokens and type rhythm. The user portal uses an intentional 90% zoom,
   so its token values are kept proportionally larger for the same rendered size. */
body.agent-portal {
  --agent-blue: var(--geo-ui-primary);
  --agent-bg: var(--geo-ui-ground);
  --agent-canvas: var(--geo-ui-canvas);
  --agent-ink: var(--geo-ui-ink);
  --agent-muted: var(--geo-ui-muted);
  --agent-line: var(--geo-ui-border);
  --polish-primary: var(--geo-ui-primary);
  --polish-primary-strong: var(--geo-ui-primary-hover);
  --polish-primary-soft: var(--geo-ui-primary-soft);
  --polish-danger: var(--geo-ui-danger);
  --polish-ink: var(--geo-ui-ink);
  --polish-text: var(--geo-ui-text);
  --polish-muted: var(--geo-ui-muted);
  --polish-line: var(--geo-ui-border);
  --at-page: 32px;
  --at-section: 22px;
  --at-card: 17px;
  --at-metric: 34px;
  --at-body: 15px;
  --at-control: 14px;
  --at-caption: 13px;
  color: var(--geo-ui-text);
}

body.user-portal {
  --ud-blue: var(--geo-ui-primary);
  --ud-ink: var(--geo-ui-ink);
  --ud-muted: var(--geo-ui-muted);
  --ud-canvas: var(--geo-ui-canvas);
  --ud-ground: var(--geo-ui-ground);
  --ud-line: var(--geo-ui-border);
  --ut-page: 34px;
  --ut-section: 23px;
  --ut-card: 18px;
  --ut-body: 16px;
  --ut-control: 15px;
  --ut-caption: 14px;
  color: var(--geo-ui-text);
}

:is(.agent-portal,.user-portal) :is(button,input,select,textarea) {
  font-family: var(--geo-font-sans);
}

:is(.agent-portal,.user-portal) :is(button,a,input,select,textarea,summary) {
  -webkit-tap-highlight-color: transparent;
}

/* Navigation and primary actions share one unmistakable brand treatment. */
.user-portal .user-nav-item.active,
.user-portal .user-nav-section.open > .user-nav-item {
  color: #fff;
}

.agent-portal .sidebar nav a.active,
.user-portal .user-nav-item.active,
.user-portal .user-nav-section.open > .user-nav-item {
  background: linear-gradient(135deg, #14a5ff 0%, var(--geo-ui-primary) 58%, #087ed2 100%);
  box-shadow: 0 7px 18px rgba(14, 156, 255, .16);
}

.agent-portal :is(.primary-btn,.tool-btn.add),
.user-portal .user-content :is(.btn-primary,.primary-button,.user-submit,.user-profile-submit),
.user-portal .user-record-modal :is(.primary-btn,.user-submit) {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #16a5ff 0%, var(--geo-ui-primary) 56%, #087ed2 100%);
  box-shadow: 0 5px 13px rgba(14, 156, 255, .18);
}

.agent-portal :is(.primary-btn,.tool-btn.add):hover,
.user-portal .user-content :is(.btn-primary,.primary-button,.user-submit,.user-profile-submit):hover,
.user-portal .user-record-modal :is(.primary-btn,.user-submit):hover {
  background: linear-gradient(135deg, #0d96ed, var(--geo-ui-primary-hover));
  box-shadow: 0 7px 17px rgba(14, 156, 255, .23);
}

:is(.agent-portal,.user-portal) :is(button,a)[aria-disabled="true"],
:is(.agent-portal,.user-portal) :is(button,input,select,textarea):disabled {
  cursor: not-allowed;
  opacity: .58;
}

/* Surface hierarchy: borders define structure; shadows only separate levels. */
.agent-portal :is(
  .workspace-panel,.panel,.metric-card,.stat-card,.cloud-workspace,
  .profile-workspace,.pricing-head,.pricing-group
) {
  border: 1px solid rgba(207, 220, 232, .78);
  box-shadow: var(--geo-ui-shadow-card);
}

.user-portal .user-content :is(
  .user-workspace,.user-module-page,.publish-page,.user-profile-heading,
  .user-profile-layout,.account-auth-page,.ledger-page,.rights-page,
  .data-workbench,.worker-hero,.worker-pair-card,.worker-device-card,
  .visual-studio .vs-panel,.vm-upload,.vm-card
) {
  border-color: var(--geo-ui-border);
  box-shadow: var(--geo-ui-shadow-card);
}

.user-portal .user-content :is(
  .worker-security-note,.user-module-notice,.account-auth-security,
  .overseas-engine-notice,.content-media-picker,.content-media-dropzone
) {
  border-color: #cfe2ef;
  background: linear-gradient(135deg, #f4faff 0%, #f8fcff 100%);
}

/* Forms: the same editable, readonly, hover and focus language everywhere. */
.agent-portal :is(.cloud-fields,.profile-form,.modal-form,.grid-form,.advanced-settings-form)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea),
.user-portal .user-content form
  :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea),
.user-portal .user-record-modal form
  :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea),
.user-portal .publish-modal-dialog form
  :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea) {
  border-color: var(--geo-ui-border-strong);
  color: var(--geo-ui-ink);
  background-color: #fbfdff;
  caret-color: var(--geo-ui-primary);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.agent-portal :is(.cloud-fields,.profile-form,.modal-form,.grid-form,.advanced-settings-form)
  :is(input,select,textarea):hover:not(:disabled):not([readonly]),
.user-portal .user-content form
  :is(input,select,textarea):hover:not(:disabled):not([readonly]),
.user-portal .user-record-modal form
  :is(input,select,textarea):hover:not(:disabled):not([readonly]) {
  border-color: #9fc7e3;
  background-color: #fff;
}

.agent-portal :is(.cloud-fields,.profile-form,.modal-form,.grid-form,.advanced-settings-form)
  :is(input,select,textarea):focus,
.user-portal .user-content form :is(input,select,textarea):focus,
.user-portal .user-record-modal form :is(input,select,textarea):focus,
.user-portal .publish-modal-dialog form :is(input,select,textarea):focus {
  border-color: var(--geo-ui-primary);
  outline: 0;
  background-color: #fff;
  box-shadow: var(--geo-ui-focus);
}

:is(.agent-portal,.user-portal) :is(input,textarea)::placeholder {
  color: var(--geo-ui-subtle);
  opacity: 1;
}

.agent-portal :is(.cloud-fields,.profile-form,.modal-form,.grid-form) :is(input,textarea)[readonly],
.user-portal .user-content form :is(input,textarea)[readonly],
.user-portal .user-content form :is(input,select,textarea):disabled {
  border-color: #dfe6ed;
  color: #7f8b99;
  background: #f2f5f8;
}

:is(.agent-portal,.user-portal) input[type="checkbox"],
:is(.agent-portal,.user-portal) input[type="radio"] {
  accent-color: var(--geo-ui-primary);
}

.agent-portal input[type="file"],
.user-portal .user-content input[type="file"],
.user-portal .user-record-modal input[type="file"] {
  color: var(--geo-ui-muted);
  border-color: var(--geo-ui-border-strong);
  background: #fbfdff;
}

:is(.agent-portal,.user-portal) input[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 10px;
  padding: 0 13px;
  border: 0;
  border-radius: 7px;
  color: #0874bd;
  background: var(--geo-ui-primary-soft);
  font: 600 13px/1 var(--geo-font-sans);
  cursor: pointer;
}

/* Modal system: neutral chrome, strong hierarchy and a consistent focus layer. */
.modal-backdrop,
.user-portal .user-modal-host,
.user-portal .publish-modal,
.user-portal .account-auth-modal {
  background: rgba(23, 37, 54, .48);
  backdrop-filter: blur(4px);
}

.agent-portal .app-modal,
.user-portal .user-record-modal,
.user-portal .publish-modal-dialog,
.user-portal .account-auth-dialog {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.9);
  border-top: 4px solid var(--geo-ui-primary);
  border-radius: var(--geo-ui-radius-lg);
  background: var(--geo-ui-surface);
  box-shadow: var(--geo-ui-shadow-modal), inset 0 4px 0 var(--geo-ui-primary);
}

.agent-portal .app-modal > header,
.user-portal .user-record-modal > header,
.user-portal .publish-modal-dialog > header,
.user-portal .account-auth-dialog > header {
  min-height: 58px;
  border-bottom: 1px solid var(--geo-ui-border);
  color: var(--geo-ui-ink);
  background: linear-gradient(180deg, #f9fcff 0%, #eef4f8 100%);
}

.agent-portal .app-modal > header strong,
.user-portal .user-record-modal > header b,
.user-portal .publish-modal-dialog > header h2,
.user-portal .account-auth-dialog > header h2 {
  color: var(--geo-ui-ink);
  font-weight: 700;
  letter-spacing: 0;
}

.user-portal :is(.publish-modal-dialog,.account-auth-dialog) > header small {
  color: var(--geo-ui-muted);
  opacity: 1;
}

.agent-portal .app-modal > header :is(.modal-close,.modal-window-controls button),
.user-portal :is(.user-record-modal,.publish-modal-dialog,.account-auth-dialog) > header button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #586879;
  background: transparent;
}

.agent-portal .app-modal > header :is(.modal-close,.modal-window-controls button):hover,
.user-portal :is(.user-record-modal,.publish-modal-dialog,.account-auth-dialog) > header button:hover {
  color: var(--geo-ui-ink);
  background: #e2ebf2;
}

.agent-portal .modal-form h3 {
  position: relative;
  margin-block: 14px 18px;
  color: var(--geo-ui-ink);
}

.agent-portal .modal-form h3::before {
  display: inline-block;
  width: 4px;
  height: 16px;
  margin-right: 9px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--geo-ui-primary), var(--geo-ui-cyan));
  vertical-align: -2px;
  content: "";
}

.agent-portal .app-modal footer,
.user-portal .user-record-modal footer,
.user-portal .publish-modal-dialog footer,
.user-portal .account-auth-dialog > footer {
  border-top-color: var(--geo-ui-border);
  background: rgba(247, 250, 252, .97);
  box-shadow: 0 -8px 22px rgba(38, 66, 91, .045);
}

/* Balanced dialog geometry. Scroll only the content region so actions never
   disappear below the clipped modal shell. Stable two-sided scrollbar space
   keeps the visual gutter equal even when a long form starts scrolling. */
.agent-portal .app-modal:not(.is-maximized):not(.is-minimized) {
  width: min(840px, calc(100vw - (var(--geo-ui-modal-edge) * 2)));
  max-width: none;
}

.agent-portal .model-modal:not(.is-maximized):not(.is-minimized) {
  width: min(920px, calc(100vw - (var(--geo-ui-modal-edge) * 2)));
}

.agent-portal .order-modal:not(.is-maximized):not(.is-minimized) {
  width: min(980px, calc(100vw - (var(--geo-ui-modal-edge) * 2)));
}

.agent-portal .enterprise-modal:not(.is-maximized):not(.is-minimized) {
  width: min(980px, calc(100vw - (var(--geo-ui-modal-edge) * 2)));
  height: min(780px, calc(100dvh - (var(--geo-ui-modal-edge) * 2)));
  max-height: none;
}

.agent-portal .app-modal > header {
  box-sizing: border-box;
  padding-inline: var(--geo-ui-modal-gutter);
}

.agent-portal .app-modal > .modal-form {
  box-sizing: border-box;
  padding-inline: var(--geo-ui-modal-gutter);
  scrollbar-gutter: stable both-edges;
}

.agent-portal .app-modal > .modal-form > footer {
  box-sizing: border-box;
  margin-inline: calc(var(--geo-ui-modal-gutter) * -1);
  padding-inline: var(--geo-ui-modal-gutter);
}

.agent-portal .app-modal > .modal-form > label {
  grid-template-columns: 132px minmax(0, 1fr);
}

.agent-portal .app-modal > .modal-form > label > span:first-child,
.agent-portal .app-modal .modal-two-col > label > span:first-child {
  white-space: nowrap;
}

.agent-portal .enterprise-modal > .enterprise-form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.agent-portal .enterprise-modal .enterprise-form > .enterprise-form-body {
  flex: 1 1 auto;
  box-sizing: border-box;
  min-height: 0;
  height: auto;
  max-height: none;
  padding: 22px 40px 26px;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}

.agent-portal .enterprise-modal .enterprise-form > footer {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 66px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  margin: 0;
  padding: 14px 40px;
  border-top: 1px solid var(--geo-ui-border);
  background: #f7fafc;
  box-shadow: 0 -8px 22px rgba(38, 66, 91, .055);
}

.agent-portal .enterprise-modal .enterprise-form-body > label > span:first-child,
.agent-portal .enterprise-modal .enterprise-plan-primary-row > label > span:first-child,
.agent-portal .enterprise-modal :is(.quota-base-grid,.quota-module-grid) > label > span:first-child {
  white-space: nowrap;
}

.user-portal .user-record-modal,
.user-portal .publish-modal-dialog,
.user-portal .account-auth-dialog {
  --modal-gutter: var(--geo-ui-modal-gutter);
}

.user-portal .user-record-modal:not(.is-maximized):not(.is-minimized) {
  width: min(1080px, calc(100vw - (var(--geo-ui-modal-edge) * 2)));
}

.user-portal .user-keyword-modal:not(.is-maximized):not(.is-minimized),
.user-portal .user-instruction-modal:not(.is-maximized):not(.is-minimized),
.user-portal .user-task-modal:not(.is-maximized):not(.is-minimized) {
  width: min(1160px, calc(100vw - (var(--geo-ui-modal-edge) * 2)));
}

.user-portal .user-knowledge-modal:not(.is-maximized):not(.is-minimized),
.user-portal .user-article-modal:not(.is-maximized):not(.is-minimized) {
  width: min(1320px, calc(100vw - (var(--geo-ui-modal-edge) * 2)));
}

.user-portal :is(.user-record-modal,.publish-modal-dialog,.account-auth-dialog) > header {
  box-sizing: border-box;
  padding-inline: var(--modal-gutter);
}

.user-portal .user-record-modal :is(
  .user-form-grid,.user-keyword-form,.reference-form-stack,.task-form-body,
  .article-form-body,.knowledge-form-body,.media-content-form-grid,
  .article-import-form-body,.image-upload-form-row,.keyword-tool-body,
  .user-detail-content,.video-auto-body
),
.user-portal .publish-modal-dialog > form,
.user-portal .publish-modal-dialog.task-dialog .task-form-grid,
.user-portal .account-auth-dialog-body {
  box-sizing: border-box;
  padding-inline: var(--modal-gutter);
  scrollbar-gutter: stable both-edges;
}

.user-portal .user-modal-host .user-record-modal form > footer,
.user-portal .user-record-modal > footer,
.user-portal .publish-modal-dialog form > footer,
.user-portal .account-auth-dialog > footer {
  box-sizing: border-box;
  justify-content: center;
  gap: 12px;
  margin-inline: 0;
  padding-inline: var(--modal-gutter);
}

@media (min-width: 861px) {
  .user-portal .user-record-modal :is(
    .user-form-grid,.user-keyword-form,.reference-form-stack,.task-form-body,
    .article-form-body,.knowledge-form-body,.media-content-form-grid,
    .article-import-form-body,.video-advanced
  ) > label:not(.knowledge-agree) > span:first-child,
  .user-portal .user-record-modal .video-field > span:first-child,
  .user-portal .user-record-modal .image-upload-form-row > span {
    white-space: nowrap;
  }
}

/* Fieldset legends have special browser layout behaviour. A dedicated option
   wrapper makes the label and choices a stable two-column row in every writing
   instruction modal (article, image-text and video). */
.user-portal .user-instruction-modal .reference-form-stack > .reference-radio-row {
  display: block;
  min-width: 0;
}

.user-portal .user-instruction-modal .reference-radio-legend {
  position: absolute;
  width: 1px !important;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px !important;
  padding: 0 !important;
  border: 0;
  white-space: nowrap;
}

.user-portal .user-instruction-modal .reference-radio-layout {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.user-portal .user-instruction-modal .reference-radio-label {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--geo-ui-text);
  background: transparent;
  box-shadow: none;
  font-size: var(--ut-body);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
}

.user-portal .user-instruction-modal .reference-radio-label::before {
  display: none;
}

.user-portal .user-instruction-modal .reference-radio-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

@media (max-width: 860px) {
  .user-portal .user-instruction-modal .reference-radio-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

/* Tables and list pages use the same header tint and quieter row separation. */
.agent-portal .data-table th,
.user-portal .user-content :is(
  .user-data-table,.publish-table,.account-list-table,.ledger-table,
  .data-table,.user-module-table,.legacy-simple-report table
) th {
  color: var(--geo-ui-ink);
  background: #eaf1f7;
}

.agent-portal .data-table td,
.user-portal .user-content :is(
  .user-data-table,.publish-table,.account-list-table,.ledger-table,
  .data-table,.user-module-table,.legacy-simple-report table
) td {
  border-bottom-color: #e9eff4;
}

.agent-portal .data-table tbody tr:hover,
.user-portal .user-content :is(
  .user-data-table,.publish-table,.account-list-table,.ledger-table,
  .data-table,.user-module-table,.legacy-simple-report table
) tbody tr:hover {
  background: #f0f9ff;
}

/* The image-library list follows the supplied reference composition exactly:
   a 30px panel gutter, a single toolbar row, quiet zebra rows and labeled
   actions. The shared 90% portal scale is accounted for by the design-records
   component itself. */
.user-portal .user-content .user-image-workspace.design-records {
  --ut-section: calc(21px / var(--ud-scale));
  --ut-body: calc(15px / var(--ud-scale));
  --ut-control: calc(14px / var(--ud-scale));
  --ut-caption: calc(13px / var(--ud-scale));
  color: #45546a;
  font-size: var(--ut-body);
  line-height: 1.6;
}

.user-portal .user-content .user-image-workspace.design-records .design-table-title {
  color: #26364b;
}

.user-portal .user-content .user-image-workspace.design-records .user-image-table th {
  color: #26364b;
  background: #e7ecf2;
}

.user-portal .user-content .user-image-workspace.design-records .user-image-table td {
  color: #26364b;
  border: 0;
}

.user-portal .user-content .user-image-workspace.design-records .user-image-table tbody tr:nth-child(even) {
  background: #f7f7f7;
}

/* Bring old hard-coded microcopy back into the shared readable scale. */
.agent-portal .content :is(small,.field-help,.modal-tip) {
  font-size: var(--at-caption);
  line-height: 1.6;
}

.user-portal .user-content :is(
  small,.eyebrow,.query-save-state,.social-record-attempt,
  .content-card-meta,.content-card-body > footer small,.account-daily-help
) {
  font-size: var(--ut-caption);
  line-height: 1.6;
}

.user-portal .user-content :is(.design-metric,.rights-card,.ledger-summary article,.data-metric-grid article)
  strong > small {
  font-size: .48em;
  font-weight: 500;
}

/* Keep the enterprise creation, publishing, and media catalog pages on the
   same readable type scale as AI article creation > content categories. */
.user-portal .user-content .design-records[data-resource-kind="writing_tasks"]
  .user-data-table :is(th,td),
.user-portal .user-content .four-publish-tasks .publish-table :is(th,td) {
  height: 63px;
  font-size: var(--ut-body);
  line-height: 1.5;
}

.user-portal .user-content .design-records[data-resource-kind="writing_tasks"]
  .user-data-table th,
.user-portal .user-content .four-publish-tasks .publish-table th {
  font-weight: 700;
}

.user-portal .user-content .design-records[data-resource-kind="writing_tasks"]
  .user-data-table {
  min-width: 1520px;
}

.user-portal .user-content .four-publish-tasks .publish-table {
  min-width: 1720px;
}

.user-portal .user-content .publish-page .filter-chips,
.user-portal .user-content .publish-page .filter-chips .filter-label,
.user-portal .user-content .publish-page .filter-chips > :is(a,span):not(.filter-label),
.user-portal .user-content .publish-page .filter-options > a {
  font-size: var(--ut-body);
  line-height: 1.5;
}

.user-portal .user-content .publish-page :is(.b2b-card-top strong,.media-identity strong) {
  font-size: var(--ut-card);
  line-height: 1.5;
}

.user-portal .user-content .publish-page :is(
  .b2b-card > p,.b2b-card-top em,.media-identity small,
  .media-stat small,.media-price small,.media-note,.catalog-pagination
) {
  font-size: var(--ut-caption);
  line-height: 1.6;
}

.user-portal .user-content .publish-page :is(.media-stat b,.media-price) {
  font-size: var(--ut-body);
  line-height: 1.5;
}

/* Content dialogs: keep text fields readable while media pickers stay compact.
   The editor intentionally remains full width for long-form content. */
.user-portal .article-edit-reference-modal {
  --article-edit-scale: var(--ud-scale, 1);
  --article-edit-unit: calc(1px / var(--article-edit-scale));
  --article-edit-gutter: calc(32 * var(--article-edit-unit));
  --article-edit-label: calc(104 * var(--article-edit-unit));
  box-sizing: border-box;
  width: min(calc(1120 * var(--article-edit-unit)), calc((100vw - 48px) / var(--article-edit-scale))) !important;
  height: min(calc(760 * var(--article-edit-unit)), calc((100dvh - 48px) / var(--article-edit-scale))) !important;
  max-width: none;
  max-height: calc((100dvh - 48px) / var(--article-edit-scale));
  border: 1px solid #dce5ee;
  border-radius: calc(14 * var(--article-edit-unit));
  color: #45546a;
  background: #fff;
  box-shadow: 0 24px 80px rgba(24, 45, 73, .19);
  font-family: var(--geo-font-sans);
  font-size: calc(15 * var(--article-edit-unit));
  line-height: 1.6;
}

.user-portal .article-edit-reference-modal > header {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: calc(58 * var(--article-edit-unit));
  padding: calc(12 * var(--article-edit-unit)) var(--article-edit-gutter);
  border-bottom: 1px solid #e1e8f0;
  color: #26364b;
  background: #eff4f9;
}

.user-portal .article-edit-reference-modal > header b {
  margin: 0;
  color: #26364b;
  font-size: calc(17 * var(--article-edit-unit));
  font-weight: 700;
  line-height: 1.4;
}

.user-portal .article-edit-reference-modal > header :is(.modal-window-controls button,[data-close-details]) {
  flex: none;
  width: calc(30 * var(--article-edit-unit));
  min-width: calc(30 * var(--article-edit-unit));
  height: calc(30 * var(--article-edit-unit));
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #6d7e94;
  background: transparent;
}

.user-portal .article-edit-reference-modal > header :is(.modal-window-controls button,[data-close-details]):hover {
  color: #26364b;
  background: #dfeaf4;
}

.user-portal .article-edit-reference-modal > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: hidden;
}

.user-portal .article-edit-reference-modal .article-form-body {
  flex: 1 1 auto;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 24px var(--article-edit-gutter);
  gap: 20px 24px;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}

.user-portal .article-edit-reference-modal .article-form-body > label {
  display: grid;
  grid-template-columns: var(--article-edit-label) minmax(0, 1fr) !important;
  align-items: center;
  gap: 8px 16px;
  min-width: 0;
  width: auto;
  overflow: visible;
}

.user-portal .article-edit-reference-modal .article-form-body > label > span:first-child {
  padding: 0;
  color: #45546a;
  font-size: calc(14 * var(--article-edit-unit));
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
  white-space: nowrap;
}

.user-portal .article-edit-reference-modal .article-form-body > label >
  :is(input:not([type="file"]),select) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: calc(42 * var(--article-edit-unit)) !important;
  min-height: calc(42 * var(--article-edit-unit)) !important;
  padding: 0 calc(12 * var(--article-edit-unit));
  border: 1px solid #d5e0eb;
  border-radius: calc(8 * var(--article-edit-unit));
  color: #26364b;
  background: #fbfdff;
  font-size: calc(14 * var(--article-edit-unit));
  line-height: 1.5;
}

.user-portal .article-edit-reference-modal .article-cover-upload {
  width: auto;
}

.user-portal .article-edit-reference-modal .article-cover-upload > div {
  position: relative;
  justify-self: start;
  width: auto;
}

.user-portal .article-edit-reference-modal .article-cover-upload > div::before {
  content: none;
}

.user-portal .article-edit-reference-modal .article-cover-upload button {
  width: auto;
  min-width: calc(80 * var(--article-edit-unit));
  min-height: calc(36 * var(--article-edit-unit));
  padding: 6px 18px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: #0e9cff;
  font-size: calc(14 * var(--article-edit-unit));
  white-space: nowrap;
}

.user-portal .article-edit-reference-modal .article-cover-preview {
  grid-column: 2;
  justify-self: start;
  width: calc(240 * var(--article-edit-unit));
  max-width: 100%;
  height: calc(144 * var(--article-edit-unit));
  max-height: none;
  margin: 4px 0 0;
  border: 1px solid #d5e0eb;
  border-radius: 7px;
  background: #fbfdff;
  object-fit: contain;
}

.user-portal .article-edit-reference-modal .reference-radio-row {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.user-portal .article-edit-reference-modal .reference-radio-row > legend {
  float: left;
  box-sizing: border-box;
  width: var(--article-edit-label);
  min-width: 0;
  margin: 0 16px 0 0;
  padding: 7px 0;
  color: #596274;
  font-size: calc(14 * var(--article-edit-unit));
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
  white-space: nowrap;
}

.user-portal .article-edit-reference-modal .reference-radio-row::after {
  display: block;
  clear: both;
  content: "";
}

.user-portal .article-edit-reference-modal .reference-radio-row > label {
  display: inline-flex;
  margin: 0 10px 6px 0;
}

.user-portal .article-edit-reference-modal .reference-radio-row label > span {
  min-height: calc(34 * var(--article-edit-unit));
  padding: 7px 12px;
  border: 1px solid #d5e0eb;
  border-radius: 7px;
  color: #45546a;
  background: #f4f7fa;
  font-size: calc(14 * var(--article-edit-unit));
  font-weight: 400;
}

.user-portal .article-edit-reference-modal .reference-radio-row input:checked + span {
  border-color: #7ecbff;
  color: #087fc5;
  background: #edf7ff;
  box-shadow: none;
}

.user-portal .article-edit-reference-modal .reference-radio-row input:checked + span::before {
  border-color: #0e9cff;
  background: #0e9cff;
  box-shadow: inset 0 0 0 2px #fff;
}

.user-portal .article-edit-reference-modal .article-editor-reference-row {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start;
}

.user-portal .article-edit-reference-modal .article-editor-reference-control,
.user-portal .article-edit-reference-modal .article-editor-reference-control > .rich-editor-shell {
  min-width: 0;
  width: 100%;
}

.user-portal .article-edit-reference-modal .article-editor-reference-control > p {
  margin: 7px 0;
  color: #748297;
  font-size: calc(13 * var(--article-edit-unit));
  line-height: 1.6;
}

.user-portal .article-edit-reference-modal .rich-toolbar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 38px;
  padding: 8px;
  border: 1px solid #d5e0eb;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #f4f7fa;
}

.user-portal .article-edit-reference-modal .rich-toolbar button {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  min-width: 30px;
  height: calc(32 * var(--article-edit-unit));
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #45546a;
  background: transparent;
  font-size: calc(14 * var(--article-edit-unit));
  white-space: nowrap;
}

.user-portal .article-edit-reference-modal .rich-toolbar button:hover {
  color: #087fc5;
  background: #e1f1ff;
}

.user-portal .article-edit-reference-modal .rich-toolbar-spacer {
  display: block;
  flex: 1;
  min-width: 10px;
}

.user-portal .article-edit-reference-modal :is(.rich-editor,.rich-source) {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 360px;
  max-height: min(520px, 58vh);
  margin: 0;
  padding: calc(16 * var(--article-edit-unit));
  border: 1px solid #d5e0eb;
  border-radius: 0 0 8px 8px;
  color: #26364b;
  background: #fff;
  font-family: var(--geo-font-sans);
  font-size: calc(15 * var(--article-edit-unit));
  line-height: 1.8;
  overflow: auto;
  resize: vertical;
}

.user-portal .article-edit-reference-modal .rich-editor-status[hidden] {
  display: none !important;
}

.user-portal .article-edit-reference-modal form > footer {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: calc(64 * var(--article-edit-unit));
  margin: 0;
  padding: calc(14 * var(--article-edit-unit)) var(--article-edit-gutter);
  border-top: 1px solid #e4ebf3;
  background: #fff;
  box-shadow: none;
}

.user-portal .article-edit-reference-modal form > footer :is(button,.btn) {
  box-sizing: border-box;
  width: auto;
  min-width: calc(88 * var(--article-edit-unit));
  height: auto;
  min-height: calc(36 * var(--article-edit-unit));
  padding: 6px 16px;
  font-size: calc(14 * var(--article-edit-unit));
}

.user-portal .article-edit-reference-modal form > footer .user-submit {
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #0e9cff;
  box-shadow: none;
  font-weight: 600;
}

.user-portal .article-edit-reference-modal form > footer .article-audit-button {
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: #df5d73;
  font-weight: 400;
}

@media (max-width: 640px) {
  .user-portal .article-edit-reference-modal {
    --article-edit-gutter: calc(16 * var(--article-edit-unit));
    width: calc((100vw - 24px) / var(--article-edit-scale)) !important;
    max-height: calc((100dvh - 24px) / var(--article-edit-scale));
  }

  .user-portal .article-edit-reference-modal .article-form-body > label {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px;
  }

  .user-portal .article-edit-reference-modal .article-form-body > label > span:first-child {
    text-align: left;
    white-space: normal;
  }

  .user-portal .article-edit-reference-modal .article-cover-preview {
    grid-column: 1;
  }

  .user-portal .article-edit-reference-modal .reference-radio-row > legend {
    float: none;
    width: auto;
    margin: 0 0 6px;
    text-align: left;
  }

  .user-portal .article-edit-reference-modal .rich-toolbar-spacer {
    display: none;
  }
}

/* Video task dialog parity: preserve the domestic form hooks while matching the
   wide, horizontal reference layout used by the overseas video task editor. */
.user-portal .vm-task-modal {
  --video-task-scale: var(--ud-scale, 1);
  --video-task-unit: calc(1px / var(--video-task-scale));
  --video-task-gutter: calc(32 * var(--video-task-unit));
  --video-task-label: calc(96 * var(--video-task-unit));
  transition: none !important;
}

.user-portal .vm-task-modal:not(.is-minimized):not(.is-maximized) {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(calc(1120 * var(--video-task-unit)), calc((100vw - 48px) / var(--video-task-scale))) !important;
  height: min(calc(760 * var(--video-task-unit)), calc((100dvh - 48px) / var(--video-task-scale))) !important;
  max-height: calc((100dvh - 48px) / var(--video-task-scale));
  transform: translate(-50%, -50%);
}

.user-portal .vm-task-modal > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

.user-portal .vm-task-modal > header {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: calc(56 * var(--video-task-unit));
  padding: calc(12 * var(--video-task-unit)) var(--video-task-gutter);
}

.user-portal .vm-task-modal > header b {
  font-size: calc(17 * var(--video-task-unit));
  line-height: 1.4;
}

.user-portal .vm-task-modal > header :is(.modal-window-controls button, [data-close-details]) {
  width: calc(30 * var(--video-task-unit));
  min-width: calc(30 * var(--video-task-unit));
  height: calc(30 * var(--video-task-unit));
}

.user-portal .vm-task-modal .video-auto-body {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px 24px !important;
  width: 100%;
  max-width: none;
  min-height: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 24px var(--video-task-gutter) !important;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}

.user-portal .vm-task-modal .video-flow-note {
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  color: #526174;
  background: #f4f7fc;
  font-size: 13px;
  line-height: 1.7;
}

.user-portal .vm-task-modal .video-auto-body > label,
.user-portal .vm-task-modal .video-auto-body .video-field,
.user-portal .vm-task-modal .vm-options-content > label {
  display: grid !important;
  grid-template-columns: var(--video-task-label) minmax(0, 1fr) !important;
  align-items: start;
  gap: 8px 16px !important;
  min-width: 0;
  margin: 0 !important;
}

.user-portal .vm-task-modal .video-auto-body > label > span:first-child,
.user-portal .vm-task-modal .video-auto-body .video-field > span:first-child,
.user-portal .vm-task-modal .vm-options-content > label > span:first-child {
  align-self: center;
  min-width: 0;
  padding: 0;
  color: var(--geo-ui-text);
  font-weight: 600;
  line-height: 42px;
  text-align: left;
  white-space: nowrap;
}

.user-portal .vm-task-modal .video-auto-body > label > :is(input, select),
.user-portal .vm-task-modal .video-auto-body .video-field > :is(input, select),
.user-portal .vm-task-modal .vm-options-content > label > :is(input, select) {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
}

.user-portal .vm-task-modal .video-auto-body > label > small,
.user-portal .vm-task-modal .video-auto-body .video-field > small,
.user-portal .vm-task-modal .vm-options-content > label > small {
  grid-column: 2;
  margin: 0;
  color: var(--geo-ui-muted);
  line-height: 1.65;
  white-space: normal;
  overflow-wrap: anywhere;
}

.user-portal .vm-task-modal .task-video-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--geo-ui-border);
  border-radius: 10px;
  background: var(--geo-ui-surface-soft);
}

.user-portal .vm-task-modal .task-video-picker > legend {
  padding: 0 7px;
  color: var(--geo-ui-ink);
  font-size: 14px;
  font-weight: 700;
}

.user-portal .vm-task-modal .vm-source-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  min-width: 0;
}

.user-portal .vm-task-modal .vm-source-meta > p {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #526174;
  font-size: 13px;
  line-height: 1.7;
}

.user-portal .vm-task-modal .vm-source-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.user-portal .vm-task-modal .vm-source-actions .user-reset {
  min-height: 36px;
  padding: 6px 14px;
}

.user-portal .vm-task-modal .video-source-details {
  min-width: 0;
}

.user-portal .vm-task-modal .video-source-details > summary,
.user-portal .vm-task-modal .vm-options-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid #beddf3;
  border-radius: 8px;
  color: #315a91;
  background: #eef7ff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  list-style: none;
  cursor: pointer;
}

.user-portal .vm-task-modal .video-source-details > summary::-webkit-details-marker,
.user-portal .vm-task-modal .vm-options-toggle::-webkit-details-marker {
  display: none;
}

.user-portal .vm-task-modal .video-source-details > summary::after {
  content: "展开素材";
  display: grid;
  min-width: 92px;
  min-height: 36px;
  box-sizing: border-box;
  place-items: center;
  padding: 6px 12px;
  border: 1px solid #80c8f7;
  border-radius: 6px;
  color: #315a91;
  background: #dff0ff;
  font-size: 13px;
  white-space: nowrap;
}

.user-portal .vm-task-modal .video-source-details[open] > summary::after { content: "收起素材"; }
.user-portal .vm-task-modal .video-source-details > .video-field { margin-top: 14px !important; }

.user-portal .vm-task-modal .vm-picker {
  display: grid;
  gap: 8px;
  max-height: 190px;
  margin-top: 12px;
  overflow-y: auto;
}

.user-portal .vm-task-modal .vm-picker > label,
.user-portal .vm-task-modal .task-video-picker > .vm-check {
  display: flex !important;
  align-items: flex-start;
  gap: 10px !important;
  min-width: 0;
  margin: 0 !important;
}

.user-portal .vm-task-modal .vm-picker > label > span,
.user-portal .vm-task-modal .task-video-picker > .vm-check > span {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.user-portal .vm-task-modal .vm-voice-row {
  grid-template-columns: var(--video-task-label) minmax(0, 1fr) !important;
  gap: 8px 16px !important;
  margin: 0;
}

.user-portal .vm-task-modal .vm-voice-row > label {
  display: block !important;
  margin: 0;
  padding: 9px 0 0;
  color: var(--geo-ui-text);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.user-portal .vm-task-modal .vm-voice-actions select {
  height: 42px;
  min-height: 42px;
}

.user-portal .vm-task-modal .video-api-note {
  margin: 0;
  padding: 12px;
  border: 1px solid #e4cda2;
  border-radius: 6px;
  color: #745321;
  background: #fffaf0;
}

.user-portal .vm-task-modal .vm-options {
  min-width: 0;
  margin: 0;
  border: 1px solid #beddf3;
  border-radius: 10px;
  background: #fff;
}

.user-portal .vm-task-modal .vm-options-toggle {
  border: 0;
  border-radius: 9px;
}

.user-portal .vm-task-modal .vm-options-content {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.user-portal .vm-task-modal .vm-options-static {
  border: 0;
  border-top: 1px solid var(--geo-ui-border);
  border-radius: 0;
  background: transparent;
}

.user-portal .vm-task-modal .vm-options-static .vm-options-content {
  padding: 18px 0 0;
}

.user-portal .vm-task-modal > form > footer {
  min-height: calc(63 * var(--video-task-unit)) !important;
  box-sizing: border-box;
  padding: calc(14 * var(--video-task-unit)) var(--video-task-gutter) !important;
}

.user-portal .vm-task-modal > form > footer :is(button, .btn) {
  min-width: calc(88 * var(--video-task-unit));
  min-height: calc(36 * var(--video-task-unit)) !important;
}

@media (max-width: 720px) {
  .user-portal .vm-task-modal:not(.is-minimized):not(.is-maximized) {
    width: calc((100vw - 24px) / var(--video-task-scale)) !important;
    height: calc((100dvh - 24px) / var(--video-task-scale)) !important;
    max-height: calc((100dvh - 24px) / var(--video-task-scale));
  }

  .user-portal .vm-task-modal .video-auto-body { padding: 18px 16px !important; }

  .user-portal .vm-task-modal .video-auto-body > label,
  .user-portal .vm-task-modal .video-auto-body .video-field,
  .user-portal .vm-task-modal .vm-options-content > label,
  .user-portal .vm-task-modal .vm-voice-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .user-portal .vm-task-modal .video-auto-body > label > :is(input, select),
  .user-portal .vm-task-modal .video-auto-body > label > small,
  .user-portal .vm-task-modal .video-auto-body .video-field > :is(input, select),
  .user-portal .vm-task-modal .video-auto-body .video-field > small,
  .user-portal .vm-task-modal .vm-options-content > label > :is(input, select),
  .user-portal .vm-task-modal .vm-options-content > label > small {
    grid-column: 1;
  }

  .user-portal .vm-task-modal .video-auto-body > label > span:first-child,
  .user-portal .vm-task-modal .video-auto-body .video-field > span:first-child,
  .user-portal .vm-task-modal .vm-options-content > label > span:first-child {
    line-height: 1.5;
    white-space: normal;
  }

  .user-portal .vm-task-modal .vm-voice-row > label { padding: 0; white-space: normal; }
  .user-portal .vm-task-modal .vm-source-meta { align-items: flex-start; flex-direction: column; }
  .user-portal .vm-task-modal .vm-source-actions { flex-wrap: wrap; white-space: normal; }
  .user-portal .vm-task-modal > form > footer { padding: 12px 16px; }
}

.user-portal .user-article-modal .article-form-body {
  gap: 18px;
}

.user-portal .user-article-modal .article-form-body > label {
  overflow: visible;
}

.user-portal .user-article-modal .article-form-body > label >
  :is(input:not([type="file"]),select) {
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  padding-block: 0;
  line-height: 24px;
}

.user-portal .user-article-modal .article-form-body > label > small {
  display: block;
  min-height: 22px;
  margin-top: 1px;
  overflow: visible;
  line-height: 1.6;
}

.user-portal .user-article-modal .article-cover-upload {
  width: min(620px, 100%);
}

.user-portal .user-article-modal .article-cover-upload > div {
  width: 100%;
}

.user-portal .user-article-modal .article-cover-upload > div::before {
  min-width: 0;
  border-color: var(--geo-ui-border-strong);
  background: #fbfdff;
}

.user-portal .user-article-modal .article-cover-upload button {
  width: 82px;
  min-width: 82px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(135deg, #16a5ff, #0786da);
}

.user-portal .user-article-modal .article-cover-preview {
  width: 240px;
  height: 116px;
  border-color: var(--geo-ui-border);
  border-radius: 10px;
  background: #f7fafc;
}

.user-portal .user-article-modal .content-media-create-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

.user-portal .user-article-modal .content-media-create-field > span {
  width: 100%;
  padding-top: 0;
  color: var(--geo-ui-text);
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}

.user-portal .user-article-modal .content-media-create-field > .content-media-dropzone {
  box-sizing: border-box;
  align-content: start;
  width: min(760px, 100%);
  min-height: 146px;
  padding: 18px 20px;
  overflow: visible;
}

.user-portal .user-article-modal .content-media-create-field .content-file-picker {
  width: min(640px, 100%);
}

.user-portal .user-article-modal .content-media-create-field small {
  display: block;
  overflow: visible;
  line-height: 1.6;
}

/* Keep the approved article-edit measurements ahead of the generic media
   picker rules declared immediately above. */
.user-portal .user-article-modal.article-edit-reference-modal .article-form-body {
  gap: 20px 24px;
}

.user-portal .user-content .user-article-modal.article-edit-reference-modal
  .article-form-body > label:not(.knowledge-agree):not(.article-editor-reference-row) {
  grid-template-columns: var(--article-edit-label) minmax(0, 1fr) !important;
  align-items: center;
  gap: 8px 16px !important;
}

.user-portal .user-content .user-article-modal.article-edit-reference-modal
  .article-form-body > .article-editor-reference-row {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start;
  gap: 8px 16px !important;
}

.user-portal .user-content .user-article-modal.article-edit-reference-modal
  .article-form-body > label > :is(input:not([type="file"]),select) {
  font-size: calc(14 * var(--article-edit-unit)) !important;
}

.user-portal .user-article-modal.article-edit-reference-modal .article-cover-upload {
  width: auto;
}

.user-portal .user-article-modal.article-edit-reference-modal .article-cover-upload > div {
  width: auto;
}

.user-portal .user-article-modal.article-edit-reference-modal .article-cover-upload button {
  width: auto;
  min-width: calc(80 * var(--article-edit-unit));
  border-radius: 7px;
  background: #0e9cff;
}

.user-portal .user-article-modal.article-edit-reference-modal .article-cover-preview {
  width: calc(240 * var(--article-edit-unit));
  height: calc(144 * var(--article-edit-unit));
  border: 1px solid #d5e0eb !important;
  border-radius: 7px;
  background: #fbfdff;
}

.user-portal .user-modal-host .user-article-modal.article-edit-reference-modal form > footer {
  gap: 10px;
  min-height: calc(64 * var(--article-edit-unit));
  padding: 14px var(--article-edit-gutter);
  background: #fff;
  box-shadow: none;
}

/* Authorized accounts: readable 16px data and explicit icon + text actions. */
.user-portal .user-content .four-accounts .account-list-table {
  min-width: 1450px;
}

.user-portal .user-content .four-accounts .account-list-table :is(th,td) {
  font-size: 16px;
  line-height: 1.5;
}

.user-portal .user-content .four-accounts .account-list-table th {
  font-weight: 600;
}

.user-portal .user-content .four-accounts .account-list-table td {
  height: 92px;
}

.user-portal .user-content .four-accounts .account-list-table th:nth-child(1) { width: 4%; }
.user-portal .user-content .four-accounts .account-list-table th:nth-child(2) { width: 16%; }
.user-portal .user-content .four-accounts .account-list-table th:nth-child(3) { width: 9%; }
.user-portal .user-content .four-accounts .account-list-table th:nth-child(4) { width: 9%; }
.user-portal .user-content .four-accounts .account-list-table th:nth-child(5) { width: 19%; }
.user-portal .user-content .four-accounts .account-list-table th:nth-child(6) { width: 10%; }
.user-portal .user-content .four-accounts .account-list-table th:nth-child(7) { width: 13%; }
.user-portal .user-content .four-accounts .account-list-table th:nth-child(8) { width: 20%; }

.user-portal .user-content .four-accounts :is(
  .authorized-account-name b,.account-platform-name,.account-state,.account-time,
  .account-daily-limit-form b,.account-daily-limit-form span,
  .account-daily-limit-form input[type="number"],.account-daily-limit-form button,
  .account-daily-limit-form label > small,.account-daily-help
) {
  font-size: 16px;
}

.user-portal .user-content .four-accounts .account-daily-limit-form input[type="number"] {
  width: 64px;
  height: 36px;
  min-height: 36px;
  padding-inline: 8px;
}

.user-portal .user-content .four-accounts .account-daily-limit-form label > small {
  line-height: 36px;
}

.user-portal .user-content .four-accounts .account-daily-limit-form button {
  height: 36px;
  min-height: 36px;
  padding-inline: 12px;
  border-radius: 8px;
}

.user-portal .user-content .four-accounts .account-daily-help {
  margin-top: 6px;
  line-height: 1.5;
}

.user-portal .user-content .four-accounts .account-row-actions {
  flex-wrap: nowrap;
  gap: 8px;
}

.user-portal .user-content .four-accounts .account-row-actions form {
  display: inline-flex;
}

.user-portal .user-content .four-accounts .account-row-actions .account-row-action {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 108px;
  height: 38px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #b8def6;
  border-radius: 8px;
  color: #0874bd;
  background: var(--geo-ui-primary-soft);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.user-portal .user-content .four-accounts .account-row-actions .account-row-action:hover {
  border-color: var(--geo-ui-primary);
  color: #fff;
  background: var(--geo-ui-primary);
}

.user-portal .user-content .four-accounts .account-row-actions .account-row-action.unbind {
  border-color: #f4c5cd;
  color: var(--geo-ui-danger);
  background: var(--geo-ui-danger-soft);
}

.user-portal .user-content .four-accounts .account-row-actions .account-row-action.unbind:hover {
  border-color: var(--geo-ui-danger);
  color: #fff;
  background: var(--geo-ui-danger);
}

.user-portal .user-content .four-accounts .account-row-action .account-action-icon,
.user-portal .user-content .four-accounts .account-row-action .ui-icon {
  display: inline-flex;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
}

/* AI data query and keyword tools: remove the remaining legacy red/purple
   decoration while keeping destructive actions semantically red. */
.user-portal .user-content .query-builder-top,
.user-portal .user-content .query-brand-row,
.user-portal .user-content .query-direct-panel,
.user-portal .user-content .query-platform-row {
  border-color: var(--geo-ui-border);
  background: linear-gradient(135deg, #f7fbfe 0%, #f2f7fb 100%);
}

.user-portal .user-content .query-save-btn {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(135deg, #16a5ff, #0786da) !important;
  box-shadow: 0 5px 13px rgba(14, 156, 255, .18);
}

.user-portal .user-content .query-word-field > b {
  border: 1px solid #d9e4ed;
  color: #3b4b5c;
  background: #edf3f7;
  font-weight: 600;
}

.user-portal .user-content .query-word-field.required > b {
  border-color: #7dc9f8;
  color: #075d8e;
  background: #e7f6ff;
  box-shadow: inset 3px 0 0 var(--geo-ui-primary);
}

.user-portal .user-content .query-word-field textarea,
.user-portal .user-content .query-direct-panel textarea {
  border-color: var(--geo-ui-border-strong);
  color: var(--geo-ui-ink);
  background: #fbfdff;
}

.user-portal .user-content .query-word-field textarea:focus,
.user-portal .user-content .query-direct-panel textarea:focus {
  border-color: var(--geo-ui-primary);
  background: #fff;
  box-shadow: var(--geo-ui-focus);
}

.user-portal .user-content .query-mode-row input:checked + span,
.user-portal .user-content .query-mode-row label:hover input:checked + span,
.user-portal .user-content .query-platform-row input:checked + span {
  border-color: var(--geo-ui-primary);
  color: #fff;
  background: linear-gradient(135deg, #16a5ff, #0786da);
  box-shadow: 0 6px 14px rgba(14, 156, 255, .18);
}

.user-portal .user-content .query-platform-row span i,
.user-portal .user-content .query-preview span b {
  background: var(--geo-ui-primary);
}

.user-portal .user-content .query-platform-row input:checked + span i {
  color: #0786da;
  background: #fff;
}

.user-portal .user-content .query-platform-row input:checked + span em {
  color: #0874bd;
}

.user-portal .user-content .query-billing-estimate,
.user-portal .user-content .query-direct-panel header > span {
  border-color: #baddf4;
  color: #0874bd;
  background: var(--geo-ui-primary-soft);
}

.user-portal .user-content .query-record-filters a.active,
.user-portal .user-content .record-action.retry,
.user-portal .user-content .btn-retry,
.user-portal .user-content .manual-combinations > div button.selected,
.user-portal .user-content .manual-results-section > header > b,
.user-portal .user-content .manual-result-actions button:first-child {
  border-color: var(--geo-ui-primary);
  color: #fff;
  background: linear-gradient(135deg, #16a5ff, #0786da);
  box-shadow: 0 5px 13px rgba(14, 156, 255, .16);
}

.user-portal .user-content .keyword-mode.ai {
  background: var(--geo-ui-primary);
}

.user-portal .user-content .keyword-mode.manual {
  background: #13ae9a;
}

/* Status and feedback colors are semantic rather than page-specific. */
:is(.agent-portal,.user-portal) :is(.alert.success,.module-status.good,.status-completed,.status-approved) {
  color: var(--geo-ui-success);
  background-color: var(--geo-ui-success-soft);
}

:is(.agent-portal,.user-portal) :is(.alert.error,.module-status.bad,.status-failed,.status-rejected) {
  color: var(--geo-ui-danger);
  background-color: var(--geo-ui-danger-soft);
}

/* Keyboard focus remains visible on icon buttons and custom controls. */
:is(.agent-portal,.user-portal) :is(a,button,summary,input,select,textarea):focus-visible {
  outline: 2px solid var(--geo-ui-primary);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .agent-portal .app-modal,
  .user-portal .user-record-modal,
  .user-portal .publish-modal-dialog,
  .user-portal .account-auth-dialog {
    width: min(100% - 20px, 760px);
    border-radius: 13px;
  }

  .user-portal .user-content form :is(input,select,textarea),
  .user-portal .user-record-modal form :is(input,select,textarea) {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.agent-portal,.user-portal) *,
  :is(.agent-portal,.user-portal) *::before,
  :is(.agent-portal,.user-portal) *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* SEO site management: keep the endpoint fields and primary action in one
   readable desktop toolbar. The page-specific selectors intentionally win
   over the older three-column extension without affecting other forms. */
.user-portal.user-ui-extended .user-content .portal-parity-page .site-form {
  grid-template-columns: 140px minmax(360px, 1.45fr) minmax(240px, .75fr) max-content;
  align-items: start;
}

.user-portal.user-ui-extended .user-content .portal-parity-page .site-form > .site-form-field {
  grid-column: auto;
}

.user-portal.user-ui-extended .user-content .portal-parity-page .site-form > .site-form-submit {
  grid-column: auto;
  align-self: start;
  justify-self: end;
  min-width: 112px;
  margin-top: 31px;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .user-portal.user-ui-extended .user-content .portal-parity-page .site-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-portal.user-ui-extended .user-content .portal-parity-page .site-form > .site-form-field {
    grid-column: auto;
  }

  .user-portal.user-ui-extended .user-content .portal-parity-page .site-form > .site-form-submit {
    align-self: end;
    margin-top: 0;
  }
}

@media (max-width: 620px) {
  .user-portal.user-ui-extended .user-content .portal-parity-page .site-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-portal.user-ui-extended .user-content .portal-parity-page .site-form > .site-form-submit {
    width: 100%;
    justify-self: stretch;
  }
}

/* Query-record filters: use even inset spacing so the status chips sit on the
   visual centerline instead of being pulled toward the top edge. */
.user-portal.user-ui-extended .user-content .query-records-page .query-record-filters {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  min-height: 54px;
  margin: 16px 0 12px;
  padding: 8px;
  border: 1px solid var(--geo-ui-border);
  border-radius: 10px;
  background: #fff;
}

.user-portal.user-ui-extended .user-content .query-records-page .query-record-filters > a {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

/* Consumption ledgers: the label is the search-field boundary. The nested
   input stays visually transparent so points and balance pages show one line. */
.user-portal.user-ui-extended .user-content .ledger-filter > label {
  box-sizing: border-box;
}

.user-portal.user-ui-extended .user-content .ledger-filter > label > input:not([type="hidden"]) {
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  appearance: none;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
}

.user-portal.user-ui-extended .user-content .ledger-filter > label:focus-within {
  border-color: var(--geo-ui-primary);
  box-shadow: var(--geo-ui-focus);
}

/* Writing-instruction add/edit dialog parity with the approved reference.
   Values compensate for the user portal's established 90% page scale. */
.user-portal .user-instruction-modal {
  --instruction-scale: .9;
  --instruction-unit: calc(1px / var(--instruction-scale));
  --instruction-primary: #0e9cff;
  --instruction-link: #087fc5;
  --instruction-ink: #26364b;
  --instruction-text: #45546a;
  --instruction-muted: #748297;
  --instruction-line: #d5e0eb;
  --instruction-field: #fbfdff;
  --instruction-panel: #f4f7fa;
  --instruction-label: calc(72 * var(--instruction-unit));
  --modal-gutter: calc(32 * var(--instruction-unit));
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid #dce5ee;
  border-radius: calc(14 * var(--instruction-unit));
  color: var(--instruction-text);
  background: #fff;
  box-shadow: 0 24px 80px #182d4930;
  font-size: calc(15 * var(--instruction-unit));
  line-height: 1.6;
}

.user-portal .user-instruction-modal:not(.is-minimized):not(.is-maximized) {
  width: min(
    calc(1120 * var(--instruction-unit)),
    calc((100vw - 48px) / var(--instruction-scale))
  );
  height: min(
    calc(760 * var(--instruction-unit)),
    calc((100dvh - 48px) / var(--instruction-scale))
  );
  max-height: calc((100dvh - 48px) / var(--instruction-scale));
}

.user-portal .user-instruction-modal > header {
  box-sizing: border-box;
  flex: 0 0 auto;
  height: auto;
  min-height: calc(58 * var(--instruction-unit));
  padding: calc(12 * var(--instruction-unit)) var(--modal-gutter);
  border-bottom: 1px solid #e1e8f0;
  color: var(--instruction-ink);
  background: #eff4f9;
}

.user-portal .user-instruction-modal > header b {
  margin: 0;
  color: var(--instruction-ink);
  font-size: calc(17 * var(--instruction-unit));
  font-weight: 700;
  line-height: 1.4;
}

.user-portal .user-instruction-modal > header button {
  flex: none;
  width: calc(30 * var(--instruction-unit));
  height: calc(30 * var(--instruction-unit));
  border: 0;
  border-radius: 6px;
  color: #6d7e94;
  background: transparent;
}

.user-portal .user-instruction-modal > header button:hover {
  color: var(--instruction-ink);
  background: #dfeaf4;
}

.user-portal .user-content .user-instruction-modal:not(.is-minimized) > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: hidden;
}

.user-portal .user-instruction-modal .reference-form-stack {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  gap: 20px 24px;
  padding: 24px var(--modal-gutter);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

.user-portal .user-instruction-modal .reference-form-stack > label:not(.textarea-row) {
  display: grid;
  grid-template-columns: var(--instruction-label) minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
  min-width: 0;
}

.user-portal .user-instruction-modal .reference-form-stack > label > span:first-child,
.user-portal .user-instruction-modal .instruction-parameter-grid label > span:first-child {
  padding: 0;
  color: var(--instruction-text);
  font-size: calc(14 * var(--instruction-unit));
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.user-portal .user-instruction-modal :is(input,textarea) {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--instruction-line) !important;
  border-radius: calc(8 * var(--instruction-unit)) !important;
  color: var(--instruction-ink);
  background: var(--instruction-field) !important;
  box-shadow: none;
  font-family: var(--geo-font-sans) !important;
  font-size: calc(14 * var(--instruction-unit)) !important;
  font-weight: 400;
}

.user-portal .user-instruction-modal input:not([type="hidden"]):not([type="radio"]) {
  height: calc(42 * var(--instruction-unit)) !important;
  min-height: calc(42 * var(--instruction-unit)) !important;
  padding: 0 calc(12 * var(--instruction-unit)) !important;
  line-height: 1.5 !important;
}

.user-portal .user-instruction-modal textarea {
  min-height: calc(116 * var(--instruction-unit));
  border-color: #d7dde8 !important;
  border-radius: 9px !important;
  background: #fbfcfe !important;
  padding: calc(12 * var(--instruction-unit));
  line-height: 1.75;
  resize: vertical;
}

.user-portal .user-instruction-modal :is(input,textarea)::placeholder {
  color: #8795a8;
  opacity: 1;
}

.user-portal .user-instruction-modal :is(input,textarea):focus {
  border-color: var(--instruction-primary) !important;
  outline: 2px solid #0e9cff33;
  outline-offset: 2px;
  box-shadow: none !important;
}

.user-portal .user-instruction-modal .reference-radio-row {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.user-portal .user-instruction-modal .reference-radio-row > legend {
  float: left;
  width: var(--instruction-label);
  min-width: 0;
  margin: 0 16px 0 0;
  padding: 7px 0;
  color: #596274;
  font-size: calc(14 * var(--instruction-unit));
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.user-portal .user-instruction-modal .reference-radio-row::after {
  display: block;
  clear: both;
  content: "";
}

.user-portal .user-instruction-modal .reference-radio-row > label {
  display: inline-flex;
  margin: 0 10px 6px 0;
}

.user-portal .user-instruction-modal .reference-radio-row label > span {
  min-height: calc(34 * var(--instruction-unit));
  padding: 7px 12px;
  border: 1px solid var(--instruction-line);
  border-radius: 7px;
  color: var(--instruction-text);
  background: var(--instruction-panel);
  font-size: calc(14 * var(--instruction-unit));
  font-weight: 400;
}

.user-portal .user-instruction-modal .reference-radio-row input:checked + span {
  border-color: #7ecbff;
  color: var(--instruction-link);
  background: #edf7ff;
}

.user-portal .user-instruction-modal .reference-radio-row input:checked + span::before {
  border-color: var(--instruction-primary);
  background: var(--instruction-primary);
  box-shadow: inset 0 0 0 2px #fff;
}

.user-portal .user-instruction-modal .reference-radio-row input:focus-visible + span {
  outline: 2px solid var(--instruction-primary);
  outline-offset: 3px;
}

.user-portal .user-instruction-modal .instruction-parameters {
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--instruction-line);
  border-radius: 10px;
  background: var(--instruction-panel);
}

.user-portal .user-instruction-modal .instruction-parameters > legend {
  width: auto;
  margin: 0;
  padding: 0 6px;
  color: #24334c;
  font-size: calc(15 * var(--instruction-unit));
  font-weight: 600;
}

.user-portal .user-instruction-modal .instruction-parameters > legend small {
  color: #52627a;
  font-size: calc(13 * var(--instruction-unit)) !important;
  font-weight: 400;
  line-height: 1.65;
}

.user-portal .user-instruction-modal .instruction-parameters > p {
  margin: 0 0 12px;
  color: #52627a;
  font-size: calc(13 * var(--instruction-unit));
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.user-portal .user-instruction-modal .instruction-parameters > p:last-child {
  margin: 12px 0 0;
}

.user-portal .user-instruction-modal .instruction-parameter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}

.user-portal .user-instruction-modal .instruction-parameter-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #334155;
  font-size: calc(13 * var(--instruction-unit));
}

.user-portal .user-instruction-modal .instruction-parameter-grid .instruction-website {
  grid-column: 1 / -1;
}

.user-portal .user-instruction-modal .textarea-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px 16px;
  min-width: 0;
}

.user-portal .user-instruction-modal .reference-warning {
  margin: 0;
  border-color: var(--instruction-line);
  border-radius: 10px;
  color: #f0323d;
  background: var(--instruction-panel);
  font-size: 14px;
  line-height: 2;
}

.user-portal .user-modal-host .user-instruction-modal form > footer {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: calc(64 * var(--instruction-unit));
  margin: 0;
  padding: 14px var(--modal-gutter);
  border-top: 1px solid #e4ebf3;
  background: #fff;
}

.user-portal .user-modal-host .user-instruction-modal form > footer button {
  min-width: calc(88 * var(--instruction-unit));
  min-height: calc(36 * var(--instruction-unit));
  height: auto;
  padding: 6px 16px;
  font-size: calc(14 * var(--instruction-unit)) !important;
}

.user-portal .user-modal-host .user-instruction-modal form > footer .user-submit {
  border-color: transparent !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: var(--instruction-primary) !important;
}

.user-portal .user-modal-host .user-instruction-modal form > footer .user-submit:hover {
  background: #0089e6 !important;
}

.user-portal .user-modal-host .user-instruction-modal form > footer .user-reset {
  border: 1px solid var(--instruction-line) !important;
  border-radius: 999px !important;
  color: var(--instruction-text) !important;
  background: var(--instruction-panel) !important;
}

@media (max-width: 640px) {
  .user-portal .user-instruction-modal {
    --modal-gutter: calc(16 * var(--instruction-unit));
  }

  .user-portal .user-instruction-modal:not(.is-minimized):not(.is-maximized) {
    width: calc((100vw - 24px) / var(--instruction-scale));
    max-height: calc((100dvh - 24px) / var(--instruction-scale));
  }

  .user-portal .user-instruction-modal .reference-form-stack > label:not(.textarea-row) {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .user-portal .user-instruction-modal .reference-radio-row > legend {
    float: none;
    width: auto;
    margin: 0 0 6px;
    padding: 0;
  }

  .user-portal .user-instruction-modal .instruction-parameter-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-portal .user-instruction-modal .instruction-parameter-grid .instruction-website {
    grid-column: auto;
  }
}