:root {
  color-scheme: dark;
  --bg: #07111f;
  --bg-deep: #040b14;
  --surface: #0d1a2b;
  --surface-2: #132237;
  --surface-3: #192b42;
  --line: #263a53;
  --line-strong: #38516d;
  --text: #f4f7fb;
  --muted: #9eb0c6;
  --subtle: #71849c;
  --cyan: #59d5f7;
  --cyan-deep: #153e50;
  --green: #68e3ac;
  --green-deep: #123d35;
  --amber: #f3bd62;
  --amber-deep: #453518;
  --red: #ff7f87;
  --red-deep: #47232d;
  --violet: #b69af8;
  --violet-deep: #302954;
  --sidebar-width: 244px;
  --topbar-height: 78px;
  --preview-height: 48px;
  --assist-height: 0px;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
  font-family: Inter, "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

body.login-mode {
  min-height: 100vh;
  overflow: auto;
}

body.login-mode > .assist-banner,
body.login-mode > .app-shell,
body.login-mode > .mobile-nav,
body.login-mode > .menu-popover,
body.login-mode > .notification-backdrop,
body.login-mode > .notification-drawer,
body.login-mode > .modal,
body.login-mode > .sidebar-backdrop {
  display: none !important;
}

.v2-login-view {
  width: min(1120px, calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.7fr);
  align-items: center;
  gap: 72px;
  padding: 56px 0;
}

.v2-login-brand {
  max-width: 650px;
}

.v2-login-mark {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 30px;
  border: 1px solid #2b6f8f;
  border-radius: 8px;
  background: #0f2b3d;
  color: #63d8ff;
  font-size: 25px;
  font-weight: 800;
}

.v2-login-brand h1 {
  max-width: 620px;
  margin: 10px 0 18px;
  color: #f4f8ff;
  font-size: 46px;
  line-height: 1.16;
  letter-spacing: 0;
}

.v2-login-brand p,
.v2-login-form-head p {
  color: #9db2cf;
  line-height: 1.75;
}

.v2-login-form-panel {
  border-left: 1px solid #25405f;
  padding: 32px 0 32px 48px;
}

.v2-login-form-head h2 {
  margin: 8px 0;
  font-size: 28px;
  letter-spacing: 0;
}

.v2-login-form {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.v2-login-form input {
  width: 100%;
  min-height: 48px;
}

.v2-login-submit {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}

.login-notice {
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid #345577;
  border-radius: 6px;
  background: #10243a;
  color: #b8cae2;
}

.login-notice[data-tone="error"] {
  border-color: #7e3c49;
  background: #291923;
  color: #ffb3bf;
}

.login-notice[data-tone="success"] {
  border-color: #26715c;
  background: #102a26;
  color: #78e0b8;
}

/* Admin command center and live operations */
.command-kpi-grid,
.admin-user-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-user-summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.command-alert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.command-alert {
  min-width: 0;
  min-height: 86px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.command-alert:hover {
  border-color: var(--cyan);
  background: #142a40;
}

.command-alert > span:first-child {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #0a2034;
  color: var(--cyan);
}

.command-alert.warning > span:first-child { color: var(--amber); }
.command-alert.danger > span:first-child { color: var(--red); }
.command-alert div { min-width: 0; }
.command-alert strong,
.command-alert small { display: block; }
.command-alert small { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.command-alert b { font-size: 22px; }
.command-alert > svg:last-child { width: 17px; }

.command-lower-grid {
  grid-template-columns: minmax(360px, 0.8fr) minmax(0, 1.2fr);
}

.command-cost-grid {
  display: grid;
  gap: 10px;
}

.command-cost-grid > div {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.command-cost-grid > div:last-child { border-bottom: 0; }
.command-cost-grid span,
.command-cost-grid small { color: var(--muted); }
.command-cost-grid small { grid-column: 1 / -1; }

.admin-user-filters {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-user-filters .search-field { min-width: min(360px, 100%); }
.admin-user-filters select { min-height: 42px; }
.admin-user-table-shell { overflow-x: auto; }
.admin-live-user-table { min-width: 1120px; }
.admin-live-user-table th:not(:first-child),
.admin-live-user-table td:not(:first-child) { text-align: center; }
.admin-live-user-table td:first-child { min-width: 185px; }
.number-warning { color: var(--amber); font-weight: 750; }
.table-action-row { display: flex; justify-content: center; gap: 6px; }

.admin-account-groups {
  display: grid;
  gap: 10px;
}

.admin-account-group {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0a1728;
  overflow: hidden;
}

.admin-account-group[open] { border-color: var(--line-strong); }
.admin-account-group > summary {
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(180px, 1fr) minmax(420px, 1.7fr) auto 20px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  list-style: none;
  cursor: pointer;
}

.admin-account-group > summary::-webkit-details-marker { display: none; }
.admin-account-group > summary > svg:last-child { transition: transform 160ms ease; }
.admin-account-group[open] > summary > svg:last-child { transform: rotate(180deg); }
.account-group-identity { min-width: 0; }
.account-group-identity strong,
.account-group-identity small { display: block; overflow-wrap: anywhere; }
.account-group-identity small { margin-top: 3px; color: var(--muted); }
.account-group-counts { display: grid; grid-template-columns: repeat(4, minmax(74px, 1fr)); gap: 8px; }
.account-group-counts b { font-size: 16px; }
.account-group-counts small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 500; }
.account-group-body { display: grid; gap: 16px; padding: 0 16px 16px; border-top: 1px solid var(--line); }
.account-group-body section h4 { margin: 16px 0 8px; font-size: 14px; }
.account-group-workload { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 14px; }
.account-group-workload > span { min-width: 100px; padding: 8px 10px; border-left: 2px solid var(--cyan); background: var(--surface-2); color: var(--muted); }
.account-group-workload strong { display: block; margin-top: 2px; color: var(--text); }
.account-group-workload .btn { margin-left: auto; }
.account-group-child-list { display: grid; gap: 6px; }
.account-group-child-list article {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(110px, auto) 38px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #1f354e;
  border-radius: 5px;
  background: var(--surface);
}
.account-group-child-list article > div { min-width: 0; }
.account-group-child-list article strong,
.account-group-child-list article small { display: block; overflow-wrap: anywhere; }
.account-group-child-list article small { margin-top: 3px; color: var(--muted); }

.selected-performance-user-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.selected-performance-user-banner h3 { margin: 4px 0; }
.selected-performance-user-banner p { margin: 0; color: var(--muted); }
.performance-account-coverage { display: flex; gap: 8px; }
.performance-account-coverage span { min-width: 110px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); }
.performance-account-coverage strong { display: block; margin-top: 3px; color: var(--text); font-size: 18px; }
.admin-performance-account-trend-btn.is-active { border-color: var(--cyan); color: var(--cyan); }

@media (max-width: 1280px) {
  .command-kpi-grid,
  .admin-user-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .command-alert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-account-group > summary { grid-template-columns: 42px minmax(160px, 1fr) minmax(320px, 1.5fr) auto 20px; }
}

@media (max-width: 860px) {
  .command-kpi-grid,
  .admin-user-summary-grid,
  .command-alert-grid,
  .command-lower-grid { grid-template-columns: 1fr; }
  .admin-user-filters,
  .admin-user-filters .search-field,
  .admin-user-filters select { width: 100%; }
  .admin-account-group > summary { grid-template-columns: 42px minmax(0, 1fr) auto 20px; }
  .account-group-counts { grid-column: 1 / -1; grid-row: 2; }
  .account-group-child-list article { grid-template-columns: minmax(0, 1fr) auto; }
  .account-group-child-list article > span:not(.status-pill) { grid-column: 1; }
  .selected-performance-user-banner { align-items: flex-start; flex-direction: column; }
  .performance-account-coverage { width: 100%; }
  .performance-account-coverage span { flex: 1; }
}

.metrics-grid.workflow-metrics {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.problem-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #223a56;
}

.filter-chip {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #2a4665;
  border-radius: 6px;
  background: #0d1e32;
  color: #aebfda;
  font: inherit;
  cursor: pointer;
}

.filter-chip:hover,
.filter-chip.is-active {
  border-color: #4cc7f2;
  background: #153b50;
  color: #eaf9ff;
}

.detail-video-shell {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 300px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid #284561;
  border-radius: 6px;
  background: #050b13;
}

.detail-video {
  display: block;
  width: auto;
  max-width: 100%;
  height: min(68vh, 720px);
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #000;
}

.compact-detail-grid {
  margin-top: 12px;
}

.detail-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #233d5a;
}

.detail-section h3 {
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: 0;
}

.table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 1450px) {
  .metrics-grid.workflow-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .v2-login-view {
    width: min(100% - 32px, 620px);
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 30px;
    padding: 38px 0;
  }

  .v2-login-brand h1 {
    font-size: 34px;
  }

  .v2-login-form-panel {
    border-top: 1px solid #25405f;
    border-left: 0;
    padding: 28px 0 0;
  }

  .metrics-grid.workflow-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .v2-login-view {
    width: calc(100% - 28px);
  }

  .v2-login-mark {
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
  }

  .v2-login-brand h1 {
    font-size: 29px;
  }

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

  .detail-video-shell {
    min-height: 240px;
  }

  .detail-video {
    height: min(64vh, 620px);
  }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
}

body.assist-mode {
  --assist-height: 48px;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.hidden {
  display: none !important;
}

.preview-banner {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  min-height: var(--preview-height);
  padding: 6px 54px 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #3a2c12;
  border-bottom: 1px solid #7b5c22;
  color: #ffe4a4;
  font-size: 12px;
}

.preview-context,
.persona-switcher {
  display: flex;
  align-items: center;
}

.preview-context {
  min-width: 0;
  gap: 8px;
}

.preview-context > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.persona-switcher {
  flex: 0 0 auto;
  padding: 3px;
  gap: 3px;
  border: 1px solid #725720;
  border-radius: 7px;
  background: #231b0d;
}

.persona-btn {
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #d7c490;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.persona-btn:hover,
.persona-btn.is-active {
  border-color: #a47b27;
  background: #5a4218;
  color: #fff0c4;
}

.preview-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(243, 189, 98, 0.12);
}

.preview-reset-btn {
  position: absolute;
  right: 12px;
  width: 28px !important;
  height: 28px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: #ffe4a4 !important;
}

.assist-banner {
  position: fixed;
  inset: var(--preview-height) 0 auto 0;
  z-index: 75;
  min-height: 48px;
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #123342;
  border-bottom: 1px solid #2f7892;
  color: #dff7ff;
}

.assist-banner-copy,
.assist-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.assist-banner-copy svg {
  width: 20px;
  height: 20px;
  color: var(--cyan);
}

.assist-banner-copy div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.assist-banner-copy span,
.assist-banner-actions > span {
  color: #a9d8e8;
  font-size: 12px;
}

.assist-exit-btn {
  min-height: 32px !important;
  border-color: #4ea4bf !important;
  background: #184d60 !important;
}

.assist-extend-btn {
  min-height: 32px !important;
  border-color: #6bd4ec !important;
  background: #0d4052 !important;
  color: #dffaff !important;
}

.assist-extend-btn svg {
  width: 15px;
  height: 15px;
}

.assist-banner.is-expiring {
  background: #4a3515;
  border-bottom-color: #d49b38;
  color: #fff2cf;
}

.assist-banner.is-expiring .assist-banner-copy svg,
.assist-banner.is-expiring .assist-banner-copy span,
.assist-banner.is-expiring .assist-banner-actions > span {
  color: #ffd987;
}

.assist-expired-dialog {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
  border: 1px solid rgba(243, 189, 98, 0.42);
  border-radius: 7px;
  background: rgba(83, 58, 20, 0.34);
}

.assist-expired-dialog strong {
  display: block;
  margin-bottom: 6px;
}

.assist-expired-dialog p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.assist-expired-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(243, 189, 98, 0.14);
  color: var(--amber);
}

.assist-expired-icon svg {
  width: 24px;
  height: 24px;
}

.assist-recovery-modal .modal-head [data-close-modal] {
  display: none;
}

.assist-recovery-modal .modal-backdrop {
  cursor: default;
}

body.assist-mode .persona-switcher {
  display: none;
}

.app-shell {
  min-height: 100vh;
  padding-top: calc(var(--preview-height) + var(--assist-height));
}

.sidebar {
  position: fixed;
  top: calc(var(--preview-height) + var(--assist-height));
  bottom: 0;
  left: 0;
  z-index: 50;
  width: var(--sidebar-width);
  padding: 20px 14px 14px;
  display: flex;
  flex-direction: column;
  background: var(--bg-deep);
  border-right: 1px solid var(--line);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 22px;
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border: 1px solid #42627e;
  border-radius: 8px;
  background: #11283b;
  color: var(--cyan);
  font-weight: 900;
  font-size: 16px;
}

.brand-block strong,
.brand-block span {
  display: block;
}

.brand-block strong {
  font-size: 18px;
}

.brand-block span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 12px;
}

.side-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  scrollbar-width: thin;
}

.nav-group + .nav-group {
  margin-top: 20px;
}

.nav-group-label {
  display: block;
  padding: 0 10px 7px;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 700;
}

.side-nav-btn {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.side-nav-btn:hover {
  background: #0c1a29;
  color: var(--text);
}

.side-nav-btn.is-active {
  background: #10273a;
  border-color: #24506a;
  color: var(--cyan);
}

.side-nav-btn svg,
.menu-popover svg,
.mobile-nav svg,
.icon-btn svg,
.btn svg,
.metric-icon svg,
.inline-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.nav-count,
.nav-tag {
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: #203248;
  color: #c5d4e5;
  font-size: 11px;
  font-weight: 800;
}

.nav-tag.gold {
  background: var(--amber-deep);
  color: var(--amber);
}

.account-switcher {
  width: 100%;
  min-height: 58px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.account-switcher:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.account-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1d4c61;
  color: var(--cyan);
  font-weight: 900;
}

.account-copy {
  min-width: 0;
}

.account-copy strong,
.account-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-copy strong {
  font-size: 14px;
}

.account-copy small {
  color: var(--muted);
  font-size: 11px;
}

.main-shell {
  min-height: calc(100vh - var(--preview-height) - var(--assist-height));
  margin-left: var(--sidebar-width);
}

.topbar {
  position: sticky;
  top: calc(var(--preview-height) + var(--assist-height));
  z-index: 40;
  min-height: var(--topbar-height);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(7, 17, 31, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.page-heading {
  min-width: 0;
}

.eyebrow {
  display: block;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
}

.page-heading h1,
.section-title,
.modal-head h2 {
  margin: 2px 0 0;
  font-size: 22px;
  line-height: 1.25;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.membership-badge {
  min-height: 28px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-2);
  color: #dbe6f2;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.membership-badge.small {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 10px;
}

.membership-badge.bronze {
  border-color: #7a583d;
  background: #332318;
  color: #e0ad7d;
}

.membership-badge.silver {
  border-color: #60758d;
  background: #202d3b;
  color: #d8e3ef;
}

.membership-badge.gold {
  border-color: #806325;
  background: var(--amber-deep);
  color: var(--amber);
}

.membership-badge.admin {
  border-color: #347895;
  background: var(--cyan-deep);
  color: var(--cyan);
}

.balance-block {
  min-width: 104px;
  padding-right: 12px;
  text-align: right;
  border-right: 1px solid var(--line);
}

.balance-block span,
.balance-block strong {
  display: block;
}

.balance-block span {
  color: var(--muted);
  font-size: 11px;
}

.balance-block strong {
  font-size: 18px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.icon-btn:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.mobile-menu-btn {
  display: none;
}

.page-content {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 24px 28px 60px;
}

.loading-page {
  min-height: 56vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
}

.loading-page strong {
  color: var(--text);
}

.loading-page p {
  margin: 0;
}

.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--line);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.page-intro {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.page-intro h2 {
  margin: 0;
  font-size: 22px;
}

.page-intro p {
  margin: 5px 0 0;
  color: var(--muted);
}

.intro-actions,
.toolbar-actions,
.button-row,
.filter-row,
.segmented-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.btn {
  min-height: 38px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 750;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--line-strong);
  background: var(--surface-3);
}

.btn.primary {
  border-color: #49bde1;
  background: var(--cyan);
  color: #04111b;
}

.btn.primary:hover {
  background: #83e4fb;
}

.btn.success {
  border-color: #3f9b78;
  background: var(--green-deep);
  color: var(--green);
}

.btn.danger {
  border-color: #74404a;
  background: var(--red-deep);
  color: var(--red);
}

.btn.ghost {
  background: transparent;
  color: var(--muted);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metric-card {
  min-height: 116px;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.metric-card.cyan { border-left: 3px solid var(--cyan); }
.metric-card.green { border-left: 3px solid var(--green); }
.metric-card.amber { border-left: 3px solid var(--amber); }
.metric-card.violet { border-left: 3px solid var(--violet); }
.metric-card.red { border-left: 3px solid var(--red); }

.metric-copy span,
.metric-copy strong,
.metric-copy small {
  display: block;
}

.metric-copy span {
  color: var(--muted);
  font-size: 13px;
}

.metric-copy strong {
  margin: 5px 0 1px;
  font-size: 27px;
  line-height: 1.2;
}

.metric-copy small {
  color: var(--subtle);
  font-size: 11px;
}

.metric-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--cyan);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
  gap: 16px;
}

.content-grid.equal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.panel + .panel,
.section-stack > * + * {
  margin-top: 16px;
}

.panel-head {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.panel-head h3 {
  margin: 0;
  font-size: 16px;
}

.panel-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.status-pill {
  min-height: 24px;
  padding: 3px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #203248;
  color: #c3d3e5;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.status-pill.success { background: var(--green-deep); color: var(--green); }
.status-pill.warning { background: var(--amber-deep); color: var(--amber); }
.status-pill.danger { background: var(--red-deep); color: var(--red); }
.status-pill.info { background: var(--cyan-deep); color: var(--cyan); }
.status-pill.violet { background: var(--violet-deep); color: var(--violet); }

.activity-list,
.simple-list,
.ticket-list,
.member-list {
  display: grid;
  gap: 9px;
}

.activity-row,
.simple-row,
.ticket-row,
.member-row {
  min-width: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0a1727;
}

.activity-icon,
.row-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--cyan);
}

.activity-copy,
.simple-copy,
.ticket-copy,
.member-copy {
  min-width: 0;
}

.activity-copy strong,
.activity-copy span,
.simple-copy strong,
.simple-copy span,
.ticket-copy strong,
.ticket-copy span,
.member-copy strong,
.member-copy span {
  display: block;
}

.activity-copy strong,
.simple-copy strong,
.ticket-copy strong,
.member-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.activity-copy span,
.simple-copy span,
.ticket-copy span,
.member-copy span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.notice-panel {
  border-color: #655329;
  background: #1d1b18;
}

.notice-list {
  display: grid;
  gap: 8px;
}

.notice-row {
  padding: 10px 11px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #493c21;
  border-radius: 6px;
  background: #171713;
  color: #e8d5a8;
  font-size: 12px;
}

.notice-row svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--amber);
}

.csv-import-panel {
  margin-bottom: 16px;
}

.csv-import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 12px;
}

.csv-import-zone {
  width: 100%;
  min-height: 112px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px dashed #3c6787;
  border-radius: 7px;
  background: #091827;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.csv-import-zone:hover,
.csv-import-zone.is-dragging,
.csv-import-zone.has-file {
  border-color: var(--cyan);
  background: #0d2637;
}

.csv-import-zone:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.csv-import-zone > svg {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: var(--cyan);
}

.csv-import-zone-copy,
.csv-import-file-state {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.csv-import-zone-copy strong,
.csv-import-file-state strong {
  overflow-wrap: anywhere;
}

.csv-import-zone-copy small,
.csv-import-file-state span,
.csv-import-file-state small {
  color: var(--muted);
  font-size: 12px;
}

.csv-import-controls {
  min-width: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0a1727;
}

.csv-import-result {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #2f6d61;
  border-radius: 7px;
  background: #0c2524;
}

.csv-import-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.csv-import-result-head strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
}

.csv-import-result-head span,
.csv-import-result > p {
  color: var(--muted);
  font-size: 12px;
}

.csv-import-summary {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.csv-import-summary > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #285149;
  border-radius: 6px;
  background: #0a1d1d;
}

.csv-import-summary span,
.csv-import-summary strong {
  display: block;
}

.csv-import-summary span {
  color: var(--muted);
  font-size: 11px;
}

.csv-import-summary strong {
  margin-top: 3px;
  font-size: 20px;
}

.csv-import-errors {
  margin-top: 12px;
  color: #e7d7ac;
  font-size: 12px;
}

.csv-import-errors summary {
  cursor: pointer;
  font-weight: 800;
}

.csv-import-errors ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.csv-import-errors li + li {
  margin-top: 5px;
}

.create-view-tabs {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.create-view-tabs .tab-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: var(--line);
  background: #0a1727;
}

.create-view-tabs .tab-btn.is-active {
  border-color: #3d89a7;
  background: #123249;
}

.syncing-explainer {
  margin-bottom: 12px;
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #655329;
  border-radius: 7px;
  background: #1d1b18;
}

.sync-extension-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
}

.sync-extension-banner > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sync-extension-banner svg { width: 20px; height: 20px; flex: 0 0 auto; }
.sync-extension-banner strong,
.sync-extension-banner small { display: block; }
.sync-extension-banner small,
.sync-extension-banner > span { color: var(--muted); font-size: 11px; }
.sync-extension-actions { justify-content: flex-end; flex-wrap: wrap; }
.sync-extension-actions > span { color: var(--muted); font-size: 11px; }
.sync-extension-actions .btn { white-space: nowrap; }
.sync-extension-banner.success { border-color: rgba(83, 226, 177, .42); }
.sync-extension-banner.success svg { color: var(--green); }
.sync-extension-banner.warning { border-color: rgba(255, 190, 77, .42); }
.sync-extension-banner.warning svg { color: var(--amber); }
.sync-extension-banner.danger { border-color: rgba(255, 100, 119, .42); }
.sync-extension-banner.danger svg { color: var(--red); }

.syncing-explainer > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.syncing-explainer svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--amber);
}

.syncing-explainer strong,
.syncing-explainer small {
  display: block;
}

.syncing-explainer small,
.sync-auto-note {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.sync-progress-cell {
  width: 230px;
}

.sync-status-cell {
  width: 330px;
}

.sync-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.sync-progress-head span {
  color: var(--muted);
}

.sync-progress-track {
  height: 7px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: #1d3045;
}

.sync-progress-track span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--cyan);
  transition: width 180ms ease;
}

.sync-status-message {
  margin-top: 6px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .csv-import-layout { grid-template-columns: 1fr; }
  .csv-import-controls { align-items: stretch; }
}

@media (max-width: 620px) {
  .csv-import-zone { min-height: 96px; padding: 14px; }
  .csv-import-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csv-import-controls .btn { flex: 1 1 120px; }
  .create-view-tabs { grid-template-columns: 1fr; }
  .syncing-explainer { align-items: stretch; flex-direction: column; }
  .sync-extension-banner { align-items: flex-start; flex-direction: column; }
  .sync-extension-actions { align-items: stretch; width: 100%; }
  .sync-extension-actions .btn { width: 100%; }
  .syncing-explainer .btn { width: 100%; }
}

.plan-strip {
  margin-bottom: 16px;
  padding: 16px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid #2d718c;
  border-radius: 8px;
  background: #0d2536;
}

.plan-strip-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--cyan-deep);
  color: var(--cyan);
}

.plan-strip strong,
.plan-strip span {
  display: block;
}

.plan-strip span {
  color: #a9c5d5;
  font-size: 12px;
}

.plan-price {
  text-align: right;
}

.plan-price strong {
  font-size: 18px;
  color: var(--cyan);
}

.toolbar {
  margin-bottom: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0a1727;
}

.search-field {
  position: relative;
  flex: 1 1 320px;
  min-width: 180px;
}

.search-field svg {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 17px;
  height: 17px;
  color: var(--subtle);
  transform: translateY(-50%);
  pointer-events: none;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #071422;
  color: var(--text);
}

input,
select {
  min-height: 40px;
  padding: 8px 11px;
}

textarea {
  min-height: 120px;
  padding: 10px 11px;
  resize: vertical;
}

.search-field input {
  padding-left: 38px;
}

input::placeholder,
textarea::placeholder {
  color: #667a92;
}

.number-picker {
  display: grid;
  grid-template-columns: auto 76px auto;
  align-items: center;
  gap: 7px;
}

.number-picker span {
  color: var(--muted);
  font-size: 12px;
}

.table-shell {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #091625;
}

.data-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th,
.data-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table th {
  background: #0c1a2a;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.data-table td {
  font-size: 13px;
}

.data-table tbody tr:hover {
  background: #0d1d30;
}

.checkbox-cell {
  width: 44px;
}

.image-cell {
  width: 72px;
}

.status-cell {
  width: 110px;
}

.action-cell {
  width: 132px;
}

.product-thumb {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #1b2b3b;
  cursor: zoom-in;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-thumb span {
  color: var(--muted);
  font-size: 10px;
}

.product-link {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #dce8f5;
  font-weight: 750;
}

.product-link:hover {
  color: var(--cyan);
  text-decoration: underline;
}

.product-meta {
  display: block;
  margin-top: 3px;
  color: var(--subtle);
  font-size: 11px;
}

.pagination {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pagination-copy {
  color: var(--muted);
  font-size: 12px;
}

.segmented-control {
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #081523;
}

.segment-btn,
.tab-btn,
.admin-nav-btn {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-weight: 750;
  cursor: pointer;
}

.segment-btn:hover,
.tab-btn:hover,
.admin-nav-btn:hover {
  color: var(--text);
}

.segment-btn.is-active,
.tab-btn.is-active,
.admin-nav-btn.is-active {
  border-color: #387b96;
  background: var(--cyan-deep);
  color: var(--cyan);
}

.studio-tabbar {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.studio-tabbar .tab-btn {
  min-height: 46px;
  border-color: var(--line);
  background: var(--surface);
}

.studio-tabbar .tab-btn.is-active {
  border-color: #3d89a7;
  background: #123249;
}

.studio-list {
  display: grid;
  gap: 10px;
}

.studio-item {
  min-width: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 160px;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.studio-item .product-thumb {
  width: 64px;
  height: 64px;
}

.studio-item-main {
  min-width: 0;
}

.studio-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.studio-item-main p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.studio-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.progress-track {
  height: 7px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 4px;
  background: #203248;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cyan);
}

.empty-state {
  min-height: 190px;
  padding: 24px;
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: #081522;
}

.empty-state svg {
  width: 34px;
  height: 34px;
  margin-bottom: 9px;
  color: var(--subtle);
}

.empty-state strong {
  color: var(--text);
}

.empty-state p {
  max-width: 460px;
  margin: 5px 0 0;
  font-size: 12px;
}

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

.form-field {
  min-width: 0;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label,
.form-field > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.field-hint,
.form-note {
  margin: 5px 0 0;
  color: var(--subtle);
  font-size: 11px;
}

.upload-zone {
  min-height: 142px;
  padding: 18px;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 1px dashed #3b617c;
  border-radius: 8px;
  background: #081827;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}

.upload-zone:hover,
.upload-zone.is-dragging {
  border-color: var(--cyan);
  background: #0d2434;
}

.upload-zone svg {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  color: var(--cyan);
}

.upload-zone strong,
.upload-zone span {
  display: block;
}

.upload-zone strong {
  color: var(--text);
}

.upload-zone span {
  margin-top: 2px;
  font-size: 11px;
}

.attachment-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.attachment-preview {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
}

.attachment-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-preview button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid #74404a;
  border-radius: 5px;
  background: rgba(33, 9, 15, 0.88);
  color: var(--red);
  cursor: pointer;
}

.ticket-row {
  grid-template-columns: minmax(0, 1fr) auto;
  cursor: pointer;
}

.ticket-row:hover {
  border-color: var(--line-strong);
}

.ticket-meta,
.inline-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
  color: var(--subtle);
  font-size: 11px;
}

.ledger-amount {
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.ledger-amount.positive { color: var(--green); }
.ledger-amount.negative { color: var(--red); }

.balance-flow {
  color: var(--muted);
  white-space: nowrap;
}

.admin-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
}

.admin-nav {
  position: sticky;
  top: 128px;
  align-self: start;
  padding: 10px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.admin-nav-label {
  padding: 9px 8px 3px;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 800;
}

.admin-nav-btn {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.admin-nav-btn svg {
  width: 16px;
  height: 16px;
}

.admin-main {
  min-width: 0;
}

.operations-filter-panel {
  margin-bottom: 14px;
}

.operations-filter-grid {
  display: grid;
  grid-template-columns: auto 142px 142px 150px minmax(220px, 1fr);
  align-items: end;
  gap: 10px;
}

.operations-presets {
  align-self: end;
  min-height: 40px;
  flex-wrap: nowrap;
}

.filter-field {
  min-width: 0;
}

.filter-field > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.operations-filter-grid .search-field {
  align-self: end;
}

.operations-kpis {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.operations-kpis .metric-card {
  min-height: 108px;
}

.trend-chart-shell {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #081522;
}

.chart-legend {
  min-height: 42px;
  padding: 10px 14px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legend i {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--series-color);
}

.trend-chart {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
  overflow: visible;
}

.chart-grid-line {
  stroke: #23364c;
  stroke-width: 1;
}

.chart-axis-label {
  fill: #8194aa;
  font-size: 11px;
}

.chart-series polyline {
  fill: none;
  stroke: var(--series-color);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-series circle {
  fill: #081522;
  stroke: var(--series-color);
  stroke-width: 3;
}

.operations-table {
  min-width: 930px;
}

.detail-modal-panel {
  width: min(980px, 100%);
}

.detail-section + .detail-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.detail-section h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.section-copy {
  margin: -5px 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.monthly-chart {
  min-height: 210px;
  padding: 16px 12px 10px;
  display: grid;
  grid-template-columns: repeat(12, minmax(42px, 1fr));
  align-items: end;
  gap: 7px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #081522;
}

.monthly-column {
  min-width: 42px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.monthly-column strong,
.monthly-column small {
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}

.monthly-column span {
  width: min(34px, 78%);
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  background: var(--amber);
}

.empty-state.compact {
  min-height: 150px;
}

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

.cost-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0a1727;
}

.cost-card.official { border-left: 3px solid var(--amber); }
.cost-card.current { border-left: 3px solid var(--green); }

.cost-card span,
.cost-card strong,
.cost-card small {
  display: block;
}

.cost-card span {
  color: var(--muted);
  font-size: 12px;
}

.cost-card strong {
  margin-top: 5px;
  font-size: 25px;
}

.cost-card small {
  margin-top: 3px;
  color: var(--subtle);
  font-size: 11px;
}

.bar-chart {
  min-height: 220px;
  padding: 18px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #081522;
}

.bar-column {
  flex: 1;
  min-width: 34px;
  height: 178px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.bar-column span {
  width: min(46px, 76%);
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  background: var(--cyan);
}

.bar-column strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.legacy-note {
  padding: 11px 13px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #4e4432;
  border-radius: 7px;
  background: #181715;
  color: #d6c7a7;
  font-size: 12px;
}

.legacy-note svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--amber);
}

.menu-popover {
  position: fixed;
  left: 12px;
  bottom: 84px;
  z-index: 100;
  width: 220px;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #091625;
  box-shadow: var(--shadow);
}

.menu-popover button {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #d5e0ed;
  text-align: left;
  cursor: pointer;
}

.menu-popover button:hover {
  background: var(--surface-2);
}

.menu-divider {
  height: 1px;
  margin: 6px 4px;
  background: var(--line);
}

.danger-text {
  color: var(--red) !important;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(1, 6, 12, 0.82);
  cursor: default;
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(820px, 90vh);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.modal-head {
  min-height: 68px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}

.modal-head h2 {
  font-size: 18px;
}

.image-modal-panel {
  width: min(880px, 100%);
}

.image-modal-body {
  min-height: 300px;
  max-height: calc(90vh - 68px);
  padding: 18px;
  display: grid;
  place-items: center;
  overflow: auto;
  background: #040b14;
}

.image-modal-body img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
}

.detail-modal-body {
  max-height: calc(90vh - 68px);
  padding: 18px;
  overflow-y: auto;
}

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

.detail-field {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #091625;
}

.detail-field span,
.detail-field strong {
  display: block;
}

.detail-field span {
  color: var(--muted);
  font-size: 11px;
}

.detail-field strong {
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.timeline {
  margin-top: 14px;
  display: grid;
  gap: 9px;
}

.timeline-item {
  position: relative;
  padding: 11px 12px 11px 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #091625;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
}

.timeline-item strong,
.timeline-item span {
  display: block;
}

.timeline-item strong {
  font-size: 13px;
}

.timeline-item span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.admin-section-intro {
  margin-bottom: 14px;
  align-items: center;
}

.admin-section-intro h2 {
  font-size: 19px;
}

.accounts-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 14px;
}

.accounts-filter-panel {
  margin-bottom: 14px;
}

.loading-inline {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
}

.accounts-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  align-items: center;
  gap: 12px;
}

.account-status-control {
  justify-self: start;
}

.account-table {
  min-width: 1180px;
}

.account-table th:nth-child(1) { width: 14%; }
.account-table th:nth-child(2) { width: 13%; }
.account-table th:nth-child(3) { width: 15%; }
.account-table th:nth-child(4) { width: 22%; }
.account-table th:nth-child(5),
.account-table th:nth-child(6) { width: 8%; }
.account-table th:nth-child(7) { width: 12%; }
.account-table th:nth-child(8) { width: 8%; }

.account-reason {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

.account-mobile-list {
  display: none;
}

.account-health-banner {
  padding: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 7px;
  background: #091625;
}

.account-health-banner.success { border-left-color: var(--green); }
.account-health-banner.warning { border-left-color: var(--amber); }
.account-health-banner.danger { border-left-color: var(--red); }
.account-health-banner.info { border-left-color: var(--cyan); }

.account-health-banner span,
.account-health-banner strong {
  display: block;
}

.account-health-banner > div > span {
  color: var(--muted);
  font-size: 11px;
}

.account-health-banner > div > strong {
  margin-top: 2px;
  font-size: 17px;
}

.account-health-banner p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.timeline-list {
  display: grid;
  gap: 2px;
}

.timeline-row {
  position: relative;
  min-height: 56px;
  padding: 8px 8px 8px 28px;
  border-bottom: 1px solid var(--line);
}

.timeline-row:last-child {
  border-bottom: 0;
}

.timeline-dot {
  position: absolute;
  top: 16px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(89, 213, 247, 0.1);
}

.timeline-dot.completed { background: var(--green); }
.timeline-dot.uploaded { background: var(--violet); }
.timeline-dot.issue { background: var(--amber); }

.timeline-row strong,
.timeline-row p,
.timeline-row small {
  display: block;
}

.timeline-row strong {
  font-size: 13px;
}

.timeline-row p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.timeline-row small {
  margin-top: 2px;
  color: var(--subtle);
}

.assist-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.assist-entry h3,
.assist-entry p {
  margin: 0;
}

.assist-entry p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.assist-form {
  display: grid;
  gap: 16px;
}

.assist-target-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.assist-target-summary > div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #091625;
}

.assist-target-summary span,
.assist-target-summary strong {
  display: block;
}

.assist-target-summary span {
  color: var(--muted);
  font-size: 11px;
}

.assist-target-summary strong {
  margin-top: 3px;
}

.assist-form .form-field small {
  display: block;
  margin-top: 5px;
  color: var(--subtle);
}

.assist-safety-note,
.local-note {
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #31546a;
  border-radius: 7px;
  background: #0b2231;
  color: #b9dcea;
  font-size: 12px;
}

.assist-safety-note svg,
.local-note svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--cyan);
}

.form-actions {
  justify-content: flex-end;
}

.realtime-actions,
.live-indicator {
  display: flex;
  align-items: center;
}

.realtime-actions {
  gap: 10px;
}

.live-indicator {
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}

.live-indicator i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(104, 227, 172, 0.1);
}

.live-indicator.is-loading i {
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(89, 213, 247, 0.12);
  animation: realtime-pulse 1s ease-in-out infinite;
}

.live-indicator.is-delayed {
  color: var(--amber);
}

.live-indicator.is-delayed i {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(245, 183, 66, 0.12);
}

@keyframes realtime-pulse {
  50% { opacity: 0.4; }
}

.realtime-metrics {
  margin-bottom: 14px;
}

.pipeline-panel {
  margin-bottom: 14px;
}

.publish-audit-panel {
  margin-bottom: 14px;
}

.publish-reason-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.publish-reason-list > div:not(.empty-state) {
  min-width: 0;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0a1727;
}

.publish-reason-list span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.publish-reason-list strong,
.publish-reason-list small {
  overflow-wrap: anywhere;
}

.publish-reason-list small { color: var(--muted); font-size: 10px; }
.publish-reason-list b { color: var(--violet); font-size: 18px; font-variant-numeric: tabular-nums; }

.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.pipeline-step {
  position: relative;
  min-height: 110px;
  padding: 14px 12px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #091625;
}

.pipeline-index {
  position: absolute;
  top: 9px;
  right: 10px;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 800;
}

.pipeline-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--cyan-deep);
  color: var(--cyan);
}

.pipeline-icon svg {
  width: 17px;
  height: 17px;
}

.pipeline-step strong,
.pipeline-step div > span {
  display: block;
}

.pipeline-step strong {
  font-size: 12px;
}

.pipeline-step div > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.realtime-content {
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.5fr);
}

.realtime-timeline {
  max-height: 520px;
  overflow-y: auto;
}

.health-list {
  display: grid;
  gap: 8px;
}

.image-health-list {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.health-list > div {
  padding: 10px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #091625;
}

.health-list span {
  color: var(--muted);
  font-size: 12px;
}

.health-list strong {
  font-size: 15px;
}

.local-note p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.notification-button {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
  border-radius: 10px;
  background: var(--red);
  color: #18070a;
  font-size: 9px;
  font-weight: 900;
}

.notification-backdrop {
  position: fixed;
  inset: calc(var(--preview-height) + var(--assist-height)) 0 0;
  z-index: 88;
  border: 0;
  background: rgba(2, 7, 13, 0.68);
}

.notification-drawer {
  position: fixed;
  top: calc(var(--preview-height) + var(--assist-height));
  right: 0;
  bottom: 0;
  z-index: 90;
  width: min(430px, 100vw);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--line-strong);
  background: #071321;
  box-shadow: -22px 0 48px rgba(0, 0, 0, 0.34);
}

.notification-head,
.notification-toolbar {
  padding: 15px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.notification-head h2 {
  margin: 2px 0 0;
  font-size: 19px;
}

.notification-toolbar {
  align-items: flex-start;
}

.notification-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
}

.notification-tabs .segment-btn {
  flex: 0 0 auto;
}

.text-button {
  min-height: 34px;
  padding: 5px 2px;
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.notification-list {
  min-height: 0;
  overflow-y: auto;
}

.notification-row {
  width: 100%;
  min-height: 94px;
  padding: 13px 15px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 8px;
  align-items: start;
  gap: 11px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #0b1a2a;
  text-align: left;
  cursor: pointer;
}

.notification-row:hover {
  background: #102238;
}

.notification-row.is-read {
  background: #081522;
  opacity: 0.76;
}

.notification-row-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--cyan-deep);
  color: var(--cyan);
}

.notification-row-icon.warning { background: var(--amber-deep); color: var(--amber); }
.notification-row-icon.danger { background: var(--red-deep); color: var(--red); }
.notification-row-icon.success { background: var(--green-deep); color: var(--green); }

.notification-row-icon svg {
  width: 18px;
  height: 18px;
}

.notification-copy,
.notification-copy strong,
.notification-copy span,
.notification-copy small {
  display: block;
  min-width: 0;
}

.notification-copy strong {
  font-size: 13px;
}

.notification-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.notification-copy small {
  margin-top: 5px;
  color: var(--subtle);
  font-size: 10px;
}

.notification-unread-dot {
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--cyan);
}

.notification-foot {
  padding: 11px 15px;
  border-top: 1px solid var(--line);
  color: var(--subtle);
  font-size: 10px;
}

.performance-controls,
.performance-chart-panel,
.performance-metrics {
  margin-bottom: 14px;
}

.performance-view-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.performance-filter-row {
  margin-top: 14px;
  padding-top: 14px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--line);
}

.performance-account-filter {
  min-width: 230px;
  margin-left: auto;
}

.performance-custom-dates {
  width: 100%;
  display: grid;
  grid-template-columns: 150px 150px auto;
  align-items: end;
  justify-content: end;
  gap: 9px;
}

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

.performance-rank-list,
.performance-account-list {
  display: grid;
  gap: 8px;
}

.performance-rank-row {
  min-height: 74px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #091625;
}

.performance-rank-number {
  width: 42px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--cyan-deep);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
}

.performance-rank-row strong,
.performance-rank-row small,
.performance-account-main strong,
.performance-account-main span,
.performance-account-value strong,
.performance-account-value span,
.performance-account-state small {
  display: block;
}

.performance-rank-row small,
.performance-account-main span,
.performance-account-value span,
.performance-account-state small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.performance-rank-row b {
  color: var(--green);
  font-size: 13px;
  white-space: nowrap;
}

.performance-account-row {
  min-height: 84px;
  padding: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(140px, 0.7fr) minmax(130px, 0.55fr);
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #091625;
}

.performance-account-value {
  text-align: right;
}

.performance-account-state {
  text-align: right;
}

.admin-performance-table {
  min-width: 920px;
}

.toast-region {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 160;
  width: min(360px, calc(100vw - 32px));
  display: grid;
  gap: 8px;
}

.toast {
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #102033;
  box-shadow: var(--shadow);
  animation: toast-in 0.2s ease-out;
}

.toast.success { border-color: #377a61; color: var(--green); }
.toast.error { border-color: #74404a; color: var(--red); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobile-nav {
  display: none;
}

.native-app-only {
  display: none !important;
}

html.native-app-mode .sidebar,
html.native-app-mode .topbar {
  display: none !important;
}

html.native-app-mode body {
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

html.native-app-mode .app-shell {
  min-height: 100dvh;
  padding-top: var(--assist-height);
}

html.native-app-mode .main-shell {
  min-height: calc(100dvh - var(--assist-height));
  margin-left: 0;
}

html.native-app-mode .page-content {
  max-width: 760px;
  padding: 12px 12px 28px;
}

html.native-app-mode .mobile-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

html.native-app-mode .native-app-only:not(.hidden) {
  display: flex !important;
}

html.native-app-mode .web-mobile-more {
  display: none !important;
}

html.native-app-mode body[data-persona="admin"] .web-mobile-more {
  display: flex !important;
}

html.native-app-mode body[data-persona="admin"] .mobile-nav {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.native-upload-shell {
  display: grid;
  gap: 16px;
}

.native-upload-head,
.native-upload-ready-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.native-upload-head h2,
.native-upload-ready-head h3 {
  margin: 3px 0 4px;
  font-size: 20px;
}

.native-upload-head p,
.native-upload-ready-head p,
.native-upload-status p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.native-upload-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.native-upload-summary > div {
  min-width: 0;
  padding: 13px 14px;
  display: grid;
  gap: 3px;
}

.native-upload-summary > div + div {
  border-left: 1px solid var(--line);
}

.native-upload-summary span {
  color: var(--muted);
  font-size: 11px;
}

.native-upload-summary strong {
  font-size: 22px;
}

.native-upload-control {
  padding: 14px;
  display: grid;
  gap: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #091625;
}

.native-upload-status {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.native-upload-status-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--muted);
}

.native-upload-status-dot.success { background: var(--green); }
.native-upload-status-dot.warning { background: var(--amber); }
.native-upload-status-dot.info { background: var(--cyan); }

.native-upload-quantity {
  min-height: 46px;
  padding: 6px 8px 6px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 18px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.native-upload-quantity span,
.native-upload-quantity small {
  color: var(--muted);
  font-size: 12px;
}

.native-upload-quantity input {
  width: 76px;
  height: 34px;
  padding: 4px 8px;
  text-align: center;
}

.native-upload-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.native-upload-actions .btn {
  min-width: 0;
  min-height: 44px;
  padding-inline: 7px;
}

.native-upload-ready {
  display: grid;
  gap: 12px;
  padding-top: 2px;
}

.native-upload-list {
  display: grid;
  gap: 9px;
}

.native-upload-item {
  min-width: 0;
  padding: 11px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #091625;
}

.native-upload-item-media,
.native-upload-item-media .product-thumb {
  width: 58px;
  height: 58px;
}

.native-upload-item-copy {
  min-width: 0;
}

.native-upload-item-copy .product-link {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-upload-item-copy .product-meta {
  margin-top: 5px;
}

.native-upload-item-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(82px, 1fr));
  gap: 7px;
}

.native-upload-item-actions .btn {
  min-width: 82px;
  min-height: 40px;
  padding: 7px 10px;
}

.native-video-btn {
  border-color: #247a9d;
  background: #0d5672;
  color: #ecfbff;
}

.native-video-btn:hover:not(:disabled) {
  border-color: #46b6dc;
  background: #126b8d;
}

.native-graveyard-btn {
  border-color: #91434f !important;
  background: #6d2632 !important;
  color: #fff0f2 !important;
}

@media (max-width: 620px) {
  .native-upload-item {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .native-upload-item-media,
  .native-upload-item-media .product-thumb {
    width: 54px;
    height: 54px;
  }

  .native-upload-item-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .native-upload-item-actions .btn {
    width: 100%;
  }
}

.sidebar-backdrop {
  position: fixed;
  inset: calc(var(--preview-height) + var(--assist-height)) 0 0;
  z-index: 45;
  background: rgba(1, 6, 12, 0.74);
}

@media (max-width: 1450px) {
  .operations-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-presets,
  .operations-filter-grid .search-field {
    grid-column: 1 / -1;
  }

  .operations-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-grid,
  .content-grid.equal {
    grid-template-columns: 1fr;
  }

  .attachment-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pipeline-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .realtime-content {
    grid-template-columns: 1fr;
  }

  .performance-leaderboards {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 860px) {
  :root {
    --topbar-height: 66px;
  }

  body {
    padding-bottom: 68px;
  }

  .preview-banner {
    padding-right: 48px;
  }

  .preview-context > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .accounts-filter-row {
    grid-template-columns: 1fr;
  }

  .account-status-control {
    max-width: 100%;
    overflow-x: auto;
  }

  .account-status-control .segment-btn {
    flex: 0 0 auto;
  }

  .account-table-shell {
    display: none;
  }

  .account-mobile-list {
    display: grid;
    gap: 10px;
  }

  .account-mobile-card {
    padding: 13px;
    display: grid;
    gap: 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #091625;
  }

  .account-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .account-card-head strong,
  .account-card-head div > span {
    display: block;
  }

  .account-card-head div > span,
  .account-mobile-card p {
    color: var(--muted);
    font-size: 11px;
  }

  .account-mobile-card p {
    margin: 0;
  }

  .account-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .account-card-stats > span {
    min-width: 0;
    padding: 8px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 10px;
  }

  .account-card-stats strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar {
    width: min(292px, 86vw);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow);
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .main-shell {
    margin-left: 0;
  }

  .topbar {
    min-height: 66px;
    padding: 9px 14px;
  }

  .mobile-menu-btn {
    display: inline-grid;
  }

  .page-heading h1 {
    font-size: 18px;
  }

  .balance-block {
    min-width: 74px;
  }

  .balance-block span {
    display: none;
  }

  .balance-block strong {
    font-size: 15px;
  }

  .topbar-actions .icon-btn[data-page="support"] {
    display: none;
  }

  .page-content {
    padding: 18px 14px 34px;
  }

  .mobile-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 70;
    min-height: 66px;
    padding: 6px 8px max(6px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--line-strong);
    background: #050d17;
  }

  body[data-persona="admin"] .mobile-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-nav-btn {
    min-width: 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    cursor: pointer;
  }

  .mobile-nav-btn.is-active {
    background: #11293b;
    color: var(--cyan);
  }

  .mobile-nav-btn svg {
    width: 19px;
    height: 19px;
  }

  .menu-popover {
    right: 10px;
    bottom: 76px;
    left: auto;
    width: min(280px, calc(100vw - 20px));
  }

  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .admin-nav-label {
    display: none;
  }

  .admin-nav-btn {
    flex: 0 0 auto;
  }

  .studio-item {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .studio-item .product-thumb {
    width: 56px;
    height: 56px;
  }

  .studio-item-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  body.assist-mode {
    --assist-height: 108px;
  }

  body {
    font-size: 14px;
  }

  .preview-banner {
    padding: 5px 43px 5px 8px;
    font-size: 10px;
  }

  .preview-context > strong,
  .preview-context > span:last-child {
    display: none;
  }

  .preview-context {
    flex: 0 0 auto;
  }

  .persona-switcher {
    flex: 1 1 auto;
    justify-content: center;
  }

  .persona-btn {
    min-width: 0;
    padding: 5px 8px;
  }

  .assist-banner {
    min-height: 108px;
    padding: 7px 9px;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  .assist-banner-copy,
  .assist-banner-actions {
    justify-content: space-between;
  }

  .assist-banner-copy div {
    display: block;
  }

  .assist-banner-copy div > span {
    margin-left: 6px;
  }

  .assist-banner-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 30px;
  }

  .assist-banner-actions > span {
    flex: 1 0 100%;
  }

  .membership-badge {
    padding: 4px 7px;
    font-size: 10px;
  }

  .notification-drawer {
    top: max(116px, calc(var(--preview-height) + var(--assist-height) + 54px));
    width: 100%;
    border-top: 1px solid var(--line-strong);
    border-left: 0;
    border-radius: 10px 10px 0 0;
  }

  .notification-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-tabs {
    width: 100%;
  }

  .notification-tabs .segment-btn {
    flex: 1 0 auto;
  }

  .performance-view-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-filter-row,
  .performance-filter-row > .segmented-control,
  .performance-account-filter {
    width: 100%;
  }

  .performance-filter-row > .segmented-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-account-filter {
    margin-left: 0;
  }

  .performance-custom-dates {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .performance-account-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .performance-account-value,
  .performance-account-state {
    text-align: left;
  }

  .performance-account-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .performance-rank-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .performance-rank-number {
    width: 38px;
  }

  .performance-rank-row b {
    grid-column: 2;
  }

  .page-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-intro h2 {
    font-size: 19px;
  }

  .intro-actions,
  .intro-actions .btn {
    width: 100%;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .operations-filter-grid,
  .operations-kpis {
    grid-template-columns: 1fr;
  }

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

  .pipeline-step {
    min-height: 98px;
  }

  .realtime-actions,
  .realtime-actions .btn {
    width: 100%;
  }

  .realtime-actions {
    justify-content: space-between;
  }

  .assist-entry {
    align-items: stretch;
    flex-direction: column;
  }

  .assist-entry .btn,
  .assist-target-summary {
    width: 100%;
  }

  .assist-target-summary {
    grid-template-columns: 1fr;
  }

  .operations-presets {
    width: 100%;
    overflow-x: auto;
  }

  .operations-presets .segment-btn {
    flex: 1 0 auto;
  }

  .metric-card {
    min-height: 104px;
    padding: 12px;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 8px;
  }

  .metric-copy strong {
    font-size: 22px;
  }

  .metric-icon {
    width: 30px;
    height: 30px;
  }

  .panel {
    padding: 14px;
  }

  .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .plan-strip {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 13px;
  }

  .plan-strip-icon {
    width: 38px;
    height: 38px;
  }

  .plan-price {
    grid-column: 1 / -1;
    padding-top: 9px;
    text-align: left;
    border-top: 1px solid #2d5f74;
  }

  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar-actions,
  .toolbar-actions .btn {
    width: 100%;
  }

  .number-picker {
    flex: 1;
    grid-template-columns: auto minmax(60px, 1fr) auto;
  }

  .studio-tabbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid,
  .detail-grid,
  .cost-grid {
    grid-template-columns: 1fr;
  }

  .attachment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .activity-row,
  .simple-row,
  .member-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .activity-row > :last-child,
  .simple-row > :last-child,
  .member-row > :last-child {
    grid-column: 2;
    justify-self: start;
  }

  .pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .pagination .button-row {
    width: 100%;
  }

  .pagination .button-row .btn {
    flex: 1;
  }

  .modal {
    padding: 8px;
  }

  .modal-panel {
    max-height: 94vh;
  }

  .topbar-actions .icon-btn:last-child {
    display: none;
  }
}
/* Workflow actions, announcements, and account preferences. */
.announcement-banner {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: #102036;
}

.announcement-banner.important { border-color: #8a6626; background: #211d18; }
.announcement-banner.bulletin { border-color: #225a70; background: #102535; }
.announcement-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--cyan); background: #0b1a2d; border: 1px solid var(--line); border-radius: 6px; }
.announcement-copy h3 { margin: 2px 0 5px; font-size: 18px; }
.announcement-copy p { margin: 0; color: var(--muted); white-space: pre-line; }
.announcement-copy ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }
.announcement-banner time { color: var(--muted); font-size: 12px; white-space: nowrap; }

.page-load-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid #8b3d4a;
  background: #2a1820;
  border-radius: 6px;
}
.page-load-error > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.page-load-error svg { flex: 0 0 auto; width: 20px; color: #ff7d8c; }
.page-load-error span { display: grid; gap: 3px; min-width: 0; }
.page-load-error strong { color: #ffe5e8; }
.page-load-error small { color: #e7b9c0; overflow-wrap: anywhere; }
.last-updated { color: var(--muted); font-size: 12px; white-space: nowrap; }
.workflow-freshness {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  gap: 8px;
  min-width: 150px;
}
.workflow-freshness-dot {
  background: #62e6b0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(98, 230, 176, 0.12);
  flex: 0 0 auto;
  height: 8px;
  width: 8px;
}
.workflow-freshness > span:last-child { display: grid; gap: 1px; }
.workflow-freshness strong { color: var(--text); font-size: 12px; font-weight: 700; }
.workflow-freshness small { font-size: 11px; }
.workflow-freshness.is-syncing .workflow-freshness-dot {
  animation: workflow-pulse 1.15s ease-in-out infinite;
  background: #ffbd59;
  box-shadow: 0 0 0 4px rgba(255, 189, 89, 0.12);
}
@keyframes workflow-pulse {
  50% { opacity: 0.35; transform: scale(0.75); }
}

.order-confirm-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.order-confirm-summary > div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); background: #0b1a2d; border-radius: 6px; }
.order-confirm-summary span, .order-confirm-summary small { color: var(--muted); }
.order-confirm-summary strong { font-size: 22px; }
.order-confirm-list { display: grid; gap: 8px; max-height: 280px; margin-bottom: 16px; overflow: auto; }
.order-confirm-list > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
.order-confirm-list img, .order-confirm-list > div > span:first-child { display: grid; place-items: center; width: 42px; height: 42px; object-fit: cover; border-radius: 4px; background: #102036; }
.order-confirm-list > div > span:last-child { display: grid; gap: 3px; min-width: 0; }
.order-confirm-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-confirm-list small { color: var(--muted); }
.history-filter-bar { display: grid; grid-template-columns: 180px 180px minmax(220px, 1fr) auto; align-items: end; gap: 10px; margin-bottom: 16px; padding: 12px; border: 1px solid var(--line); background: #0b1a2d; border-radius: 6px; }
.history-filter-bar .button-row { padding-bottom: 1px; }

@media (max-width: 720px) {
  .page-load-error { align-items: stretch; flex-direction: column; }
  .page-load-error .btn { width: 100%; }
  .last-updated { white-space: normal; }
  .order-confirm-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-filter-bar { grid-template-columns: 1fr; }
  .history-filter-bar .button-row .btn { flex: 1; }
}

.workflow-guidance { display: flex; gap: 7px; align-items: flex-start; color: #b9cee8; }
.workflow-guidance svg { flex: 0 0 auto; width: 16px; margin-top: 2px; color: var(--cyan); }
.studio-item-actions { flex-wrap: wrap; justify-content: flex-end; }

.resolution-filter-section {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.resolution-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.resolution-filter-head > div {
  display: grid;
  gap: 3px;
}

.resolution-filter-head span,
.resolution-card small,
.technical-stage-note {
  color: var(--muted);
  font-size: 12px;
}

.resolution-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.resolution-card {
  min-width: 0;
  min-height: 82px;
  padding: 12px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.resolution-card:hover,
.resolution-card.is-active {
  border-color: var(--line-strong);
  background: var(--surface-3);
}

.resolution-card.cyan.is-active { border-color: var(--cyan); }
.resolution-card.red.is-active { border-color: var(--red); }
.resolution-card.amber.is-active { border-color: var(--amber); }
.resolution-card.violet.is-active { border-color: var(--violet); }

.resolution-card-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #0b1a2d;
  color: var(--cyan);
}

.resolution-card.red .resolution-card-icon { color: var(--red); }
.resolution-card.amber .resolution-card-icon { color: var(--amber); }
.resolution-card.violet .resolution-card-icon { color: var(--violet); }
.resolution-card-icon svg { width: 18px; height: 18px; }

.resolution-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.resolution-card strong,
.resolution-card small {
  overflow-wrap: anywhere;
}

.resolution-card b {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.technical-filter {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0a1727;
}

.technical-filter summary {
  min-height: 40px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
}

.technical-filter summary svg { width: 16px; color: var(--cyan); }
.technical-filter label { padding: 0 12px 12px; display: grid; grid-template-columns: 80px minmax(180px, 320px); align-items: center; gap: 10px; }
.technical-filter label span { color: var(--muted); font-size: 12px; }

.issue-resolution-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}

.resolution-badge,
.issue-finance-note {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.resolution-badge.retry { color: var(--cyan); background: var(--cyan-deep); }
.resolution-badge.refund { color: var(--red); background: var(--red-deep); }
.resolution-badge.upload_decision { color: var(--amber); background: var(--amber-deep); }
.resolution-badge.unknown { color: var(--violet); background: var(--violet-deep); }
.issue-finance-note { color: #c5d3e6; background: #1a2a40; }
.technical-stage-note { display: inline-block; margin-top: 6px; }

.issue-explanation {
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid #29415e;
  border-radius: 6px;
  background: #0b1a2b;
}

.issue-explanation-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.issue-explanation-head strong { font-size: 14px; color: #eef6ff; }
.issue-explanation > p { margin: 7px 0 0; color: #b9c9dc; line-height: 1.55; }
.issue-explanation ul { margin: 8px 0 0; padding-left: 18px; color: #8fa7c3; font-size: 12px; line-height: 1.55; }

.issue-origin-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
}

.issue-origin-badge.system { color: var(--cyan); background: var(--cyan-deep); }
.issue-origin-badge.source { color: var(--amber); background: var(--amber-deep); }
.issue-origin-badge.marketplace { color: #a8c7ff; background: #182c4c; }
.issue-origin-badge.production { color: var(--red); background: var(--red-deep); }
.issue-origin-badge.settlement { color: #d8c4ff; background: var(--violet-deep); }
.issue-origin-badge.unknown { color: #c5d3e6; background: #1a2a40; }

.source-selection-intro {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid #285273;
  border-radius: 6px;
  color: #bcd2e8;
  background: #0b2234;
  line-height: 1.55;
}

.source-selection-intro svg { flex: 0 0 auto; width: 17px; color: var(--cyan); }

.source-image-choice-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.source-image-choice {
  position: relative;
  min-width: 0;
  padding: 7px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0a1727;
  cursor: pointer;
}

.source-image-choice input { position: absolute; opacity: 0; pointer-events: none; }
.source-image-choice img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 4px; background: #fff; }
.source-image-choice b { font-size: 12px; text-align: center; color: var(--muted); }
.source-image-choice-check { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; display: none; place-items: center; border-radius: 50%; color: #04121d; background: var(--cyan); }
.source-image-choice-check svg { width: 15px; }
.source-image-choice:has(input:checked) { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(83, 207, 244, .16); }
.source-image-choice:has(input:checked) .source-image-choice-check { display: grid; }

.performance-account-row { grid-template-columns: minmax(180px, 1.4fr) minmax(150px, .8fr) minmax(140px, .7fr) auto; }
.hidden-account-panel { padding: 0; }
.hidden-account-panel summary { cursor: pointer; padding: 16px 18px; font-weight: 700; }
.hidden-account-panel summary span { margin-left: 6px; color: var(--cyan); }
.hidden-account-list { border-top: 1px solid var(--line); }
.hidden-account-list > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.hidden-account-list > div:last-child { border-bottom: 0; }
.hidden-account-list span { display: grid; gap: 3px; }
.hidden-account-list small { color: var(--muted); }

.admin-announcement-grid { align-items: start; }
.toggle-field { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.announcement-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.announcement-editor-foot > span:first-child { color: var(--muted); }

@media (max-width: 860px) {
  .announcement-banner { grid-template-columns: 40px minmax(0, 1fr); }
  .announcement-banner time { grid-column: 2; }
  .studio-item-actions { justify-content: stretch; }
  .studio-item-actions .btn { flex: 1 1 145px; }
  .performance-account-row { grid-template-columns: 1fr; }
  .performance-account-unlink-btn { justify-self: end; }
  .announcement-editor-foot { align-items: stretch; flex-direction: column; }
  .resolution-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resolution-filter-head { align-items: stretch; flex-direction: column; }
  .resolution-filter-head .btn { align-self: flex-start; }
  .publish-reason-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .resolution-filter-grid { grid-template-columns: minmax(0, 1fr); }
  .resolution-card { min-height: 72px; }
  .technical-filter label { grid-template-columns: minmax(0, 1fr); }
  .source-image-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Manual review, source-image comparison, and member settings. */
.studio-item-media {
  position: relative;
  width: 64px;
  min-width: 0;
}

.manual-review-item {
  grid-template-columns: 72px minmax(0, 1fr) minmax(210px, 250px);
  align-items: center;
  min-height: 112px;
  padding: 14px 16px;
}

.manual-review-item .studio-item-media,
.manual-review-item .product-thumb {
  width: 72px;
}

.manual-review-item .product-thumb {
  height: 72px;
}

.manual-review-summary {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.manual-review-summary span {
  min-height: 28px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b9cee8;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #0b192a;
  font-size: 12px;
  font-weight: 700;
}

.manual-review-summary svg {
  width: 14px;
  height: 14px;
  color: var(--cyan);
}

.manual-review-list-actions {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
}

.manual-review-list-actions .btn {
  width: 100%;
}

.manual-review-images {
  min-width: 0;
  padding-left: 14px;
  display: grid;
  align-content: center;
  gap: 8px;
  border-left: 1px solid var(--line);
}

.manual-review-images > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.product-image-strip {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.product-image-strip > button {
  width: 46px;
  height: 46px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #081522;
  cursor: zoom-in;
}

.product-image-strip img,
.product-image-gallery img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #ffffff;
}

.product-image-strip.is-empty {
  min-height: 46px;
  padding: 8px 10px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 6px;
  font-size: 12px;
}

.image-more-count {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--cyan);
  border-radius: 50%;
  background: #102a3d;
  font-size: 11px;
  font-weight: 800;
}

.refund-item-check {
  position: absolute;
  z-index: 2;
  top: -7px;
  left: -7px;
  display: grid;
  cursor: pointer;
}

.refund-item-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.refund-item-check span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: transparent;
  border: 1px solid #49617c;
  border-radius: 5px;
  background: #0b192a;
}

.refund-item-check svg { width: 14px; height: 14px; }
.refund-item-check input:checked + span { color: #03101a; border-color: var(--cyan); background: var(--cyan); }
.refund-selectable-item:has(.refund-item-checkbox:checked) { border-color: #3d89a7; background: #102036; }

.bulk-action-bar {
  margin: 12px 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #624c2a;
  border-radius: 7px;
  background: #1d1b19;
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.check-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  accent-color: var(--cyan);
}

.bulk-action-summary {
  flex: 1;
  color: var(--muted);
  font-size: 12px;
}

.refund-preview-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.refund-preview-summary > div {
  min-height: 94px;
  padding: 13px;
  display: grid;
  align-content: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0b192a;
}

.refund-preview-summary span,
.refund-preview-summary small,
.refund-preview-row small { color: var(--muted); font-size: 12px; }
.refund-preview-summary strong { color: var(--text); font-size: 24px; }

.refund-preview-skipped {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid #624c2a;
  border-radius: 7px;
  background: #1d1b19;
}

.refund-preview-row {
  padding: 9px 0;
  display: grid;
  gap: 3px;
  border-top: 1px solid #624c2a80;
}

.refund-preview-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.modal-panel.detail-modal-panel {
  width: min(1180px, 100%);
}

#image-modal { z-index: 140; }
#gallery-modal { z-index: 145; }

.product-gallery-launcher {
  min-height: 68px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0b192a;
}

.product-gallery-launcher > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-gallery-launcher > div > svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--cyan);
}

.product-gallery-launcher span { min-width: 0; display: grid; gap: 3px; }
.product-gallery-launcher small { color: var(--muted); font-size: 12px; }

.gallery-modal-panel {
  width: min(1040px, 100%);
  max-height: min(92vh, 900px);
}

.gallery-head-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.gallery-modal-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
}

.gallery-main-stage {
  min-width: 0;
  height: min(66vh, 650px);
  padding: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #050d17;
}

.gallery-main-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.gallery-nav-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  cursor: pointer;
}

.gallery-nav-btn:hover:not(:disabled) { color: #03101a; border-color: var(--cyan); background: var(--cyan); }
.gallery-nav-btn:disabled { opacity: .35; cursor: default; }
.gallery-nav-btn svg { width: 20px; height: 20px; }

.gallery-modal-thumbs {
  margin-top: 12px;
  padding: 3px 0 6px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.gallery-thumb-btn {
  position: relative;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #07121f;
  cursor: pointer;
  scroll-snap-align: start;
}

.gallery-thumb-btn.is-active { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.gallery-thumb-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.gallery-thumb-btn span { position: absolute; right: 4px; bottom: 4px; min-width: 19px; padding: 2px 5px; color: #fff; border-radius: 4px; background: #06101dcc; font-size: 10px; font-weight: 800; }

.review-comparison-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  gap: 18px;
  align-items: start;
}

.review-comparison-layout .detail-video {
  height: min(44vh, 480px);
}

.review-media-panel {
  min-width: 0;
}

.review-media-panel + .review-media-panel {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.review-section-head {
  min-height: 48px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.review-section-head h3 {
  margin: 3px 0 0;
  font-size: 15px;
}

.product-image-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.product-gallery-wrap {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.gallery-empty-note {
  min-height: 38px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f1c56e;
  border: 1px solid #624c2a;
  border-radius: 6px;
  background: #1d1b19;
  font-size: 12px;
}

.gallery-empty-note svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.product-image-gallery > button {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  cursor: zoom-in;
}

.product-image-gallery > button > span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #ffffff;
  border-radius: 50%;
  background: rgba(3, 16, 26, .82);
  font-size: 11px;
  font-weight: 800;
}

.product-image-placeholder {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  color: var(--subtle);
  border: 1px dashed #35506d;
  border-radius: 6px;
  background: #091624;
}

.product-image-placeholder > span {
  font-size: 15px;
  font-weight: 800;
}

.product-image-placeholder > small {
  font-size: 10px;
}

.review-product-summary {
  margin-bottom: 16px;
  padding-bottom: 14px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.review-product-summary .product-thumb {
  width: 56px;
  height: 56px;
}

.review-product-summary > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.review-checklist {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.review-checklist span {
  min-height: 38px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #b9cee8;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0b192a;
  font-size: 12px;
}

.review-checklist svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--cyan);
}

.review-decision-bar {
  position: sticky;
  z-index: 4;
  bottom: -18px;
  margin-top: 18px;
  padding: 14px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.review-decision-bar > div:first-child { display: grid; gap: 4px; }
.review-decision-bar > div:first-child span { color: var(--muted); font-size: 12px; }
.product-gallery-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

.settings-layout {
  width: min(720px, 100%);
}

.single-column-form {
  grid-template-columns: 1fr;
}

.legal-layout {
  display: grid;
  gap: 12px;
}

.legal-summary-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.legal-summary-panel > div { display: grid; gap: 4px; }
.legal-summary-panel strong { font-size: 20px; }
.legal-summary-panel p,
.legal-document summary small,
.legal-document-meta { margin: 0; color: var(--muted); font-size: 12px; }
.legal-document summary > span:first-child { display: grid; gap: 4px; }
.legal-document-body { padding: 0 2px; }
.legal-document-meta { margin-bottom: 8px; }

.legal-document {
  border-bottom: 1px solid var(--line);
}

.legal-document summary {
  padding: 15px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-weight: 800;
}

.legal-markdown {
  max-height: 420px;
  margin: 0 0 16px;
  padding: 16px;
  overflow: auto;
  color: #c8d6e8;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #07121f;
  font-size: 13px;
  line-height: 1.75;
}

.legal-markdown > :first-child { margin-top: 0; }
.legal-markdown > :last-child { margin-bottom: 0; }
.legal-markdown h3 { margin: 18px 0 8px; color: var(--text); font-size: 17px; }
.legal-markdown h4 { margin: 16px 0 7px; color: var(--text); font-size: 15px; }
.legal-markdown h5 { margin: 14px 0 6px; color: var(--text); font-size: 14px; }
.legal-markdown p { margin: 0 0 10px; }
.legal-markdown ul,
.legal-markdown ol { margin: 0 0 12px; padding-left: 22px; }
.legal-markdown li + li { margin-top: 4px; }
.legal-markdown a { color: var(--cyan); }
.legal-markdown code { padding: 2px 5px; border-radius: 4px; background: #10243a; }
.legal-markdown hr { margin: 18px 0; border: 0; border-top: 1px solid var(--line); }
.legal-empty-copy { color: var(--muted); }

.legal-acceptance-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

@media (max-width: 1180px) {
  .manual-review-item {
    grid-template-columns: 64px minmax(0, 1fr) minmax(190px, auto);
  }

  .manual-review-item .studio-item-media,
  .manual-review-item .product-thumb {
    width: 64px;
  }

  .manual-review-item .product-thumb {
    height: 64px;
  }

  .manual-review-images {
    grid-column: 2 / -1;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 860px) {
  .manual-review-item { grid-template-columns: 56px minmax(0, 1fr); }
  .manual-review-images,
  .manual-review-item .studio-item-actions { grid-column: 1 / -1; }
  .studio-item-media { width: 56px; }
  .bulk-action-bar,
  .review-decision-bar,
  .legal-acceptance-panel { align-items: stretch; flex-direction: column; }
  .bulk-action-bar .btn,
  .review-decision-bar .btn,
  .legal-acceptance-panel .btn { width: 100%; }
  .review-comparison-layout { grid-template-columns: 1fr; }
  .review-media-panel + .review-media-panel { padding: 16px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .review-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-decision-bar { position: static; bottom: auto; padding-bottom: 0; }
  .panel-head .search-field { flex: 0 0 auto; width: 100%; }
  .gallery-modal-panel { width: 100%; max-height: 100dvh; border-radius: 0; }
  .gallery-main-stage { height: min(62dvh, 620px); }
  .refund-preview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .metrics-grid.workflow-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-metrics .metric-card { min-height: 104px; padding: 13px; }
  .workflow-metrics .metric-card strong { font-size: 24px; }
  .product-image-strip > button { width: 42px; height: 42px; }
  .product-image-gallery { gap: 5px; }
  .review-section-head { min-height: 0; }
  .review-product-summary { grid-template-columns: 48px minmax(0, 1fr); }
  .review-product-summary .product-thumb { width: 48px; height: 48px; }
  .review-product-summary > .status-pill { grid-column: 2; justify-self: start; }
  .review-checklist { grid-template-columns: 1fr; }
  .legal-summary-panel { grid-template-columns: 1fr; }
  .product-gallery-launcher { align-items: stretch; flex-direction: column; }
  .product-gallery-launcher .btn { width: 100%; }
  .gallery-modal-body { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 6px; }
  .gallery-main-stage { height: 56dvh; padding: 6px; }
  .gallery-nav-btn { width: 34px; height: 42px; border-radius: 6px; }
  .gallery-thumb-btn { flex-basis: 58px; width: 58px; height: 58px; }
  .refund-preview-summary > div { min-height: 82px; padding: 10px; }
  .refund-preview-summary strong { font-size: 21px; }
}

/* Local APK candidate: activated only by mobile_ui=compact-v1. */
html.native-compact-ui body {
  background: var(--bg-deep);
}

html.native-compact-ui .page-content {
  width: 100%;
  max-width: 680px;
  padding: 0 0 calc(82px + env(safe-area-inset-bottom));
}

html.native-compact-ui .compact-screen {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 12px;
}

html.native-compact-ui .compact-page-header {
  display: none;
}

html.native-compact-ui .mobile-nav {
  min-height: 62px;
  padding: 4px 5px max(4px, env(safe-area-inset-bottom));
  border-color: #24384f;
  background: #050d17f5;
  backdrop-filter: blur(12px);
}

html.native-compact-ui .mobile-nav-btn {
  min-height: 50px;
  gap: 2px;
  border-radius: 6px;
  font-size: 10px;
}

html.native-compact-ui .mobile-nav-btn.is-active {
  background: #12283a;
  color: var(--cyan);
}

html.native-compact-ui .mobile-nav-btn svg {
  width: 20px;
  height: 20px;
}

html.native-compact-ui .compact-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: #091625;
}

html.native-compact-ui .compact-kpi-grid > button {
  min-width: 0;
  min-height: 82px;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 5px;
  color: var(--text);
  text-align: left;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}

html.native-compact-ui .compact-kpi-grid > button:nth-child(2n) { border-right: 0; }
html.native-compact-ui .compact-kpi-grid > button:nth-last-child(-n + 2) { border-bottom: 0; }
html.native-compact-ui .compact-kpi-grid > button.has-alert { box-shadow: inset 3px 0 0 var(--amber); }
html.native-compact-ui .compact-kpi-grid > button span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
html.native-compact-ui .compact-kpi-grid > button span svg { width: 15px; height: 15px; }
html.native-compact-ui .compact-kpi-grid > button strong { font-size: 25px; line-height: 1; }

html.native-compact-ui .compact-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html.native-compact-ui .compact-primary-actions .btn,
html.native-compact-ui .compact-full-button {
  width: 100%;
  min-height: 46px;
  justify-content: center;
}

html.native-compact-ui .compact-section {
  min-width: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}

html.native-compact-ui .compact-section > h3,
html.native-compact-ui .compact-section-head h3 {
  margin: 0;
  font-size: 14px;
}

html.native-compact-ui .compact-section-head {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

html.native-compact-ui .compact-section-head > span { color: var(--muted); font-size: 11px; }

html.native-compact-ui .compact-notice-list,
html.native-compact-ui .compact-activity-list,
html.native-compact-ui .compact-more-list {
  display: grid;
}

html.native-compact-ui .compact-notice-row,
html.native-compact-ui .compact-more-list > button {
  width: 100%;
  min-height: 54px;
  padding: 9px 2px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}

html.native-compact-ui .compact-notice-row > svg:first-child,
html.native-compact-ui .compact-more-list > button > svg:first-child { color: var(--cyan); }
html.native-compact-ui .compact-notice-row > svg:last-child,
html.native-compact-ui .compact-more-list > button > svg:last-child { color: var(--subtle); }
html.native-compact-ui .compact-notice-row span { min-width: 0; display: grid; gap: 3px; }
html.native-compact-ui .compact-notice-row strong,
html.native-compact-ui .compact-notice-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.native-compact-ui .compact-notice-row small { color: var(--muted); font-size: 11px; }

html.native-compact-ui .compact-empty,
html.native-compact-ui .compact-loading {
  min-height: 72px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 7px;
}

html.native-compact-ui .compact-empty svg { width: 18px; height: 18px; }

html.native-compact-ui .compact-announcement {
  border-top: 1px solid var(--line);
}

html.native-compact-ui .compact-announcement summary,
html.native-compact-ui .compact-filter-panel summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

html.native-compact-ui .compact-announcement summary span { margin-left: auto; }
html.native-compact-ui .compact-announcement article { padding: 10px 0; border-top: 1px solid var(--line); }
html.native-compact-ui .compact-announcement article p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

html.native-compact-ui .compact-mode-tabs,
html.native-compact-ui .compact-range-row,
html.native-compact-ui .compact-resolution-tabs {
  min-width: 0;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

html.native-compact-ui .compact-mode-tabs::-webkit-scrollbar,
html.native-compact-ui .compact-range-row::-webkit-scrollbar,
html.native-compact-ui .compact-resolution-tabs::-webkit-scrollbar { display: none; }

html.native-compact-ui .compact-mode-tabs > button,
html.native-compact-ui .compact-range-row > button,
html.native-compact-ui .compact-resolution-tabs > button {
  flex: 1 0 auto;
  min-width: 0;
  min-height: 42px;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #091625;
  cursor: pointer;
  white-space: nowrap;
}

html.native-compact-ui .compact-mode-tabs > button.is-active,
html.native-compact-ui .compact-range-row > button.is-active,
html.native-compact-ui .compact-resolution-tabs > button.is-active {
  color: var(--cyan);
  border-color: #3d7893;
  background: #102b3c;
}

html.native-compact-ui .compact-mode-tabs svg { width: 16px; height: 16px; }

html.native-compact-ui .compact-import-panel,
html.native-compact-ui .compact-product-picker {
  display: grid;
  gap: 12px;
}

html.native-compact-ui .compact-link-field { display: grid; gap: 7px; }
html.native-compact-ui .compact-link-field > span { color: var(--muted); font-size: 12px; }
html.native-compact-ui .compact-link-field textarea { width: 100%; min-height: 92px; resize: vertical; font-size: 16px; line-height: 1.5; }

html.native-compact-ui .compact-import-result {
  min-width: 0;
  padding: 11px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #091625;
}

html.native-compact-ui .compact-import-result .product-thumb { width: 58px; height: 58px; }
html.native-compact-ui .compact-import-result > div { min-width: 0; display: grid; align-content: center; justify-items: start; gap: 4px; }
html.native-compact-ui .compact-import-result strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.native-compact-ui .compact-import-result small { color: var(--muted); font-size: 11px; }

html.native-compact-ui .compact-picker-toolbar { display: grid; gap: 8px; }
html.native-compact-ui .compact-picker-toolbar .search-field { width: 100%; }

html.native-compact-ui .compact-random-control,
html.native-compact-ui .compact-stepper {
  min-height: 46px;
  display: grid;
  grid-template-columns: 44px 52px 44px minmax(88px, 1fr);
  gap: 6px;
  align-items: center;
}

html.native-compact-ui .compact-random-control input,
html.native-compact-ui .compact-stepper input {
  width: 100%;
  height: 44px;
  padding: 4px;
  text-align: center;
}

html.native-compact-ui .compact-random-control .icon-btn,
html.native-compact-ui .compact-stepper .icon-btn { width: 44px; height: 44px; }

html.native-compact-ui .compact-product-list,
html.native-compact-ui .compact-work-list {
  display: grid;
  gap: 8px;
}

html.native-compact-ui .compact-product-row {
  min-width: 0;
  min-height: 72px;
  padding: 9px;
  display: grid;
  grid-template-columns: 20px 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #091625;
}

html.native-compact-ui .compact-product-row:has(input:checked) { border-color: #3d89a7; background: #102036; }
html.native-compact-ui .compact-product-row > input { width: 18px; height: 18px; min-height: 0; accent-color: var(--cyan); }
html.native-compact-ui .compact-product-row .product-thumb { width: 52px; height: 52px; }
html.native-compact-ui .compact-product-row > span { min-width: 0; display: grid; gap: 4px; }
html.native-compact-ui .compact-product-row > span strong { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
html.native-compact-ui .compact-product-row > span small { color: var(--muted); font-size: 10px; }
html.native-compact-ui .compact-product-row .compact-check-mark { width: 22px; height: 22px; place-items: center; display: none; color: #03101a; border-radius: 50%; background: var(--cyan); }
html.native-compact-ui .compact-product-row:has(input:checked) .compact-check-mark { display: grid; }
html.native-compact-ui .compact-check-mark svg { width: 14px; height: 14px; }

html.native-compact-ui .compact-selection-bar {
  position: sticky;
  z-index: 8;
  bottom: calc(66px + env(safe-area-inset-bottom));
  min-height: 60px;
  margin: 0 -12px -12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line-strong);
  background: #07111ff2;
  backdrop-filter: blur(12px);
}

html.native-compact-ui .compact-selection-bar > span { color: var(--muted); font-size: 11px; }
html.native-compact-ui .compact-selection-bar > span strong { color: var(--text); font-size: 18px; }
html.native-compact-ui .compact-selection-bar > div { display: flex; gap: 7px; }
html.native-compact-ui .compact-selection-bar .btn { min-height: 44px; }

html.native-compact-ui .csv-import-panel { padding: 0; border: 0; background: transparent; }
html.native-compact-ui .csv-import-panel .panel-head { display: none; }
html.native-compact-ui .csv-import-layout { grid-template-columns: 1fr; }

html.native-compact-ui .compact-status-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

html.native-compact-ui .compact-status-tabs::-webkit-scrollbar { display: none; }
html.native-compact-ui .compact-status-tabs > button {
  flex: 0 0 auto;
  min-width: 76px;
  min-height: 48px;
  padding: 6px 10px;
  display: grid;
  place-items: center;
  gap: 2px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #091625;
  scroll-snap-align: start;
}

html.native-compact-ui .compact-status-tabs > button.is-active { color: var(--cyan); border-color: #3d7893; background: #102b3c; }
html.native-compact-ui .compact-status-tabs span { font-size: 11px; }
html.native-compact-ui .compact-status-tabs b { color: var(--text); font-size: 14px; }
html.native-compact-ui .compact-resolution-tabs > button { flex: 0 0 auto; min-height: 38px; padding: 6px 10px; font-size: 11px; }

html.native-compact-ui .compact-filter-panel {
  border-block: 1px solid var(--line);
}

html.native-compact-ui .compact-filter-panel > div {
  padding: 0 0 11px;
  display: grid;
  gap: 8px;
}

html.native-compact-ui .compact-filter-panel .search-field,
html.native-compact-ui .compact-filter-panel .filter-field { width: 100%; }

html.native-compact-ui .compact-work-item {
  min-width: 0;
  padding: 10px;
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #091625;
}

html.native-compact-ui .compact-work-item-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

html.native-compact-ui .compact-work-item-head .product-thumb { width: 50px; height: 50px; }
html.native-compact-ui .compact-work-item-head > div { min-width: 0; display: grid; gap: 4px; }
html.native-compact-ui .compact-work-item-head > div strong { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
html.native-compact-ui .compact-work-item-head > div small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.native-compact-ui .compact-work-item-head .status-pill { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.native-compact-ui .compact-work-item > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
html.native-compact-ui .compact-work-item .compact-issue-copy { color: #f0cf91; }
html.native-compact-ui .compact-work-actions { display: flex; flex-wrap: wrap; gap: 6px; }
html.native-compact-ui .compact-work-actions .btn { flex: 1 1 108px; min-width: 0; min-height: 42px; padding: 7px 9px; justify-content: center; }

html.native-compact-ui .bulk-action-bar { margin: 0; align-items: stretch; flex-direction: column; }
html.native-compact-ui .bulk-action-bar .btn { width: 100%; }

html.native-compact-ui .pagination {
  margin-top: 2px;
  padding: 10px 0 0;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
}

html.native-compact-ui .pagination-copy { font-size: 10px; }
html.native-compact-ui .pagination .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.native-compact-ui .pagination .btn { min-height: 42px; padding: 7px 9px; }

html.native-compact-ui .compact-performance-screen .performance-metrics,
html.native-compact-ui .compact-admin-performance .performance-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

html.native-compact-ui .compact-performance-screen .metric-card,
html.native-compact-ui .compact-admin-performance .metric-card {
  min-height: 88px;
  padding: 10px;
}

html.native-compact-ui .compact-performance-screen .metric-card strong,
html.native-compact-ui .compact-admin-performance .metric-card strong { font-size: 20px; }
html.native-compact-ui .compact-performance-screen .metric-card p,
html.native-compact-ui .compact-admin-performance .metric-card p { font-size: 10px; }
html.native-compact-ui .compact-account-select { min-height: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
html.native-compact-ui .compact-account-select select { min-width: 0; width: 100%; }
html.native-compact-ui .compact-sync-note {
  min-height: 56px;
  padding: 10px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid #735a28;
  border-radius: 7px;
  background: #2c2414;
  color: var(--amber);
}
html.native-compact-ui .compact-sync-note svg { width: 18px; height: 18px; }
html.native-compact-ui .compact-sync-note span { min-width: 0; display: grid; gap: 2px; }
html.native-compact-ui .compact-sync-note small { color: #cfbd98; font-size: 10px; }
html.native-compact-ui .compact-chart-section .trend-chart-shell,
html.native-compact-ui .compact-filter-panel .trend-chart-shell { overflow-x: auto; }
html.native-compact-ui .compact-chart-section .trend-chart,
html.native-compact-ui .compact-filter-panel .trend-chart { min-width: 620px; }

html.native-compact-ui .performance-account-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

html.native-compact-ui .performance-account-state { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; text-align: left; }

html.native-compact-ui .compact-upload-controller {
  padding: 12px;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #091625;
}

html.native-compact-ui .compact-stepper { grid-template-columns: minmax(0, 1fr) 44px 52px 44px; }
html.native-compact-ui .compact-stepper > span { color: var(--muted); font-size: 12px; }
html.native-compact-ui .compact-upload-list-section { padding-top: 0; border-top: 0; }
html.native-compact-ui .native-upload-item { padding: 9px; grid-template-columns: 52px minmax(0, 1fr); }
html.native-compact-ui .native-upload-item-media,
html.native-compact-ui .native-upload-item-media .product-thumb { width: 52px; height: 52px; }
html.native-compact-ui .native-upload-item-copy .product-link { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
html.native-compact-ui .native-upload-item-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.native-compact-ui .native-upload-item-actions.compact-upload-record-actions { grid-template-columns: 1fr; }
html.native-compact-ui .native-upload-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }

html.native-compact-ui body[data-persona="admin"] {
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
}

html.native-compact-ui body[data-persona="admin"] > .mobile-nav {
  display: none !important;
}

html.native-compact-ui .compact-admin-screen { padding-bottom: 78px; }

html.native-compact-ui .compact-admin-tabs {
  position: fixed;
  z-index: 72;
  inset: auto 0 0;
  min-height: 62px;
  padding: 4px 5px max(4px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  background: #050d17f5;
  backdrop-filter: blur(12px);
}

html.native-compact-ui .compact-admin-tabs button {
  min-width: 0;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--muted);
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 10px;
}

html.native-compact-ui .compact-admin-tabs button.is-active { color: var(--cyan); background: #12283a; }
html.native-compact-ui .compact-admin-tabs svg { width: 20px; height: 20px; }
html.native-compact-ui .compact-admin-panel { min-width: 0; }

html.native-compact-ui .compact-activity-list > div {
  position: relative;
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0 8px 20px;
  border-bottom: 1px solid var(--line);
}

html.native-compact-ui .compact-activity-list .timeline-dot {
  top: 16px;
  left: 2px;
}

html.native-compact-ui .compact-activity-list p { min-width: 0; margin: 0; display: grid; gap: 3px; }
html.native-compact-ui .compact-activity-list p strong,
html.native-compact-ui .compact-activity-list p small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.native-compact-ui .compact-activity-list p small,
html.native-compact-ui .compact-activity-list time { color: var(--muted); font-size: 10px; }

html.native-compact-ui .compact-admin-users,
html.native-compact-ui .compact-admin-videos,
html.native-compact-ui .compact-admin-performance { display: grid; gap: 10px; }

html.native-compact-ui .compact-user-list { display: grid; gap: 8px; }

html.native-compact-ui .compact-user-list > article {
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(104px, 1.2fr) repeat(3, minmax(48px, .7fr)) 36px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #091625;
}

html.native-compact-ui .compact-user-list > article > div { min-width: 0; display: grid; gap: 3px; }
html.native-compact-ui .compact-user-list > article > div strong,
html.native-compact-ui .compact-user-list > article > div small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.native-compact-ui .compact-user-list > article > div small,
html.native-compact-ui .compact-user-list > article > span { color: var(--muted); font-size: 9px; }
html.native-compact-ui .compact-user-list > article > span { min-width: 0; text-align: center; }
html.native-compact-ui .compact-user-list > article > span strong { display: block; margin-top: 3px; color: var(--text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
html.native-compact-ui .compact-user-list .icon-btn { width: 36px; height: 40px; }

html.native-compact-ui .compact-filter-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(116px, .7fr); gap: 7px; }
html.native-compact-ui .compact-filter-row select { min-width: 0; width: 100%; }
html.native-compact-ui .compact-admin-more-detail > .text-button { min-height: 44px; margin-bottom: 8px; }
html.native-compact-ui .compact-admin-more-detail .page-intro { display: none; }
html.native-compact-ui .compact-admin-more-detail .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.native-compact-ui .compact-admin-more-detail .admin-performance-table { min-width: 760px; }

@media (max-width: 390px) {
  html.native-compact-ui .compact-screen { padding-inline: 9px; }
  html.native-compact-ui .compact-selection-bar { margin-inline: -9px; padding-inline: 9px; }
  html.native-compact-ui .compact-user-list > article { grid-template-columns: minmax(92px, 1fr) repeat(3, minmax(42px, .55fr)) 34px; gap: 4px; }
  html.native-compact-ui .compact-user-list > article > span { font-size: 8px; }
  html.native-compact-ui .compact-work-item-head { grid-template-columns: 46px minmax(0, 1fr); }
  html.native-compact-ui .compact-work-item-head .product-thumb { width: 46px; height: 46px; }
  html.native-compact-ui .compact-work-item-head .status-pill { grid-column: 2; justify-self: start; }
}

@media (min-width: 1500px) {
  .create-metrics-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.image-sync-table .table-actions {
  flex-wrap: wrap;
  min-width: 150px;
}

/* Remote operations: server capability-gated workspace */
.nav-tag.pilot {
  background: var(--amber-deep);
  color: var(--amber);
}

.remote-page-intro {
  align-items: center;
}

.remote-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

.remote-summary-grid > article {
  min-width: 0;
  padding: 15px 16px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 8px;
  background: var(--surface);
}

.remote-summary-grid > article.has-attention {
  border-left-color: var(--red);
}

.remote-summary-grid > article.is-recovering {
  border-left-color: var(--amber);
}

.remote-summary-grid span,
.remote-summary-grid small {
  color: var(--muted);
  font-size: 12px;
}

.remote-summary-grid strong {
  color: var(--text);
  font-size: 25px;
}

.remote-page-meta {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--subtle);
  font-size: 12px;
}

.remote-page-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.remote-page-meta svg {
  width: 15px;
  height: 15px;
}

.remote-page-error,
.remote-device-error {
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #74404a;
  border-radius: 7px;
  background: var(--red-deep);
  color: var(--red);
}

.remote-page-error {
  margin-bottom: 16px;
}

.remote-page-error svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

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

.remote-device-card {
  min-width: 0;
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.remote-device-card.is-ready {
  border-top-color: var(--green);
}

.remote-device-card.is-attention {
  border-top-color: var(--red);
}

.remote-device-card.is-recovering {
  border-top-color: var(--amber);
}

.remote-device-card.is-offline {
  border-top-color: var(--subtle);
}

.remote-device-head,
.remote-operation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.remote-device-head .eyebrow {
  margin-bottom: 5px;
}

.remote-device-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.remote-device-head small {
  color: var(--subtle);
  font-size: 11px;
}

.remote-state-pill.muted {
  background: #203248;
  color: #aebed0;
}

.remote-state-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.remote-state-grid > div {
  min-width: 0;
  padding: 10px;
  display: grid;
  gap: 6px;
  border: 1px solid #1e3249;
  border-radius: 7px;
  background: #0a1726;
}

.remote-state-grid small {
  color: var(--subtle);
  font-size: 11px;
}

.remote-state-grid .status-pill {
  justify-self: start;
}

.remote-device-meta {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 1fr;
  gap: 8px;
}

.remote-device-meta > div {
  min-width: 0;
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 5px;
  border: 1px solid #1e3249;
  border-radius: 7px;
  background: #0a1726;
}

.remote-device-meta span,
.remote-device-meta strong {
  overflow-wrap: anywhere;
}

.remote-device-meta span {
  color: var(--subtle);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.remote-device-meta strong {
  font-size: 12px;
  line-height: 1.45;
}

.remote-quota-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #24506a;
  border-radius: 7px;
  background: #091827;
}

.remote-quota-grid > div {
  min-width: 0;
  padding: 10px 6px;
  display: grid;
  gap: 3px;
  text-align: center;
}

.remote-quota-grid > div + div {
  border-left: 1px solid #1f4057;
}

.remote-quota-grid span,
.remote-quota-grid small {
  overflow: hidden;
  color: var(--subtle);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-quota-grid strong {
  font-size: 17px;
}

.remote-readiness-reasons {
  margin: 0;
  padding: 11px 14px 11px 31px;
  border: 1px solid #6b5428;
  border-radius: 7px;
  background: var(--amber-deep);
  color: var(--amber);
  font-size: 12px;
  line-height: 1.55;
}

.remote-readiness-panel {
  overflow: hidden;
  border: 1px solid #6b5428;
  border-radius: 7px;
  background: color-mix(in srgb, var(--amber-deep) 55%, transparent);
}

.remote-readiness-panel.has-blocking {
  border-color: #74404a;
  background: color-mix(in srgb, var(--red-deep) 45%, transparent);
}

.remote-readiness-panel > header {
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.remote-readiness-panel > header strong {
  font-size: 11px;
}

.remote-readiness-panel > header span {
  color: var(--muted);
  font-size: 10px;
}

.remote-readiness-panel ul {
  margin: 0;
  padding: 0;
  display: grid;
  list-style: none;
}

.remote-readiness-panel li {
  padding: 8px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.remote-readiness-panel li + li {
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.remote-reason-level {
  min-width: 34px;
  padding: 2px 5px;
  border-radius: 999px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
}

.remote-reason-level.is-warning {
  background: var(--amber-deep);
  color: var(--amber);
}

.remote-reason-level.is-blocking {
  background: var(--red-deep);
  color: var(--red);
}

.remote-device-error {
  display: grid;
  gap: 3px;
  font-size: 12px;
}

.remote-device-error strong {
  font-size: 10px;
  letter-spacing: 0.05em;
}

.remote-operation-panel,
.remote-action-tray {
  padding: 14px;
  display: grid;
  gap: 11px;
  border: 1px solid #24506a;
  border-radius: 7px;
  background: #0b2130;
}

.remote-operation-head > div {
  display: grid;
  gap: 3px;
}

.remote-operation-head span {
  color: var(--muted);
  font-size: 11px;
}

.remote-operation-head strong {
  font-size: 18px;
}

.remote-operation-panel p,
.remote-action-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.remote-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #1d3347;
}

.remote-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transition: width 180ms ease;
}

.remote-operation-controls,
.remote-primary-actions {
  align-items: stretch;
}

.remote-primary-actions .btn {
  flex: 1;
}

.remote-action-tray {
  border-color: #6b5428;
  background: #251e10;
}

.remote-action-tray > div:first-child,
.remote-backfill-field,
.remote-upload-custom-field {
  display: grid;
  gap: 5px;
}

.remote-action-tray small,
.remote-backfill-field > span:first-child,
.remote-upload-custom-field > span:first-child {
  color: var(--muted);
  font-size: 11px;
}

.remote-backfill-field > span:nth-child(2),
.remote-upload-custom-field > span:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 8px;
}

#remote-upload-quantity {
  width: 92px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--bg-deep);
  color: var(--text);
}

#remote-backfill-start-date {
  width: min(100%, 190px);
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--bg-deep);
  color: var(--text);
  color-scheme: dark;
}

.remote-backfill-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #6b5428;
  border-radius: 7px;
  background: color-mix(in srgb, var(--bg-deep) 76%, transparent);
}

.remote-backfill-overview > div {
  min-width: 0;
  padding: 9px 8px;
  display: grid;
  gap: 4px;
}

.remote-backfill-overview > div + div {
  border-left: 1px solid #6b5428;
}

.remote-backfill-overview span,
.remote-backfill-progress-details span {
  color: var(--subtle);
  font-size: 9px;
}

.remote-backfill-overview strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-backfill-plan {
  padding: 10px;
  display: grid;
  gap: 6px;
  border: 1px solid #6b5428;
  border-radius: 7px;
  background: color-mix(in srgb, var(--amber-deep) 46%, transparent);
}

.remote-backfill-plan.is-complete {
  border-color: color-mix(in srgb, var(--green) 42%, var(--line));
  background: color-mix(in srgb, var(--green-deep) 70%, transparent);
}

.remote-backfill-plan header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.remote-backfill-plan header strong {
  font-size: 12px;
}

.remote-backfill-plan header span {
  color: var(--amber);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

.remote-backfill-plan.is-complete header span {
  color: var(--green);
}

.remote-backfill-plan p,
.remote-backfill-latest p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.remote-backfill-plan .remote-backfill-plan-notice {
  color: var(--amber);
}

.remote-backfill-progress-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--bg-deep) 70%, transparent);
}

.remote-backfill-progress-details > div {
  min-width: 0;
  padding: 8px 5px;
  display: grid;
  gap: 3px;
  text-align: center;
}

.remote-backfill-progress-details > div + div {
  border-left: 1px solid var(--line);
}

.remote-backfill-progress-details strong {
  font-size: 14px;
}

.remote-backfill-progress-details > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 7px 9px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}

.remote-backfill-latest {
  padding: 10px;
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--cyan-deep) 42%, transparent);
}

.remote-backfill-latest > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.remote-backfill-latest > header strong {
  font-size: 11px;
}

.remote-backfill-latest.is-compact {
  padding: 8px 10px;
  gap: 4px;
}

.remote-backfill-latest.is-compact > header {
  justify-content: flex-start;
}

.remote-backfill-latest.is-compact > p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-backfill-latest.is-danger {
  border-color: color-mix(in srgb, var(--red) 58%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.remote-backfill-latest.is-warning {
  border-color: color-mix(in srgb, var(--amber) 54%, var(--line));
  background: color-mix(in srgb, var(--amber) 9%, transparent);
}

.remote-backfill-details {
  padding: 10px;
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--cyan-deep) 32%, transparent);
}

.remote-backfill-details > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.remote-backfill-details > header strong {
  font-size: 11px;
}

.remote-backfill-details > p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.remote-upload-presets {
  flex-wrap: wrap;
}

.remote-upload-custom-field {
  padding-top: 11px;
  border-top: 1px solid #6b5428;
}

.remote-empty {
  min-height: 250px;
}

.remote-empty svg[data-lucide="loader-circle"] {
  animation: spin 1s linear infinite;
}

@media (max-width: 1180px) {
  .remote-device-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .remote-page-intro,
  .remote-device-head,
  .remote-operation-head,
  .remote-page-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .remote-summary-grid,
  .remote-device-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .remote-device-meta > div:first-child {
    grid-column: 1 / -1;
  }

  .remote-quota-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .remote-quota-grid > div + div {
    border-left: 0;
  }

  .remote-quota-grid > div:nth-child(even) {
    border-left: 1px solid #1f4057;
  }

  .remote-quota-grid > div:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .remote-summary-grid,
  .remote-state-grid,
  .remote-device-meta {
    grid-template-columns: 1fr;
  }

  .remote-device-meta > div:first-child {
    grid-column: auto;
  }

  .remote-primary-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Remote operations v5: compact multi-device workspace */
.remote-summary-grid {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.remote-summary-grid > article {
  flex: 1 1 0;
  min-width: 120px;
  padding: 10px 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}

.remote-summary-grid > article + article {
  border-left: 1px solid var(--line);
}

.remote-summary-grid > article.has-attention {
  border-left-color: var(--line);
  background: color-mix(in srgb, var(--red-deep) 55%, transparent);
}

.remote-summary-grid > article.is-recovering {
  border-left-color: var(--line);
  background: color-mix(in srgb, var(--amber-deep) 55%, transparent);
}

.remote-summary-grid span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.remote-summary-grid strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

.remote-toolbar {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.remote-search-field {
  width: min(390px, 100%);
  min-height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
}

.remote-search-field svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.remote-search-field input {
  width: 100%;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.remote-search-field:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 18%, transparent);
}

.remote-search-field .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.remote-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.remote-filter-row .btn {
  min-height: 34px;
  padding: 7px 11px;
}

.remote-device-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.remote-device-card {
  min-width: 0;
  padding: 15px;
  gap: 12px;
  border-top-width: 2px;
  box-shadow: none;
}

.remote-device-head {
  align-items: center;
}

.remote-device-head h3 {
  margin: 0 0 4px;
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-device-head p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
}

.remote-device-head p strong {
  color: var(--text);
}

.remote-overall-state {
  flex: 0 0 auto;
  white-space: nowrap;
}

.remote-primary-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #24506a;
  border-radius: 7px;
  background: #091827;
}

.remote-primary-metrics > div {
  min-width: 0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 4px;
}

.remote-primary-metrics > div + div {
  border-left: 1px solid #1f4057;
}

.remote-primary-metrics span,
.remote-primary-metrics small {
  color: var(--muted);
  font-size: 10px;
}

.remote-primary-metrics strong {
  color: var(--text);
  font-size: 20px;
}

.remote-action-message {
  min-height: 36px;
  padding: 9px 10px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  border-radius: 7px;
  background: #0a1726;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.remote-action-message svg {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  flex: 0 0 auto;
}

.remote-action-message.is-attention {
  background: var(--red-deep);
  color: var(--red);
}

.remote-action-message.is-active {
  color: var(--cyan);
}

.remote-action-message.is-recovering {
  background: var(--amber-deep);
  color: var(--amber);
}

.remote-action-message.is-active svg,
.remote-action-message.is-recovering svg {
  animation: spin 1.2s linear infinite;
}

.remote-action-message.is-ready {
  color: var(--green);
}

.remote-action-message.is-offline {
  color: var(--muted);
}

.remote-last-heartbeat {
  margin-top: -5px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--subtle);
  font-size: 10px;
  line-height: 1.4;
}

.remote-last-heartbeat svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.remote-last-heartbeat strong {
  color: var(--muted);
  font-weight: 600;
}

.remote-operation-panel {
  padding: 11px;
  gap: 9px;
}

.remote-operation-head strong {
  font-size: 16px;
}

.remote-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.remote-primary-actions .btn {
  width: 100%;
  min-width: 0;
  padding-inline: 9px;
}

.remote-details-toggle {
  width: 100%;
  padding: 4px 2px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
}

.remote-details-toggle:hover {
  color: var(--cyan);
}

.remote-details-toggle svg {
  width: 14px;
  height: 14px;
}

.remote-details {
  padding-top: 11px;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
}

.remote-details.hidden {
  display: none;
}

.remote-details .remote-device-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.remote-details .remote-device-meta > div:first-child {
  grid-column: 1 / -1;
}

.remote-internal-quota {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.remote-internal-quota > div {
  min-width: 0;
  padding: 9px 6px;
  display: grid;
  gap: 4px;
  text-align: center;
}

.remote-internal-quota > div + div {
  border-left: 1px solid var(--line);
}

.remote-internal-quota span {
  overflow: hidden;
  color: var(--subtle);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-internal-quota strong {
  font-size: 15px;
}

.remote-technical-code {
  padding: 9px 10px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0a1726;
}

.remote-technical-code span {
  color: var(--subtle);
  font-size: 10px;
}

.remote-technical-code code {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
}

.remote-no-match {
  min-height: 220px;
  margin-top: 12px;
}

.remote-no-match.hidden {
  display: none;
}

.remote-device-section {
  margin-top: 18px;
}

.remote-section-head {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.remote-section-head h3,
.remote-section-head p {
  margin: 0;
}

.remote-section-head h3 {
  font-size: 16px;
}

.remote-section-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.remote-section-head > span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.remote-attention-section {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--red) 42%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--red-deep) 24%, transparent);
}

.remote-attention-section .remote-section-head h3,
.remote-attention-section .remote-section-head > span {
  color: var(--red);
}

.remote-standby-empty {
  min-height: 180px;
  margin-top: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.remote-history-panel {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.remote-history-toggle {
  width: 100%;
  min-height: 62px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.remote-history-toggle:hover {
  background: color-mix(in srgb, var(--cyan-deep) 24%, transparent);
}

.remote-history-toggle > span,
.remote-history-toggle > span > span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.remote-history-toggle > span > span {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.remote-history-toggle strong {
  font-size: 13px;
}

.remote-history-toggle small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.remote-history-toggle svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--muted);
}

.remote-history-content {
  padding: 12px 15px 15px;
  border-top: 1px solid var(--line);
}

.remote-history-content.hidden,
.remote-history-row.hidden,
.remote-history-state.hidden {
  display: none;
}

.remote-history-list {
  display: grid;
  gap: 8px;
}

.remote-history-row {
  min-width: 0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-deep);
}

.remote-history-identity,
.remote-history-last-seen {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.remote-history-identity strong,
.remote-history-identity span,
.remote-history-last-seen strong,
.remote-history-last-seen small {
  overflow-wrap: anywhere;
}

.remote-history-identity strong,
.remote-history-last-seen strong {
  font-size: 12px;
}

.remote-history-identity span,
.remote-history-last-seen span,
.remote-history-last-seen small {
  color: var(--muted);
  font-size: 10px;
}

.remote-history-state {
  min-height: 72px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.remote-history-state.is-error {
  color: var(--red);
}

.remote-history-state svg {
  width: 17px;
  height: 17px;
}

.remote-history-state svg[data-lucide="loader-circle"] {
  animation: spin 1s linear infinite;
}

@media (max-width: 1550px) {
  .remote-device-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1220px) {
  .remote-device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .remote-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .remote-filter-row {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .remote-summary-grid {
    overflow-x: auto;
  }

  .remote-summary-grid > article {
    flex: 0 0 auto;
  }

  .remote-device-grid {
    grid-template-columns: 1fr;
  }

  .remote-section-head {
    align-items: flex-start;
  }

  .remote-history-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .remote-history-last-seen {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .remote-search-field {
    width: 100%;
  }

  .remote-details .remote-device-meta {
    grid-template-columns: 1fr;
  }

  .remote-details .remote-device-meta > div:first-child {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  .remote-primary-actions,
  .remote-primary-metrics,
  .remote-internal-quota {
    grid-template-columns: 1fr;
  }

  .remote-primary-metrics > div + div,
  .remote-internal-quota > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .remote-backfill-overview {
    grid-template-columns: 1fr;
  }

  .remote-backfill-overview > div + div {
    border-top: 1px solid #6b5428;
    border-left: 0;
  }

  .remote-backfill-plan header {
    align-items: flex-start;
    flex-direction: column;
  }

  .remote-backfill-plan header span {
    text-align: left;
  }

  .remote-history-toggle {
    align-items: flex-start;
  }

  .remote-history-toggle > span:last-child small {
    display: none;
  }
}

/* DEFAPI admin monitor */
.defapi-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.defapi-account-section {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.defapi-account-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.defapi-account-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 7px;
  background: var(--surface);
}

.defapi-account-card.warning {
  border-left-color: var(--amber);
}

.defapi-account-card.error {
  border-left-color: var(--danger);
}

.defapi-account-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.defapi-account-head > div,
.defapi-account-head strong,
.defapi-account-head small {
  min-width: 0;
}

.defapi-account-head strong,
.defapi-account-head small {
  display: block;
  overflow-wrap: anywhere;
}

.defapi-account-head small,
.defapi-account-meta,
.defapi-credit small {
  color: var(--muted);
  font-size: 12px;
}

.defapi-account-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 6px;
  color: var(--cyan);
  background: rgba(54, 195, 231, 0.1);
}

.defapi-account-card.warning .defapi-account-icon {
  color: var(--amber);
  background: rgba(244, 184, 74, 0.1);
}

.defapi-account-card.error .defapi-account-icon {
  color: var(--danger);
  background: rgba(245, 104, 117, 0.1);
}

.defapi-account-icon svg {
  width: 18px;
  height: 18px;
}

.defapi-credit {
  display: grid;
  gap: 2px;
  margin: 18px 0 14px;
}

.defapi-credit > span {
  color: var(--muted);
  font-size: 13px;
}

.defapi-credit strong {
  color: var(--text);
  font-size: 30px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.defapi-pool-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.defapi-pool-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border-radius: 5px;
  color: var(--muted);
  background: var(--surface-raised);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.defapi-pool-row b {
  color: var(--text);
  font-size: 15px;
}

.defapi-account-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0;
}

.defapi-account-meta span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
  overflow-wrap: anywhere;
}

.defapi-account-meta svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.defapi-account-error {
  min-height: 36px;
  margin: 0 0 10px;
  color: var(--danger);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.defapi-account-card > .btn {
  width: 100%;
  justify-content: center;
}

.defapi-stage-panel,
.defapi-anomaly-panel,
.defapi-detail-panel {
  margin-top: 16px;
}

.defapi-stage-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.defapi-stage-card {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--cyan);
  border-radius: 7px;
  background: var(--surface-raised);
}

.defapi-stage-card.warning {
  border-top-color: var(--amber);
}

.defapi-stage-index {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(54, 195, 231, 0.12);
  font-size: 12px;
  font-weight: 800;
}

.defapi-stage-title,
.defapi-stage-active {
  min-width: 0;
}

.defapi-stage-title strong,
.defapi-stage-title small {
  display: block;
  overflow-wrap: anywhere;
}

.defapi-stage-title small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.defapi-stage-active {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
}

.defapi-stage-active span {
  color: var(--muted);
  font-size: 12px;
}

.defapi-stage-active strong {
  font-size: 28px;
  line-height: 1;
}

.defapi-stage-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.defapi-stage-breakdown span {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 5px;
  color: var(--muted);
  background: var(--surface);
  font-size: 11px;
}

.defapi-stage-breakdown .has-warning,
.defapi-stage-breakdown .has-warning b {
  color: var(--amber);
}

.defapi-stage-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.defapi-anomaly-list,
.defapi-failure-list {
  display: grid;
  gap: 8px;
}

.defapi-anomaly-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
}

.defapi-anomaly-row > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 6px;
  color: var(--amber);
  background: rgba(244, 184, 74, 0.1);
}

.defapi-anomaly-row.error > span {
  color: var(--danger);
  background: rgba(245, 104, 117, 0.1);
}

.defapi-anomaly-row p,
.defapi-failure-list p {
  min-width: 0;
  margin: 0;
}

.defapi-anomaly-row strong,
.defapi-anomaly-row small,
.defapi-failure-list strong,
.defapi-failure-list small,
.defapi-failure-list em {
  display: block;
  overflow-wrap: anywhere;
}

.defapi-anomaly-row small,
.defapi-failure-list small,
.defapi-failure-list em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.defapi-key-table {
  display: grid;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.defapi-key-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(200px, 1.8fr) repeat(4, minmax(95px, 0.8fr));
  align-items: center;
  min-width: 820px;
  border-top: 1px solid var(--line);
}

.defapi-key-row:first-child {
  border-top: 0;
}

.defapi-key-row > * {
  min-width: 0;
  padding: 10px 12px;
  overflow-wrap: anywhere;
}

.defapi-key-row.is-head {
  color: var(--muted);
  background: var(--surface-raised);
  font-size: 12px;
  font-weight: 700;
}

.defapi-failure-section {
  margin-top: 18px;
}

.defapi-failure-list > div:not(.empty-state) {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.defapi-failure-mark {
  color: var(--amber);
}

@media (max-width: 1380px) {
  .defapi-account-grid,
  .defapi-stage-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .defapi-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .defapi-summary-grid,
  .defapi-account-grid,
  .defapi-stage-flow {
    grid-template-columns: 1fr;
  }

  .defapi-account-meta,
  .defapi-stage-active {
    align-items: flex-start;
    flex-direction: column;
  }

  .defapi-anomaly-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .defapi-anomaly-row .btn {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .defapi-credit strong {
    font-size: 26px;
  }
}