/* CURSOR-PREMIUM-UI-20260710: original editorial production theme inspired by premium AI product sites. */
:root {
  --cp-paper: #f3f0e8;
  --cp-paper-deep: #ebe7dd;
  --cp-surface: #fbfaf6;
  --cp-surface-strong: #ffffff;
  --cp-ink: #11110f;
  --cp-graphite: #34332f;
  --cp-muted: #76736b;
  --cp-line: #d9d5ca;
  --cp-line-dark: #c8c3b7;
  --cp-olive: #667a2e;
  --cp-olive-soft: #edf1df;
  --cp-copper: #a36b32;
  --cp-danger: #a33b39;
  --cp-radius: 12px;
  --cp-shadow: 0 18px 48px rgba(31, 29, 24, .055);
  --ui56-bg: var(--cp-paper);
  --ui56-bg-warm: var(--cp-paper);
  --ui56-surface: var(--cp-surface);
  --ui56-surface-soft: #f6f3ec;
  --ui56-ink: var(--cp-ink);
  --ui56-muted: var(--cp-muted);
  --ui56-line: var(--cp-line);
  --ui56-line-strong: var(--cp-line-dark);
  --ui56-purple: var(--cp-ink);
  --ui56-indigo: var(--cp-graphite);
  --ui56-purple-soft: #ebe8df;
  --ui56-success: var(--cp-olive);
  --ui56-danger: var(--cp-danger);
  --ui56-radius-sm: 9px;
  --ui56-radius: 12px;
  --ui56-radius-lg: 16px;
  --ui56-shadow: var(--cp-shadow);
  --ui56-shadow-hover: 0 20px 54px rgba(31, 29, 24, .09);
  --ui56-gradient: linear-gradient(135deg, #171714, #2d2c28);
  color-scheme: light;
}

/* HELP-CENTER-HEADER-FIX-20260722: keep the public admin header on one row and publish the beginner guide. */
body:not(.auth-route):not(.app-route):not(.help-route) .topbar {
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
body:not(.auth-route):not(.app-route):not(.help-route) .brand { flex: 0 0 auto; }
body:not(.auth-route):not(.app-route):not(.help-route) .landing-nav {
  min-width: 0;
  flex: 1 1 auto !important;
  gap: clamp(18px, 2vw, 30px) !important;
}
body:not(.auth-route):not(.app-route):not(.help-route) .app-topbar-status {
  min-width: max-content;
  margin-left: 0;
  gap: 8px !important;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}
body:not(.auth-route):not(.app-route):not(.help-route) .topbar-balance,
body:not(.auth-route):not(.app-route):not(.help-route) .topbar-help,
body:not(.auth-route):not(.app-route):not(.help-route) .topbar-bell,
body:not(.auth-route):not(.app-route):not(.help-route) .topbar-avatar {
  min-height: 40px;
  flex: 0 0 auto;
  white-space: nowrap;
}
body:not(.auth-route):not(.app-route):not(.help-route) .topbar-balance { padding: 0 12px !important; }
body:not(.auth-route):not(.app-route):not(.help-route) .topbar-help,
body:not(.auth-route):not(.app-route):not(.help-route) .topbar-bell {
  width: auto;
  min-width: 52px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--cp-line);
  border-radius: 10px;
  color: var(--cp-graphite) !important;
  background: rgba(255,255,255,.72);
  text-decoration: none;
  font-weight: 700;
}
body:not(.auth-route):not(.app-route):not(.help-route) .topbar-avatar {
  width: 40px;
  height: 40px;
  border: 1px solid var(--cp-ink);
  border-radius: 10px;
  color: #fff !important;
  background: var(--cp-ink) !important;
}
body:not(.auth-route):not(.app-route):not(.help-route) .nav-actions {
  min-width: max-content;
  flex: 0 0 auto;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}
body:not(.auth-route):not(.app-route):not(.help-route) .nav-actions .button {
  width: auto;
  min-width: 76px !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1.2;
}

.help-route {
  color: var(--cp-ink) !important;
  background: var(--cp-paper) !important;
}
.help-route::before,
.help-route::after { display: none !important; }
.help-route .help-page-shell {
  width: min(1220px, calc(100vw - 48px)) !important;
  margin: 0 auto !important;
  padding: 0 0 44px !important;
  background: transparent !important;
}
.help-route .help-topbar {
  min-height: 72px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  border-bottom: 1px solid var(--cp-line) !important;
  background: rgba(250,249,245,.92) !important;
}
.help-route .brand { flex: 0 0 auto; }
.help-route .help-brand-logo { width: 42px; height: 42px; object-fit: contain; }
.help-route .brand-text-main { display: grid; line-height: 1.1; }
.help-route .brand-text-main > span { font-size: 21px; font-weight: 850; letter-spacing: -.055em; }
.help-route .brand-text-main small { margin-top: 3px; color: #8c887f; font-size: 9px; font-weight: 760; letter-spacing: .12em; }
.help-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.help-topbar-actions > a:not(.button) { min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; color: var(--cp-muted); text-decoration: none; font-size: 14px; font-weight: 700; }
.help-topbar-actions > a:hover { color: var(--cp-ink); }
.help-topbar-actions .button { min-height: 40px !important; padding: 8px 16px !important; border-radius: 10px !important; }
.help-center { padding: 48px 0 24px; }
.help-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid var(--cp-line);
  border-radius: 18px;
  background: linear-gradient(135deg, #f0f4df 0%, #fbfaf5 46%, #eee9df 100%);
}
.help-hero::after {
  content: "?";
  position: absolute;
  right: clamp(24px, 7vw, 92px);
  top: 50%;
  transform: translateY(-52%);
  color: rgba(102,122,46,.12);
  font-size: clamp(150px, 21vw, 290px);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.help-kicker { position: relative; z-index: 1; color: var(--cp-olive); font-size: 13px; font-weight: 850; letter-spacing: .12em; }
.help-hero h1 { position: relative; z-index: 1; max-width: 760px; margin: 12px 0 14px; font-size: clamp(54px, 7vw, 94px); line-height: .92; letter-spacing: -.075em !important; }
.help-hero > p { position: relative; z-index: 1; max-width: 680px; margin: 0; color: var(--cp-muted); font-size: 18px; line-height: 1.8; }
.help-hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.help-hero-actions .button { min-height: 44px !important; padding: 10px 18px !important; border-radius: 10px !important; }
.help-version { position: relative; z-index: 1; margin-top: 28px; color: #858077; font-size: 12px; }
.help-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 30px; }
.help-toc {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--cp-line);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
}
.help-toc strong { padding: 8px 10px 10px; font-size: 13px; }
.help-toc a { min-height: 38px; display: flex; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--cp-muted); text-decoration: none; font-size: 13px; font-weight: 650; }
.help-toc a:hover { color: var(--cp-ink); background: var(--cp-olive-soft); }
.help-content { min-width: 0; display: grid; gap: 18px; }
.help-section {
  scroll-margin-top: 18px;
  padding: clamp(22px, 3.5vw, 38px);
  border: 1px solid var(--cp-line);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 36px rgba(31,29,24,.04);
}
.help-section-heading { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 24px; }
.help-section-heading > span { width: 44px; height: 32px; display: grid; place-items: center; border-radius: 999px; color: #526124; background: var(--cp-olive-soft); font-size: 12px; font-weight: 850; }
.help-section-heading h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.05; }
.help-section-heading p { margin: 8px 0 0; color: var(--cp-muted); line-height: 1.65; }
.help-steps { margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: help-step; list-style: none; }
.help-steps li { counter-increment: help-step; min-height: 66px; display: grid; grid-template-columns: 34px 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--cp-line); border-radius: 10px; background: #fbfaf7; }
.help-steps li::before { content: counter(help-step); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--cp-ink); font-size: 12px; font-weight: 850; }
.help-steps span { color: var(--cp-muted); line-height: 1.65; }
.help-note { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 14px; margin-top: 18px; padding: 16px; border: 1px solid #cbd5ad; border-radius: 10px; color: #4d6420; background: var(--cp-olive-soft); line-height: 1.65; }
.help-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--cp-line); border-radius: 10px; }
.help-table { width: 100%; min-width: 680px; border-collapse: collapse; background: #fff; }
.help-table th, .help-table td { padding: 13px 14px; border-bottom: 1px solid var(--cp-line); text-align: left; vertical-align: top; }
.help-table th { color: #746e64; background: #f6f3ec; font-size: 12px; letter-spacing: .04em; }
.help-table td { color: var(--cp-muted); font-size: 14px; line-height: 1.55; }
.help-table tr:last-child td { border-bottom: 0; }
.help-table td a { color: var(--cp-ink); font-weight: 800; }
.help-table.compact { min-width: 540px; }
.help-accordion, .help-faq { display: grid; gap: 9px; }
.help-accordion details, .help-faq details { overflow: hidden; border: 1px solid var(--cp-line); border-radius: 10px; background: #fbfaf7; }
.help-accordion summary, .help-faq summary { min-height: 56px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; font-weight: 800; }
.help-accordion summary::-webkit-details-marker, .help-faq summary::-webkit-details-marker { display: none; }
.help-accordion summary::after, .help-faq summary::after { content: "+"; margin-left: auto; color: #8b867e; font-size: 20px; font-weight: 500; }
.help-accordion details[open] summary::after, .help-faq details[open] summary::after { content: "−"; }
.help-accordion summary small { color: var(--cp-muted); font-size: 12px; font-weight: 600; }
.help-detail-body, .help-faq details > p { padding: 0 18px 18px; color: var(--cp-muted); line-height: 1.75; }
.help-detail-body :is(ol,ul) { margin: 0 0 12px; padding-left: 22px; }
.help-detail-body li + li { margin-top: 5px; }
.help-detail-body p { margin: 10px 0 0; }
.help-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.help-card-grid article { padding: 18px; border: 1px solid var(--cp-line); border-radius: 10px; background: #fbfaf7; }
.help-card-grid h3 { margin: 0 0 9px; font-size: 18px; }
.help-card-grid p { margin: 0; color: var(--cp-muted); line-height: 1.7; }
.help-card-grid p + p { margin-top: 8px; }
.help-caption { margin: 12px 2px 20px; color: var(--cp-muted); font-size: 13px; line-height: 1.65; }
.help-prompt pre { margin: 0; overflow-x: auto; padding: 20px; border-radius: 10px; color: #f7f6f2; background: #22211e; white-space: pre-wrap; font: 14px/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.help-check-list { margin: 18px 0 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.help-check-list li { position: relative; padding: 12px 14px 12px 42px; border: 1px solid var(--cp-line); border-radius: 9px; color: var(--cp-muted); background: #fbfaf7; line-height: 1.65; }
.help-check-list li::before { content: "✓"; position: absolute; left: 15px; top: 12px; color: var(--cp-olive); font-weight: 900; }
.help-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.help-admin-grid span { padding: 13px 14px; border: 1px solid var(--cp-line); border-radius: 9px; color: var(--cp-muted); background: #fbfaf7; font-size: 13px; line-height: 1.55; }
.help-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px; border-radius: 14px; color: #f8f7f2; background: var(--cp-ink); }
.help-cta span { color: #bbb7ad; font-size: 12px; font-weight: 750; }
.help-cta h2 { max-width: 620px; margin: 7px 0 0; color: #fff !important; font-size: clamp(24px, 3vw, 36px); }
.help-cta .button { min-width: 150px; color: var(--cp-ink) !important; background: #fff !important; border-color: #fff !important; box-shadow: none !important; }
.help-footer { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px; border-top: 1px solid var(--cp-line); color: var(--cp-muted); font-size: 13px; }
.help-footer a { color: var(--cp-ink); font-weight: 750; }

@media (max-width: 1440px) {
  body:not(.auth-route):not(.app-route):not(.help-route) .landing-nav { display: none !important; }
}
@media (max-width: 980px) {
  body:not(.auth-route):not(.app-route):not(.help-route) .app-topbar-status { display: none !important; }
  .help-route .help-page-shell { width: min(100vw - 28px, 760px) !important; }
  .help-layout { grid-template-columns: 1fr; }
  .help-toc { position: static; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .help-toc strong { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .help-route .help-page-shell { width: min(100vw - 20px, 430px) !important; }
  .help-route .help-topbar { min-height: 64px !important; padding: 0 2px !important; }
  .help-route .help-brand-logo { width: 36px; height: 36px; }
  .help-route .brand-text-main small, .help-topbar-actions > a:not(.button) { display: none; }
  .help-topbar-actions .button { padding: 8px 12px !important; font-size: 13px !important; }
  .help-center { padding-top: 18px; }
  .help-hero { padding: 28px 20px; border-radius: 12px; }
  .help-hero::after { right: 4px; font-size: 170px; }
  .help-hero h1 { font-size: 52px; }
  .help-hero > p { font-size: 15px; }
  .help-hero-actions .button { width: 100%; justify-content: center; }
  .help-toc { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 10px; }
  .help-toc a { font-size: 12px; }
  .help-section { padding: 20px 15px; border-radius: 11px; }
  .help-section-heading { grid-template-columns: 1fr; gap: 9px; }
  .help-section-heading h2 { font-size: 30px; }
  .help-steps li { grid-template-columns: 32px minmax(0,1fr); gap: 10px; }
  .help-steps li span { grid-column: 2; }
  .help-note { grid-template-columns: 1fr; gap: 5px; }
  .help-accordion summary { align-items: flex-start; flex-direction: column; gap: 3px; padding-right: 44px; position: relative; }
  .help-accordion summary::after { position: absolute; right: 16px; top: 13px; }
  .help-card-grid, .help-admin-grid { grid-template-columns: 1fr; }
  .help-cta { align-items: stretch; flex-direction: column; padding: 24px 20px; }
  .help-cta .button { width: 100%; }
}

/* UNIFIED-CREATE-CENTER-20260712 */
body.app-route #generation[data-unified-create-center] .smart-generation-heading {
  margin-bottom: 14px !important;
}

/* CURSOR-INTERACTION-STATES-20260713
   Keep selection feedback consistent across the workspace. Semantic success,
   warning and error colours are intentionally left untouched. */
body.app-route :is(
  .online-mode-button,
  .online-source-card,
  .slicer-work-card,
  .remix-mode-card,
  .template-card
)[aria-pressed="true"],
body.app-route .remix-mode-card:has(input:checked) {
  border-color: var(--cp-ink) !important;
  color: var(--cp-ink) !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px var(--cp-ink) !important;
}

body.app-route .translation-overlay-item.translation-active {
  border-color: var(--cp-ink) !important;
  box-shadow: 0 0 0 2px rgba(17, 17, 15, .12) !important;
}

body.app-route .audit-task-row.active {
  border-color: var(--cp-line-dark) !important;
  background: var(--cp-olive-soft) !important;
}

body.app-route .audit-task-row.active .audit-task-dot {
  color: #fff !important;
  background: var(--cp-ink) !important;
}

body.app-route :is(
  .online-mode-button,
  .online-source-card,
  .slicer-work-card,
  .remix-mode-card,
  .template-card
):focus-visible {
  outline: 3px solid rgba(102, 122, 46, .22) !important;
  outline-offset: 2px;
}

/* MOBILE-WORKSPACE-NAV-20260713 */
body.app-route .mobile-nav-menu {
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.app-route .mobile-nav-section {
  padding: 5px 6px 1px;
  color: var(--cp-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
}
body.app-route #generation[data-unified-create-center] .smart-generation-heading h2 {
  max-width: 760px;
  font-size: clamp(30px, 3.2vw, 48px) !important;
  letter-spacing: -.045em !important;
}
body.app-route #generation[data-unified-create-center] .smart-generation-heading p {
  max-width: 680px;
  font-size: 15px !important;
}
body.app-route #generation[data-unified-create-center] .smart-generation-steps {
  display: none !important;
}
body.app-route #generation[data-unified-create-center] .generation-mode-tabs {
  width: fit-content;
  margin-bottom: 14px !important;
  padding: 3px !important;
}
body.app-route #generation[data-unified-create-center] .smart-generation-layout {
  align-items: start !important;
}
body.app-route #generation[data-unified-create-center] .generation-upload-panel,
body.app-route #generation[data-unified-create-center] .smart-compose-panel,
body.app-route #generation[data-unified-create-center] .smart-result-panel {
  box-shadow: none !important;
}
body.app-route #generation[data-unified-create-center] .smart-card-title h3 {
  margin-bottom: 4px !important;
  font-size: 20px !important;
}
body.app-route #generation[data-unified-create-center] .smart-compose-panel > .smart-card-title { order: 1 !important; }
body.app-route #generation[data-unified-create-center] .smart-compose-panel > .smart-intent-tabs { order: 2 !important; }
body.app-route #generation[data-unified-create-center] .smart-compose-panel > .smart-recommend-action { order: 3 !important; }
body.app-route #generation[data-unified-create-center] .smart-compose-panel > #smartRecommendStatus { order: 4 !important; }
body.app-route #generation[data-unified-create-center] .smart-compose-panel > .smart-generation-form { order: 5 !important; }
body.app-route #generation[data-unified-create-center] .smart-compose-panel > .smart-recommend-result { order: 6 !important; }
body.app-route #generation[data-unified-create-center] .smart-compose-panel > .smart-manual-template { order: 7 !important; }
body.app-route #generation[data-unified-create-center] .smart-compose-panel > #templateDetail { order: 8 !important; }
body.app-route #generation[data-unified-create-center] .smart-compose-panel > .auth-only-note { order: 9 !important; }
body.app-route #generation[data-unified-create-center] .start-intent-compact {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
body.app-route #generation[data-unified-create-center] .smart-intent-button {
  min-height: 68px !important;
  padding: 10px 11px !important;
  text-align: left;
  text-decoration: none;
}
body.app-route #generation[data-unified-create-center] .smart-intent-button strong,
body.app-route #generation[data-unified-create-center] .smart-intent-button small {
  display: block;
}
body.app-route #generation[data-unified-create-center] .smart-intent-button small {
  margin-top: 3px;
  color: var(--cp-muted) !important;
  font-size: 11px !important;
  line-height: 1.35;
}
body.app-route #generation[data-unified-create-center] .smart-recommend-action {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px !important;
  align-items: center;
  padding: 10px 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.app-route #generation[data-unified-create-center] .smart-recommend-button {
  width: auto !important;
  min-height: 40px !important;
  padding: 8px 13px !important;
}
body.app-route #generation[data-unified-create-center] .smart-recommend-action p {
  margin: 0 !important;
  color: var(--cp-muted) !important;
  font-size: 12px !important;
}
body.app-route #generation[data-unified-create-center] .smart-product-info-box textarea {
  min-height: 132px !important;
}
body.app-route #generation[data-unified-create-center] .unified-create-options {
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(250px, 1.28fr);
  gap: 10px;
}
body.app-route #generation[data-unified-create-center] .unified-create-options > label {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 12px !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: 9px !important;
  background: #f7f5ef !important;
}
body.app-route #generation[data-unified-create-center] .unified-create-options select {
  width: 100%;
  min-width: 0;
}
body.app-route #generation[data-unified-create-center] .smart-more-settings .smart-similarity-control {
  display: grid;
  gap: 8px;
  padding: 10px 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.app-route #generation[data-unified-create-center] .smart-recommend-result:not(.has-result) {
  display: none !important;
}
body.app-route #generation[data-unified-create-center] .smart-generate-submit {
  margin-top: 2px !important;
  font-size: 16px !important;
}

@media (max-width: 760px) {
  body.app-route #generation[data-unified-create-center] .smart-generation-heading h2 {
    font-size: 30px !important;
  }
  body.app-route #generation[data-unified-create-center] .smart-generation-heading p {
    font-size: 13px !important;
  }
  body.app-route #generation[data-unified-create-center] .start-intent-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.app-route #generation[data-unified-create-center] .smart-recommend-action,
  body.app-route #generation[data-unified-create-center] .unified-create-options {
    grid-template-columns: 1fr !important;
  }
  body.app-route #generation[data-unified-create-center] .smart-recommend-button {
    width: 100% !important;
  }
}

html, body { background: var(--cp-paper) !important; }
body {
  color: var(--cp-ink) !important;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
  letter-spacing: -.012em;
}
body::before, body::after { opacity: .45 !important; }
::selection { color: #fff; background: var(--cp-ink); }
:focus-visible { outline-color: rgba(102, 122, 46, .38) !important; }

/* Shared production controls */
.button, button.button {
  min-height: 42px !important;
  border: 1px solid var(--cp-ink) !important;
  border-radius: 9px !important;
  color: #fff !important;
  background: var(--cp-ink) !important;
  box-shadow: none !important;
  font-weight: 760 !important;
}
.button:hover:not(:disabled), button.button:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  background: #2a2925 !important;
  box-shadow: 0 10px 26px rgba(22, 21, 18, .12) !important;
}
.button.secondary, button.button.secondary {
  border-color: var(--cp-line-dark) !important;
  color: var(--cp-ink) !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: none !important;
}
.button.secondary:hover:not(:disabled), button.button.secondary:hover:not(:disabled) { background: #fff !important; }
.button.danger, button.button.danger { border-color: #dec2bd !important; color: var(--cp-danger) !important; background: #fff8f5 !important; }
input, select, textarea {
  border: 1px solid var(--cp-line-dark) !important;
  border-radius: 9px !important;
  color: var(--cp-ink) !important;
  background: rgba(255,255,255,.74) !important;
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #777267 !important;
  box-shadow: 0 0 0 3px rgba(102, 122, 46, .10) !important;
}
input[type="range"] { accent-color: var(--cp-ink) !important; }
.pill, .eyebrow {
  border-color: var(--cp-line) !important;
  border-radius: 999px !important;
  color: var(--cp-graphite) !important;
  background: rgba(255,255,255,.62) !important;
}
.pill.required, .eyebrow {
  border-color: #cbd3ad !important;
  color: var(--cp-olive) !important;
  background: var(--cp-olive-soft) !important;
}
.notice, .empty-state, .status:not(:empty) {
  border-color: var(--cp-line) !important;
  border-radius: 9px !important;
  color: var(--cp-muted) !important;
  background: rgba(255,255,255,.45) !important;
}
.status.success:not(:empty) { color: #4d6420 !important; border-color: #cbd5ad !important; background: var(--cp-olive-soft) !important; }
.status.error:not(:empty) { color: var(--cp-danger) !important; border-color: #e1c5bf !important; background: #fff7f4 !important; }
.section-title h1, .section-title h2, .section-title h3, h1, h2, h3 { color: var(--cp-ink) !important; letter-spacing: -.045em !important; }
.section-title > div > p, .field-hint, .auth-only-note { color: var(--cp-muted) !important; }
summary { color: var(--cp-graphite) !important; }

/* Public site */
body:not(.app-route) > .shell { background: var(--cp-paper) !important; }
body:not(.app-route) .topbar {
  min-height: 72px !important;
  border-bottom-color: var(--cp-line) !important;
  background: rgba(250,249,245,.88) !important;
  backdrop-filter: blur(20px) saturate(120%);
}
body:not(.app-route) .landing-nav a { color: var(--cp-graphite) !important; }
body:not(.app-route) .landing-nav a:hover { color: var(--cp-ink) !important; }
body:not(.auth-route):not(.app-route) .landing-nav a {
  min-width: 52px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}
body:not(.auth-route):not(.app-route) .landing-nav a:focus-visible,
body:not(.auth-route):not(.app-route) .landing-v2-actions a:focus-visible,
body:not(.auth-route):not(.app-route) .landing-v2-section-head a:focus-visible {
  outline: 3px solid rgba(102, 122, 46, .28) !important;
  outline-offset: 3px;
}
.landing-v2-cases { scroll-margin-top: 24px; }
.landing-v2-actions a,
.landing-v2-section-head a {
  cursor: pointer;
  touch-action: manipulation;
}
.landing-v2-section-head a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: 8px;
  margin-right: -8px;
}
.landing-v2 { background: var(--cp-paper) !important; }
.landing-v2-copy > span { color: var(--cp-olive) !important; background: var(--cp-olive-soft) !important; border-color: #cbd3ad !important; }
.landing-v2-copy h1 { max-width: 680px; font-size: clamp(54px, 6.6vw, 102px) !important; line-height: .96 !important; letter-spacing: -.075em !important; }
.landing-v2-copy h1 em { color: var(--cp-ink) !important; font-style: normal; text-decoration: underline; text-decoration-color: #a8b77b; text-decoration-thickness: .09em; text-underline-offset: .08em; }
.landing-v2-copy p { max-width: 600px; color: var(--cp-muted) !important; font-size: 17px !important; line-height: 1.75 !important; }
.landing-v2-collage { filter: saturate(.86) contrast(1.02); }
.landing-v2-collage img { border-color: rgba(255,255,255,.88) !important; border-radius: 12px !important; box-shadow: 0 24px 60px rgba(31,29,24,.15) !important; }
.landing-real-stats {
  border-color: var(--cp-line) !important;
  border-radius: 12px !important;
  background: rgba(251,250,246,.82) !important;
  box-shadow: none !important;
}
.landing-real-stats strong { color: var(--cp-ink) !important; font-variant-numeric: tabular-nums; }
.landing-v2-cases { border-top-color: var(--cp-line) !important; }
.landing-v2-case-grid article { border-color: var(--cp-line) !important; border-radius: 10px !important; background: var(--cp-surface) !important; }

/* Account access */
body.auth-route #landingView { gap: 16px !important; }
body.auth-route .auth-showcase-v2,
body.auth-route #authPanel {
  border-color: var(--cp-line) !important;
  border-radius: 14px !important;
  background: var(--cp-surface) !important;
  box-shadow: var(--cp-shadow) !important;
}
.auth-showcase-copy > span, .auth-email-kicker { color: var(--cp-olive) !important; }
.auth-showcase-copy h1 { font-size: clamp(42px, 4vw, 64px) !important; line-height: 1.02 !important; }
.auth-showcase-copy li::before { color: var(--cp-olive) !important; }
.auth-account-tabs { border-color: var(--cp-line) !important; border-radius: 10px !important; background: var(--cp-paper-deep) !important; }
.auth-account-tabs button { border-radius: 7px !important; color: var(--cp-muted) !important; }
.auth-account-tabs button.active { color: var(--cp-ink) !important; background: #fff !important; }

/* User application shell */
body.app-route { background: var(--cp-paper) !important; }
body.app-route .shell {
  grid-template-columns: 220px minmax(0,1fr) !important;
  grid-template-rows: 72px minmax(0,1fr) !important;
  background: var(--cp-paper) !important;
}
body.app-route .topbar {
  height: 72px !important;
  padding: 0 30px !important;
  border-bottom-color: var(--cp-line) !important;
  background: rgba(250,249,245,.94) !important;
  box-shadow: none !important;
}
body.app-route .brand-text-main > span { font-size: 22px !important; letter-spacing: -.06em !important; }
body.app-route .brand-text-main small { color: #8c887f !important; }
body.app-route .topbar-balance,
body.app-route .topbar-help,
body.app-route .topbar-bell,
body.app-route .topbar-avatar {
  border-color: var(--cp-line) !important;
  border-radius: 10px !important;
  color: var(--cp-graphite) !important;
  background: rgba(255,255,255,.72) !important;
}
body.app-route .topbar-help {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  line-height: 1.2 !important;
}
body.app-route .topbar-avatar { color: #fff !important; background: var(--cp-ink) !important; }
body.app-route .feedback-fab { border-color: var(--cp-line) !important; background: var(--cp-surface) !important; box-shadow: var(--cp-shadow) !important; }
body.app-route .feedback-fab img { filter: grayscale(1) contrast(1.28); }
body.app-route .reference-sidebar {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) max-content !important;
  align-content: stretch !important;
  justify-content: stretch !important;
  top: 72px !important;
  width: 220px !important;
  height: calc(100vh - 72px) !important;
  padding: 18px 14px !important;
  overflow: hidden !important;
  border-right-color: var(--cp-line) !important;
  background: rgba(250,249,245,.92) !important;
}
body.app-route .reference-sidebar .sidebar-stack:first-child {
  min-height: 0 !important;
  overflow-y: auto !important;
  align-content: start !important;
}
body.app-route .reference-sidebar .sidebar-bottom-stack {
  display: grid !important;
  min-height: max-content !important;
  align-self: end !important;
  flex: 0 0 auto !important;
}
body.app-route .reference-sidebar .sidebar-logout-button {
  display: flex !important;
  flex: 0 0 auto !important;
  visibility: visible !important;
}
body.app-route .reference-sidebar .sidebar-link {
  min-height: 44px !important;
  border-radius: 8px !important;
  color: #5d5a53 !important;
  font-weight: 700 !important;
}
body.app-route .reference-sidebar .sidebar-link:hover { color: var(--cp-ink) !important; background: rgba(224,220,210,.55) !important; }
body.app-route .reference-sidebar .sidebar-link.primary,
body.app-route .reference-sidebar .sidebar-link[aria-current="page"] {
  border-color: var(--cp-line) !important;
  color: var(--cp-ink) !important;
  background: #e8e4db !important;
  box-shadow: none !important;
}
body.app-route .sidebar-icon { border: 0 !important; border-radius: 5px !important; color: currentColor !important; background: transparent !important; }
body.app-route .sidebar-credit-card {
  border-color: var(--cp-line) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.58) !important;
}
body.app-route .sidebar-credit-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.app-route .sidebar-credit-actions .button {
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: 8px !important;
  white-space: nowrap;
}
body.app-route #appView {
  padding: 30px 34px 58px !important;
  background: var(--cp-paper) !important;
}
body.app-route #appView > section { width: min(100%, 1540px) !important; }
body.app-route #appView > .subcard,
body.app-route .workspace-page-active,
body.app-route .card,
body.app-route .subcard {
  border-color: var(--cp-line) !important;
  border-radius: var(--cp-radius) !important;
  background: rgba(251,250,246,.88) !important;
  box-shadow: none !important;
}
body.app-route .scheme-a-home-header h1 { font-size: clamp(42px, 5vw, 72px) !important; line-height: .98 !important; }
body.app-route .scheme-a-hero-banner {
  border-color: var(--cp-line) !important;
  border-radius: 12px !important;
  color: var(--cp-ink) !important;
  background: linear-gradient(130deg, #f9f7f1, #e9e5da) !important;
  box-shadow: none !important;
}
body.app-route .scheme-a-hero-banner h2 { font-size: clamp(32px, 4vw, 56px) !important; }
body.app-route .scheme-a-balance-chip { border-color: #cbd3ad !important; color: var(--cp-olive) !important; background: var(--cp-olive-soft) !important; }
body.app-route .scheme-a-quick-card { border-color: var(--cp-line) !important; border-radius: 10px !important; background: rgba(255,255,255,.7) !important; box-shadow: none !important; }
body.app-route .scheme-a-quick-card:hover { transform: translateY(-2px); border-color: var(--cp-line-dark) !important; box-shadow: var(--cp-shadow) !important; }

/* Smart creation: upload / composer / live result */
body.app-route #generation {
  padding: 26px !important;
  border-color: var(--cp-line-dark) !important;
  background: var(--cp-paper) !important;
}
body.app-route #generation .smart-generation-heading h2 { font-size: clamp(38px, 4.2vw, 66px) !important; line-height: 1 !important; max-width: 920px; }
body.app-route #generation > .section-title > .button {
  flex: 0 0 auto !important;
  min-width: 100px;
  white-space: nowrap;
}
body.app-route #generation .start-generation-brief { display: none !important; }
body.app-route #generation .generation-mode-tabs { border-color: var(--cp-line) !important; border-radius: 10px !important; background: var(--cp-paper-deep) !important; }
body.app-route #generation .generation-mode-tab { border-radius: 7px !important; color: var(--cp-muted) !important; background: transparent !important; box-shadow: none !important; }
body.app-route #generation .generation-mode-tab.active { color: var(--cp-ink) !important; background: #fff !important; }
body.app-route #generation .smart-generation-steps { color: var(--cp-muted) !important; }
body.app-route #generation .smart-step b { color: #fff !important; background: var(--cp-ink) !important; }
body.app-route #generation .smart-generation-layout { grid-template-columns: minmax(210px,.62fr) minmax(520px,1.7fr) minmax(340px,1fr) !important; gap: 12px !important; }
body.app-route #generation .generation-upload-panel,
body.app-route #generation .smart-compose-panel,
body.app-route #generation .smart-result-panel { border-color: var(--cp-line) !important; border-radius: 12px !important; background: var(--cp-surface) !important; }
body.app-route #generation .smart-upload-dropzone { border-color: #aca79c !important; border-radius: 10px !important; background: #f7f5ef !important; }
body.app-route #generation .generation-upload-icon { border-radius: 8px !important; background: var(--cp-ink) !important; box-shadow: none !important; }
body.app-route #generation .smart-source-preview { border-color: var(--cp-line) !important; border-radius: 10px !important; background: #eeeae0 !important; }
body.app-route #generation .smart-quota-card { border-color: #cbd3ad !important; border-radius: 9px !important; background: var(--cp-olive-soft) !important; }
body.app-route #generation .smart-intent-button { border-color: var(--cp-line) !important; border-radius: 8px !important; color: var(--cp-graphite) !important; background: transparent !important; }
body.app-route #generation .smart-intent-button.active,
body.app-route #generation .smart-intent-button[aria-pressed="true"] { border-color: var(--cp-ink) !important; color: var(--cp-ink) !important; background: #fff !important; }
body.app-route #generation .smart-recommend-button { border-color: var(--cp-line-dark) !important; color: var(--cp-ink) !important; background: #f3f0e8 !important; }
body.app-route #generation .smart-product-info-box textarea { min-height: 170px !important; border-color: var(--cp-line-dark) !important; background: #fff !important; }
body.app-route #generation .smart-output-count,
body.app-route #generation .smart-similarity-control,
body.app-route #generation .smart-more-settings,
body.app-route #generation .smart-recommend-result { border-color: var(--cp-line) !important; border-radius: 9px !important; background: #f7f5ef !important; }
body.app-route #generation .smart-generate-submit { min-height: 52px !important; border-radius: 9px !important; background: var(--cp-ink) !important; }
body.app-route #generation .smart-result-panel .result-preview { border-color: var(--cp-line) !important; border-radius: 10px !important; background: #ece8de !important; }
body.app-route #generation .smart-result-panel .result-preview img { border-radius: 7px !important; }
body.app-route #generation .listing-suite-grid > *,
body.app-route #generation .listing-suite-panel { border-color: var(--cp-line) !important; border-radius: 10px !important; background: var(--cp-surface) !important; }

/* Every business module */
body.app-route :is(#image-edit,#translation,#remix,#online-batch,#image-audit,#history,#image-slicer,#team,#cdk,#referral,#brands,#profile,#template-square) > .section-title h2 {
  font-size: clamp(34px, 3.8vw, 58px) !important;
  line-height: 1.02 !important;
}
body.app-route :is(.generation-layout,.online-batch-layout,.translation-layout,.remix-layout,.image-audit-layout,.slicer-layout,.team-layout,.balance-layout) { gap: 12px !important; }
body.app-route :is(.translation-layout,.remix-layout,.image-audit-layout,.slicer-layout,.online-batch-layout) > * { border-color: var(--cp-line) !important; border-radius: 10px !important; background: var(--cp-surface) !important; }
body.app-route :is(.template-card,.history-card,.package-card,.brand-card,.team-stat-card,.online-result-card,.audit-item,.translation-item,.remix-mode-card) {
  border-color: var(--cp-line) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: none !important;
}
body.app-route :is(.template-card,.history-card,.package-card,.brand-card):hover { border-color: var(--cp-line-dark) !important; box-shadow: var(--cp-shadow) !important; }
body.app-route table { border-color: var(--cp-line) !important; border-radius: 9px !important; background: var(--cp-surface) !important; }
body.app-route th { color: var(--cp-muted) !important; background: #eeeae0 !important; }
body.app-route td { border-color: #e4e0d6 !important; }
body.app-route progress, body.app-route .usage-bar, body.app-route .smart-quota-track { background: #ddd9ce !important; }
body.app-route progress::-webkit-progress-value, body.app-route .usage-bar > i, body.app-route .smart-quota-track > i { background: var(--cp-olive) !important; }

/* Admin console */
body[data-admin-current-section] { background: var(--cp-paper) !important; }
body[data-admin-current-section] .shell { background: var(--cp-paper) !important; }
body[data-admin-current-section] .topbar { border-bottom-color: var(--cp-line) !important; background: rgba(250,249,245,.94) !important; box-shadow: none !important; }
body[data-admin-current-section] .admin-console-frame { grid-template-columns: 220px minmax(0,1fr) !important; gap: 0 !important; border-color: var(--cp-line) !important; border-radius: 12px !important; background: var(--cp-surface) !important; box-shadow: none !important; overflow: hidden; }
body[data-admin-current-section] .admin-sidebar { border-right-color: var(--cp-line) !important; background: #efebe2 !important; }
body[data-admin-current-section] .admin-nav-item { border-radius: 8px !important; color: #5e5a53 !important; background: transparent !important; }
body[data-admin-current-section] .admin-nav-item:hover { color: var(--cp-ink) !important; background: rgba(255,255,255,.58) !important; }
body[data-admin-current-section] .admin-nav-item.active { color: var(--cp-ink) !important; background: #fff !important; box-shadow: none !important; }
body[data-admin-current-section] .admin-main { background: var(--cp-paper) !important; }
body[data-admin-current-section] [data-admin-section].card,
body[data-admin-current-section] .admin-hero-card,
body[data-admin-current-section] .admin-stat-card,
body[data-admin-current-section] .admin-table-wrap {
  border-color: var(--cp-line) !important;
  border-radius: 10px !important;
  background: var(--cp-surface) !important;
  box-shadow: none !important;
}
body[data-admin-current-section] .admin-hero-card h1,
body[data-admin-current-section] .admin-hero-card h2 { font-size: clamp(38px, 4vw, 62px) !important; }
body[data-admin-current-section] .admin-stat-value { color: var(--cp-ink) !important; font-variant-numeric: tabular-nums; }
body[data-admin-current-section] table { border-color: var(--cp-line) !important; background: var(--cp-surface) !important; }
body[data-admin-current-section] th { color: var(--cp-muted) !important; background: #eeeae0 !important; }
body[data-admin-current-section] td { border-color: #e3dfd4 !important; }
body[data-admin-current-section] .admin-api-config-form,
body[data-admin-current-section] .admin-filter-bar { border-color: var(--cp-line) !important; border-radius: 9px !important; background: #f3f0e8 !important; }

/* Admin sign-in */
body.admin-login-v56 { background: var(--cp-paper) !important; }
body.admin-login-v56 .admin-login-shell,
body.admin-login-v56 .admin-login-card,
body.admin-login-v56 .card { border-color: var(--cp-line) !important; border-radius: 14px !important; background: var(--cp-surface) !important; box-shadow: var(--cp-shadow) !important; }
body.admin-login-v56 .admin-login-card h1 { font-size: clamp(38px, 5vw, 62px) !important; }
body.admin-login-v56 .intro { background: radial-gradient(circle at 88% 14%, rgba(112,130,54,.14), transparent 34%), var(--cp-surface) !important; }
body.admin-login-v56 .preview-stack span { background: linear-gradient(145deg, #eef0df, #aeb77a) !important; box-shadow: 0 18px 40px rgba(38,38,32,.12) !important; }

/* Responsive */
@media (max-width: 1400px) {
  body.app-route #generation .smart-generation-layout {
    grid-template-columns: minmax(210px,.65fr) minmax(0,1.45fr) !important;
  }
  body.app-route #generation .smart-generation-layout > aside.generation-upload-panel:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  body.app-route #generation .smart-generation-layout > section.smart-compose-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  body.app-route #generation .smart-generation-layout > aside.smart-result-panel {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }
}
@media (max-width: 1180px) {
  body.app-route .shell { grid-template-columns: 196px minmax(0,1fr) !important; }
  body.app-route .reference-sidebar { width: 196px !important; }
  body.app-route #generation .smart-generation-layout { grid-template-columns: minmax(210px,.65fr) minmax(0,1.45fr) !important; }
  body.app-route #generation .smart-result-panel { grid-column: 1 / -1 !important; }
  body[data-admin-current-section] .admin-console-frame { grid-template-columns: 196px minmax(0,1fr) !important; }
}
@media (max-width: 860px) {
  body.app-route .shell { display: block !important; }
  body.app-route .reference-sidebar { display: none !important; }
  body.app-route #appView { padding: 18px 14px 92px !important; }
  body.app-route #generation { padding: 18px 12px !important; }
  body.app-route #generation .smart-generation-layout { grid-template-columns: 1fr !important; }
  body.app-route #generation .smart-generation-layout > aside.generation-upload-panel:first-child,
  body.app-route #generation .smart-generation-layout > section.smart-compose-panel,
  body.app-route #generation .smart-generation-layout > aside.smart-result-panel {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  body[data-admin-current-section] .admin-console-frame { grid-template-columns: 1fr !important; }
  body[data-admin-current-section] .admin-sidebar { border-right: 0 !important; border-bottom: 1px solid var(--cp-line) !important; }
}
@media (max-width: 640px) {
  .landing-v2-copy h1 { font-size: 46px !important; }
  body.auth-route #authPanel { border-radius: 12px !important; }
  body.app-route .topbar { padding-inline: 14px !important; }
  body.app-route #appView { padding-inline: 10px !important; }
  body.app-route #appView > .subcard, body.app-route .workspace-page-active { border-radius: 10px !important; }
  body.app-route #generation .smart-generation-heading h2,
  body.app-route :is(#image-edit,#translation,#remix,#online-batch,#image-audit,#history,#image-slicer,#team,#cdk,#referral,#brands,#profile,#template-square) > .section-title h2 { font-size: 36px !important; }
  body.app-route #generation .smart-generation-form { grid-template-columns: 1fr !important; }
  body[data-admin-current-section] [data-admin-section].card { border-radius: 9px !important; }
}
/* Workflow usability: grouped navigation and reachable primary actions. */
.sidebar-group-label {
  display: block;
  margin: 12px 12px 4px;
  color: #8b8b96;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

#generationSubmit,
#onlineBatchSubmit,
#imageAuditSubmit,
#slicerGenerate {
  position: sticky;
  bottom: 14px;
  z-index: 12;
  box-shadow: 0 10px 28px rgba(20, 16, 44, .18);
}

body.auth-route .auth-account-tabs button {
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--cp-muted) !important;
  box-shadow: none !important;
}

body.auth-route .auth-account-tabs button.active {
  background-color: var(--cp-ink) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(23, 23, 20, .16) !important;
}

body.auth-route .auth-account-form .auth-password-toggle {
  width: max-content !important;
  min-height: 24px !important;
  margin: -8px 2px 0 auto !important;
  padding: 2px 4px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--cp-muted) !important;
  box-shadow: none !important;
  cursor: pointer;
  font: inherit;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  text-decoration: none !important;
}

body.auth-route .auth-account-form .auth-password-toggle:hover {
  color: var(--cp-ink) !important;
}

body.auth-route .auth-account-form .auth-password-toggle:focus-visible {
  outline: 2px solid var(--cp-ink) !important;
  outline-offset: 2px;
}

body.auth-route .auth-account-form input:focus {
  outline: none !important;
  border-color: #6f6c63 !important;
  box-shadow: 0 0 0 3px rgba(23, 23, 20, .10) !important;
}

/* MOBILE-USABILITY-20260711: prioritize tasks, collapse secondary content, and keep works scannable. */
.workspace-announcement-toggle,
.history-filter-disclosure > summary,
.history-load-more { cursor: pointer; }

.workspace-announcement-toggle {
  display: inline-flex;
  width: max-content;
  padding: 0;
  border: 0;
  color: var(--cp-muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
body.app-route .workspace-announcement-log-row:nth-child(n+4) { display: none !important; }
body.app-route .workspace-announcement.is-expanded .workspace-announcement-log-row { display: grid !important; }
body.app-route .workspace-announcement-toggle { margin-top: 10px; }

.history-filter-disclosure > summary {
  display: none;
  list-style: none;
}

.history-filter-disclosure > summary::-webkit-details-marker { display: none; }
.history-load-more { width: min(100%, 360px); margin: 16px auto 0; }

@media (max-width: 640px) {
  body.app-route #appView { padding-top: 86px !important; padding-bottom: 104px !important; }
  body.app-route .scheme-a-home[hidden] { display: none !important; }
  body.app-route .scheme-a-home {
    display: flex !important;
    flex-direction: column;
    gap: 12px !important;
  }
  body.app-route .scheme-a-home-header { order: 1; }
  body.app-route .scheme-a-quick { order: 2; }
  body.app-route .workspace-announcement { order: 3; }
  body.app-route .scheme-a-hero-banner { display: none !important; }

  body.app-route .scheme-a-home-header {
    flex-direction: row !important;
    align-items: center !important;
    padding: 2px 2px 4px !important;
  }
  body.app-route .scheme-a-home-header h1 {
    margin: 0 !important;
    font-size: 27px !important;
    line-height: 1.15 !important;
    letter-spacing: -.035em !important;
  }
  body.app-route .scheme-a-home-header p {
    margin-top: 5px !important;
    font-size: 12px !important;
  }
  body.app-route .scheme-a-balance-chip {
    flex: 0 0 auto;
    min-width: 82px;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  body.app-route .scheme-a-balance-chip span { font-size: 11px !important; }
  body.app-route .scheme-a-balance-chip strong { font-size: 22px !important; }

  body.app-route .scheme-a-quick { padding: 14px !important; }
  body.app-route .scheme-a-section-head { margin-bottom: 10px !important; }
  body.app-route .scheme-a-section-head h2 { font-size: 17px !important; }
  body.app-route .mobile-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  body.app-route .mobile-action-card {
    min-height: 88px !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    padding: 12px !important;
  }
  body.app-route .mobile-action-card:first-child {
    grid-column: 1 / -1;
    min-height: 72px !important;
  }
  body.app-route .mobile-action-card:nth-child(n+4) { display: none !important; }
  body.app-route .mobile-action-card .mobile-action-icon {
    width: 34px !important;
    height: 34px !important;
  }
  body.app-route .mobile-action-card strong { font-size: 14px !important; }
  body.app-route .mobile-action-card span { font-size: 11px !important; }

  body.app-route .workspace-announcement {
    padding: 13px !important;
    border-radius: 12px !important;
  }
  body.app-route .workspace-announcement-head { margin-bottom: 8px; }
  body.app-route .workspace-announcement h2 { font-size: 14px !important; }
  body.app-route .workspace-announcement-log-row:nth-child(n+2) { display: none !important; }
  body.app-route .workspace-announcement.is-expanded .workspace-announcement-log-row { display: grid !important; }
  body.app-route .workspace-announcement-toggle { display: inline-flex; margin-top: 9px; }

  body.app-route #history { padding: 14px !important; }
  body.app-route #history > .section-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px !important;
    align-items: start !important;
  }
  body.app-route #history > .section-title h2 {
    font-size: 26px !important;
    line-height: 1.08 !important;
  }
  body.app-route #history > .section-title p { display: none; }
  body.app-route #refreshHistory {
    width: auto !important;
    min-height: 38px !important;
    padding: 7px 11px !important;
    font-size: 13px !important;
  }
  body.app-route .history-filter-disclosure {
    margin: 10px 0 8px;
    border: 1px solid var(--cp-line);
    border-radius: 10px;
    background: rgba(255,255,255,.72);
  }
  body.app-route .history-filter-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 750;
  }
  body.app-route .history-filter-disclosure > summary::after { content: "+"; color: var(--cp-muted); }
  body.app-route .history-filter-disclosure[open] > summary::after { content: "−"; }
  body.app-route .history-filters { padding: 0 12px 12px; }
  body.app-route #historyStatus { margin: 8px 0 !important; font-size: 12px !important; }
  body.app-route .history-list { gap: 10px !important; }
  body.app-route .history-row {
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 10px !important;
    border-radius: 10px !important;
  }
  body.app-route .history-preview {
    width: 92px !important;
    min-height: 92px !important;
    aspect-ratio: 1 !important;
    grid-row: 1;
  }
  body.app-route .history-row > div:nth-child(2) { min-width: 0; }
  body.app-route .history-row h3 {
    margin: 1px 0 7px !important;
    font-size: 15px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.app-route .history-meta { gap: 4px !important; }
  body.app-route .history-meta .pill:nth-child(n+4) { display: none; }
  body.app-route .history-row p { margin: 6px 0 0 !important; font-size: 11px !important; }
  body.app-route .history-row .field-hint:not(.status) { display: none; }
  body.app-route .history-actions {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }
  body.app-route .history-actions > :not([data-history-preview]):not([data-history-preview-picker]):not([data-history-download]):not(.history-appeal):not(.history-appeal-result) { display: none !important; }
  body.app-route .history-actions .button {
    width: 100% !important;
    min-height: 38px !important;
    padding: 7px 8px !important;
    font-size: 13px !important;
  }
  body.app-route .history-preview-select-row { grid-column: 1; }
  body.app-route .history-load-more { display: block; min-height: 44px; }
  body.app-route .history-load-more.hidden { display: none !important; }
  body.app-route #generation.workspace-page-active #generationSubmit {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    min-height: 52px !important;
    z-index: 60 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 34px rgba(23,23,20,.24) !important;
  }
  body.app-route:has(#generation.workspace-page-active) #feedbackFab { bottom: 78px !important; }
}

/* HELP-CENTER-HEADER-FIX-20260722 final cascade overrides */
body:not(.auth-route):not(.app-route):not(.help-route) .topbar {
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
body:not(.auth-route):not(.app-route):not(.help-route) .brand { flex: 0 0 auto !important; }
body:not(.auth-route):not(.app-route):not(.help-route) .landing-nav {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  gap: clamp(18px, 2vw, 30px) !important;
}
body:not(.auth-route):not(.app-route):not(.help-route) .app-topbar-status {
  min-width: max-content !important;
  margin-left: 0 !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
body:not(.auth-route):not(.app-route):not(.help-route) .nav-actions {
  min-width: max-content !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}
body:not(.auth-route):not(.app-route):not(.help-route) .nav-actions .button {
  width: auto !important;
  min-width: 76px !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
body.help-route .help-page-shell {
  width: min(1220px, calc(100vw - 48px)) !important;
  margin: 0 auto !important;
  padding: 0 0 44px !important;
  background: transparent !important;
}
body.help-route .help-topbar {
  min-height: 72px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 4px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cp-line) !important;
  border-radius: 0 !important;
  background: rgba(250,249,245,.92) !important;
  box-shadow: none !important;
}
body.help-route .help-topbar .brand {
  gap: 10px !important;
  flex: 0 0 auto !important;
  color: var(--cp-ink) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
}
body.help-route .help-topbar .brand-mark { display: none !important; }
body.help-route .help-topbar .brand-text-main { display: grid !important; line-height: 1.1 !important; }
body.help-route .help-topbar .brand-text-main > span { font-size: 21px !important; font-weight: 850 !important; letter-spacing: -.055em !important; }
body.help-route .help-topbar .brand-text-main small { display: block !important; margin-top: 3px !important; color: #8c887f !important; font-size: 9px !important; font-weight: 760 !important; letter-spacing: .12em !important; }
@media (max-width: 1440px) {
  body:not(.auth-route):not(.app-route):not(.help-route) .landing-nav { display: none !important; }
}
@media (max-width: 980px) {
  body:not(.auth-route):not(.app-route):not(.help-route) .app-topbar-status { display: none !important; }
  body.help-route .help-page-shell { width: min(100vw - 28px, 760px) !important; }
}
@media (max-width: 640px) {
  body.help-route .help-page-shell { width: min(100vw - 20px, 430px) !important; }
  body.help-route .help-topbar { min-height: 64px !important; padding: 0 2px !important; }
  body.help-route .help-topbar .brand-text-main small { display: none !important; }
}

/* ONLINE-BATCH-UI-20260722: clearer three-step batch creation workspace. */
body.app-route #online-batch.online-batch-page {
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.app-route #online-batch .online-batch-hero {
  min-height: 148px;
  margin: 0 0 12px !important;
  padding: 24px 26px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  border: 1px solid #d9d4ca;
  border-radius: 16px;
  background:
    radial-gradient(circle at 82% 18%, rgba(193,157,99,.18), transparent 30%),
    linear-gradient(135deg, #fff 0%, #f7f3ea 100%);
  overflow: hidden;
}
body.app-route #online-batch .online-batch-hero > div:first-child { max-width: 800px; }
body.app-route #online-batch .online-batch-hero .eyebrow {
  color: #8a672f !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
}
body.app-route #online-batch .online-batch-hero h2 {
  margin: 7px 0 8px !important;
  font-size: clamp(34px, 3vw, 48px) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
}
body.app-route #online-batch .online-batch-hero p,
body.app-route #online-batch .online-panel-heading p,
body.app-route #online-batch .online-task-section-title p {
  display: block !important;
  margin: 0 !important;
  color: #6f6a61 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.online-batch-hero-actions {
  min-width: max-content;
  display: grid;
  justify-items: end;
  gap: 10px;
}
.online-batch-charge-note {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #cde7dc;
  border-radius: 999px;
  background: #edf8f3;
  color: #0f6b50;
  font-size: 12px;
  font-weight: 750;
}
.online-batch-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.online-batch-flow li {
  position: relative;
  min-width: 0;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #dfdbd2;
  border-radius: 13px;
  background: rgba(255,255,255,.72);
}
.online-batch-flow li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -9px;
  z-index: 2;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f4f1ea;
  color: #8c867b;
  font-size: 11px;
}
.online-batch-flow li > span {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ebe7df;
  color: #5f5b53;
  font-size: 11px;
  font-weight: 850;
}
.online-batch-flow li.is-active > span { background: #121210; color: #fff; }
.online-batch-flow li div { min-width: 0; display: grid; gap: 3px; }
.online-batch-flow strong { color: #171714; font-size: 13px; }
.online-batch-flow small { overflow: hidden; color: #7e796f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

body.app-route #online-batch .online-batch-layout {
  grid-template-columns: 300px minmax(620px, 1fr) 340px !important;
  gap: 16px !important;
  align-items: start !important;
}
body.app-route #online-batch .online-batch-panel {
  min-width: 0;
  padding: 18px !important;
  gap: 14px !important;
  border: 1px solid #ddd8cf !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 14px 32px rgba(55,48,37,.055) !important;
}
.online-panel-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.online-panel-heading > div { min-width: 0; }
.online-panel-heading small {
  display: block;
  margin-bottom: 3px;
  color: #9b7b47;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .16em;
}
.online-panel-heading h3 { margin: 0 0 4px !important; color: #171714; font-size: 18px !important; letter-spacing: -.025em; }
.online-panel-number {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #171714;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}
body.app-route #online-batch .online-source-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 4px;
  border: 1px solid #e3dfd6;
  border-radius: 12px;
  background: #f4f1eb;
}
body.app-route #online-batch .online-mode-button {
  min-width: 0;
  min-height: 52px;
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 7px 5px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #69645b !important;
  box-shadow: none !important;
}
body.app-route #online-batch .online-mode-button strong { font-size: 12px; line-height: 1.2; white-space: nowrap; }
body.app-route #online-batch .online-mode-button small { color: #969086; font-size: 9px; white-space: nowrap; }
body.app-route #online-batch .online-mode-button[aria-pressed="true"] {
  background: #fff !important;
  color: #171714 !important;
  box-shadow: 0 4px 12px rgba(44,39,31,.09) !important;
}
body.app-route #online-batch .online-mode-button[aria-pressed="true"] small { color: #896a38; }
body.app-route #online-batch .online-dropzone {
  min-height: 132px;
  border: 1px dashed #bdb5a8 !important;
  border-radius: 12px !important;
  background: #faf8f3 !important;
  color: #4e4a43 !important;
}
body.app-route #online-batch .online-source-list { gap: 8px !important; }
body.app-route #online-batch .online-source-card { border-color: #e3dfd6 !important; border-radius: 10px !important; }
body.app-route #online-batch .online-source-card[aria-pressed="true"] {
  border-color: #a98245 !important;
  box-shadow: 0 0 0 3px rgba(169,130,69,.10) !important;
}
.online-global-prompt { display: grid; gap: 7px; font-weight: 750; }
body.app-route #online-batch .online-global-prompt textarea { min-height: 104px; resize: vertical; }
.online-prompt-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  border-left: 3px solid #b88a45;
  border-radius: 0 9px 9px 0;
  background: #fbf6ec;
  color: #6e5b3e;
  font-size: 11px;
  line-height: 1.5;
}
.online-prompt-tip strong { flex: 0 0 auto; color: #5d4725; }
.online-subsection-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}
.online-subsection-title strong { font-size: 14px; }
.online-subsection-title span { color: #8c867b; font-size: 10px; }
body.app-route #online-batch .online-param-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 12px;
  border: 1px solid #e5e1d9;
  border-radius: 12px;
  background: #faf9f6;
}
body.app-route #online-batch .online-param-grid label { gap: 6px; color: #625e56; font-size: 11px; }
body.app-route #online-batch .online-info-warning {
  border: 1px solid #ead8b9 !important;
  border-radius: 10px !important;
  background: #fffaf0 !important;
  color: #765526 !important;
}
body.app-route #online-batch .online-task-section-title {
  margin: 2px 0 0 !important;
  align-items: center !important;
}
body.app-route #online-batch .online-task-section-title h3 { font-size: 16px !important; }
body.app-route #online-batch .online-task-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
body.app-route #online-batch .online-task-card {
  padding: 12px !important;
  gap: 9px !important;
  border: 1px solid #e1ddd5 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.app-route #online-batch .online-task-head > span:first-child { color: #171714; font-size: 14px; font-weight: 850; }
body.app-route #online-batch .online-task-body { display: grid !important; grid-template-columns: 68px minmax(0, 1fr); gap: 9px !important; }
body.app-route #online-batch .online-task-thumb { width: 68px !important; height: 68px !important; border-radius: 9px !important; }
body.app-route #online-batch .online-task-card textarea { min-height: 88px !important; resize: vertical; border-radius: 9px !important; }
body.app-route #online-batch .online-status-badge { background: #efede8 !important; color: #686158 !important; }
body.app-route #online-batch .online-status-badge.running { background: #eef2ff !important; color: #4338ca !important; }
body.app-route #online-batch .online-status-badge.succeeded { background: #eaf8f1 !important; color: #087457 !important; }
body.app-route #online-batch .online-status-badge.failed { background: #fff0f0 !important; color: #b4232b !important; }
body.app-route #online-batch .online-results-panel {
  position: sticky;
  top: 86px;
}
.online-progress-summary {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #e3dfd6;
  border-radius: 11px;
  background: #faf9f6;
}
body.app-route #online-batch .online-result-head { font-size: 12px !important; }
body.app-route #online-batch .online-result-head strong { color: #171714; font-size: 15px; }
body.app-route #online-batch .online-progress-track { height: 7px; background: #e7e2d9 !important; }
body.app-route #online-batch .online-progress-track span { background: linear-gradient(90deg, #171714, #b68a49) !important; }
body.app-route #online-batch .online-result-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
body.app-route #online-batch .online-result-cell {
  min-height: 132px !important;
  border-color: #e3dfd6 !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, #faf9f6, #f1eee8) !important;
}
body.app-route #online-batch .online-result-actions { gap: 8px !important; }
body.app-route #online-batch #onlineBatchSubmit {
  position: static !important;
  min-height: 48px !important;
  border-radius: 10px !important;
  background: #171714 !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.app-route #online-batch #onlineSaveToHistory,
body.app-route #online-batch #onlineDownloadAll { min-height: 40px !important; border-radius: 9px !important; }
body.app-route #online-batch .generation-time-estimate {
  border: 1px solid #cfe7dd !important;
  border-left-width: 3px !important;
  border-radius: 9px !important;
  background: #f2faf6 !important;
}

@media (max-width: 1580px) {
  body.app-route #online-batch .online-batch-layout {
    grid-template-columns: 300px minmax(0, 1fr) !important;
  }
  body.app-route #online-batch .online-results-panel {
    position: static;
    grid-column: 1 / -1;
  }
  body.app-route #online-batch .online-results-panel .online-result-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (max-width: 1120px) {
  body.app-route #online-batch .online-batch-layout { grid-template-columns: minmax(0, 1fr) !important; }
  body.app-route #online-batch .online-results-panel { grid-column: auto; }
  body.app-route #online-batch .online-results-panel .online-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.app-route #online-batch .online-batch-hero { align-items: flex-start !important; }
}
@media (max-width: 720px) {
  body.app-route #online-batch .online-batch-hero {
    min-height: 0;
    padding: 18px !important;
    display: grid !important;
    gap: 16px !important;
  }
  body.app-route #online-batch .online-batch-hero h2 { font-size: 34px !important; }
  .online-batch-hero-actions { min-width: 0; justify-items: stretch; }
  .online-batch-charge-note { justify-content: center; }
  .online-batch-flow { grid-template-columns: 1fr; }
  .online-batch-flow li { min-height: 58px; }
  .online-batch-flow li:not(:last-child)::after { content: "↓"; left: 26px; right: auto; bottom: -10px; }
  body.app-route #online-batch .online-param-grid,
  body.app-route #online-batch .online-task-grid { grid-template-columns: 1fr !important; }
  body.app-route #online-batch .online-results-panel .online-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.app-route #online-batch .online-batch-panel { padding: 14px !important; }
  .online-subsection-title { display: grid; gap: 2px; }
}
@media (max-width: 420px) {
  body.app-route #online-batch .online-source-tabs { grid-template-columns: 1fr !important; }
  body.app-route #online-batch .online-mode-button { min-height: 44px; grid-template-columns: auto auto; gap: 6px; }
  body.app-route #online-batch .online-task-body { grid-template-columns: 56px minmax(0, 1fr); }
  body.app-route #online-batch .online-task-thumb { width: 56px !important; height: 56px !important; }
  body.app-route #online-batch .online-result-actions { grid-template-columns: 1fr !important; }
}

/* MEDIUM-LAYOUT-RATIO-20260725: keep 641-980px on the compact navigation layout. */
@media (min-width: 641px) and (max-width: 980px) {
  body.app-route .shell {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 72px minmax(0, 1fr) !important;
  }
  body.app-route .reference-sidebar {
    display: none !important;
    width: 0 !important;
  }
  body.app-route #appView {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  body.app-route .mobile-nav,
  body[data-admin-current-section] .mobile-nav {
    display: block !important;
    margin-left: auto !important;
  }
  body.app-route .topbar > .nav-actions,
  body[data-admin-current-section] .topbar > .nav-actions {
    display: none !important;
  }
  body[data-admin-current-section] > .shell {
    width: min(100% - 24px, 1180px) !important;
    min-width: 0 !important;
  }
  body[data-admin-current-section] .admin-console-frame {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-admin-current-section] .admin-sidebar {
    display: none !important;
  }
  body[data-admin-current-section] #adminApp,
  body[data-admin-current-section] .admin-main {
    min-width: 0 !important;
    width: 100% !important;
  }
}