:root {
  color: #171717;
  background: #f7f8fa;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
* { box-sizing: border-box; }
html { overflow-x: hidden; }
html.auth-route-boot body { opacity: 0; pointer-events: none; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(99, 102, 241, 0.08), transparent 28rem),
    #f7f8fa;
}
a { color: inherit; }
.shell {
  width: min(1120px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 28px 0 56px;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #111;
  font-size: 13px;
}
.nav-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { list-style: none; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: min(272px, calc(100vw - 24px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .12);
}
.mobile-nav-menu .button { width: 100%; }
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 18px;
  align-items: start;
}
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.hero { padding: 38px; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.hero-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.flow-step {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(180deg, #fff, #fafafa);
}
.flow-step b {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  margin-bottom: 8px;
  color: #fff;
  background: #111;
  font-size: 12px;
}
.flow-step strong { display: block; font-size: 13px; }
.flow-step span { color: #737373; font-size: 12px; }
.visual-demo {
  margin-top: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(99, 102, 241, .09), transparent 42%),
    #fff;
}
.visual-demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.visual-tile {
  min-height: 94px;
  border: 1px dashed #d4d4d4;
  border-radius: 10px;
  padding: 12px;
  background: rgba(255,255,255,.78);
  display: grid;
  align-content: end;
}
.visual-tile strong { font-size: 13px; }
.visual-tile span { color: #737373; font-size: 12px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  color: #525252;
  background: #fafafa;
}
h1 {
  margin: 18px 0 12px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.055em;
}
h2 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -0.03em;
}
h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.02em;
}
p { color: #666; margin: 0; }
.hero-copy { max-width: 620px; font-size: 16px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}
.feature, .entry-card, .stat, .history-card, .package-card, .pipeline-step, .brand-card {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  background: #fff;
}
.feature { padding: 14px; }
.pricing-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #f0f0f0;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.package-card {
  padding: 14px;
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 142px;
  position: relative;
  overflow: hidden;
}
.package-card.featured {
  border-color: #c7d2fe;
  background: linear-gradient(180deg, #fff, #fafbff);
}
.package-card.best-value { border-color: #d9d2c5; }
.package-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.package-card-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #111;
  color: #fff !important;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.package-card.best-value .package-card-badge { background: #7c5b25; }
.package-card strong { font-size: 15px; letter-spacing: -0.02em; }
.package-price { font-size: 22px; font-weight: 720; letter-spacing: -0.04em; color: #111; }
.package-summary { margin: 0; color: #737373; font-size: 12px; line-height: 1.55; }
.package-card ul { margin: 0; padding-left: 16px; color: #737373; font-size: 12px; }
.package-card li { margin: 3px 0; }
.package-note { color: #737373; font-size: 12px; margin-top: 10px; }
.feature strong { display: block; margin-bottom: 4px; font-size: 14px; }
.feature span, .entry-card p, .history-card p { color: #737373; font-size: 13px; }
.panel { padding: 24px; }
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8f8f8;
  margin-bottom: 18px;
}
.tab {
  border: 0;
  border-radius: 6px;
  padding: 9px 10px;
  background: transparent;
  color: #666;
  cursor: pointer;
  font: inherit;
}
.tab[aria-selected="true"] {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form { display: grid; gap: 13px; margin-top: 18px; }
label { display: grid; gap: 7px; font-size: 13px; color: #404040; }
input, select, textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  padding: 11px 12px;
  color: #111;
  font: inherit;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
textarea {
  min-height: 92px;
  resize: vertical;
}
input:focus, select:focus, textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
.button {
  border: 1px solid #111;
  border-radius: 8px;
  padding: 11px 14px;
  background: #111;
  color: #fff;
  font: inherit;
  font-weight: 560;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}
.button.secondary {
  border-color: #e5e7eb;
  background: #fff;
  color: #171717;
}
.button.danger {
  border-color: #fecaca;
  background: #fff;
  color: #b91c1c;
}
.button:disabled { opacity: .58; cursor: not-allowed; }
.status {
  min-height: 20px;
  font-size: 13px;
  color: #666;
}
.status.error { color: #b91c1c; }
.status.success { color: #047857; }
.hidden { display: none !important; }
/* TASK-060: align workspace UI with expanded reference image */
:root {
  --ref-primary: #0f766e;
  --ref-primary-2: #14b8a6;
  --ref-border: #e3e7f0;
  --ref-muted: #798195;
  --ref-card-radius: 16px;
  --ref-shadow: 0 18px 48px rgba(31, 41, 90, .07);
}
body {
  background:
    radial-gradient(circle at 58% 0%, rgba(99, 102, 241, .10), transparent 28rem),
    linear-gradient(180deg, #fbfcff 0%, #f6f8fc 100%);
}
.topbar {
  min-height: 64px;
  padding: 0 18px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 16px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 12px 36px rgba(15, 23, 42, .05);
  backdrop-filter: blur(18px);
}
.brand { font-size: 20px; color: #0f172a; }
.brand-mark {
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ref-primary), var(--ref-primary-2));
  box-shadow: 0 10px 24px rgba(79, 85, 255, .24);
}
.card, .subcard, .feature, .entry-card, .stat, .history-card, .package-card, .pipeline-step, .flow-step {
  border-color: var(--ref-border);
  border-radius: var(--ref-card-radius);
  box-shadow: 0 12px 36px rgba(31, 41, 90, .04);
}
.button {
  border-color: transparent;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ref-primary), var(--ref-primary-2));
  box-shadow: 0 12px 28px rgba(79, 85, 255, .24);
}
.button.secondary {
  border-color: var(--ref-border);
  background: #fff;
  color: #334155;
  box-shadow: none;
}
.button.danger {
  border-color: #fecaca;
  background: #fff;
  color: #b91c1c;
  box-shadow: none;
}
input, select, textarea {
  border-color: #dbe1eb;
  border-radius: 12px;
  min-height: 44px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ref-primary);
  box-shadow: 0 0 0 4px rgba(79, 85, 255, .12);
}
.eyebrow, .entry-card .badge, .pill {
  border-color: #dfe4ee;
  background: #f8faff;
  color: #586174;
}
body.app-route .shell {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  display: grid;
  grid-template-columns: 254px minmax(0, 1fr);
  grid-template-rows: 74px minmax(0, 1fr);
}
body.app-route .topbar {
  grid-column: 1 / -1;
  min-height: 74px;
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 0 28px;
  box-shadow: 0 1px 0 rgba(226, 232, 240, .7);
}
body.app-route .reference-sidebar {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  align-content: space-between;
  gap: 18px;
  position: sticky;
  top: 74px;
  height: calc(100vh - 74px);
  padding: 28px 14px;
  border-right: 1px solid var(--ref-border);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,255,.94));
}
.reference-sidebar { display: none; }
.sidebar-stack { display: grid; gap: 12px; }
.sidebar-link {
  min-height: 56px;
  padding: 0 16px;
  border-radius: 12px;
  color: #4b5565;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 620;
}
.sidebar-link:hover { background: #f3f6ff; color: #1f2937; }
.sidebar-logout-button {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.sidebar-link.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--ref-primary), var(--ref-primary-2));
  box-shadow: 0 16px 30px rgba(79, 85, 255, .26);
}
.sidebar-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
}
.sidebar-link:not(.primary) .sidebar-icon {
  color: #4b5565;
  background: #fff;
  border-color: var(--ref-border);
}
.sidebar-upgrade {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(135deg, #4f55ff, #7c5cff);
  box-shadow: 0 16px 34px rgba(79, 85, 255, .25);
}
.sidebar-usage {
  padding: 14px;
  border: 1px solid var(--ref-border);
  border-radius: 14px;
  background: #fff;
}
.usage-bar { height: 8px; border-radius: 999px; background: #e7e9f2; overflow: hidden; margin: 8px 0; }
.usage-bar span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ref-primary), var(--ref-primary-2)); transition: width .24s ease; }
body.app-route #appView {
  grid-column: 2;
  grid-row: 2;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 28px 30px 48px;
  overflow: auto;
}
/* Workspace modules are route-like pages, not one long stacked canvas. */
body.app-route #brands,
body.app-route #profile,
body.app-route #image-slicer,
body.app-route #generation,
body.app-route #online-batch,
body.app-route #image-audit,
body.app-route #image-edit,
body.app-route #translation,
body.app-route #remix,
body.app-route #batch,
body.app-route #history,
body.app-route #cdk,
body.app-route #historyEntry {
  display: none !important;
}
body.app-route #brands.workspace-page-active,
body.app-route #profile.workspace-page-active,
body.app-route #image-slicer.workspace-page-active,
body.app-route #generation.workspace-page-active,
body.app-route #online-batch.workspace-page-active,
body.app-route #image-audit.workspace-page-active,
body.app-route #image-edit.workspace-page-active,
body.app-route #translation.workspace-page-active,
body.app-route #remix.workspace-page-active,
body.app-route #batch.workspace-page-active,
body.app-route #history.workspace-page-active,
body.app-route #cdk.workspace-page-active,
body.app-route #team.workspace-page-active {
  display: block !important;
}
body.app-route .reference-sidebar .sidebar-link.primary {
  background: #111;
  color: #fff;
  border-color: #111;
}
.reference-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  margin: 4px 0 22px;
}
.reference-step {
  position: relative;
  display: grid;
  place-items: center;
  gap: 7px;
  color: var(--ref-muted);
  font-weight: 620;
  font-size: 13px;
}
.reference-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(50% + 28px);
  right: calc(-50% + 28px);
  border-top: 1px dashed #cbd3df;
}
.reference-step b {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid #dbe1eb;
  background: #fff;
  color: #334155;
  font-size: 16px;
  box-shadow: 0 6px 18px rgba(31, 41, 90, .05);
}
.reference-step.active { color: var(--ref-primary); }
.reference-step.active b {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--ref-primary), var(--ref-primary-2));
  box-shadow: 0 12px 28px rgba(79, 85, 255, .25);
}
body.app-route .dashboard-head,
body.app-route .section-title,
body.app-route .subcard,
body.app-route .panel {
  background: rgba(255,255,255,.92);
}
body.app-route .dashboard-head {
  padding: 26px 28px;
  border: 1px solid var(--ref-border);
  border-radius: 18px;
  box-shadow: var(--ref-shadow);
}
body.app-route .stat strong,
.package-price { color: var(--ref-primary); }
body.app-route .entry-card:hover,
body.app-route .package-card.featured,
body.app-route .brand-card:hover,
body.app-route .brand-card[aria-pressed="true"] {
  border-color: rgba(79, 85, 255, .42);
  background: linear-gradient(180deg, #fff, #f7f8ff);
}
body.app-route #profile > .section-title,
body.app-route #image-slicer > .section-title,
body.app-route #generation > .section-title,
body.app-route #online-batch > .section-title,
body.app-route #image-audit > .section-title,
body.app-route #translation > .section-title,
body.app-route #remix > .section-title,
body.app-route #batch > .section-title,
body.app-route #history > .section-title,
body.app-route #cdk > .section-title,
body.app-route #brands > .section-title {
  margin-top: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf0f6;
}
body.app-route .generation-layout {
  grid-template-columns: 260px minmax(360px, 1fr) 330px;
}
.dashboard { display: grid; gap: 16px; }
.dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.stat { padding: 16px; }
.stat strong { display: block; font-size: 28px; letter-spacing: -0.05em; }
.stat span { color: #737373; font-size: 13px; }
.notice {
  padding: 14px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
}
.notice.warning {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.entry-card {
  min-height: 144px;
  padding: 16px;
  display: grid;
  align-content: space-between;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}
.entry-card:hover {
  border-color: #c7d2fe;
  transform: translateY(-1px);
}
.entry-card .icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f5f5f5;
  border: 1px solid #e5e7eb;
  font-size: 16px;
}
.dashboard-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.pipeline-step {
  padding: 14px;
  background: #fff;
}
.pipeline-step strong { display: block; font-size: 13px; }
.pipeline-step span { color: #737373; font-size: 12px; }
/* TASK-061: simplified first-use trial path */
.landing-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.landing-proof {
  padding: 14px;
  border: 1px solid var(--ref-border);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
}
.landing-proof strong { display: block; font-size: 13px; color: #0f172a; }
.landing-proof span { color: #64748b; font-size: 12px; }
.secondary-home-info { margin-top: 18px; color: #475569; }
.secondary-home-info summary { cursor: pointer; font-weight: 650; }
body:not(.auth-route):not(.app-route) #authPanel,
body:not(.auth-route):not(.app-route) #pricingPlans { display: none; }
body:not(.auth-route):not(.app-route) #landingView { grid-template-columns: minmax(0, 1fr); }
body.auth-route .feature-grid,
body.auth-route .hero-flow,
body.auth-route .landing-proof-grid,
body.auth-route .visual-demo,
body.auth-route .pricing-section,
body.auth-route .secondary-home-info { display: none; }
body.auth-route #landingView { max-width: 880px; margin: 0 auto; align-items: start; }
body.auth-route .hero { padding: 22px; gap: 12px; }
body.auth-route #authPanel { padding: 22px; }
.trial-path-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--ref-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at 82% 0%, rgba(20,184,166,.14), transparent 32%),
    rgba(255,255,255,.94);
  box-shadow: var(--ref-shadow);
}
.trial-path-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}
.trial-path-head p { max-width: 680px; }
.trial-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.trial-empty-state {
  padding: 14px 16px;
  border: 1px dashed #99f6e4;
  border-radius: 16px;
  background: #f0fdfa;
  color: #115e59;
  font-size: 13px;
}
.more-tools-details {
  border: 1px solid var(--ref-border);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  overflow: hidden;
}
.more-tools-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #334155;
  font-weight: 700;
}
.more-tools-details > summary::-webkit-details-marker { display: none; }
.more-tools-details > summary span { color: #64748b; font-weight: 500; }
.more-tools-details .entry-grid { padding: 0 16px 16px; }
.more-tools-details:not([open]) .entry-grid { display: none; }
.workspace-section-collapsed { display: none !important; }
.entry-card .badge {
  width: fit-content;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 3px 8px;
  color: #525252;
  background: #fafafa;
  font-size: 12px;
}
.history-card {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.translation-layout, .remix-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: start;
}
.batch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 12px;
  align-items: start;
}
.brand-manager-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: start;
}
.brand-list, .brand-preview-stack, .brand-reference-grid {
  display: grid;
  gap: 10px;
}
.brand-card {
  width: 100%;
  text-align: left;
  padding: 14px;
  cursor: pointer;
  font: inherit;
  display: grid;
  gap: 8px;
}
.brand-card:hover, .brand-card[aria-pressed="true"] {
  border-color: #c7d2fe;
  background: #fafbff;
}
.brand-card strong { font-size: 14px; }
.brand-card span, .brand-meta-line { color: #737373; font-size: 12px; }
.brand-color-dot {
  width: 18px;
  height: 18px;
  border: 1px solid #d4d4d4;
  border-radius: 999px;
  background: var(--brand-color, #fff);
  display: inline-block;
  vertical-align: middle;
}
.brand-form-actions, .brand-upload-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.brand-thumb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.brand-thumb {
  aspect-ratio: 1 / 1;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #737373;
  font-size: 12px;
}
.brand-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.translation-stack, .translation-items, .remix-stack, .remix-modes, .compare-grid {
  display: grid;
  gap: 10px;
}
.translation-item {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background: #fff;
}
.translation-source {
  color: #525252;
  font-size: 13px;
}
.translation-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.translation-layer-tools {
  border: 1px dashed #d8cffd;
  border-radius: 14px;
  padding: 12px;
  background: #fbf9ff;
  display: grid;
  gap: 10px;
}
.translation-layer-tools strong { color: #4f46e5; }
.translation-layer-tools p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.6; }
.translation-layer-note { min-height: 72px; }
.translation-canvas-editor {
  display: grid;
  gap: 10px;
  border: 1px solid #e8edf6;
  border-radius: 18px;
  padding: 12px;
  background: #fff;
}
.translation-canvas-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.translation-canvas-editor-head h4 { margin: 0 0 4px; font-size: 14px; }
.translation-canvas-editor-head p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.55; }
.translation-editor-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 12px;
  align-items: start;
}
.translation-canvas-stage {
  position: relative;
  min-height: 260px;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  overflow: auto;
  background: repeating-linear-gradient(135deg, #fff, #fff 10px, #f8fafc 10px, #f8fafc 20px);
}
.translation-canvas-stage img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}
.translation-overlay-item {
  position: absolute;
  min-width: 150px;
  min-height: 82px;
  border: 1px solid rgba(124, 92, 255, .55);
  border-radius: 12px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 28px rgba(31,38,72,.16);
  backdrop-filter: blur(8px);
  overflow: hidden;
  resize: both;
  cursor: pointer;
}
.translation-overlay-item.translation-active {
  border-color: #7c5cff;
  box-shadow: 0 0 0 3px rgba(124,92,255,.18), 0 16px 34px rgba(31,38,72,.2);
  z-index: 3;
}
.translation-overlay-index {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(17,24,39,.18);
}
.translation-overlay-item textarea {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 0;
  padding: 8px 10px;
  background: rgba(255,255,255,.62);
  box-shadow: none;
  resize: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.translation-property-panel {
  display: grid;
  gap: 10px;
  border: 1px solid #e8edf6;
  border-radius: 16px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(31,38,72,.08);
}
.translation-property-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef2f7;
}
.translation-property-head span,
.translation-property-panel .field-hint { color: #64748b; font-size: 12px; }
.translation-property-head strong { display: block; font-size: 16px; }
.translation-property-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.translation-property-panel label { gap: 6px; }
.translation-property-panel textarea { min-height: 88px; }
.translation-property-panel select,
.translation-property-panel input {
  min-height: 32px;
  padding: 4px 6px;
  font-size: 12px;
  border-radius: 8px;
}
.translation-property-panel input[type="number"] { min-width: 0; }
.translation-property-panel input[type="color"] {
  width: 100%;
  padding: 2px 4px;
}
.translation-property-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.translation-detail-list summary {
  cursor: pointer;
  color: #4f46e5;
  font-weight: 800;
}
.translation-detail-list[open] { display: grid; gap: 10px; }
@media (max-width: 920px) { .translation-editor-workspace { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .translation-options, .translation-property-fields { grid-template-columns: 1fr; } }
.remix-mode-card {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
}
.remix-mode-card:has(input:checked) {
  border-color: #c7d2fe;
  background: #fafbff;
}
.remix-mode-card strong { display: block; font-size: 14px; }
.remix-mode-card span { color: #737373; font-size: 12px; }
.remix-compare-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #525252;
  font-size: 12px;
}
.balance-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.referral-page {
  border-color: #d9f99d;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,255,241,.78));
  box-shadow: 0 24px 60px rgba(15, 23, 42, .06);
}
.referral-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.referral-card {
  border-radius: 18px;
  border-color: #eadfce;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
}
.referral-code-box {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid #eadfce;
  border-radius: 18px;
  background: linear-gradient(135deg, #fffaf0, #ffffff);
}
.referral-code-box strong {
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: .04em;
  color: #111827;
  overflow-wrap: anywhere;
}
.referral-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.referral-mini-stat {
  border: 1px solid #efe7da;
  border-radius: 14px;
  padding: 12px;
  background: #fffdf8;
}
.referral-mini-stat b { display: block; font-size: 20px; color: #111827; }
.referral-mini-stat span { color: #64748b; font-size: 12px; }
.referral-invite-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  padding: 7px 12px;
  white-space: nowrap;
  border-radius: 999px;
  line-height: 1;
}
.referral-bind-panel {
  align-self: start;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px;
}
.referral-bind-form {
  grid-template-columns: minmax(260px, 520px) auto;
  align-items: end;
  gap: 12px;
  max-width: 720px;
}
.referral-bind-form .button {
  width: auto !important;
  min-width: 132px;
  min-height: 38px;
  padding-inline: 22px;
  justify-self: start;
}
.referral-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.referral-list-row {
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1.2fr) 150px;
  align-items: start;
}
.referral-reward-row {
  grid-template-columns: 110px minmax(160px, 1fr) 140px;
  align-items: start;
}
.sidebar-link[data-workspace-nav="referral"] .sidebar-icon {
  background: linear-gradient(135deg, #fff7ed, #eef2ff);
  color: #7c3aed;
  font-weight: 800;
}
.sidebar-icon svg { width: 16px; height: 16px; display: block; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.sidebar-link[data-workspace-nav="referral"] .sidebar-icon-referral { color: #6d28d9 !important; }
@media (max-width: 980px) {
  .referral-layout, .referral-record-grid { grid-template-columns: 1fr; }
  .referral-list-row, .referral-reward-row { grid-template-columns: 1fr; }
  .referral-bind-form { grid-template-columns: 1fr; max-width: none; }
  .referral-bind-form .button { width: 100% !important; }
}
.subcard {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}
.compact-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.transactions-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.template-square-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}
.template-square-card {
  min-height: 320px;
  align-content: start;
  gap: 12px;
}
.template-square-card .icon {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
}
.template-square-card .icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.template-square-prompt {
  margin: 10px 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
  padding: 8px 10px;
}
.template-square-prompt summary {
  cursor: pointer;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 700;
}
.template-square-prompt p {
  margin: 8px 0 0;
  color: #525252;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.template-square-my-section {
  margin-top: 18px;
}
.template-square-my-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.template-square-my-card {
  min-height: 132px;
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.template-square-my-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.template-square-my-card h4 {
  margin: 0;
  font-size: 15px;
}
.template-square-my-card p {
  margin: 0;
  color: #666;
  font-size: 13px;
  line-height: 1.5;
}
.template-square-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .42);
}
.template-square-modal-card {
  width: min(880px, 100%);
  max-height: min(86vh, 860px);
  overflow: auto;
  border: 1px solid #eadfce;
  border-radius: 22px;
  background: #fffdf9;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .22);
  padding: 20px;
}
.template-square-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.template-square-modal-head h3 {
  margin: 0;
  font-size: 20px;
}
.template-square-modal-head p {
  margin: 4px 0 0;
  color: #666;
  font-size: 13px;
}
.template-square-modal-head > .button {
  flex: 0 0 auto;
  min-width: 64px;
  white-space: nowrap;
}
.template-square-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
:is(.feedback-fab, .customer-service-fab) {
  position: fixed;
  right: 24px;
  z-index: 900;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 72px;
  padding: 9px 10px 8px;
  border: 1px solid rgba(31, 41, 55, .1);
  border-radius: 20px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 32px rgba(26, 31, 44, .16);
  color: #111827;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.01em;
  backdrop-filter: blur(12px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.feedback-fab { bottom: 24px; }
.customer-service-fab { bottom: 118px; }
:is(.feedback-fab, .customer-service-fab):hover { transform: translateY(-3px); border-color: rgba(97, 70, 234, .22); box-shadow: 0 18px 40px rgba(26, 31, 44, .2); }
:is(.feedback-fab, .customer-service-fab):focus-visible { outline: 3px solid rgba(124, 92, 255, .35); outline-offset: 3px; }
.feedback-fab img { width: 42px; height: 42px; display: block; }
.customer-service-fab-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(145deg, #7c5cff, #5140d8);
  box-shadow: 0 8px 18px rgba(91, 70, 218, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
  color: #fff;
}
.customer-service-fab-icon svg, .customer-service-heading-icon svg, .customer-service-empty-icon svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body:not(.app-route) :is(.feedback-fab, .customer-service-fab, .customer-service-panel) { display: none; }
.customer-service-panel {
  position: fixed;
  right: 120px;
  bottom: 24px;
  z-index: 910;
  box-sizing: border-box;
  width: min(390px, calc(100vw - 156px));
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(93, 73, 191, .16);
  border-radius: 24px;
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 28px 80px rgba(28, 25, 55, .2), 0 6px 20px rgba(28, 25, 55, .08);
  color: #1d1b2b;
  backdrop-filter: blur(16px);
}
.customer-service-panel::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #7c5cff, #ab8cff 52%, #5e43e5);
  content: "";
}
.customer-service-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.customer-service-heading { display: flex; min-width: 0; gap: 12px; align-items: flex-start; }
.customer-service-heading-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: linear-gradient(145deg, #7c5cff, #5140d8);
  box-shadow: 0 10px 22px rgba(91, 70, 218, .22);
  color: #fff;
}
.customer-service-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0edff;
  color: #6650d7;
  font-size: 11px;
  font-weight: 800;
}
.customer-service-panel-head h3 { margin: 6px 0 0; font-size: 20px; line-height: 1.3; letter-spacing: -.03em; }
.customer-service-panel-head p { margin: 5px 0 0; color: #777487; font-size: 12px; line-height: 1.6; }
.customer-service-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid #e8e6ef;
  border-radius: 11px;
  background: #f8f7fa;
  color: #514f5c;
  cursor: pointer;
  font: inherit;
  font-size: 21px;
  line-height: 1;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.customer-service-close:hover { transform: rotate(4deg); background: #efedf5; color: #292633; }
.customer-service-close:focus-visible {
  outline: 3px solid rgba(124, 92, 255, .24) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}
.customer-service-contact {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 18px;
}
.customer-service-contact:has(.customer-service-qr.hidden) {
  grid-template-columns: 1fr;
}
.customer-service-qr {
  box-sizing: border-box;
  width: 132px;
  margin: 0;
  padding: 10px;
  border: 1px solid #e5e2f1;
  border-radius: 16px;
  background: #faf9ff;
  text-align: center;
}
.customer-service-qr img { display: block; width: 110px; height: 110px; border: 6px solid #fff; border-radius: 12px; object-fit: cover; background: #fff; box-shadow: 0 5px 14px rgba(31, 28, 51, .08); }
.customer-service-qr figcaption { display: grid; gap: 1px; margin-top: 8px; line-height: 1.45; }
.customer-service-qr figcaption strong { color: #302b48; font-size: 11px; }
.customer-service-qr figcaption span { color: #8a8797; font-size: 10px; }
.customer-service-details { min-width: 0; display: grid; gap: 10px; }
.customer-service-wechat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #ebe8f4;
  border-radius: 14px;
  background: #fbfaff;
}
.customer-service-wechat-label { grid-column: 1 / -1; color: #858193; font-size: 11px; font-weight: 700; }
.customer-service-wechat strong { overflow-wrap: anywhere; color: #252234; font-size: 16px; line-height: 1.35; }
.customer-service-wechat .button.secondary {
  min-height: 32px;
  padding: 5px 10px;
  border-color: #ded8fb !important;
  background: #f1edff !important;
  color: #6049cf !important;
  font-size: 12px;
  white-space: nowrap;
}
.customer-service-wechat .button.secondary:hover { background: #e8e1ff !important; }
.customer-service-empty {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid #e8e4f5;
  border-radius: 15px;
  background: linear-gradient(135deg, #faf9ff, #f6f4fd);
  color: #4e4961;
}
.customer-service-empty-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #ebe6ff;
  color: #6b52dc;
}
.customer-service-empty-icon svg { width: 19px; height: 19px; }
.customer-service-empty > span:last-child { display: grid; gap: 3px; min-width: 0; }
.customer-service-empty strong { color: #302c42; font-size: 13px; line-height: 1.4; }
.customer-service-empty small { color: #777286; font-size: 11px; line-height: 1.6; }
.customer-service-empty.hidden { display: none; }
.customer-service-hours, .customer-service-safety {
  position: relative;
  margin: 0;
  padding: 9px 10px 9px 32px;
  border: 1px solid #eceaf1;
  border-radius: 12px;
  background: #f9f8fb;
  color: #716e7d;
  font-size: 11px;
  line-height: 1.5;
}
.customer-service-hours::before, .customer-service-safety::before {
  position: absolute;
  left: 11px;
  top: 10px;
  color: #7661dc;
  font-size: 13px;
  line-height: 1;
}
.customer-service-hours::before { content: "◷"; }
.customer-service-safety::before { content: "◇"; }
.customer-service-hours { color: #4f4a61; font-weight: 700; }
.button.customer-service-feedback {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border: 0 !important;
  border-radius: 13px;
  background: linear-gradient(135deg, #7358ec, #5740d4) !important;
  box-shadow: 0 10px 24px rgba(91, 70, 218, .22) !important;
  color: #fff !important;
}
.button.customer-service-feedback:hover { background: linear-gradient(135deg, #6549e1, #4d38c5) !important; transform: translateY(-1px); }
.customer-service-panel > .status { min-height: 0; margin-top: 8px; padding: 0; background: transparent; }
.feedback-modal-card { width: min(920px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: auto; }
.feedback-form { display: grid; gap: 12px; }
.feedback-form textarea { min-height: 110px; resize: vertical; }
.feedback-chat-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; min-height: 460px; }
.feedback-thread-panel, .feedback-conversation-panel { min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.feedback-thread-panel { display: flex; flex-direction: column; overflow: hidden; }
.feedback-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); }
.feedback-thread-list { display: grid; align-content: start; gap: 4px; padding: 8px; overflow: auto; }
.feedback-thread-item { width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }
.feedback-thread-item:hover, .feedback-thread-item.is-active { border-color: #d8d0c3; background: #f7f4ee; }
.feedback-thread-item strong, .feedback-thread-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-thread-item small { margin-top: 4px; color: var(--muted); }
.feedback-thread-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.feedback-unread { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #171717; color: #fff; text-align: center; }
.feedback-conversation-panel { display: grid; grid-template-rows: minmax(220px, 1fr) auto auto; overflow: hidden; }
.feedback-messages { display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow: auto; background: #f7f5f1; }
.feedback-message { max-width: 78%; padding: 10px 12px; border: 1px solid #ded8ce; border-radius: 8px; background: #fff; line-height: 1.6; overflow-wrap: anywhere; }
.feedback-message-body { white-space: pre-wrap; }
.feedback-message.is-user { align-self: flex-end; border-color: #1f1f1f; background: #1f1f1f; color: #fff; }
.feedback-message small { display: block; margin-top: 5px; color: #7b8190; font-size: 11px; }
.feedback-message.is-user small { color: #cbcbd0; }
.feedback-reply-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.feedback-reply-form textarea { min-height: 58px; max-height: 140px; resize: vertical; }
.feedback-new-thread { padding: 12px; border-top: 1px solid var(--border); }
.feedback-new-thread summary { cursor: pointer; font-weight: 800; }
.feedback-new-thread .feedback-form { margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feedback-new-thread .feedback-form label:nth-of-type(2) { grid-column: 1 / -1; }
.feedback-new-thread .feedback-form button { justify-self: end; align-self: end; }
@media (max-width: 720px) {
  .feedback-chat-layout { grid-template-columns: 1fr; min-height: 0; }
  .feedback-thread-list { max-height: 170px; }
  .feedback-conversation-panel { min-height: 430px; }
  .feedback-new-thread .feedback-form { grid-template-columns: 1fr; }
  .feedback-new-thread .feedback-form label:nth-of-type(2) { grid-column: auto; }
}
@media (max-width: 720px) {
  :is(.feedback-fab, .customer-service-fab) { right: 14px; min-width: 64px; padding: 7px 8px 6px; }
  .feedback-fab { bottom: 14px; }
  .customer-service-fab { bottom: 104px; }
  .feedback-fab img { width: 36px; height: 36px; }
  .customer-service-fab-icon { width: 36px; height: 36px; border-radius: 12px; }
  .customer-service-fab-icon svg { width: 20px; height: 20px; }
  .customer-service-panel {
    left: 14px;
    right: 14px;
    bottom: 176px;
    width: auto;
    max-height: calc(100vh - 196px);
    overflow: auto;
    padding: 18px;
    border-radius: 20px;
  }
  .customer-service-heading-icon { width: 40px; height: 40px; border-radius: 13px; }
  .customer-service-panel-head h3 { font-size: 18px; }
  .customer-service-contact { grid-template-columns: 1fr; }
  .customer-service-qr { justify-self: center; }
}
@media (max-width: 900px) {
  .template-square-my-grid { grid-template-columns: 1fr; }
  .template-square-modal { padding: 12px; align-items: start; }
}
.transaction-row {
  display: grid;
  grid-template-columns: 90px 90px 1fr 150px;
  gap: 10px;
  align-items: center;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.transaction-row strong { font-size: 13px; }
.transaction-row span { color: #737373; }
.amount-positive { color: #047857; }
.amount-negative { color: #b91c1c; }
.empty-state {
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  color: #737373;
  font-size: 13px;
  background: #fafafa;
}
.generation-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  gap: 12px;
  align-items: start;
}
.filter-stack, .template-list, .generation-form-fields, .result-stack, .generation-blueprint, .upload-guide {
  display: grid;
  gap: 10px;
}
.template-list { margin-top: 14px; }
.generation-blueprint, .upload-guide {
  gap: 10px;
  margin-bottom: 12px;
}
.upload-guide {
  border: 1px dashed #c7d2fe;
  border-radius: 10px;
  padding: 14px;
  background: #fafbff;
}
.upload-guide-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.template-card {
  width: 100%;
  text-align: left;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  background: #fff;
  padding: 14px;
  cursor: pointer;
  font: inherit;
  display: grid;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.template-card:hover, .template-card[aria-pressed="true"] {
  border-color: #c7d2fe;
  background: #fafbff;
  box-shadow: 0 8px 24px rgba(99, 102, 241, .08);
}
.template-card strong { font-size: 14px; }
.template-card span, .field-hint { color: #737373; font-size: 12px; }
.template-meta, .field-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.pill {
  width: fit-content;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 3px 8px;
  color: #525252;
  background: #fafafa;
  font-size: 12px;
}
.pill.required {
  border-color: #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
}
.result-preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  background: linear-gradient(135deg, #fafafa, #fff);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.result-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.remix-layout > .subcard {
  min-width: 0;
  overflow: hidden;
}
#remixSourcePreview,
#remixCompareSourcePreview,
#remixResultPreview {
  aspect-ratio: auto;
  min-height: 220px;
  align-content: center;
  padding: 0;
}
#remixSourcePreview img,
#remixCompareSourcePreview img,
#remixResultPreview img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  display: block;
}
.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.batch-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.batch-preview-list, .batch-job-list, .batch-item-list {
  display: grid;
  gap: 10px;
}
.batch-preview-list, .batch-job-list { margin-top: 14px; }
.batch-job-card, .batch-item-row {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.batch-job-card {
  display: grid;
  gap: 10px;
}
.batch-item-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 132px;
  gap: 10px;
  align-items: center;
}
.batch-result-thumb {
  width: 90px;
  aspect-ratio: 1 / 1;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.batch-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}
.batch-result-actions {
  display: grid;
  gap: 8px;
}
/* BATCH-IMPORT-FRIENDLY-ERRORS-20260702: show row-level import fixes without leaking internal codes. */
.batch-preview-summary { display: grid; gap: 8px; }
.batch-preview-summary strong { color: #111; }
.batch-preview-summary .history-meta { margin-top: 2px; }
.batch-error-list { display: grid; gap: 8px; margin-top: 10px; }
.batch-error-item { border: 1px solid #fecaca; border-radius: 10px; padding: 10px; background: #fff7f7; color: #7f1d1d; }
.batch-error-item strong { display: block; margin-bottom: 4px; color: #7f1d1d; }
.batch-error-item span { display: block; color: #991b1b; font-size: 13px; }
.batch-error-advice { display: block; margin-top: 4px; color: #7c2d12; font-size: 13px; }
.batch-row-status-can { border-color: #bbf7d0; background: #f0fdf4; color: #047857; }
.batch-row-status-blocked { border-color: #fecaca; background: #fff7f7; color: #b91c1c; }
.batch-row-status-balance { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }
.history-filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}
.history-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.history-filters.has-creator-filter {
  grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
}
.history-creator {
  color: #475569;
}
.history-creator strong {
  color: inherit;
}
.history-date-heading {
  position: sticky;
  top: 72px;
  z-index: 4;
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 2px;
  color: #475569;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
}
.history-date-heading strong { font-size: 13px; letter-spacing: .02em; }
.history-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 160px;
  gap: 12px;
  align-items: center;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.history-preview {
  width: 96px;
  aspect-ratio: 1 / 1;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.history-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}
.history-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.history-actions {
  display: grid;
  gap: 8px;
}
.prompt-optimize-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.prompt-optimize-actions .field-hint {
  flex: 1 1 260px;
}
.history-prompt {
  margin-top: 8px;
  border: 1px solid #edf0f6;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fbfcff;
}
.history-prompt summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}
.history-prompt-text {
  margin: 6px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #334155;
  font-size: 12px;
}
.history-batch-group {
  border: 1px solid #e6ebf5;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}
.history-batch-group > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
}
.history-batch-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.export-status {
  min-height: 18px;
  font-size: 12px;
}
.payment-status-grid, .billing-order-list {
  display: grid;
  gap: 10px;
}
.payment-status-actions, .billing-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.billing-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.billing-order-row p { margin: 4px 0 0; color: #737373; font-size: 12px; }
.auth-only-note { margin-top: 12px; font-size: 12px; color: #999; }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .feature-grid, .hero-flow, .visual-demo-grid, .pricing-grid, .landing-proof-grid, .stat-row, .entry-grid, .dashboard-pipeline, .balance-layout, .transaction-row, .generation-layout, .translation-layout, .remix-layout, .batch-layout, .image-audit-layout, .batch-item-row, .brand-manager-layout, .brand-thumb-grid, .result-actions, .history-filters, .history-row, .billing-order-row { grid-template-columns: 1fr; }
  .hero, .panel { padding: 24px; }
}
@media (max-width: 640px) {
  body { overflow-x: hidden; }
  body.app-route .shell {
    display: block;
    width: 100%;
    min-height: 100vh;
    padding: 0;
  }
  body.app-route .topbar {
    min-height: 64px;
    padding: 0 12px;
    margin-bottom: 0;
  }
  body.app-route .reference-sidebar { display: none; }
  body.app-route #appView {
    padding: 16px 12px 40px;
    overflow: visible;
  }
  .reference-stepper {
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 14px;
  }
  .reference-step { min-width: 58px; font-size: 11px; }
  .reference-step:not(:last-child)::after { display: none; }
  .reference-step b { width: 32px; height: 32px; font-size: 13px; }
  .shell { width: min(100% - 24px, 1120px); padding: 16px 0 40px; }
  .topbar { align-items: center; margin-bottom: 16px; }
  .brand { min-width: 0; }
  .brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar > .nav-actions { display: none; }
  .mobile-nav { display: block; }
  .layout, .dashboard, .card, .subcard, .panel, .hero, .history-card, .flow-step, .feature, .entry-card, .package-card, .pipeline-step, .stat { min-width: 0; }
  .hero, .panel, .subcard { padding: 18px; }
  .hero-actions, .upload-guide-actions, .dashboard-head, .section-title, .history-card, .trial-path-head { align-items: stretch; flex-direction: column; }
  .hero-actions .button, .trial-actions .button, .section-title .button, .history-card .button, .dashboard-head .button { width: 100%; }
  .button { min-width: 0; white-space: normal; text-align: center; }
  h1 { font-size: clamp(30px, 11vw, 40px); }
  h2 { font-size: 20px; }
  .history-preview { width: 100%; max-width: 140px; }
  .transaction-row, .history-row { overflow-wrap: anywhere; }

  /* TASK-028: mobile landing/auth/dashboard polish */
  .layout { gap: 14px; }
  .hero { display: grid; gap: 16px; }
  .hero .eyebrow { width: fit-content; max-width: 100%; }
  .hero h1 { margin: 0; letter-spacing: -0.045em; }
  .hero-copy { font-size: 14px; }
  .hero-actions { margin-top: 0; }
  .hero-flow, .feature-grid, .pricing-grid, .landing-proof-grid, .dashboard-pipeline, .entry-grid, .stat-row { gap: 10px; }
  .flow-step, .feature, .package-card, .pipeline-step, .entry-card, .stat { padding: 14px; }
  .package-card { min-height: auto; }
  .package-card .button, #cdkPlanGuide .button { width: 100%; }
  .visual-demo { margin-top: 0; }
  .pricing-section { margin-top: 4px; padding-top: 14px; }

  body.auth-route #authPanel { order: -1; }
  body.auth-route #authPanel .button { width: 100%; }
  body.auth-route .hero { gap: 12px; }
  body.auth-route .hero .feature-grid,
  body.auth-route .hero .visual-demo,
  body.auth-route .hero .pricing-section,
  body.auth-route .hero .secondary-home-info { display: none; }

  #appView { border-radius: 0; }
  #appView.panel { padding: 16px; }
  .dashboard-head { gap: 12px; }
  .stat-row .stat:first-child {
    border-color: #c7d2fe;
    background: linear-gradient(180deg, #fff, #fafbff);
  }
  .stat strong { font-size: 26px; overflow-wrap: anywhere; }
  .notice.warning { display: grid; gap: 10px; }
  .notice-action { width: 100%; border-color: #f59e0b; color: #92400e; }
  .entry-card { min-height: auto; gap: 12px; }
  .entry-card .icon { width: 32px; height: 32px; }
  .dashboard-pipeline { counter-reset: mobile-step; }
  .pipeline-step { display: grid; gap: 4px; }

  /* TASK-029: mobile generation/translation/remix/cdk/history polish */
  #generation, #image-edit, #translation, #remix, #batch, #image-audit, #brands, #profile, #image-slicer, #history, #cdk, #paymentStatus { scroll-margin-top: 14px; }
  #generation .subcard, #image-edit .subcard, #translation .subcard, #remix .subcard, #batch .subcard, #image-audit .subcard, #brands .subcard, #profile .subcard, #image-slicer .subcard, #history.subcard, #cdk.subcard { padding: 14px; }
  #appView input, #appView select, #appView textarea { min-height: 44px; font-size: 16px; }
  #appView input[type="file"] { min-height: 48px; padding: 10px; }
  .generation-layout, .translation-layout, .remix-layout, .batch-layout, .image-audit-layout, .brand-manager-layout, .balance-layout { gap: 14px; }
  .filter-stack, .template-list, .generation-form-fields, .translation-stack, .translation-items, .remix-stack, .remix-modes, .audit-stack, .audit-issue-list, .audit-per-image-list, .batch-preview-list, .batch-job-list, .batch-item-list, .brand-list, .brand-preview-stack, .result-stack, .transactions-list, .history-list { gap: 12px; }
  .template-card, .translation-item, .remix-mode-card, .batch-job-card, .batch-item-row, .audit-issue, .audit-per-image-row, .brand-card, .transaction-row, .history-row, .billing-order-row { min-width: 0; padding: 14px; overflow-wrap: anywhere; }
  .template-card, .remix-mode-card { min-height: 48px; }
  .remix-mode-card { grid-template-columns: 24px minmax(0, 1fr); align-items: center; }
  .empty-state { padding: 12px; font-size: 12px; line-height: 1.5; }
  .status, .field-hint, .auth-only-note { line-height: 1.5; }
  .result-preview { min-height: 180px; border-radius: 10px; }
  .compare-grid { grid-template-columns: 1fr; }
  .compact-form .button, .upload-guide-actions .button, .batch-actions .button, .batch-result-actions .button, .brand-form-actions .button, .brand-upload-actions .button, .result-actions .button, .history-filters .button, .history-actions .button, .payment-status-actions .button, .billing-order-actions .button, #gptSubmit, #translationGenerateSubmit, #remixGenerateSubmit, #imageAuditSubmit, #refreshBatchJobs, #refreshHistory, #refreshTransactions, #refreshBillingOrders { width: 100%; }
  .history-filters { gap: 12px; }
  .history-row, .batch-item-row { align-items: stretch; }
  .history-preview, .batch-result-thumb { justify-self: stretch; width: 100%; max-width: none; min-height: 180px; }
  .export-status { min-height: 20px; }
  .transaction-row { gap: 6px; }
  .package-card .button { min-height: 44px; }
}

/* UI-REDESIGN A minimal SaaS override */
:root {
  --ref-primary: #111111;
  --ref-primary-2: #111111;
  --ref-border: #e5e7eb;
  --ref-muted: #6b7280;
  --ref-card-radius: 12px;
  --ref-shadow: none;
  --saas-blue: #2563eb;
}
body,
body.app-route {
  background: #f7f8fa;
}
.topbar,
body.app-route .topbar {
  background: rgba(255,255,255,.96);
  box-shadow: none;
  backdrop-filter: none;
}
.brand-mark,
.button,
.sidebar-link.primary,
.reference-step.active b,
.flow-step b {
  background: #111;
  box-shadow: none;
}
.button {
  border-color: #111;
  color: #fff;
  border-radius: 10px;
}
.button.secondary {
  border-color: #e5e7eb;
  background: #fff;
  color: #171717;
}
.card, .subcard, .feature, .entry-card, .stat, .history-card, .package-card, .pipeline-step, .flow-step,
.trial-path-card, .more-tools-details, body.app-route .dashboard-head {
  border-color: #e5e7eb;
  border-radius: 12px;
  box-shadow: none;
  background: #fff;
}
body.app-route .reference-sidebar {
  background: #fff;
  border-right: 1px solid #e5e7eb;
}
.sidebar-upgrade {
  color: #111;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}
.sidebar-upgrade .button.secondary { background: #111; color: #fff; border-color: #111; }
.sidebar-link.primary { color: #fff; }
.sidebar-link:hover { background: #f5f5f5; color: #111; }
.sidebar-usage, .usage-bar { background: #fafafa; }
.usage-bar span { background: #111; }
body.app-route .stat strong, .package-price { color: #111; }
.trial-empty-state,
.upload-guide,
.notice,
.empty-state {
  background: #fafafa;
  border-color: #e5e7eb;
  color: #525252;
}
.notice.warning { background: #fffaf0; border-color: #fde68a; color: #92400e; }
.eyebrow, .entry-card .badge, .pill {
  background: #fafafa;
  border-color: #e5e7eb;
  color: #525252;
}
input:focus, select:focus, textarea:focus {
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(17,17,17,.08);
}
body.app-route .package-card.featured,
body.app-route .entry-card:hover,
body.app-route .brand-card:hover,
body.app-route .brand-card[aria-pressed="true"],
.template-card:hover,
.template-card[aria-pressed="true"],
.remix-mode-card:has(input:checked) {
  border-color: #111;
  background: #fff;
  box-shadow: none;
}
.reference-stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reference-step.active { color: #111; }
.dashboard-pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trial-path-card {
  background: #fff;
}
body.app-route .generation-layout {
  grid-template-columns: 260px minmax(420px, 1fr) 340px;
}
.batch-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.batch-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #525252;
  font-size: 13px;
  font-weight: 650;
}
.batch-step b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
  color: #111;
}
.batch-step.active { border-color: #111; color: #111; }
.batch-step.active b { background: #111; color: #fff; border-color: #111; }
@media (max-width: 860px) {
  .batch-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.app-route .generation-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .reference-stepper { grid-template-columns: repeat(4, minmax(72px, 1fr)); }
  .batch-stepper { grid-template-columns: 1fr; }
}

/* UI-REDESIGN A second pass: make dashboard visually different, not just copy changes */
.saas-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr);
  gap: 16px;
  align-items: stretch;
}
.saas-hero-card,
.saas-side-panel,
.saas-next-card {
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}
.saas-hero-card {
  min-height: 360px;
  padding: 32px;
  display: grid;
  align-content: start;
  gap: 20px;
}
.saas-hero-card h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(44px, 5vw, 76px);
  line-height: .96;
  letter-spacing: -0.07em;
}
.saas-hero-card #welcomeText {
  max-width: 760px;
  font-size: 16px;
  color: #525252;
}
.saas-primary-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.saas-primary-actions .button:first-child {
  min-width: 170px;
}
.saas-home-grid .dashboard-pipeline {
  margin-top: 6px;
}
.saas-home-grid .pipeline-step {
  min-height: 88px;
  border-radius: 14px;
  background: #fafafa;
}
.saas-focus-note {
  padding: 14px 16px;
  border: 1px dashed #d4d4d4;
  border-radius: 14px;
  color: #525252;
  background: #fff;
  font-size: 13px;
}
.saas-side-panel {
  padding: 18px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.saas-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.saas-side-panel .stat-row {
  grid-template-columns: 1fr;
}
.saas-side-panel .stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}
.saas-side-panel .stat strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 24px;
  text-align: right;
}
.saas-side-panel .stat span {
  grid-column: 1;
  font-weight: 650;
  color: #171717;
}
.saas-next-card {
  padding: 16px;
  display: grid;
  gap: 10px;
}
.saas-next-card h2 {
  font-size: 18px;
}
.more-tools-details {
  margin-top: 2px;
}
.more-tools-details > summary {
  min-height: 58px;
  background: #fff;
}
body.app-route #profile,
body.app-route #image-slicer,
body.app-route #generation,
body.app-route #image-edit,
body.app-route #batch,
body.app-route #image-audit,
body.app-route #history,
body.app-route #cdk,
body.app-route #brands,
body.app-route #translation,
body.app-route #remix {
  border-radius: 18px;
}
@media (max-width: 1120px) {
  .saas-home-grid { grid-template-columns: 1fr; }
  .saas-side-panel .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .saas-side-panel .stat { display: block; }
  .saas-side-panel .stat strong { text-align: left; }
}
@media (max-width: 640px) {
  .saas-hero-card, .saas-side-panel { padding: 18px; border-radius: 14px; }
  .saas-hero-card h1 { font-size: clamp(34px, 12vw, 46px); }
  .saas-primary-actions .button { width: 100%; }
  .saas-side-panel .stat-row { grid-template-columns: 1fr; }
}

/* UI-REDESIGN A third pass: remove broken top process bar and make home screen product-like */
body.app-route .dashboard-top-stepper {
  display: none !important;
}
body.app-route #appView {
  padding-top: 24px;
}
body.app-route .shell {
  grid-template-columns: 252px minmax(0, 1fr);
}
body.app-route .reference-sidebar {
  padding: 28px 14px 18px;
}
.saas-home-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}
.saas-hero-card {
  min-height: 520px;
  padding: 34px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.saas-hero-card::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 28px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.06), transparent 65%);
  pointer-events: none;
}
.saas-hero-card h1 {
  font-size: clamp(54px, 5.8vw, 92px);
  max-width: 840px;
}
.saas-primary-actions {
  margin-top: 4px;
}
.saas-preview-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 2px;
}
.saas-preview-tile {
  min-height: 132px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px;
  display: grid;
  align-content: end;
  gap: 4px;
  background: #f6f6f6;
  position: relative;
  overflow: hidden;
}
.saas-preview-tile::before {
  content: "";
  position: absolute;
  inset: 18px 18px auto auto;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.9);
}
.saas-preview-tile strong { font-size: 14px; color: #111; z-index: 1; }
.saas-preview-tile span { font-size: 12px; color: #525252; z-index: 1; }
.tile-a { background: linear-gradient(135deg, #f5f5f5, #ffffff); }
.tile-b { background: linear-gradient(135deg, #f1f5f9, #ffffff); }
.tile-c { background: linear-gradient(135deg, #fff7ed, #ffffff); }
.tile-d { background: linear-gradient(135deg, #f0fdf4, #ffffff); }
.saas-side-panel {
  border-radius: 20px;
  padding: 20px;
}
.saas-side-panel .notice.warning {
  display: grid;
  gap: 12px;
  align-items: start;
}
.saas-side-panel .stat {
  border-radius: 14px;
  padding: 16px;
}
.more-tools-details {
  border-radius: 16px;
}
.more-tools-details > summary {
  padding: 16px 20px;
}
@media (max-width: 1180px) {
  .saas-home-grid { grid-template-columns: 1fr; }
  .saas-side-panel .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .saas-preview-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .saas-hero-card { min-height: auto; padding: 20px; }
  .saas-hero-card h1 { font-size: clamp(38px, 13vw, 54px); }
  .saas-preview-strip { grid-template-columns: 1fr; }
}

/* UI-REDESIGN A exact-reference pass: match selected mockup structure */
body.app-route .topbar { display: none !important; }
body.app-route .shell {
  grid-template-columns: 148px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  background: #f5f6f8;
}
body.app-route .reference-sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  top: 0 !important;
  height: 100vh !important;
  width: 148px;
  padding: 24px 8px 12px !important;
  background: #fff !important;
}
body.app-route #appView {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding: 26px 24px 40px !important;
  background: #f5f6f8 !important;
}
.reference-sidebar .sidebar-link {
  min-height: 42px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  gap: 8px;
}
.reference-sidebar .sidebar-link.primary { background: #111 !important; }
.sidebar-icon { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; }
.sidebar-upgrade { padding: 12px; border-radius: 10px; font-size: 12px; }
.sidebar-usage { padding: 10px; border-radius: 10px; font-size: 12px; }
.dashboard-top-stepper, .saas-home-grid, .saas-side-panel { display: none !important; }
.scheme-a-home {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.scheme-a-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.scheme-a-home-header h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.scheme-a-home-header p { margin-top: 6px; color: #737373; font-size: 13px; }
.scheme-a-balance-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
  color: #525252;
}
.scheme-a-balance-chip strong { color: #111; font-size: 14px; }
.workspace-announcement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: linear-gradient(135deg, #eff6ff, #fffaf3);
  box-shadow: 0 14px 34px rgba(37, 99, 235, .06);
}
.workspace-announcement.hidden { display: none !important; }
.workspace-announcement-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.workspace-announcement-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
}
.workspace-announcement h2 { margin: 0; font-size: 16px; letter-spacing: -0.02em; }
.workspace-announcement-log { display: grid; gap: 8px; }
.workspace-announcement-log-row {
  display: grid;
  grid-template-columns: minmax(112px, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: #334155;
  font-size: 13px;
  line-height: 1.55;
}
.workspace-announcement-log-date {
  color: #64748b;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.workspace-announcement-log-text { min-width: 0; word-break: break-word; }
.workspace-announcement-empty { margin: 0; color: #64748b; font-size: 13px; }
.workspace-announcement .button { min-height: 36px; padding: 8px 12px; }
@media (min-width: 981px) {
  body.app-route .scheme-a-home:has(.workspace-announcement:not(.hidden)) {
    max-width: 1180px !important;
    grid-template-columns: minmax(0, 665px) minmax(320px, 410px);
    column-gap: 72px;
    align-items: start;
  }
  body.app-route .scheme-a-home:has(.workspace-announcement:not(.hidden)) .scheme-a-home-header {
    grid-column: 1 / -1;
  }
  body.app-route .scheme-a-home:has(.workspace-announcement:not(.hidden)) .workspace-announcement {
    grid-column: 2;
    grid-row: 2 / span 4;
    position: sticky;
    top: 24px;
    min-height: 0;
    align-content: start;
  }
  body.app-route .scheme-a-home:has(.workspace-announcement:not(.hidden)) .scheme-a-hero-banner,
  body.app-route .scheme-a-home:has(.workspace-announcement:not(.hidden)) .newcomer-demo,
  body.app-route .scheme-a-home:has(.workspace-announcement:not(.hidden)) .scheme-a-quick,
  body.app-route .scheme-a-home:has(.workspace-announcement:not(.hidden)) .scheme-a-tip-card {
    grid-column: 1;
  }
  /* NEWCOMER-DEMO-ANNOUNCEMENT-FIX-20260727: respond to the real 665px grid column, not the viewport. */
  body.app-route .scheme-a-home:has(.workspace-announcement:not(.hidden)) .newcomer-demo {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  body.app-route .scheme-a-home:has(.workspace-announcement:not(.hidden)) .newcomer-demo-visual {
    width: 100%;
    max-width: none;
  }
}
.scheme-a-hero-banner {
  min-height: 142px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 52%, rgba(250,250,250,.42) 100%),
    radial-gradient(circle at 84% 42%, rgba(180, 150, 110, .18), transparent 28%),
    #fff;
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  overflow: hidden;
}
.scheme-a-hero-banner h2 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: -0.045em;
}
.scheme-a-hero-banner p { max-width: 480px; font-size: 13px; color: #737373; margin-bottom: 14px; }
.scheme-a-product-ghost {
  width: 136px;
  height: 100px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(0,0,0,.10), transparent 45%),
    linear-gradient(180deg, #fff, #f2eee7);
  border: 1px solid rgba(0,0,0,.04);
  position: relative;
  flex: 0 0 auto;
}
.scheme-a-product-ghost::before {
  content: "";
  position: absolute;
  left: 44px;
  bottom: 16px;
  width: 44px;
  height: 72px;
  border-radius: 15px 15px 10px 10px;
  background: linear-gradient(180deg, #fff, #e8e1d8);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.scheme-a-product-ghost::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 30px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8f4ef, #dfd6cc);
}
.scheme-a-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.scheme-a-section-head h2 { margin: 0; font-size: 16px; letter-spacing: -0.02em; }
.scheme-a-section-head span, .scheme-a-section-head a { color: #737373; font-size: 12px; text-decoration: none; }
.scheme-a-quick,
.scheme-a-recent,
.scheme-a-tip-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  padding: 18px;
}
.scheme-a-quick .dashboard-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scheme-a-quick .pipeline-step {
  min-height: 78px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  border-radius: 12px;
  background: #fff;
}
.scheme-a-quick .pipeline-step strong { font-size: 13px; }
.scheme-a-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.scheme-a-work-card {
  min-height: 104px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
  display: grid;
  align-content: end;
  gap: 4px;
  overflow: hidden;
  background: #f6f6f6;
  position: relative;
}
.scheme-a-work-card::before {
  content: "";
  position: absolute;
  inset: 12px 12px 44px;
  border-radius: 10px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.9);
}
.scheme-a-work-card span, .scheme-a-work-card small { position: relative; z-index: 1; }
.scheme-a-work-card span { font-size: 12px; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scheme-a-work-card small { color: #737373; font-size: 11px; }
.work-a { background: linear-gradient(135deg, #f8fafc, #e5e7eb); }
.work-b { background: linear-gradient(135deg, #eef2ff, #f8fafc); }
.work-c { background: linear-gradient(135deg, #fef3c7, #f8fafc); }
.work-d { background: linear-gradient(135deg, #f3f4f6, #faf5ff); }
.work-e { background: linear-gradient(135deg, #fee2e2, #fff7ed); }
.scheme-a-tip-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.scheme-a-tip-card h3 { margin: 0 0 6px; font-size: 15px; }
.scheme-a-tip-card p { font-size: 13px; max-width: 620px; }
.scheme-a-tip-card a { color: #2563eb; text-decoration: none; font-size: 13px; }
.scheme-a-hidden-state { display: none !important; }
.more-tools-details { max-width: 1040px; margin: 0 auto; }
@media (max-width: 980px) {
  body.app-route .shell { grid-template-columns: 1fr !important; }
  body.app-route .reference-sidebar { display: none !important; }
  .scheme-a-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scheme-a-quick .dashboard-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
  @media (max-width: 640px) {
  .scheme-a-home { gap: 14px; }
  .scheme-a-home-header, .scheme-a-hero-banner, .scheme-a-tip-card { flex-direction: column; align-items: stretch; }
  .scheme-a-hero-banner { padding: 20px; }
  .scheme-a-work-grid, .scheme-a-quick .dashboard-pipeline { grid-template-columns: 1fr; }
  .scheme-a-product-ghost { display: none; }
}


/* UI-REDESIGN V2: implement generated concepts one-to-one direction */
:root { --ui-violet: #5b5cff; --ui-violet-2: #8b5cf6; --ui-ink: #111827; --ui-line: #e5e9f4; --ui-bg: #f7f8fd; --ui-shadow: 0 22px 70px rgba(37, 47, 97, .10); }
body { color: var(--ui-ink); background: radial-gradient(circle at 78% 18%, rgba(91, 92, 255, .10), transparent 32rem), linear-gradient(180deg, #fbfcff 0%, #f5f7fc 100%); }
body:not(.app-route) .shell { width: min(1504px, calc(100vw - 88px)); padding: 0 0 42px; }
body:not(.app-route) .topbar { min-height: 68px; margin: 0 -44px 34px; padding: 0 84px; border-width: 0 0 1px; border-radius: 0; background: rgba(255, 255, 255, .92); box-shadow: none; }
.brand { gap: 14px; font-size: 21px; font-weight: 780; letter-spacing: -.03em; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; font-size: 21px; font-weight: 800; background: linear-gradient(135deg, #695cff 0%, #496cff 54%, #8a5cf6 100%); box-shadow: 0 12px 28px rgba(91, 92, 255, .24); }
.landing-nav { display: flex; align-items: center; justify-content: center; gap: 42px; font-size: 15px; color: #2f3442; flex: 1; }
.landing-nav a { text-decoration: none; padding: 23px 0 19px; border-bottom: 3px solid transparent; }
.landing-nav a[aria-current="page"], .landing-nav a:hover { color: var(--ui-violet); border-bottom-color: var(--ui-violet); }
body.auth-route .landing-nav { display: none; }
.nav-actions .button { min-width: 92px; border-radius: 10px; min-height: 40px; padding: 8px 18px; }
.nav-actions .button:not(.secondary):not(.danger), .button:not(.secondary):not(.danger) { border: 0; background: linear-gradient(135deg, #3f5bff, #8b5cf6); color: #fff; box-shadow: 0 14px 30px rgba(91, 92, 255, .28); }
.nav-actions .button.secondary, .button.secondary { border-color: #dfe5f1; color: #111827; background: #fff; box-shadow: none; }
body:not(.auth-route):not(.app-route) #landingView { display: grid; grid-template-columns: minmax(520px, .9fr) minmax(650px, 1.1fr); gap: 50px; align-items: center; }
body:not(.auth-route):not(.app-route) .hero { border: 0; box-shadow: none; background: transparent; padding: 62px 0 42px; }
body:not(.auth-route):not(.app-route) .hero .eyebrow { display: none; }
body:not(.auth-route):not(.app-route) .hero h1 { max-width: 680px; margin: 0 0 24px; font-size: clamp(52px, 5.1vw, 78px); line-height: 1.14; letter-spacing: -.065em; }
body:not(.auth-route):not(.app-route) .hero-copy { max-width: 610px; color: #5d667a; font-size: 17px; line-height: 1.85; }
body:not(.auth-route):not(.app-route) .hero-actions { gap: 24px; margin-top: 36px; }
body:not(.auth-route):not(.app-route) .hero-actions .button { min-width: 220px; min-height: 56px; border-radius: 12px; font-size: 17px; font-weight: 720; }
body:not(.auth-route):not(.app-route) .hero-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; margin-top: 48px; }
body:not(.auth-route):not(.app-route) .flow-step { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; border: 0; box-shadow: none; background: transparent; padding: 0; }
body:not(.auth-route):not(.app-route) .flow-step b { grid-row: span 2; width: 44px; height: 44px; color: var(--ui-violet); background: #eef0ff; }
body:not(.auth-route):not(.app-route) .flow-step strong { font-size: 15px; }
body:not(.auth-route):not(.app-route) .flow-step span { font-size: 12px; color: #6b7280; }
body:not(.auth-route):not(.app-route) .landing-proof-grid, body:not(.auth-route):not(.app-route) .visual-demo, body:not(.auth-route):not(.app-route) .secondary-home-info { display: none; }
.landing-mockup-panel { padding: 28px 30px 26px; border: 1px solid #e8ecf6; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: var(--ui-shadow); }
body.auth-route .landing-mockup-panel { display: none; }
.mockup-stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.mockup-stepper span { display: flex; align-items: center; gap: 10px; color: #171923; font-weight: 720; position: relative; }
.mockup-stepper span:not(:last-child)::after { content:""; height: 1px; flex: 1; border-top: 1px dashed #cfd5e6; margin-left: 18px; }
.mockup-stepper b { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: #eef1ff; color: #1f2a54; }
.mockup-stepper .active b { color: #fff; background: linear-gradient(135deg, #3f5bff, #8b5cf6); }
.mockup-board { display: grid; grid-template-columns: 1.05fr 1.08fr 1.28fr; gap: 18px; }
.mockup-upload-card, .mockup-template-card, .mockup-result-card { min-height: 385px; border: 1px solid #e6ebf6; border-radius: 16px; background: #fff; padding: 18px; }
.mockup-upload-card { display: grid; place-items: center; text-align: center; border-style: dashed; }
.mockup-upload-card strong { justify-self: start; align-self: start; font-size: 16px; }
.mock-product-earbuds, .recent-work-thumb { background: radial-gradient(circle at 50% 74%, rgba(31,41,55,.12), transparent 35%), linear-gradient(180deg, #f7f8fb, #eef1f7); }
.mock-product-earbuds { width: 190px; height: 190px; border-radius: 26px; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); }
.mock-product-earbuds::before { content:""; position:absolute; left: 48px; bottom: 42px; width: 95px; height: 72px; border-radius: 22px 22px 28px 28px; background: linear-gradient(180deg, #fff, #e5e7ee); box-shadow: 0 18px 36px rgba(33, 39, 73, .15); }
.mock-product-earbuds i { position:absolute; top: 46px; width: 34px; height: 82px; border-radius: 20px; background: linear-gradient(180deg, #fff, #dfe3ec); box-shadow: 0 8px 18px rgba(31,41,55,.12); }
.mock-product-earbuds i:first-child { left: 72px; transform: rotate(-13deg); }
.mock-product-earbuds i:last-child { right: 62px; transform: rotate(13deg); }
.mockup-upload-card p { color: #363b49; font-weight: 720; }
.mockup-upload-card small { color: #858ca0; }
.mockup-tabs { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mockup-tabs span { text-align:center; padding: 9px 10px; border-radius: 8px; background:#f7f8fc; color:#363b49; font-weight:650; }
.mockup-tabs .active { color:#fff; background:linear-gradient(135deg,#3f5bff,#735cff); }
.mockup-template-grid, .mockup-result-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.mockup-template-grid span, .mockup-result-grid span { min-height: 100px; border-radius: 12px; border:1px solid #e4e9f4; background: radial-gradient(circle at 50% 50%, #fff 0 22%, #edf1fb 23% 100%); }
.mockup-template-grid .selected { outline: 3px solid #4f5bff; }
.mockup-template-grid .more { display:grid; place-items:center; color:#6b7280; font-weight:720; background:#fff; }
.mockup-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; }
.mockup-card-head a { color: var(--ui-violet); text-decoration:none; font-size:12px; font-weight:720; }
.mockup-regenerate { width:100%; margin-top: 12px; min-height: 42px; border:1px solid #dfe5f1; border-radius:10px; background:#fff; color: var(--ui-violet); font-weight:720; }
.mockup-platform-row { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; margin-top: 26px; }
.mockup-platform-row div { border:1px solid #e9edf7; border-radius:16px; padding:18px; background:linear-gradient(135deg,#fff,#f7f9ff); }
.mockup-platform-row b { display:block; margin-bottom:5px; }
.mockup-platform-row span { color:#6b7280; font-size:12px; }
body.app-route .shell { grid-template-columns: 254px minmax(0, 1fr) !important; grid-template-rows: 74px minmax(0, 1fr) !important; background: var(--ui-bg) !important; }
body.app-route .topbar { display: flex !important; grid-column: 1 / -1; grid-row: 1; min-height: 74px; margin: 0; padding: 0 30px; border-width: 0 0 1px; border-radius: 0; background: rgba(255,255,255,.96); box-shadow: 0 1px 0 #e7ebf4; }
body.app-route .landing-nav { display: none; }
body.app-route .nav-actions { margin-left: 0; }
body.app-route .nav-actions [data-user-link]:not(#logoutButton) { display: none !important; }
.app-topbar-status { margin-left: auto; display:flex; align-items:center; gap:22px; }
.topbar-balance { display:flex; align-items:center; gap:8px; min-height:42px; padding:0 18px; border:1px solid #dfe5f1; border-radius:10px; text-decoration:none; background:#fff; color:#4b5563; }
.topbar-balance strong { color: var(--ui-violet); font-size:18px; }
.topbar-help { color:#4b5563; text-decoration:none; font-weight:650; }
.topbar-bell { width:30px; height:30px; display:grid; place-items:center; color:transparent; position:relative; }
.topbar-bell::before { content: none; }
.topbar-bell::after { content: none; }
.topbar-avatar { width:38px; height:38px; border-radius:999px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#4f5bff,#8b5cf6); font-weight:800; }
body.app-route .reference-sidebar { grid-column: 1 !important; grid-row: 2 !important; top: 74px !important; width: 254px; height: calc(100vh - 74px) !important; padding: 16px 22px 24px !important; border-right: 1px solid #e6eaf3; background: rgba(255,255,255,.96) !important; }
.reference-sidebar .sidebar-link { min-height: 56px; padding:0 18px; border-radius:12px; font-size:16px; font-weight:650; gap:14px; }
.reference-sidebar .sidebar-link.primary { background: linear-gradient(135deg, #4856ff, #815cff) !important; color:#fff; box-shadow: 0 16px 36px rgba(91,92,255,.28); }
.sidebar-icon { width:30px; height:30px; border-radius:9px; font-size:14px; }
.sidebar-upgrade { padding:18px; border-radius:14px; background:linear-gradient(135deg,#4856ff,#815cff); }
.sidebar-usage { padding:16px; border-radius:14px; }
body.app-route #appView { grid-column: 2 !important; grid-row: 2 !important; padding: 28px 30px 42px !important; background: var(--ui-bg) !important; }
body.app-route .dashboard-top-stepper { display: none !important; }
.reference-step b { width: 40px; height:40px; }
.reference-step.active b { background:linear-gradient(135deg,#4856ff,#815cff); }
.scheme-a-home { max-width: 1120px; gap:18px; }
.scheme-a-home-header { display:flex; }
.scheme-a-home-header h1 { font-size:26px; }
.scheme-a-balance-chip { min-width: 180px; justify-content:center; border-radius:18px; background:linear-gradient(135deg,#4856ff,#815cff); color:#fff; border:0; box-shadow: 0 18px 42px rgba(91,92,255,.24); }
.scheme-a-balance-chip strong { color:#fff; font-size:34px; }
.scheme-a-hero-banner, .scheme-a-quick, .scheme-a-recent-card, .scheme-a-tip-card { border:1px solid #e6eaf3; border-radius:18px; background:#fff; box-shadow: 0 12px 40px rgba(39,51,89,.05); }
.scheme-a-hero-banner { min-height:148px; background: radial-gradient(circle at 80% 50%, rgba(91,92,255,.18), transparent 22%), #fff; }
.scheme-a-hero-banner h2 { font-size:24px; }
.mobile-action-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; }
.mobile-action-card { min-height:126px; padding:18px; border:1px solid #e8ecf6; border-radius:15px; text-decoration:none; color:#111827; background:#fff; display:grid; gap:6px; align-content:center; }
.mobile-action-card b { width:42px; height:42px; border-radius:12px; color:#fff; display:grid; place-items:center; }
.mobile-action-card strong { font-size:15px; }
.mobile-action-card span { color:#7a8294; font-size:12px; }
.mobile-action-card.purple b { background:linear-gradient(135deg,#625bff,#8b5cf6); }
.mobile-action-card.blue b { background:linear-gradient(135deg,#3792ff,#60a5fa); }
.mobile-action-card.green b { background:linear-gradient(135deg,#22c55e,#16a34a); }
.mobile-action-card.orange b { background:linear-gradient(135deg,#f59e0b,#fb923c); }
.scheme-a-recent-card { padding:18px; }
.recent-work-row { display:grid; grid-template-columns:78px 1fr auto; gap:14px; align-items:center; }
.recent-work-thumb { width:78px; height:78px; border-radius:12px; }
.recent-work-row strong { display:block; }
.recent-work-row span { display:block; color:#6b7280; font-size:12px; margin-top:4px; }
.recent-work-row a { text-decoration:none; color:#6b7280; font-weight:800; }
body.app-route #generation.workspace-page-active { max-width: 1460px; margin: 0 auto; }
body.app-route #generation > .section-title { display:flex; }
body.app-route #generation::before { display:none !important; content:none !important; }
body.app-route #generation .generation-layout { display:grid; grid-template-columns: minmax(420px, 1fr) minmax(520px, 1.08fr) 280px; gap:22px; align-items:start; }
body.app-route #generation .generation-layout > aside:first-child, body.app-route #generation .generation-layout > section, body.app-route #generation .generation-layout > aside.result-stack { border:1px solid #e3e8f4; border-radius:18px; background:#fff; padding:22px; box-shadow:0 10px 38px rgba(38,49,86,.05); }
body.app-route #generation .generation-layout > section { grid-column: 2; grid-row: 1; }
body.app-route #generation .generation-layout > aside:first-child { grid-column: 1; grid-row: 1; margin-top: 0; }
body.app-route #generation .generation-layout > aside.result-stack { grid-column: 3; grid-row: 1; }
body.app-route #generation .generation-layout::after { display:none !important; content:none !important; }
body.app-route #generation .generation-blueprint .empty-state { border:0; background:transparent; padding:0; font-weight:740; color:#111827; }
body.app-route #generation .upload-guide { display:none; }
body.app-route #generation .template-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
body.app-route #generation .template-card { min-height:94px; padding:14px; border-radius:14px; }
body.app-route #generation .template-card[aria-pressed="true"] { outline: 2px solid var(--ui-violet); }
body.app-route #generation .result-preview { aspect-ratio: 1 / .78; min-height: 118px; border-radius:14px; background: #f8f9fd; }
body.app-route #generation .result-preview .field-hint { color:#a0a7b8; }
body.app-route #generation .result-stack::before { display:none !important; content:none !important; }
body.app-route #generation .result-stack::after { display:none !important; content:none !important; }
.compact-form label { color:#3b4455; font-weight:650; }
input, select, textarea { border-radius:10px; border-color:#dce3ef; background:#fff; }
textarea { min-height:86px; }
@media (max-width: 1180px) { body:not(.auth-route):not(.app-route) #landingView { grid-template-columns: 1fr; } .mockup-board { grid-template-columns: 1fr; } .mockup-upload-card, .mockup-template-card, .mockup-result-card { min-height: auto; } body.app-route #generation .generation-layout { grid-template-columns: 1fr; } body.app-route #generation .generation-layout > section, body.app-route #generation .generation-layout > aside:first-child, body.app-route #generation .generation-layout > aside.result-stack, body.app-route #generation .generation-layout::after { grid-column: 1; grid-row:auto; } }
@media (max-width: 980px) { body.app-route .shell { grid-template-columns: 1fr !important; grid-template-rows: 74px minmax(0,1fr) !important; } body.app-route .reference-sidebar { display:none !important; } body.app-route #appView { grid-column:1 !important; } .mobile-action-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { body:not(.app-route) .shell { width: min(100vw - 28px, 430px); } body:not(.app-route) .topbar { margin:0 -14px 20px; padding:0 18px; } .landing-nav, .app-topbar-status { display:none !important; } body:not(.auth-route):not(.app-route) .hero h1 { font-size: 42px; } body:not(.auth-route):not(.app-route) .hero-flow, .mockup-platform-row { grid-template-columns: 1fr; } .landing-mockup-panel { padding:18px; } body.app-route .topbar { padding:0 16px; } body.app-route #appView { padding:20px 14px 34px !important; } body.app-route .dashboard-top-stepper { display:none !important; } .scheme-a-home { max-width: 430px; } .scheme-a-home-header { flex-direction: column; align-items: stretch; } .scheme-a-balance-chip { justify-content:flex-start; padding:18px; } .mobile-action-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .scheme-a-tip-card { display:none; } body.app-route #generation::before { display:none; } body.app-route #generation .generation-layout::after { min-height: 420px; font-size:20px; } }
/* UI-REDESIGN V2 viewport fit adjustment */
body.app-route #generation .generation-layout {
  grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr) minmax(220px, .62fr);
}
@media (min-width: 1440px) {
  body.app-route #generation .generation-layout {
    grid-template-columns: minmax(420px, 1fr) minmax(520px, 1.08fr) 280px;
  }
}



/* UI detail fixes: remove global stepper, fake data, native file button, and question-mark icon */
body.app-route .dashboard-top-stepper { display: none !important; }
.topbar-bell {
  width: auto;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  color: #334155;
  font-weight: 650;
  text-decoration: none;
}
.topbar-bell::before,
.topbar-bell::after { content: none !important; }
.compact-form label:has(input[type="file"]) {
  position: relative;
  min-height: 88px;
  padding: 16px 18px;
  border: 1px dashed #cfd7ea;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f8faff);
  cursor: pointer;
}
.compact-form label:has(input[type="file"])::after {
  content: "上传文件";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 34px;
  margin-top: 10px;
  padding: 0 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4f5bff, #815cff);
  color: #fff;
  font-size: 13px;
  font-weight: 720;
  box-shadow: 0 10px 22px rgba(91, 92, 255, .22);
}
.compact-form label:has(input[type="file"]) input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.compact-form label:has(input[type="file"]:disabled) {
  opacity: .62;
  cursor: not-allowed;
}
.compact-form label:has(input[type="file"]:disabled)::after {
  background: #e5e7eb;
  color: #6b7280;
  box-shadow: none;
}
.compact-form label:has(input[type="file"]).has-file::after {
  content: "重新选择";
}
.community-template-cover-preview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #dfe5ef;
  border-radius: 12px;
  background: #fff;
  pointer-events: none;
}
.community-template-cover-preview img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  background: #f3f4f6;
}
.community-template-cover-preview > span {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.community-template-cover-preview strong,
.community-template-cover-preview small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-template-cover-preview small {
  color: #667085;
  font-weight: 500;
}
body.app-route #generation::before,
body.app-route #generation .generation-layout::after,
body.app-route #generation .result-stack::before,
body.app-route #generation .result-stack::after { display: none !important; content: none !important; }
body.app-route #generation .generation-layout {
  grid-template-columns: 300px minmax(0, 1fr) 340px !important;
}
.scheme-a-recent-card { display: none !important; }
body.app-route #generation .generation-layout > aside:first-child { grid-column: 1 !important; grid-row: 1 !important; margin-top: 0 !important; }
body.app-route #generation .generation-layout > section { grid-column: 2 !important; grid-row: 1 !important; }
body.app-route #generation .generation-layout > aside.result-stack { grid-column: 3 !important; grid-row: 1 !important; }
@media (max-width: 1180px) {
  body.app-route #generation .generation-layout { grid-template-columns: 1fr !important; }
  body.app-route #generation .generation-layout > aside:first-child,
  body.app-route #generation .generation-layout > section,
  body.app-route #generation .generation-layout > aside.result-stack { grid-column: 1 !important; grid-row: auto !important; }
}
/* Ordinary image edit preview hard fix: keep uploaded source/result images inside their cards. */
body.app-route #image-edit .generation-layout {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(260px, 320px) !important;
}
body.app-route #image-edit .generation-layout > aside,
body.app-route #image-edit .generation-layout > section {
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
body.app-route #image-edit #gptSourcePreview,
body.app-route #image-edit #gptResultPreview {
  width: 100%;
  max-width: 100%;
  min-height: 220px;
  max-height: 320px;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden !important;
  contain: paint;
  isolation: isolate;
  box-sizing: border-box;
  background: #fff;
}
body.app-route #image-edit #gptSourcePreview {
  min-height: 220px;
  max-height: none;
  aspect-ratio: auto;
  align-items: stretch;
}
body.app-route #image-edit #gptSourcePreview img,
body.app-route #image-edit #gptResultPreview img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}
body.app-route #image-edit #gptSourcePreview .gpt-source-grid {
  width: 100%;
  max-height: 430px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, 118px);
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
  box-sizing: border-box;
}
body.app-route #image-edit #gptSourcePreview .gpt-source-tile {
  position: relative;
  min-width: 0;
  border: 1px solid #e7ddce;
  border-radius: 14px;
  overflow: hidden;
  background: #fffaf3;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(17,17,17,.06);
}
body.app-route #image-edit #gptSourcePreview .gpt-source-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.app-route #image-edit #gptSourcePreview .gpt-source-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(17,17,17,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #b91c1c;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(17,17,17,.12);
}
body.app-route #image-edit #gptSourcePreview .gpt-source-remove:hover {
  background: #fff1f2;
  border-color: #fecdd3;
}
body.app-route #image-edit #gptSourcePreview .gpt-source-index {
  position: absolute;
  left: 7px;
  bottom: 7px;
  z-index: 3;
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(17,17,17,.72);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
body.app-route #image-edit #gptSourcePreview .gpt-source-name {
  position: absolute;
  inset: auto 7px 7px 38px;
  z-index: 3;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #4b5563;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.app-route #image-edit #gptResultPreview {
  max-height: none;
  min-height: 260px;
  aspect-ratio: auto;
  align-content: start;
}
body.app-route #image-edit #gptResultPreview .gpt-result-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}
body.app-route #image-edit #gptResultPreview .gpt-result-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid #edf0f6;
  border-radius: 12px;
  background: #fff;
}
body.app-route #image-edit #gptResultPreview .gpt-result-thumb {
  min-height: 128px;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
  display: grid;
  place-items: center;
}
body.app-route #image-edit #gptResultPreview .gpt-result-card img {
  width: 100%;
  height: 100%;
  max-height: 210px;
  object-fit: contain;
}
body.app-route #image-edit #gptResultPreview .gpt-result-card .button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 9px;
}
body.app-route #image-edit .result-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.app-route #image-edit .mini-card {
  padding: 14px !important;
  gap: 10px !important;
}
body.app-route #image-edit .mini-card .result-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.app-route #image-edit #gptSourceSummary,
body.app-route #image-edit #gptJobSummary {
  overflow-wrap: anywhere;
}
@media (max-width: 1180px) {
  body.app-route #image-edit .generation-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  body.app-route #image-edit .result-actions { grid-template-columns: 1fr; }
}
/* Online batch generation page: three-column source/orchestration/queue workspace. */
body.app-route #online-batch {
  max-width: 1480px;
  margin: 0 auto;
}
.online-batch-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(440px, 1fr) minmax(300px, 380px);
  gap: 14px;
  align-items: start;
}
.online-batch-stack { display: grid; gap: 14px; }
.online-source-tabs, .online-screenshot-actions, .online-param-grid, .online-result-actions {
  display: grid;
  gap: 10px;
}
.online-source-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.online-mode-button {
  border: 1px solid #dbe1eb;
  border-radius: 12px;
  padding: 10px 8px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.online-mode-button[aria-pressed="true"] {
  border-color: rgba(79, 85, 255, .45);
  color: #4f46e5;
  background: #f7f5ff;
}
.online-mode-panel { display: grid; gap: 12px; }
.online-url-row, .online-screenshot-actions { grid-template-columns: minmax(0, 1fr) auto; }
.online-dropzone {
  position: relative;
  min-height: 112px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 18px;
  border: 1px dashed #cfd7e6;
  border-radius: 14px;
  background: #fbfcff;
  text-align: center;
  color: #64748b;
  overflow: hidden;
}
.online-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.online-source-list, .online-task-grid, .online-result-grid {
  display: grid;
  gap: 10px;
}
.online-source-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.online-source-card {
  position: relative;
  min-width: 0;
  border: 1px solid #e6ebf5;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  display: grid;
  gap: 7px;
}
.online-source-card[aria-pressed="true"] {
  border-color: #7c5cff;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .10);
}
.online-source-thumb, .online-task-thumb, .online-result-cell {
  width: 100%;
  border: 1px solid #eef1f6;
  border-radius: 10px;
  background: #f8fafc;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.online-source-thumb { aspect-ratio: 1 / 1; }
.online-task-thumb { width: 74px; height: 74px; flex: 0 0 auto; }
.online-source-thumb img, .online-task-thumb img, .online-result-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.online-source-card strong, .online-source-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.online-source-card span { color: #64748b; }
.online-source-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #334155;
}
.online-param-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}
.online-info-warning {
  border: 1px solid #fbbf24;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
}
.online-task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.online-task-card {
  min-width: 0;
  border: 1px solid #e6ebf5;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  display: grid;
  gap: 8px;
}
.online-task-head, .online-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}
.online-task-body { display: flex; gap: 10px; align-items: start; }
.online-task-card textarea {
  min-height: 74px;
  padding: 9px 10px;
  font-size: 12px;
}
.online-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 8px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 650;
}
.online-status-badge.running { background: #eef2ff; color: #4f46e5; }
.online-status-badge.succeeded { background: #ecfdf5; color: #047857; }
.online-status-badge.failed { background: #fef2f2; color: #b91c1c; }
.online-progress-track {
  height: 9px;
  border-radius: 999px;
  background: #e8edf5;
  overflow: hidden;
}
.online-progress-track span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f55ff, #8b5cf6);
  transition: width .2s ease;
}
.online-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.online-result-cell {
  aspect-ratio: 1 / 1;
  min-height: 92px;
  color: #94a3b8;
  font-size: 12px;
  text-align: center;
  padding: 8px;
}
.online-result-actions { grid-template-columns: 1fr 1fr; }
#onlineBatchSubmit { grid-column: 1 / -1; }
.generation-time-estimate {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-left: 3px solid #0f766e;
  background: #f0fdfa;
  color: #115e59;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
@media (max-width: 1280px) {
  .online-batch-layout { grid-template-columns: 1fr; }
  .online-param-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .online-source-tabs, .online-source-list, .online-task-grid, .online-result-grid, .online-result-actions { grid-template-columns: 1fr; }
  .online-url-row, .online-screenshot-actions, .online-param-grid { grid-template-columns: 1fr; }
}
/* Image audit page: compact 1:1 implementation of the approved UI mock. */
body.app-route #image-audit {
  max-width: 1580px;
  margin: 0 auto;
}
.image-audit-layout {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(500px, 1fr) minmax(390px, 460px);
  gap: 16px;
  align-items: start;
}
.audit-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
}
.audit-dropzone {
  position: relative;
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 132px;
  border: 1px dashed #d7dce8;
  border-radius: 16px;
  background: #fbfcff;
  color: #111827;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
}
.audit-dropzone span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 650;
}
.audit-dropzone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.audit-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #6b7280;
  font-size: 13px;
}
.audit-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.audit-source-tile {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid #edf0f7;
  border-radius: 14px;
  background: #fff;
}
.audit-source-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(15, 23, 42, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #b91c1c;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .12);
}
.audit-source-remove:hover { background: #fef2f2; }
.audit-source-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: #f3f4f6;
}
.audit-source-tile span {
  overflow: hidden;
  color: #4b5563;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-platform-tabs, .audit-chip-grid, .audit-form-grid {
  display: grid;
  gap: 10px;
}
.audit-platform-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.audit-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.audit-tab, .audit-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.audit-tab input, .audit-chip input {
  width: 14px;
  height: 14px;
  min-height: 0 !important;
  margin: 0;
}
.audit-tab:has(input:checked), .audit-chip:has(input:checked) {
  border-color: #111827;
  background: #111827;
  color: #fff !important;
}
.audit-chip-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
}
#imageAuditStandard {
  min-height: 260px;
  line-height: 1.65;
}
.audit-template-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
}
.audit-template-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.audit-template-header small {
  color: #64748b;
  font-weight: 700;
}
.audit-template-actions {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, .8fr) auto auto auto;
  gap: 8px;
  align-items: center;
}
.audit-template-actions .button {
  min-height: 38px;
  padding: 8px 12px;
  white-space: nowrap;
}
.audit-template-actions select {
  min-height: 38px;
}
@media (max-width: 760px) {
  .audit-template-header,
  .audit-template-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
.audit-safety-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #d1fae5;
  border-radius: 14px;
  background: #ecfdf5;
  color: #065f46;
  font-size: 13px;
}
.audit-safety-card.blocked {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}
.audit-answer {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.audit-answer pre {
  max-width: 100%;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #1f2937;
  font: inherit;
  line-height: 1.65;
}
.audit-result-panel {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 112px);
  overflow: auto;
}
.audit-result-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.audit-result-stat {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
}
.audit-result-stat strong { font-size: 20px; line-height: 1; }
.audit-result-stat span { color: #64748b; font-size: 12px; font-weight: 800; }
.audit-task-list {
  display: grid;
  gap: 8px;
}
.audit-task-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}
.audit-task-dot {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e5e7eb;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}
.audit-task-row.done { border-color: #bbf7d0; background: #f0fdf4; }
.audit-task-row.active { border-color: #bfdbfe; background: #eff6ff; }
.audit-task-row.error { border-color: #fecaca; background: #fef2f2; }
.audit-task-row.done .audit-task-dot { background: #22c55e; color: #fff; }
.audit-task-row.active .audit-task-dot { background: #2563eb; color: #fff; }
.audit-task-row.error .audit-task-dot { background: #ef4444; color: #fff; }
.audit-task-row strong { color: #111827; font-size: 13px; }
.audit-task-row p { margin: 2px 0 0; color: #64748b; font-size: 12px; line-height: 1.5; }
.audit-issue-list, .audit-per-image-list {
  display: grid;
  gap: 10px;
}
/* Image audit result cards: readable single-column QA layout. */
.audit-per-image-list {
  grid-template-columns: 1fr;
  gap: 14px;
}
.audit-issue, .audit-per-image-row {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #edf0f7;
  border-left: 4px solid #cbd5e1;
  border-radius: 16px;
  background: #fff;
}
.audit-issue strong, .audit-per-image-row strong {
  color: #111827;
  font-size: 15px;
  line-height: 1.35;
}
.audit-issue p, .audit-per-image-row p {
  margin: 0;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.6;
}
.audit-per-image-row.pass { border-color: #bbf7d0; border-left-color: #22c55e; background: #f0fdf4; }
.audit-per-image-row.warning { border-color: #fde68a; border-left-color: #f59e0b; background: #fffbeb; }
.audit-per-image-row.fail, .audit-per-image-row.blocked { border-color: #fecaca; border-left-color: #ef4444; background: #fef2f2; }
.audit-per-image-issues {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}
.audit-per-image-issue {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px dashed rgba(15, 23, 42, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
}
.audit-per-image-issue strong { font-size: 13px; }
.audit-per-image-issue p { font-size: 12px; }
.audit-severity {
  display: inline-flex;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 1280px) {
  .image-audit-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .audit-platform-tabs, .audit-form-grid, .audit-chip-grid, .audit-source-grid, .audit-result-overview, .audit-per-image-list { grid-template-columns: 1fr; }
}
/* Remix preview hard fix: source image is shown in the right comparison panel only. */
body.app-route #remix .remix-layout {
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(260px, 288px) !important;
}
body.app-route #remix .remix-layout > .subcard,
body.app-route #remix .remix-stack,
body.app-route #remix .result-stack {
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
body.app-route #remix .remix-mode-card {
  background: #fff !important;
  position: relative;
  z-index: 1;
}
body.app-route #remix #remixSourcePreview {
  display: none !important;
}
body.app-route #remix #remixSourcePreview,
body.app-route #remix #remixCompareSourcePreview,
body.app-route #remix #remixResultPreview {
  width: 100%;
  min-height: 220px;
  aspect-ratio: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
  contain: paint;
  isolation: isolate;
  box-sizing: border-box;
}
body.app-route #remix #remixSourcePreview.has-image,
body.app-route #remix #remixCompareSourcePreview.has-image,
body.app-route #remix #remixResultPreview.has-image {
  min-height: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}
body.app-route #remix #remixSourcePreview img,
body.app-route #remix #remixCompareSourcePreview img,
body.app-route #remix #remixResultPreview img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 260px !important;
  object-fit: contain !important;
  object-position: center center !important;
  flex: 0 0 auto;
}
body.app-route #remix #remixSourcePreview {
  display: none !important;
}
@media (max-width: 1180px) {
  body.app-route #remix .remix-layout { grid-template-columns: 1fr !important; }
}


/* UI cleanup: merged batch entry, compact sidebar, less explanatory copy. */
body.app-route .shell { grid-template-columns: 232px minmax(0, 1fr) !important; }
body.app-route .reference-sidebar {
  width: 232px !important;
  padding: 12px 16px 14px !important;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch !important;
  gap: 12px !important;
  overflow: hidden;
}
.reference-sidebar .sidebar-stack:first-child {
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.reference-sidebar .sidebar-stack:first-child::-webkit-scrollbar { width: 4px; }
.reference-sidebar .sidebar-stack:first-child::-webkit-scrollbar-thumb { background: #d7ddea; border-radius: 999px; }
.reference-sidebar .sidebar-bottom-stack { gap: 10px; min-height: 0; }
.reference-sidebar .sidebar-link {
  min-height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 15px;
  gap: 11px;
}
.sidebar-icon { width: 28px; height: 28px; border-radius: 9px; font-size: 14px; }
.sidebar-credit-card {
  padding: 12px;
  border: 1px solid #e6eaf3;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #f8f9ff);
  box-shadow: 0 10px 28px rgba(39,51,89,.06);
  display: grid;
  gap: 9px;
}
.sidebar-credit-head { display: grid; gap: 3px; }
.sidebar-credit-head span { color: #64748b; font-size: 12px; font-weight: 650; }
.sidebar-credit-head strong { color: #111827; font-size: 16px; letter-spacing: -0.02em; }
.sidebar-credit-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.sidebar-credit-actions .button { min-height: 34px; padding: 0 12px; border-radius: 9px; font-size: 12px; }
.sidebar-logout-button { min-height: 42px !important; }
body.app-route .workspace-page-active > .section-title p,
body.app-route .workspace-page-active .subcard > div:first-child > p,
body.app-route .workspace-page-active .auth-only-note {
  display: none;
}
body.app-route .workspace-page-active .field-hint {
  color: #7a8294;
  font-size: 11px;
  line-height: 1.35;
}
body.app-route .workspace-page-active .section-title { margin-bottom: 12px; }
body.app-route #online-batch .section-title { gap: 10px; }
body.app-route #online-batch .online-batch-layout {
  grid-template-columns: minmax(260px, 330px) minmax(480px, 1fr) minmax(260px, 320px);
}
@media (max-width: 1280px) {
  body.app-route #online-batch .online-batch-layout { grid-template-columns: 1fr !important; }
}

/* Profile, configurable notification, and image slicer workspace pages. */
.topbar-notification-wrap { position: relative; display: inline-flex; align-items: center; }
.topbar-notification-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  width: min(340px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid #e3e8f4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(31, 41, 90, .14);
  display: grid;
  gap: 9px;
}
.topbar-notification-panel p { margin: 0; color: #475569; line-height: 1.55; }
.topbar-avatar { text-decoration: none; }
.profile-layout { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) minmax(280px, 360px); gap: 14px; align-items: start; }
.profile-card { display: grid; gap: 14px; }
.profile-main-stack { display: grid; gap: 14px; }
.profile-side-stack { display: grid; gap: 14px; }
.profile-account-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.profile-avatar { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,#4f5bff,#8b5cf6); font-size: 24px; font-weight: 900; box-shadow: 0 16px 34px rgba(91,92,255,.22); }
.profile-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-stat-grid.profile-stat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-credit-progress { border: 1px solid #edf1f6; border-radius: 16px; padding: 12px; background: linear-gradient(135deg,#fff,#fbfdff); }
.profile-credit-progress-head { display: flex; justify-content: space-between; gap: 10px; color: #64748b; font-size: 12px; font-weight: 700; }
.profile-credit-progress .usage-bar { margin: 10px 0 0; }
.profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-quick-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.profile-quick-card { min-height: 82px; padding: 12px; border: 1px solid #e7edf5; border-radius: 16px; background: #fff; color: #111827; text-decoration: none; display: grid; gap: 6px; align-content: center; box-shadow: 0 10px 28px rgba(15,23,42,.04); }
.profile-quick-card strong { font-size: 14px; }
.profile-quick-card span { color: #64748b; font-size: 12px; line-height: 1.4; }
.profile-mini-list { display: grid; gap: 10px; }
.profile-mini-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 12px; border: 1px solid #edf1f6; border-radius: 14px; background: #fff; }
.profile-mini-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.profile-mini-row span { color: #64748b; font-size: 12px; }
.profile-mini-row small { grid-column: 1 / -1; color: #94a3b8; font-size: 12px; }
.profile-info-line { display: grid; gap: 6px; color: #64748b; font-size: 12px; line-height: 1.5; }
.profile-info-line code { padding: 2px 6px; border-radius: 8px; background: #f8fafc; color: #334155; overflow-wrap: anywhere; }
.compact-title { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.slicer-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(360px, .95fr) minmax(320px, 420px); gap: 14px; align-items: start; }
.slicer-stack { display: grid; gap: 14px; }
.slicer-work-list, .slicer-result-grid { display: grid; gap: 10px; }
/* SLICER-LOCAL-UPLOAD-20260703: slicer accepts local image upload as a source, not only generated works. */
.slicer-local-upload { border: 1px dashed #cbd5e1; border-radius: 14px; padding: 12px; background: #f8fafc; display: grid; gap: 8px; }
.slicer-local-upload strong { color: #111827; font-size: 13px; }
.slicer-local-upload input { width: 100%; }
.slicer-local-upload small { color: #64748b; line-height: 1.45; }
.slicer-work-card { width: 100%; border: 1px solid #e6ebf5; border-radius: 12px; padding: 10px; background: #fff; display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: center; text-align: left; cursor: pointer; }
.slicer-work-card[aria-pressed="true"] { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124, 92, 255, .10); }
.slicer-work-thumb, .slicer-source-preview, .slicer-result-thumb { border: 1px solid #eef1f6; border-radius: 10px; background: #f8fafc; display: grid; place-items: center; overflow: hidden; }
.slicer-work-thumb { width: 74px; height: 74px; }
.slicer-work-thumb img, .slicer-source-preview img, .slicer-result-thumb img { width: 100%; height: 100%; object-fit: contain; }
.slicer-work-card strong, .slicer-work-card span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slicer-work-card span { color: #64748b; font-size: 12px; }
.slicer-source-preview { min-height: 260px; max-height: 420px; background: #fff; }
.slicer-source-preview img { height: auto; max-height: 420px; }
.slicer-size-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.slicer-settings-panel { display: grid; gap: 12px; }
.slicer-step-card { border: 1px solid #e7ebf3; border-radius: 16px; padding: 14px; background: #fff; display: grid; gap: 12px; }
.slicer-step-head { display: flex; align-items: flex-start; gap: 10px; }
.slicer-step-index { width: 24px; height: 24px; border-radius: 999px; display: inline-grid; place-items: center; background: #111827; color: #fff; font-size: 12px; font-weight: 900; flex: 0 0 auto; }
.slicer-step-head strong { display: block; color: #111827; font-size: 14px; }
.slicer-step-head span:not(.slicer-step-index) { display: block; margin-top: 2px; color: #64748b; font-size: 12px; line-height: 1.45; font-weight: 500; }
.slicer-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.slicer-primary-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slicer-choice-card { position: relative; border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px 12px 12px 38px; background: #f8fafc; cursor: pointer; display: grid; gap: 4px; min-height: 74px; }
.slicer-choice-card input { position: absolute; left: 14px; top: 15px; width: auto; margin: 0; }
.slicer-choice-card strong { color: #111827; font-size: 13px; line-height: 1.3; }
.slicer-choice-card span { color: #64748b; font-size: 12px; line-height: 1.45; font-weight: 500; }
.slicer-choice-card:has(input:checked) { border-color: #111827; background: #111827; color: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .16); }
.slicer-choice-card:has(input:checked) strong, .slicer-choice-card:has(input:checked) span { color: #fff; }
body.app-route .slicer-choice-card:has(input:checked) { background: #111827 !important; border-color: #111827 !important; color: #fff !important; }
body.app-route .slicer-choice-card:has(input:checked) strong,
body.app-route .slicer-choice-card:has(input:checked) span { color: #fff !important; opacity: 1 !important; }
body.app-route .slicer-choice-card strong { display: block; margin-bottom: 2px; }
.slicer-param-panel { display: grid; gap: 10px; }
.slicer-size-field { display: grid; gap: 6px; }
.slicer-size-field span { color: #111827; font-weight: 800; font-size: 13px; }
.slicer-size-field small { color: #64748b; font-size: 12px; }
.slicer-form-note { border: 1px dashed #d8dee9; border-radius: 12px; padding: 10px 12px; background: #f8fafc; color: #475569; font-size: 12px; line-height: 1.55; }
.inline-check { display: flex !important; align-items: center; gap: 8px; font-weight: 650; }
.inline-check input { width: auto; }
.slicer-preserve-size { padding: 10px 12px; border: 1px solid #dbe3ee; border-radius: 8px; background: #f8fafc; }
.slicer-advanced-settings { border-top: 1px solid #e5e7eb; padding-top: 10px; }
.slicer-advanced-settings summary { cursor: pointer; color: #334155; font-size: 13px; font-weight: 800; }
.slicer-advanced-settings[open] { display: grid; gap: 12px; }
.slicer-advanced-settings[open] summary { margin-bottom: 2px; }
.link-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.slicer-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slicer-result-card { display: grid; gap: 8px; }
.slicer-result-card span { color: #64748b; font-size: 12px; }
.slicer-result-thumb { aspect-ratio: 1 / 1; background: #fff; }
@media (max-width: 1280px) { .profile-layout, .slicer-layout { grid-template-columns: 1fr; } .profile-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .profile-stat-grid, .profile-stat-grid.profile-stat-grid-3, .profile-actions, .profile-quick-grid, .slicer-size-grid, .slicer-result-grid, .slicer-choice-grid, .slicer-primary-choice-grid { grid-template-columns: 1fr; } }

/* NEON-COMMERCE-UI: reference screenshot dark + lime visual system */
:root {
  --neo-bg: #020302;
  --neo-card: rgba(13, 16, 14, .92);
  --neo-card-2: rgba(22, 27, 23, .96);
  --neo-line: rgba(255, 255, 255, .12);
  --neo-lime: #c9ff00;
  --neo-lime-2: #9dff00;
  --neo-text: #f7f8f2;
  --neo-muted: #9aa29a;
  --neo-radius: 22px;
  --neo-shadow: 0 28px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06);
}
html { background: var(--neo-bg); }
body {
  color: var(--neo-text) !important;
  background:
    radial-gradient(circle at 72% 36%, rgba(201,255,0,.12), transparent 25rem),
    radial-gradient(circle at 50% 12%, rgba(95,255,177,.06), transparent 34rem),
    linear-gradient(180deg, #050605 0%, #020302 58%, #050605 100%) !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 58% 32%, black 0%, transparent 72%);
}
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: -12vh;
  height: 40vh;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(201,255,0,.14), transparent 66%);
  filter: blur(20px);
}
body:not(.app-route) .shell { width: min(1580px, calc(100vw - 88px)); padding: 18px 0 54px; }
.topbar {
  position: relative;
  z-index: 4;
  min-height: 68px;
  margin-bottom: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.brand { color: var(--neo-text) !important; gap: 16px; font-weight: 820; }
.brand-mark {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--neo-lime) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 34px !important;
  line-height: 1 !important;
  letter-spacing: -.05em;
  text-shadow: 0 0 28px rgba(201,255,0,.35);
}
.landing-nav { color: rgba(247,248,242,.82) !important; gap: 54px; }
.landing-nav a { border: 0 !important; color: inherit !important; font-weight: 660; }
.landing-nav a:hover, .landing-nav a[aria-current="page"] { color: var(--neo-lime) !important; text-shadow: 0 0 22px rgba(201,255,0,.35); }
.theme-announcement {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 50px;
  margin: 4px 0 28px;
  padding: 8px 52px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  color: #c8cec5;
  background: rgba(5,7,5,.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 50px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}
.theme-announcement span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 42px;
  padding: 0 10px;
  border: 1px solid var(--neo-lime);
  border-radius: 7px;
  color: var(--neo-lime);
  font-weight: 900;
  box-shadow: 0 0 22px rgba(201,255,0,.22);
}
.theme-announcement strong { color: var(--neo-text); font-size: 16px; }
.theme-announcement a { color: var(--neo-lime); font-weight: 820; text-decoration: none; }
.theme-announcement button {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.58);
  font-size: 24px;
  cursor: pointer;
}
body.app-route .theme-announcement { display: none !important; }
body:not(.app-route) #landingView {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(470px, .82fr) minmax(660px, 1.18fr) !important;
  gap: clamp(34px, 5vw, 78px) !important;
  align-items: center !important;
}
body:not(.auth-route):not(.app-route) .hero,
body.auth-route .hero {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: clamp(32px, 5vw, 70px) 0 42px !important;
}
body:not(.app-route) .hero .eyebrow {
  border-color: rgba(201,255,0,.38) !important;
  color: var(--neo-lime) !important;
  background: rgba(201,255,0,.075) !important;
}
body:not(.app-route) .hero h1 {
  max-width: 760px !important;
  color: #fff !important;
  font-size: clamp(44px, 5vw, 76px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.07em !important;
  text-wrap: balance;
  text-shadow: 0 18px 60px rgba(0,0,0,.58);
}
body:not(.app-route) .hero h1 span,
.neo-accent { color: var(--neo-lime) !important; text-shadow: 0 0 34px rgba(201,255,0,.34); }
.hero-copy, body:not(.app-route) .hero-copy {
  max-width: 640px !important;
  color: rgba(231,235,226,.72) !important;
  font-size: 17px !important;
  line-height: 1.9 !important;
}
body:not(.app-route) .hero-actions { gap: 18px !important; margin-top: 30px !important; }
.button {
  border: 1px solid rgba(201,255,0,.55) !important;
  border-radius: 16px !important;
  color: #081006 !important;
  background: linear-gradient(135deg, var(--neo-lime) 0%, var(--neo-lime-2) 100%) !important;
  box-shadow: 0 0 0 1px rgba(201,255,0,.12), 0 16px 38px rgba(201,255,0,.22) !important;
  font-weight: 850 !important;
}
.button:hover { transform: translateY(-1px); filter: saturate(1.05); }
.button.secondary,
.nav-actions .button.secondary,
.mobile-nav summary.button.secondary {
  border-color: rgba(255,255,255,.28) !important;
  color: var(--neo-text) !important;
  background: rgba(7,9,7,.56) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(16px);
}
.button.danger {
  border-color: rgba(255,107,107,.46) !important;
  color: #ffd9d9 !important;
  background: rgba(80,18,18,.45) !important;
  box-shadow: none !important;
}
.mobile-nav-menu {
  border-color: var(--neo-line) !important;
  background: rgba(7,9,7,.94) !important;
  box-shadow: var(--neo-shadow) !important;
}
.card, .panel, .subcard, .feature, .entry-card, .history-card, .package-card, .pipeline-step, .brand-card,
.stat, .trial-path-card, .flow-step, .landing-proof, .translation-item, .remix-mode-card, .batch-job-card,
.batch-item-row, .transaction-row, .history-row, .billing-order-row, .result-card, .template-card,
.scheme-a-quick, .scheme-a-recent-card, .scheme-a-tip-card, .profile-card, .slicer-card {
  border-color: var(--neo-line) !important;
  border-radius: var(--neo-radius) !important;
  color: var(--neo-text) !important;
  background: linear-gradient(180deg, var(--neo-card-2), var(--neo-card)) !important;
  box-shadow: var(--neo-shadow) !important;
}
.card:hover, .subcard:hover, .entry-card:hover, .template-card:hover, .brand-card:hover { border-color: rgba(201,255,0,.32) !important; }
h1, h2, h3, h4, strong, label, .section-title, .feature strong, .entry-card strong, .stat strong,
.sidebar-link, .topbar-balance strong, .package-card strong, .template-card strong { color: var(--neo-text) !important; }
p, .feature span, .entry-card p, .history-card p, .package-summary, .package-note, .auth-only-note,
.pipeline-step span, .flow-step span, .landing-proof span, .status, small, .brand-meta-line,
.transaction-row span, .history-row span { color: var(--neo-muted) !important; }
.status.success { color: var(--neo-lime) !important; }
.status.error { color: #ff8f8f !important; }
.tabs {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 18px !important;
}
.tab { border-radius: 14px !important; color: rgba(247,248,242,.72) !important; }
.tab[aria-selected="true"] {
  color: #081006 !important;
  background: var(--neo-lime) !important;
  box-shadow: 0 12px 30px rgba(201,255,0,.18);
}
input, select, textarea {
  border-color: rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  color: var(--neo-text) !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
input::placeholder, textarea::placeholder { color: rgba(230,235,226,.42) !important; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(201,255,0,.78) !important;
  box-shadow: 0 0 0 4px rgba(201,255,0,.13), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
select option { color: #111; background: #fff; }
.landing-mockup-panel {
  position: relative;
  overflow: hidden;
  padding: 28px !important;
  border-color: rgba(255,255,255,.12) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 62% 36%, rgba(201,255,0,.12), transparent 30%),
    linear-gradient(180deg, rgba(18,22,19,.92), rgba(4,5,4,.72)) !important;
  box-shadow: var(--neo-shadow) !important;
}
.landing-mockup-panel::before {
  content: "";
  position: absolute;
  inset: auto 8% -16% 8%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(201,255,0,.18), transparent 70%);
  filter: blur(22px);
}
.mockup-stepper span { color: rgba(247,248,242,.78) !important; }
.mockup-stepper b, .flow-step b {
  color: #081006 !important;
  background: var(--neo-lime) !important;
  box-shadow: 0 0 24px rgba(201,255,0,.28);
}
.mockup-upload-card, .mockup-template-card, .mockup-result-card {
  border-color: rgba(255,255,255,.15) !important;
  background: linear-gradient(180deg, rgba(25,31,28,.92), rgba(8,10,9,.90)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 60px rgba(0,0,0,.42) !important;
}
.mock-product-earbuds {
  position: relative;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.22), transparent 20%),
    linear-gradient(180deg, #272c28, #090a09) !important;
  border: 1px solid rgba(255,255,255,.15);
}
.mock-product-earbuds::before {
  content: "";
  position: absolute;
  width: 32%;
  height: 58%;
  left: 34%;
  top: 24%;
  border-radius: 18px 18px 10px 10px;
  background: linear-gradient(180deg, #1e2421, #050605);
  box-shadow: 0 -12px 26px rgba(255,255,255,.10), 0 18px 32px rgba(0,0,0,.56);
}
.mock-product-earbuds i { display: none !important; }
.mockup-template-grid span, .mockup-result-grid span, .visual-tile {
  border-color: rgba(255,255,255,.12) !important;
  background: linear-gradient(145deg, rgba(38,48,40,.92), rgba(7,9,7,.92)) !important;
}
.mockup-template-grid span.selected, .mockup-result-grid span:nth-child(2), .mockup-tabs .active {
  border-color: rgba(201,255,0,.52) !important;
  color: var(--neo-lime) !important;
  background: rgba(201,255,0,.12) !important;
}
.mockup-platform-row { border-top-color: rgba(255,255,255,.10) !important; color: var(--neo-muted) !important; }
.mockup-platform-row > div {
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  color: rgba(247,248,242,.82) !important;
  background: linear-gradient(180deg, rgba(22,27,23,.92), rgba(9,11,9,.88)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.mockup-platform-row b { color: var(--neo-text) !important; }
.mockup-platform-row span { color: var(--neo-muted) !important; }
.landing-proof-grid { padding: 24px 0 0; border-top: 1px solid rgba(255,255,255,.10); }
.landing-proof { background: rgba(255,255,255,.035) !important; box-shadow: none !important; }
body.auth-route #landingView { max-width: 1160px !important; grid-template-columns: minmax(0, .95fr) 430px !important; }
body.auth-route #authPanel {
  padding: 30px !important;
  border-color: rgba(201,255,0,.28) !important;
  background: linear-gradient(180deg, rgba(18,22,19,.96), rgba(6,8,6,.92)) !important;
}
#authPanel h2 { font-size: 30px; }
#authPanel::before {
  content: "登录后开始作图";
  display: inline-flex;
  margin-bottom: 14px;
  padding: 6px 12px;
  border: 1px solid rgba(201,255,0,.35);
  border-radius: 999px;
  color: var(--neo-lime);
  background: rgba(201,255,0,.07);
  font-size: 12px;
  font-weight: 800;
}
body.app-route .shell { background: var(--neo-bg) !important; }
body.app-route #appView { border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.app-route .reference-sidebar {
  border-color: rgba(255,255,255,.10) !important;
  background: linear-gradient(180deg, rgba(13,16,14,.96), rgba(5,6,5,.96)) !important;
  box-shadow: 18px 0 70px rgba(0,0,0,.42) !important;
}
.sidebar-link { border-color: transparent !important; color: rgba(247,248,242,.78) !important; }
.sidebar-link:hover, .sidebar-link.active, .sidebar-link[aria-current="page"] {
  color: var(--neo-lime) !important;
  background: rgba(201,255,0,.10) !important;
  border-color: rgba(201,255,0,.22) !important;
}
.sidebar-icon, .topbar-bell, .topbar-avatar {
  border-color: rgba(201,255,0,.32) !important;
  color: var(--neo-lime) !important;
  background: rgba(201,255,0,.08) !important;
}
.sidebar-credit-card, .app-topbar-status, .topbar-notification-panel {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(12,15,13,.86) !important;
  box-shadow: var(--neo-shadow) !important;
}
.usage-bar, .online-progress-track { background: rgba(255,255,255,.10) !important; }
.usage-bar span, .online-progress-track span { background: linear-gradient(90deg, var(--neo-lime), #8ff7ff) !important; }
.scheme-a-hero-banner, .saas-hero-card {
  border-color: rgba(201,255,0,.22) !important;
  background:
    radial-gradient(circle at 82% 36%, rgba(201,255,0,.18), transparent 28%),
    linear-gradient(135deg, rgba(18,24,20,.96), rgba(5,7,5,.92)) !important;
}
.scheme-a-balance-chip, .profile-stat-card, .slicer-result-card {
  border-color: rgba(201,255,0,.24) !important;
  background: rgba(201,255,0,.08) !important;
  color: var(--neo-lime) !important;
}
table { background: transparent !important; color: var(--neo-text) !important; }
th { border-bottom-color: rgba(255,255,255,.10) !important; color: rgba(247,248,242,.68) !important; background: rgba(255,255,255,.055) !important; }
td { border-bottom-color: rgba(255,255,255,.075) !important; color: rgba(247,248,242,.84) !important; }
.table-wrap { border-color: rgba(255,255,255,.11) !important; background: rgba(8,10,9,.72) !important; }
.pill, .badge, .tag, .empty-state, .codes {
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(247,248,242,.76) !important;
  background: rgba(255,255,255,.055) !important;
}
.package-price, .stat strong, .topbar-balance strong, .sidebar-credit-head strong,
.profile-stat-card strong, .history-count, .online-price, .payment-price { color: var(--neo-lime) !important; }
::selection { color: #071006; background: var(--neo-lime); }
@media (max-width: 1180px) {
  body:not(.app-route) #landingView,
  body.auth-route #landingView { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  body:not(.app-route) .shell { width: min(100vw - 28px, 430px) !important; padding-top: 12px; }
  .brand-mark { font-size: 28px !important; }
  .theme-announcement { justify-content: flex-start; padding: 12px 44px 12px 14px; gap: 10px; }
  .theme-announcement strong { font-size: 13px; }
  body:not(.app-route) .hero h1 { font-size: clamp(42px, 12vw, 58px) !important; }
  body:not(.app-route) .hero-actions .button { width: 100%; }
  .card, .panel, .subcard { border-radius: 18px !important; }
}
/* ATELIER-UI: light product portfolio style based on latest reference */
:root {
  --atelier-bg: #fbfaf7;
  --atelier-paper: rgba(255,255,255,.92);
  --atelier-ink: #151515;
  --atelier-muted: #807b73;
  --atelier-line: #e8e3db;
  --atelier-soft: #f2eee7;
  --atelier-warm: #cdbca4;
  --atelier-radius: 22px;
  --atelier-shadow: 0 34px 80px rgba(58, 48, 38, .10);
}
html { background: var(--atelier-bg) !important; }
body {
  color: var(--atelier-ink) !important;
  background:
    radial-gradient(circle at 76% 22%, rgba(196,180,156,.18), transparent 30rem),
    linear-gradient(180deg, #fff 0%, #fbfaf7 56%, #f7f3ec 100%) !important;
}
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(23,23,23,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(23,23,23,.028) 1px, transparent 1px) !important;
  background-size: 96px 96px !important;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 70%) !important;
}
body::after {
  content: "" !important;
  position: fixed !important;
  inset: auto 0 -18vh 0 !important;
  height: 36vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse at center, rgba(205,188,164,.24), transparent 70%) !important;
  filter: blur(20px) !important;
}
body:not(.app-route) .shell { width: min(1520px, calc(100vw - 84px)) !important; padding: 0 0 64px !important; }
.topbar {
  min-height: 86px !important;
  margin: 0 -42px 0 !important;
  padding: 0 42px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--atelier-line) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}
.brand {
  color: var(--atelier-ink) !important;
  gap: 10px !important;
  font-size: 22px !important;
  font-weight: 520 !important;
  letter-spacing: .02em !important;
}
.brand::after {
  content: "PRODUCT IMAGE STUDIO";
  display: block;
  margin-left: -4px;
  padding-top: 28px;
  transform: translateX(-100%);
  color: #a8a39b;
  font-size: 11px;
  letter-spacing: .16em;
  white-space: nowrap;
}
.brand-mark {
  width: auto !important;
  height: auto !important;
  color: var(--atelier-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 22px !important;
  font-weight: 520 !important;
  text-shadow: none !important;
}
.landing-nav { flex: 1 !important; gap: 68px !important; color: var(--atelier-ink) !important; }
.landing-nav a { padding: 32px 0 !important; border: 0 !important; color: var(--atelier-ink) !important; font-weight: 560 !important; }
.landing-nav a:hover, .landing-nav a[aria-current="page"] { color: #000 !important; text-shadow: none !important; }
.theme-announcement { display: none !important; }
.nav-actions { gap: 14px !important; }
.button {
  border: 1px solid #151515 !important;
  border-radius: 9px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #202020, #060606) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.16) !important;
  font-weight: 560 !important;
}
.button.secondary, .nav-actions .button.secondary, .mobile-nav summary.button.secondary {
  border-color: var(--atelier-line) !important;
  color: var(--atelier-ink) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: none !important;
}
.button.danger { border-color: #ecd3d3 !important; color: #a23a3a !important; background: #fff8f8 !important; box-shadow: none !important; }
body:not(.app-route) #landingView {
  grid-template-columns: minmax(360px, .48fr) minmax(700px, 1fr) !important;
  gap: 36px !important;
  min-height: min(720px, calc(100vh - 92px));
  align-items: center !important;
}
body:not(.app-route) .hero {
  z-index: 2;
  align-self: end;
  margin-bottom: 92px;
  padding: 0 0 0 36px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body:not(.app-route) .hero .eyebrow {
  border: 0 !important;
  padding: 0 !important;
  color: #9d978e !important;
  background: transparent !important;
  font-size: 12px !important;
  letter-spacing: .14em;
}
body:not(.app-route) .hero h1 {
  max-width: 430px !important;
  margin: 18px 0 20px !important;
  color: var(--atelier-ink) !important;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 850 !important;
  font-size: clamp(42px, 4.4vw, 64px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.045em !important;
  text-shadow: none !important;
}
body:not(.app-route) .hero h1 span, .neo-accent { color: var(--atelier-ink) !important; text-shadow: none !important; }
.hero-copy, body:not(.app-route) .hero-copy {
  max-width: 430px !important;
  color: var(--atelier-muted) !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}
body:not(.app-route) .hero-actions { margin-top: 28px !important; }
body:not(.app-route) .hero-flow {
  display: flex !important;
  gap: 28px !important;
  margin-top: 30px !important;
}
body:not(.app-route) .flow-step {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body:not(.app-route) .flow-step b {
  width: 22px !important;
  height: 34px !important;
  border: 1px solid #aaa49b !important;
  border-radius: 999px !important;
  color: transparent !important;
  background: #fff !important;
  box-shadow: none !important;
  position: relative;
}
body:not(.app-route) .flow-step b::after {
  content: "";
  width: 4px;
  height: 7px;
  border-radius: 999px;
  background: #99938b;
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
}
body:not(.app-route) .flow-step strong { display: none !important; }
body:not(.app-route) .flow-step span { color: #9b958d !important; font-size: 13px !important; }
body:not(.app-route) .landing-proof-grid,
body:not(.app-route) .visual-demo,
body:not(.app-route) .pricing-section,
body:not(.app-route) .secondary-home-info { display: none !important; }
.landing-mockup-panel {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 690px;
  padding: 20px 0 56px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.landing-mockup-panel::before { display: none !important; }
.mockup-stepper, .mockup-board, .mockup-platform-row { display: none !important; }
.atelier-showcase {
  position: relative;
  width: min(100%, 980px);
  height: 520px;
  perspective: 1800px;
}
.atelier-product-card {
  position: absolute;
  top: 120px;
  left: 50%;
  width: clamp(138px, 12.6vw, 198px);
  height: clamp(230px, 22vw, 320px);
  border: 1px solid rgba(39,39,39,.28);
  border-radius: 13px;
  overflow: hidden;
  background: #ddd;
  box-shadow: 0 30px 58px rgba(30,24,18,.20);
  transform-style: preserve-3d;
}
.atelier-product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 45%, rgba(255,255,255,.60), transparent 21%),
    linear-gradient(145deg, rgba(255,255,255,.20), transparent 42%);
}
.atelier-product-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 24%;
  width: 34%;
  height: 38%;
  border-radius: 18px 18px 9px 9px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(111,93,73,.45));
  box-shadow: 0 14px 32px rgba(65,52,39,.20);
}
.atelier-product-card span {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 1;
  color: rgba(20,20,20,.62);
  font-size: 12px;
  letter-spacing: .08em;
}
.atelier-product-card.card-1 { transform: translateX(-430px) translateY(115px) rotateY(-28deg); background: linear-gradient(135deg, #eee9df, #c9c1b2); }
.atelier-product-card.card-2 { transform: translateX(-320px) translateY(70px) rotateY(-23deg); background: linear-gradient(135deg, #f4f2ed, #b6ad9f); }
.atelier-product-card.card-3 { transform: translateX(-205px) translateY(34px) rotateY(-18deg); background: linear-gradient(135deg, #d7c6ae, #8b7257); }
.atelier-product-card.card-4 { transform: translateX(-88px) translateY(0) rotateY(-12deg); background: linear-gradient(135deg, #c8ab85, #6d5238); }
.atelier-product-card.card-5 { transform: translateX(32px) translateY(-22px) rotateY(-7deg); background: linear-gradient(135deg, #d7d4ce, #7b786f); }
.atelier-product-card.card-6 { transform: translateX(152px) translateY(-42px) rotateY(-4deg); background: linear-gradient(135deg, #eadfce, #bca17a); }
.atelier-product-card.card-7 { transform: translateX(272px) translateY(-62px) rotateY(0deg); background: linear-gradient(135deg, #e8ded0, #aa9880); }
.atelier-product-card.card-8 { transform: translateX(392px) translateY(-82px) rotateY(5deg); background: linear-gradient(135deg, #e9e1d5, #b1a28d); }
.atelier-product-card.card-9 { transform: translateX(510px) translateY(-98px) rotateY(9deg); background: linear-gradient(135deg, #d8c7ad, #8a7659); }
body.auth-route #landingView {
  max-width: 1160px !important;
  grid-template-columns: minmax(0, .95fr) 430px !important;
  min-height: calc(100vh - 92px);
}
body.auth-route #authPanel {
  padding: 34px !important;
  border: 1px solid var(--atelier-line) !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: var(--atelier-shadow) !important;
}
#authPanel::before {
  content: "Account";
  color: #9d978e;
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: .18em;
}
#authPanel h2 { color: var(--atelier-ink) !important; font-size: 28px; }
.tabs {
  border-color: var(--atelier-line) !important;
  border-radius: 999px !important;
  background: #f6f2ec !important;
}
.tab { border-radius: 999px !important; color: var(--atelier-muted) !important; }
.tab[aria-selected="true"] { color: #fff !important; background: #111 !important; box-shadow: none !important; }
.card, .panel, .subcard, .feature, .entry-card, .history-card, .package-card, .pipeline-step, .brand-card,
.stat, .trial-path-card, .flow-step, .landing-proof, .translation-item, .remix-mode-card, .batch-job-card,
.batch-item-row, .transaction-row, .history-row, .billing-order-row, .result-card, .template-card,
.scheme-a-quick, .scheme-a-recent-card, .scheme-a-tip-card, .profile-card, .slicer-card {
  border-color: var(--atelier-line) !important;
  border-radius: var(--atelier-radius) !important;
  color: var(--atelier-ink) !important;
  background: var(--atelier-paper) !important;
  box-shadow: 0 18px 44px rgba(42,35,26,.06) !important;
}
h1, h2, h3, h4, strong, label, .section-title, .feature strong, .entry-card strong, .stat strong,
.sidebar-link, .topbar-balance strong, .package-card strong, .template-card strong { color: var(--atelier-ink) !important; }
p, .feature span, .entry-card p, .history-card p, .package-summary, .package-note, .auth-only-note,
.pipeline-step span, .flow-step span, .landing-proof span, .status, small, .brand-meta-line,
.transaction-row span, .history-row span { color: var(--atelier-muted) !important; }
input, select, textarea {
  border-color: var(--atelier-line) !important;
  border-radius: 13px !important;
  color: var(--atelier-ink) !important;
  background: #fff !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: #b9b3aa !important; }
input:focus, select:focus, textarea:focus {
  border-color: #171717 !important;
  box-shadow: 0 0 0 4px rgba(23,23,23,.07) !important;
}
/* AUTH-FONT-FIX-20260701: 登录 / 注册页改为清晰高对比无衬线字体 */
body.auth-route,
body.auth-route button,
body.auth-route input,
body.auth-route select,
body.auth-route textarea {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.auth-route .brand {
  color: #111827 !important;
  font-weight: 820 !important;
  letter-spacing: -.03em !important;
}
body.auth-route .brand::after { content: none !important; }
body.auth-route .brand-mark {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: #111 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}
body.auth-route .brand-text-main { display: grid; line-height: 1.18; }
body.auth-route .brand-text-main small,
body.auth-route .hero .eyebrow,
body.auth-route #authPanel::before {
  color: #4b5563 !important;
  font-weight: 750 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
}
body.auth-route .hero h1,
body.auth-route #authPanel h2 {
  color: #111827 !important;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 850 !important;
  letter-spacing: -.045em !important;
  text-shadow: none !important;
}
body.auth-route .hero h1 { line-height: 1.12 !important; }
body.auth-route #authPanel h2 { font-size: 28px !important; line-height: 1.24 !important; }
body.auth-route label,
body.auth-route .tab {
  color: #111827 !important;
  font-weight: 750 !important;
}
body.auth-route .tab[aria-selected="true"] { color: #fff !important; }
body.auth-route .hero-copy,
body.auth-route .flow-step span,
body.auth-route #authSubtitle,
body.auth-route .auth-only-note,
body.auth-route .status {
  color: #374151 !important;
  font-weight: 600 !important;
}
body.auth-route .status.success {
  color: #047857 !important;
  font-weight: 750 !important;
}
body.auth-route .status.error {
  color: #b91c1c !important;
  font-weight: 750 !important;
}
body.app-route .shell { background: var(--atelier-bg) !important; }
body.app-route #appView { background: transparent !important; box-shadow: none !important; }
body.app-route .reference-sidebar {
  border-color: var(--atelier-line) !important;
  background: rgba(255,255,255,.74) !important;
  box-shadow: 18px 0 58px rgba(42,35,26,.06) !important;
  backdrop-filter: blur(18px);
}
.sidebar-link { color: var(--atelier-muted) !important; }
.sidebar-link:hover, .sidebar-link.active, .sidebar-link[aria-current="page"] {
  color: var(--atelier-ink) !important;
  background: #f1ece5 !important;
  border-color: var(--atelier-line) !important;
}
.sidebar-icon, .topbar-bell, .topbar-avatar {
  border-color: var(--atelier-line) !important;
  color: var(--atelier-ink) !important;
  background: #fff !important;
}
.sidebar-credit-card, .app-topbar-status, .topbar-notification-panel {
  border-color: var(--atelier-line) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 18px 44px rgba(42,35,26,.08) !important;
}
.usage-bar, .online-progress-track { background: #eee9e2 !important; }
.usage-bar span, .online-progress-track span { background: #111 !important; }
.scheme-a-hero-banner, .saas-hero-card {
  border-color: var(--atelier-line) !important;
  background:
    radial-gradient(circle at 82% 34%, rgba(205,188,164,.28), transparent 30%),
    rgba(255,255,255,.90) !important;
}
.scheme-a-balance-chip, .profile-stat-card, .slicer-result-card {
  border-color: var(--atelier-line) !important;
  background: #f6f2ec !important;
  color: var(--atelier-ink) !important;
}
table { background: #fff !important; color: var(--atelier-ink) !important; }
th { border-bottom-color: var(--atelier-line) !important; color: #8d877d !important; background: #f8f5f0 !important; }
td { border-bottom-color: #eee9e2 !important; color: var(--atelier-ink) !important; }
.table-wrap { border-color: var(--atelier-line) !important; background: #fff !important; }
.pill, .badge, .tag, .empty-state, .codes {
  border-color: var(--atelier-line) !important;
  color: var(--atelier-muted) !important;
  background: #f8f5f0 !important;
}
.package-price, .stat strong, .topbar-balance strong, .sidebar-credit-head strong,
.profile-stat-card strong, .history-count, .online-price, .payment-price { color: var(--atelier-ink) !important; }
.mobile-nav-menu { border-color: var(--atelier-line) !important; background: #fff !important; box-shadow: var(--atelier-shadow) !important; }
::selection { color: #fff; background: #111; }
@media (max-width: 1180px) {
  body:not(.app-route) #landingView, body.auth-route #landingView { grid-template-columns: 1fr !important; }
  .landing-mockup-panel { min-height: 520px; }
  .atelier-showcase { transform: scale(.82); transform-origin: center; }
}
@media (max-width: 640px) {
  body:not(.app-route) .shell { width: min(100vw - 28px, 430px) !important; }
  .topbar { margin: 0 -14px !important; padding: 0 18px !important; }
  .brand::after, .landing-nav { display: none !important; }
  body:not(.app-route) .hero { margin-bottom: 0; padding: 38px 0 0 !important; }
  body:not(.app-route) .hero h1 { font-size: 42px !important; }
  body:not(.app-route) .hero-flow { flex-direction: column; gap: 12px !important; }
  .landing-mockup-panel { min-height: 420px; padding: 0 !important; }
  .atelier-showcase { height: 390px; transform: scale(.58); }
  .card, .panel, .subcard { border-radius: 18px !important; }
}


/* HOME-GALLERY-20260630: minimalist finished-work gallery homepage */
body:not(.auth-route):not(.app-route) {
  color: #171717 !important;
  background:
    radial-gradient(circle at 80% 18%, rgba(206, 211, 219, .32), transparent 24rem),
    linear-gradient(180deg, #fbfaf7 0%, #f4f2ee 100%) !important;
  overflow-x: hidden;
}
body:not(.auth-route):not(.app-route)::before,
body:not(.auth-route):not(.app-route)::after { display: none !important; }
body:not(.auth-route):not(.app-route) .shell {
  width: min(1280px, calc(100vw - 64px)) !important;
  padding: 0 0 72px !important;
}
body:not(.auth-route):not(.app-route) .theme-announcement,
body:not(.auth-route):not(.app-route) #landingView > .hero,
body:not(.auth-route):not(.app-route) #landingMockupPanel {
  display: none !important;
}
body:not(.auth-route):not(.app-route) .topbar {
  position: relative;
  z-index: 8;
  min-height: 70px;
  margin: 0 !important;
  padding: 0 4px;
  border-bottom: 1px solid rgba(23, 23, 23, .08);
  background: rgba(251, 250, 247, .78) !important;
  backdrop-filter: blur(18px);
}
body:not(.auth-route):not(.app-route) .brand {
  gap: 12px;
  color: #111 !important;
  font-weight: 780;
  letter-spacing: -.04em;
}
body:not(.auth-route):not(.app-route) .brand-mark {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #111 !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
body:not(.auth-route):not(.app-route) .brand-text-main { display: grid; line-height: 1.18; }
body:not(.auth-route):not(.app-route) .brand-text-main small {
  margin-top: 2px;
  color: rgba(23, 23, 23, .45);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .16em;
}
body:not(.auth-route):not(.app-route) .landing-nav {
  display: flex !important;
  gap: clamp(20px, 4vw, 54px) !important;
  color: rgba(23, 23, 23, .72) !important;
}
body:not(.auth-route):not(.app-route) .landing-nav a {
  padding: 24px 0 20px !important;
  border: 0 !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  text-decoration: none !important;
}
body:not(.auth-route):not(.app-route) .landing-nav a:hover,
body:not(.auth-route):not(.app-route) .landing-nav a[aria-current="page"] {
  color: #111 !important;
  text-shadow: none !important;
}
body:not(.auth-route):not(.app-route) .nav-actions { gap: 8px !important; }
body:not(.auth-route):not(.app-route) .nav-actions .button {
  min-height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(23,23,23,.12) !important;
  background: rgba(255,255,255,.72) !important;
  color: #171717 !important;
  box-shadow: none !important;
}
body:not(.auth-route):not(.app-route) .nav-actions .button:not(.secondary) {
  background: #111 !important;
  color: #fff !important;
}
body:not(.auth-route):not(.app-route) #landingView {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  grid-template-columns: 1fr !important;
}
body.auth-route .gallery-home,
body.app-route .gallery-home { display: none !important; }
.gallery-home {
  position: relative;
  min-height: calc(100vh - 70px);
  isolation: isolate;
  --home-parallax-x: 0px;
  --home-parallax-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --gallery-scroll-y: 0px;
}
.gallery-hero-stage {
  min-height: min(720px, calc(100vh - 70px));
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(620px, 1.38fr);
  gap: clamp(12px, 3vw, 44px);
  align-items: center;
  padding: clamp(28px, 5vh, 58px) 0 34px;
}
.gallery-copy {
  position: relative;
  z-index: 3;
  align-self: end;
  padding: 0 0 clamp(34px, 8vh, 88px) clamp(4px, 2vw, 24px);
  max-width: 480px;
}
.gallery-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(23,23,23,.52);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.gallery-kicker::before {
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(23,23,23,.26);
}
.gallery-copy h1 {
  margin: 18px 0 18px;
  color: #111;
  font-size: clamp(40px, 5vw, 64px);
  line-height: .98;
  letter-spacing: -.06em;
  font-weight: 820;
}
.gallery-copy p {
  max-width: 390px;
  margin: 0;
  color: rgba(23, 23, 23, .62) !important;
  font-size: 15px;
  line-height: 1.9;
}
.gallery-home-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.gallery-home-actions .button {
  min-height: 44px !important;
  border-radius: 999px !important;
  padding: 0 20px !important;
  border: 1px solid #111 !important;
  background: #111 !important;
  color: #fff !important;
  box-shadow: 0 18px 44px rgba(17,17,17,.16) !important;
}
.gallery-text-link {
  color: rgba(23,23,23,.72) !important;
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
  border-bottom: 1px solid rgba(23,23,23,.24);
}
.gallery-installation {
  position: relative;
  height: min(620px, calc(100vh - 118px));
  min-height: 520px;
  perspective: 1280px;
  transform-style: preserve-3d;
  overflow: visible;
}
.gallery-installation::before {
  content: "";
  position: absolute;
  inset: 18% 2% 12% 12%;
  background: radial-gradient(circle, rgba(10,10,10,.08), transparent 56%);
  filter: blur(34px);
  opacity: .62;
  pointer-events: none;
}
.gallery-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    translate3d(0, calc(var(--gallery-scroll-y) * -1), 0)
    rotateX(var(--tilt-y))
    rotateY(var(--tilt-x));
  transition: transform .18s ease-out;
}
.gallery-card {
  position: absolute;
  left: 43%;
  top: 50%;
  width: clamp(142px, 13.2vw, 178px);
  height: clamp(188px, 17vw, 232px);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(28,31,36,.88), rgba(9,10,13,.72));
  box-shadow: 0 28px 70px rgba(13,15,20,.24), inset 0 1px 0 rgba(255,255,255,.3);
  overflow: hidden;
  transform-style: preserve-3d;
  transform:
    translate3d(
      calc(var(--x) + var(--home-parallax-x)),
      calc(var(--y) + var(--home-parallax-y)),
      var(--z)
    )
    rotateY(var(--ry))
    rotateX(var(--rx))
    scale(var(--s));
  opacity: var(--o);
  animation: galleryUnfold .9s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i) * 68ms);
}
.gallery-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.26), transparent 36%, rgba(255,255,255,.08) 62%, transparent 78%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.gallery-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,.13);
  pointer-events: none;
}
.gallery-card:hover {
  opacity: 1;
  box-shadow: 0 34px 78px rgba(13,15,20,.34), inset 0 1px 0 rgba(255,255,255,.36);
}
.gallery-product {
  position: relative;
  min-height: 0;
  border-radius: 13px;
  overflow: hidden;
  background: linear-gradient(160deg, #f4f0e7, #aeb7c5 48%, #171a21);
}
.gallery-product::before,
.gallery-product::after {
  content: "";
  position: absolute;
  display: block;
}
.gallery-product small {
  position: absolute;
  left: 10px;
  bottom: 9px;
  z-index: 2;
  color: rgba(255,255,255,.76);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.product-skincare { background: radial-gradient(circle at 72% 24%, #f2e2c4, transparent 28%), linear-gradient(150deg, #efe9dc, #d4c6b6 45%, #151515); }
.product-skincare::before { width: 40px; height: 104px; left: 52%; top: 25%; border-radius: 14px 14px 8px 8px; background: linear-gradient(90deg, #fff, #d7d2c8); box-shadow: -42px 28px 0 -8px rgba(25,25,25,.34); }
.product-sneaker { background: linear-gradient(135deg, #e8edf0, #95a7b8 48%, #20242d); }
.product-sneaker::before { width: 102px; height: 48px; left: 21%; top: 48%; border-radius: 56px 62px 24px 18px; background: linear-gradient(135deg, #f8f8f2, #cfd6df); transform: rotate(-10deg); box-shadow: 0 16px 0 -8px rgba(0,0,0,.28); }
.product-bag { background: linear-gradient(145deg, #2a2730, #775a4c 52%, #e3c3a0); }
.product-bag::before { width: 80px; height: 82px; left: 30%; top: 38%; border-radius: 18px 18px 24px 24px; background: linear-gradient(135deg, #2b1d1d, #9a6953); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.product-coffee { background: linear-gradient(160deg, #f4e7cd, #7e5239 48%, #20130f); }
.product-coffee::before { width: 72px; height: 106px; left: 34%; top: 24%; border-radius: 10px 10px 16px 16px; background: linear-gradient(90deg, #25130d, #c89a64 58%, #efe0bf); transform: rotate(4deg); }
.product-phone { background: radial-gradient(circle at 70% 20%, #79f0ff, transparent 26%), linear-gradient(150deg, #111827, #37516a 52%, #c9dde4); }
.product-phone::before { width: 62px; height: 114px; left: 37%; top: 20%; border-radius: 18px; background: linear-gradient(145deg, #10151e, #1f3444); box-shadow: inset 0 0 0 3px rgba(255,255,255,.15); }
.product-jewelry { background: radial-gradient(circle at 52% 48%, #f8e7ad, transparent 24%), linear-gradient(145deg, #f7f3eb, #9e8965 52%, #191814); }
.product-jewelry::before { width: 84px; height: 84px; left: 30%; top: 34%; border-radius: 50%; border: 10px solid rgba(246,221,152,.86); box-shadow: 0 0 30px rgba(255,219,130,.44); }
.product-perfume { background: linear-gradient(145deg, #e7f0ef, #85a9ad 46%, #1e2228); }
.product-perfume::before { width: 64px; height: 96px; left: 37%; top: 30%; border-radius: 18px 18px 10px 10px; background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(142,178,184,.54)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.36); }
.product-fashion { background: linear-gradient(140deg, #f2eee5, #b78d81 42%, #201f25); }
.product-fashion::before { width: 130px; height: 96px; left: 13%; top: 35%; border-radius: 48% 52% 14px 14px; background: linear-gradient(135deg, #efe6dc, #9d726c); clip-path: polygon(18% 0, 44% 18%, 62% 18%, 84% 0, 100% 100%, 0 100%); }
.product-food { background: linear-gradient(145deg, #f8eac3, #de8c4a 52%, #2f1b13); }
.product-food::before { width: 76px; height: 98px; left: 35%; top: 27%; border-radius: 18px; background: linear-gradient(135deg, #f7cf71, #bc5130); box-shadow: 0 18px 0 -10px rgba(0,0,0,.28); }
.product-home { background: linear-gradient(150deg, #efede4, #879a88 48%, #171d18); }
.product-home::before { width: 86px; height: 64px; left: 26%; top: 43%; border-radius: 18px 18px 8px 8px; background: linear-gradient(135deg, #e8dfcc, #6d7b63); box-shadow: 34px -24px 0 -18px rgba(255,255,255,.52); }
.gallery-card-meta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: rgba(255,255,255,.78);
  font-size: 11px;
}
.gallery-card-meta strong { color: #fff; font-size: 12px; }
.gallery-card-meta span { color: rgba(255,255,255,.48); }
@keyframes galleryUnfold {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg) scale(.72);
  }
  to {
    opacity: var(--o);
    transform:
      translate3d(
        calc(var(--x) + var(--home-parallax-x)),
        calc(var(--y) + var(--home-parallax-y)),
        var(--z)
      )
      rotateY(var(--ry))
      rotateX(var(--rx))
      scale(var(--s));
  }
}
.gallery-scroll-note {
  position: absolute;
  right: 18px;
  bottom: 26px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(23,23,23,.44);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .08em;
}
.gallery-scroll-note::before {
  content: "";
  width: 42px;
  height: 1px;
  background: rgba(23,23,23,.22);
}
.gallery-section-switch {
  position: fixed;
  right: max(24px, calc((100vw - 1280px) / 2 + 10px));
  top: 48%;
  z-index: 12;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(23,23,23,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(17,17,17,.10);
}
.gallery-section-switch button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(17,17,17,.08);
  color: rgba(17,17,17,.72);
  cursor: pointer;
  font-size: 18px;
}
.gallery-section-switch button:hover { background: #111; color: #fff; }
.gallery-works {
  margin: 8px 0 0;
  padding: 34px 0 24px;
  border-top: 1px solid rgba(23,23,23,.08);
}
.gallery-works-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin-bottom: 18px;
}
.gallery-works-head h2 {
  margin: 0;
  color: #111;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -.06em;
}
.gallery-works-head p {
  max-width: 380px;
  margin: 0;
  color: rgba(23,23,23,.56) !important;
  font-size: 13px;
  line-height: 1.7;
}
.gallery-works-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.gallery-work-card {
  min-height: 246px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(23,23,23,.08);
  border-radius: 24px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 18px 54px rgba(17,17,17,.07);
}
.gallery-work-card .gallery-product { min-height: 176px; }
.gallery-work-card strong { color: #111; font-size: 14px; }
.gallery-work-card span { color: rgba(23,23,23,.48); font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .gallery-card { animation: none !important; transition: none !important; }
  .gallery-track { transition: none !important; }
}
@media (max-width: 980px) {
  body:not(.auth-route):not(.app-route) .shell { width: min(100vw - 30px, 760px) !important; }
  body:not(.auth-route):not(.app-route) .landing-nav { display: none !important; }
  .gallery-hero-stage { grid-template-columns: 1fr; min-height: auto; padding-top: 28px; }
  .gallery-copy { padding: 0; max-width: 680px; align-self: auto; }
  .gallery-copy h1 { font-size: clamp(48px, 12vw, 82px); }
  .gallery-installation {
    height: 290px;
    min-height: 290px;
    margin: 10px -15px 0;
    overflow-x: auto;
    overflow-y: hidden;
    perspective: none;
    scrollbar-width: none;
  }
  .gallery-installation::-webkit-scrollbar { display: none; }
  .gallery-installation::before { display: none; }
  .gallery-track {
    position: relative;
    inset: auto;
    height: 100%;
    display: flex;
    gap: 12px;
    width: max-content;
    padding: 22px 15px 28px;
    transform: none !important;
  }
  .gallery-card {
    position: relative;
    left: auto;
    top: auto;
    width: 168px;
    height: 224px;
    flex: 0 0 168px;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
  .gallery-section-switch { display: none; }
  .gallery-scroll-note { position: static; margin: 6px 0 20px; }
  .gallery-works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body:not(.auth-route):not(.app-route) .shell { width: min(100vw - 24px, 430px) !important; padding-bottom: 40px !important; }
  body:not(.auth-route):not(.app-route) .topbar { min-height: 62px; }
  body:not(.auth-route):not(.app-route) .brand span:last-child { font-size: 14px; }
  body:not(.auth-route):not(.app-route) .nav-actions { display: none !important; }
  body:not(.auth-route):not(.app-route) .mobile-nav { display: block !important; }
  .gallery-copy h1 { margin-top: 16px; font-size: clamp(44px, 14vw, 64px); }
  .gallery-copy p { font-size: 14px; }
  .gallery-home-actions .button, .gallery-text-link { width: 100%; justify-content: center; text-align: center; }
  .gallery-works-head { align-items: start; flex-direction: column; }
  .gallery-works-grid { grid-template-columns: 1fr; }
}

/* ATELIER-UI final header cleanup */
.brand::after { display: none !important; content: none !important; }
body.app-route .brand { gap: 10px !important; }
body.app-route .brand-text-main { display: grid; line-height: 1.12; }
body.app-route .brand-text-main small { color: #aaa39a; font-size: 10px; letter-spacing: .14em; }
/* HEADER-HOME-FIX-20260630: brand/home route and app chrome seam cleanup */
body.app-route .shell {
  grid-template-columns: 232px minmax(0, 1fr) !important;
  grid-template-rows: 64px minmax(0, 1fr) !important;
  gap: 0 !important;
  min-height: 100vh !important;
  background: var(--atelier-bg) !important;
}
body.app-route .topbar {
  height: 64px !important;
  min-height: 64px !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--atelier-line) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: none !important;
}
body.app-route .reference-sidebar {
  grid-column: 1 !important;
  grid-row: 2 !important;
  top: 64px !important;
  width: 232px !important;
  height: calc(100vh - 64px) !important;
  margin: 0 !important;
  border-top: 0 !important;
  border-right: 1px solid var(--atelier-line) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: none !important;
}
body.app-route #appView {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
}
body.app-route .brand { gap: 9px !important; white-space: nowrap; }
body.app-route .brand-mark { font-size: 18px !important; font-weight: 760 !important; }
/* LEFT-TOP-STICKY-FIX-20260701: keep topbar visible so sidebar top offset does not leave a blank corner while scrolling. */
body.app-route .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
}
body.app-route .reference-sidebar {
  z-index: 60 !important;
}
body:not(.auth-route):not(.app-route) .gallery-card {
  top: 38% !important;
  left: 40% !important;
  width: clamp(150px, 14vw, 190px) !important;
  height: clamp(210px, 19vw, 258px) !important;
}

/* HOME-SAMPLE-WORKS-20260630: local generated sample works for homepage */
.gallery-product {
  isolation: isolate;
  background:
    var(--work-spark, radial-gradient(circle at 72% 22%, rgba(255,255,255,.56), transparent 18%)),
    var(--work-bg, linear-gradient(145deg, #f6f0e5, #97a3ad 54%, #1f2328)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.44),
    inset 0 -46px 80px rgba(0,0,0,.18);
}
.gallery-product::before {
  z-index: 2;
  width: var(--obj-w, 72px) !important;
  height: var(--obj-h, 108px) !important;
  left: var(--obj-left, 42%) !important;
  top: var(--obj-top, 26%) !important;
  border: var(--obj-border, 0) !important;
  border-radius: var(--obj-radius, 18px) !important;
  background: var(--obj-bg, linear-gradient(135deg, #fff, #cbc5b8)) !important;
  box-shadow: var(--obj-shadow, 0 26px 40px rgba(0,0,0,.24)) !important;
  clip-path: var(--obj-clip, none) !important;
  transform: var(--obj-transform, none) !important;
}
.gallery-product::after {
  z-index: 3;
  content: var(--work-copy, "AI SAMPLE") !important;
  left: 12px !important;
  top: 12px !important;
  max-width: calc(100% - 24px);
  padding: 5px 8px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: #111;
  font-size: 10px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  backdrop-filter: blur(12px);
}
.gallery-product small {
  left: 12px;
  bottom: 11px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #111 !important;
  text-shadow: none;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  backdrop-filter: blur(12px);
}
.product-skincare {
  --work-copy: "HYDRATION SET";
  --work-bg: linear-gradient(145deg, #fff7ea 0%, #e7d8c4 45%, #5a554c 100%);
  --work-spark: radial-gradient(circle at 72% 22%, rgba(255,238,189,.92), transparent 17%), linear-gradient(115deg, rgba(255,255,255,.36), transparent 28%);
  --obj-w: 56px;
  --obj-h: 126px;
  --obj-left: 52%;
  --obj-top: 28%;
  --obj-radius: 17px 17px 11px 11px;
  --obj-bg: linear-gradient(90deg, #fffdf6 0%, #f2eadb 45%, #cdbf9c 100%);
  --obj-shadow: -46px 34px 0 -12px rgba(48,44,38,.42), -30px 14px 28px rgba(0,0,0,.16), 0 24px 42px rgba(0,0,0,.24);
}
.product-sneaker {
  --work-copy: "STREET SCENE";
  --work-bg: linear-gradient(135deg, #eef6f7 0%, #a7b9c4 48%, #1f252c 100%);
  --work-spark: radial-gradient(circle at 18% 18%, rgba(255,255,255,.8), transparent 20%), linear-gradient(120deg, rgba(255,255,255,.36), transparent 31%);
  --obj-w: 118px;
  --obj-h: 58px;
  --obj-left: 22%;
  --obj-top: 48%;
  --obj-radius: 60px 64px 26px 20px;
  --obj-bg: linear-gradient(135deg, #ffffff 0%, #dbe3ea 62%, #8fa1ac 100%);
  --obj-shadow: 0 18px 0 -8px rgba(33,42,50,.36), 18px 25px 34px rgba(0,0,0,.22);
  --obj-transform: rotate(-10deg);
}
.product-bag {
  --work-copy: "CAMPAIGN BAG";
  --work-bg: linear-gradient(145deg, #f2d3bd 0%, #8a6252 48%, #2a1f22 100%);
  --work-spark: radial-gradient(circle at 76% 26%, rgba(255,208,164,.62), transparent 20%);
  --obj-w: 86px;
  --obj-h: 92px;
  --obj-left: 34%;
  --obj-top: 36%;
  --obj-radius: 24px 24px 28px 28px;
  --obj-bg: linear-gradient(135deg, #321e1e 0%, #976650 58%, #d8a277 100%);
  --obj-shadow: inset 0 0 0 2px rgba(255,255,255,.20), 0 -28px 0 -20px rgba(45,28,26,.9), 0 28px 45px rgba(0,0,0,.28);
}
.product-coffee {
  --work-copy: "PACK SHOT";
  --work-bg: linear-gradient(160deg, #f9e5bd 0%, #9e6946 47%, #27140d 100%);
  --work-spark: radial-gradient(circle at 78% 24%, rgba(255,223,166,.74), transparent 19%);
  --obj-w: 78px;
  --obj-h: 120px;
  --obj-left: 38%;
  --obj-top: 24%;
  --obj-radius: 13px 13px 18px 18px;
  --obj-bg: linear-gradient(90deg, #29130b 0%, #b88452 56%, #f5ddb0 100%);
  --obj-shadow: -26px 26px 0 -14px rgba(77,38,22,.44), 0 26px 45px rgba(0,0,0,.30);
  --obj-transform: rotate(4deg);
}
.product-phone {
  --work-copy: "DEVICE DETAIL";
  --work-bg: linear-gradient(150deg, #101827 0%, #315066 54%, #d0e7ee 100%);
  --work-spark: radial-gradient(circle at 72% 22%, rgba(104,238,255,.88), transparent 18%), radial-gradient(circle at 30% 74%, rgba(255,255,255,.22), transparent 20%);
  --obj-w: 68px;
  --obj-h: 126px;
  --obj-left: 42%;
  --obj-top: 20%;
  --obj-radius: 20px;
  --obj-bg: linear-gradient(145deg, #10151e 0%, #20394a 58%, #57a9be 100%);
  --obj-shadow: inset 0 0 0 3px rgba(255,255,255,.18), 0 24px 46px rgba(0,0,0,.34);
}
.product-jewelry {
  --work-copy: "LUXURY LIGHT";
  --work-bg: linear-gradient(145deg, #fff9ee 0%, #b09b74 51%, #1d1b17 100%);
  --work-spark: radial-gradient(circle at 54% 48%, rgba(255,232,157,.88), transparent 26%), linear-gradient(115deg, rgba(255,255,255,.38), transparent 28%);
  --obj-w: 92px;
  --obj-h: 92px;
  --obj-left: 30%;
  --obj-top: 34%;
  --obj-radius: 50%;
  --obj-border: 11px solid rgba(250,224,148,.92);
  --obj-bg: transparent;
  --obj-shadow: 0 0 34px rgba(255,219,130,.50), 0 24px 42px rgba(0,0,0,.20);
}
.product-perfume {
  --work-copy: "CLEAN AD";
  --work-bg: linear-gradient(145deg, #ecfaf8 0%, #8fb5b8 46%, #20262d 100%);
  --work-spark: radial-gradient(circle at 68% 23%, rgba(255,255,255,.78), transparent 20%);
  --obj-w: 70px;
  --obj-h: 112px;
  --obj-left: 39%;
  --obj-top: 28%;
  --obj-radius: 20px 20px 12px 12px;
  --obj-bg: linear-gradient(135deg, rgba(255,255,255,.88) 0%, rgba(166,206,211,.58) 100%);
  --obj-shadow: inset 0 0 0 2px rgba(255,255,255,.48), 0 24px 42px rgba(0,0,0,.24), 0 -22px 0 -16px rgba(255,255,255,.84);
}
.product-fashion {
  --work-copy: "DETAIL SET";
  --work-bg: linear-gradient(140deg, #fff2e8 0%, #bd9187 44%, #252128 100%);
  --work-spark: radial-gradient(circle at 78% 20%, rgba(255,224,205,.62), transparent 19%);
  --obj-w: 136px;
  --obj-h: 104px;
  --obj-left: 17%;
  --obj-top: 42%;
  --obj-radius: 34px 34px 15px 15px;
  --obj-bg: linear-gradient(135deg, #f4e1d5 0%, #ad7b74 100%);
  --obj-clip: polygon(17% 0, 42% 18%, 61% 18%, 84% 0, 100% 100%, 0 100%);
  --obj-shadow: 0 25px 45px rgba(0,0,0,.26);
}
.product-food {
  --work-copy: "STORE SKU";
  --work-bg: linear-gradient(145deg, #fff2c9 0%, #e68d48 52%, #321b12 100%);
  --work-spark: radial-gradient(circle at 22% 22%, rgba(255,255,255,.55), transparent 18%);
  --obj-w: 82px;
  --obj-h: 108px;
  --obj-left: 38%;
  --obj-top: 26%;
  --obj-radius: 20px;
  --obj-bg: linear-gradient(135deg, #ffd47b 0%, #c55332 100%);
  --obj-shadow: 0 20px 0 -10px rgba(0,0,0,.26), 0 27px 46px rgba(0,0,0,.28);
}
.product-home {
  --work-copy: "HOME SET";
  --work-bg: linear-gradient(150deg, #f7f1e5 0%, #91a18d 48%, #182018 100%);
  --work-spark: radial-gradient(circle at 72% 22%, rgba(255,255,255,.56), transparent 18%);
  --obj-w: 98px;
  --obj-h: 76px;
  --obj-left: 27%;
  --obj-top: 45%;
  --obj-radius: 22px 22px 10px 10px;
  --obj-bg: linear-gradient(135deg, #efe2cb 0%, #748565 100%);
  --obj-shadow: 38px -28px 0 -18px rgba(255,255,255,.58), 0 24px 42px rgba(0,0,0,.24);
}
.gallery-work-card {
  position: relative;
  min-height: 332px;
  padding: 12px 12px 14px;
  border-color: rgba(17,17,17,.10);
  background: rgba(255,255,255,.82);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gallery-work-card:hover {
  transform: translateY(-4px);
  border-color: rgba(17,17,17,.20);
  box-shadow: 0 24px 68px rgba(17,17,17,.12);
}
.gallery-work-card .gallery-product {
  min-height: 214px;
  border-radius: 18px;
}
.gallery-work-copy {
  display: grid;
  gap: 5px;
  padding: 0 2px;
}
.gallery-work-card strong {
  color: #111 !important;
  font-size: 15px;
  line-height: 1.3;
}
.gallery-work-card span {
  color: #3f3f3f !important;
  font-size: 12px;
  line-height: 1.55;
}
.gallery-work-meta {
  display: inline-flex;
  width: fit-content;
  margin-top: 2px;
  padding: 4px 8px;
  border: 1px solid rgba(17,17,17,.10);
  border-radius: 999px;
  background: #f7f4ef;
  color: #171717 !important;
  font-size: 11px !important;
  font-weight: 760;
}
@media (max-width: 980px) {
  .gallery-work-card { min-height: 314px; }
  .gallery-work-card .gallery-product { min-height: 196px; }
}

/* LANDING-PORTFOLIO-SHOWCASE-20260703: video-like portfolio hero controls and stronger card depth. */
body:not(.auth-route):not(.app-route) .gallery-hero-stage {
  min-height: min(760px, calc(100vh - 70px));
}
body:not(.auth-route):not(.app-route) .gallery-installation {
  height: min(650px, calc(100vh - 110px));
}
body:not(.auth-route):not(.app-route) .gallery-card {
  cursor: pointer;
  transition:
    transform .42s cubic-bezier(.16, 1, .3, 1),
    opacity .32s ease,
    box-shadow .24s ease;
}
body:not(.auth-route):not(.app-route) .gallery-card[data-active="true"] {
  box-shadow: 0 38px 88px rgba(13,15,20,.32), inset 0 1px 0 rgba(255,255,255,.38);
}
.gallery-active-caption {
  position: absolute;
  left: clamp(22px, 8vw, 92px);
  bottom: 18px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid rgba(23,23,23,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: rgba(23,23,23,.72);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .04em;
  backdrop-filter: blur(14px);
}
.gallery-active-caption::before {
  content: "";
  width: 30px;
  height: 1px;
  background: rgba(23,23,23,.22);
}
.gallery-work-card:nth-child(n+5) {
  display: none;
}
@media (max-width: 980px) {
  .gallery-active-caption { display: none; }
  body:not(.auth-route):not(.app-route) .gallery-hero-stage { min-height: auto; }
  body:not(.auth-route):not(.app-route) .gallery-installation {
    height: 290px;
    min-height: 290px;
  }
  .gallery-work-card:nth-child(n+5) { display: grid; }
}

/* GLASS-HOVER-PULL-20260703: glass frame + hover-to-pull interaction for landing showcase. */
body:not(.auth-route):not(.app-route) .gallery-card {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.54);
  border-top-color: rgba(255,255,255,.78);
  border-left-color: rgba(255,255,255,.70);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.10) 38%, rgba(25,30,35,.42) 100%),
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(10,14,18,.20));
  box-shadow:
    0 30px 76px rgba(13,15,20,.24),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 -26px 46px rgba(5,8,12,.24);
  backdrop-filter: blur(16px) saturate(1.32);
}
body:not(.auth-route):not(.app-route) .gallery-card::before {
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(105deg, rgba(255,255,255,.56) 0%, rgba(255,255,255,.18) 18%, transparent 34%, rgba(255,255,255,.22) 48%, transparent 66%),
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.46), transparent 22%);
  mix-blend-mode: screen;
  opacity: .72;
}
body:not(.auth-route):not(.app-route) .gallery-card::after {
  z-index: 6;
  inset: 1px;
  border-radius: 19px;
  border: 1px solid rgba(255,255,255,.30);
  box-shadow:
    inset 8px 0 16px rgba(255,255,255,.14),
    inset -8px 0 16px rgba(0,0,0,.16),
    inset 0 10px 24px rgba(255,255,255,.10);
}
body:not(.auth-route):not(.app-route) .gallery-card[data-active="true"] {
  border-color: rgba(255,255,255,.82);
  box-shadow:
    0 44px 102px rgba(13,15,20,.34),
    0 0 0 1px rgba(255,255,255,.20),
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -30px 54px rgba(5,8,12,.22);
}
body:not(.auth-route):not(.app-route) .gallery-card[data-active="true"] .gallery-product-photo {
  transform: scale(1.035);
}
body:not(.auth-route):not(.app-route) .gallery-card[data-hover-pulled="true"] {
  opacity: 1 !important;
  z-index: 40 !important;
  transform:
    translate3d(
      calc(var(--x) + var(--home-parallax-x)),
      calc(var(--y) + var(--home-parallax-y)),
      calc(var(--z) + 130px)
    )
    rotateY(-8deg)
    rotateX(2deg)
    scale(calc(var(--s) + .08)) !important;
}
body:not(.auth-route):not(.app-route) .gallery-card .gallery-product {
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 14px 34px rgba(0,0,0,.20);
}
body:not(.auth-route):not(.app-route) .gallery-card .gallery-card-meta {
  padding: 0 2px 1px;
  color: rgba(17,17,17,.64);
}
body:not(.auth-route):not(.app-route) .gallery-card .gallery-card-meta strong {
  color: rgba(17,17,17,.82);
  text-shadow: 0 1px 0 rgba(255,255,255,.28);
}
body:not(.auth-route):not(.app-route) .gallery-card .gallery-card-meta span {
  color: rgba(17,17,17,.42);
}


/* HOME-REAL-PRODUCTS-20260630: real generated product photos inside sample cards */
.gallery-product.has-product-photo {
  background: #eee9df !important;
}
.gallery-product-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  user-select: none;
  pointer-events: none;
}
.gallery-product.has-product-photo::before {
  content: "" !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 34%, rgba(0,0,0,.18)),
    radial-gradient(circle at 74% 22%, rgba(255,255,255,.22), transparent 28%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
  clip-path: none !important;
  transform: none !important;
  pointer-events: none;
}
.gallery-product.has-product-photo::after,
.gallery-product.has-product-photo small {
  z-index: 4;
}
.gallery-work-card .gallery-product.has-product-photo::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 42%, rgba(0,0,0,.10)),
    radial-gradient(circle at 76% 18%, rgba(255,255,255,.18), transparent 26%) !important;
}
.gallery-card .gallery-product.has-product-photo::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 36%, rgba(0,0,0,.22)),
    radial-gradient(circle at 76% 22%, rgba(255,255,255,.20), transparent 26%) !important;
}


/* WORKSPACE-READABILITY-20260630: black readable text and clear thumbnails on light workspace */
body.app-route {
  --workspace-readable-ink: #111111;
  --workspace-readable-muted: #2f2f2f;
  --workspace-readable-border: #d8d2c8;
  --workspace-readable-soft: #f7f4ef;
  --workspace-readable-danger: #9f1239;
}
body.app-route .status,
body.app-route .status.success,
body.app-route .status.export-status,
body.app-route .online-status-badge,
body.app-route .online-status-badge.running,
body.app-route .online-status-badge.succeeded,
body.app-route .field-hint,
body.app-route .history-row span,
body.app-route .history-batch-group > summary span,
body.app-route .transaction-row span,
body.app-route .batch-item-row span,
body.app-route .online-task-card span,
body.app-route .online-result-cell span,
body.app-route .package-note,
body.app-route .package-summary,
body.app-route .auth-only-note,
body.app-route small,
body.app-route .brand-meta-line,
body.app-route .export-status {
  color: var(--workspace-readable-ink) !important;
}
body.app-route .status,
body.app-route .field-hint,
body.app-route .export-status {
  font-size: 13px !important;
  line-height: 1.65 !important;
  font-weight: 650 !important;
}
body.app-route .status.success {
  color: var(--workspace-readable-ink) !important;
  text-shadow: none !important;
}
body.app-route .online-status-badge,
body.app-route .online-status-badge.running,
body.app-route .online-status-badge.succeeded {
  border: 1px solid var(--workspace-readable-border) !important;
  color: var(--workspace-readable-ink) !important;
  background: #fff !important;
}
body.app-route .status.error,
body.app-route .field-hint.error,
body.app-route .export-status.error {
  color: var(--workspace-readable-danger) !important;
  font-weight: 760 !important;
}
body.app-route .pill,
body.app-route .badge,
body.app-route .tag,
body.app-route .empty-state,
body.app-route .codes {
  border-color: var(--workspace-readable-border) !important;
  color: var(--workspace-readable-ink) !important;
  background: #fff !important;
}
body.app-route .pill.required,
body.app-route .badge.required,
body.app-route .tag.required {
  border-color: #111 !important;
  color: #111 !important;
  background: var(--workspace-readable-soft) !important;
}
body.app-route .history-preview,
body.app-route .result-preview,
body.app-route .batch-result-thumb,
body.app-route .online-source-thumb,
body.app-route .online-task-thumb,
body.app-route .online-result-cell,
body.app-route .brand-thumb,
body.app-route .slicer-work-thumb,
body.app-route .slicer-source-preview,
body.app-route .slicer-result-thumb {
  border: 1px solid var(--workspace-readable-border) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(17,17,17,.035) 0 25%, transparent 25% 50%, rgba(17,17,17,.035) 50% 75%, transparent 75%),
    #fff !important;
  background-size: 18px 18px, auto !important;
  color: var(--workspace-readable-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9) !important;
}
body.app-route .history-preview .field-hint,
body.app-route .result-preview .field-hint,
body.app-route .batch-result-thumb .field-hint,
body.app-route .online-source-thumb .field-hint,
body.app-route .online-task-thumb .field-hint,
body.app-route .online-result-cell .field-hint,
body.app-route .brand-thumb span,
body.app-route .slicer-work-thumb .field-hint,
body.app-route .slicer-source-preview .field-hint,
body.app-route .slicer-result-thumb .field-hint {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 68px;
  max-width: calc(100% - 14px);
  padding: 7px 9px;
  border: 1px solid var(--workspace-readable-border);
  border-radius: 999px;
  color: var(--workspace-readable-ink) !important;
  background: rgba(255,255,255,.92);
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 760 !important;
  text-align: center;
}
body.app-route .history-preview {
  width: 104px;
  min-width: 104px;
}
body.app-route .history-preview img,
body.app-route .result-preview img,
body.app-route .batch-result-thumb img,
body.app-route .online-source-thumb img,
body.app-route .online-task-thumb img,
body.app-route .online-result-cell img,
body.app-route .slicer-work-thumb img,
body.app-route .slicer-source-preview img,
body.app-route .slicer-result-thumb img {
  background: #fff !important;
  filter: none !important;
}
body.app-route .history-row h3,
body.app-route .history-row p,
body.app-route .history-row strong,
body.app-route .batch-job-card strong,
body.app-route .online-task-card strong,
body.app-route .online-result-cell strong {
  color: var(--workspace-readable-ink) !important;
}
body.app-route .history-actions .button.secondary:disabled,
body.app-route .result-actions .button.secondary:disabled,
body.app-route .batch-result-actions .button.secondary:disabled {
  color: #6b6258 !important;
  background: #f7f4ef !important;
  border-color: #e3ddd4 !important;
  opacity: 1 !important;
}


/* BRAND-ZAOTUJIANG: image-one style SVG logo and brand name */
.brand-mark.brand-mark-logo {
  width: 58px !important;
  height: 46px !important;
  min-width: 58px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #151515 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  overflow: visible !important;
}
.brand-mark.brand-mark-logo svg {
  width: 58px;
  height: 46px;
  display: block;
  overflow: visible;
}
body.app-route .brand-mark.brand-mark-logo {
  width: 48px !important;
  height: 38px !important;
  min-width: 48px !important;
}
body.app-route .brand-mark.brand-mark-logo svg {
  width: 48px;
  height: 38px;
}
body.auth-route .brand-mark.brand-mark-logo,
body:not(.auth-route):not(.app-route) .brand-mark.brand-mark-logo {
  width: 54px !important;
  height: 42px !important;
  min-width: 54px !important;
}
body.auth-route .brand-mark.brand-mark-logo svg,
body:not(.auth-route):not(.app-route) .brand-mark.brand-mark-logo svg {
  width: 54px;
  height: 42px;
}

/* START-GENERATION-POLISHED-UI-20260702 */
body.app-route #generation.generation-studio { max-width: 1320px; margin: 0 auto; padding: 36px 42px 44px; border: 1px solid rgba(231, 222, 209, .92); border-radius: 34px; background: radial-gradient(circle at 18% 12%, rgba(124, 92, 255, .10), transparent 32rem), linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,250,242,.92)); box-shadow: 0 28px 70px rgba(63, 55, 43, .12); overflow: hidden; }
body.app-route #generation.generation-studio > .section-title { align-items: flex-start; margin: 0 0 28px; padding: 0 0 22px; border-bottom: 1px solid rgba(232, 221, 207, .9); }
body.app-route #generation.generation-studio > .section-title h2 { margin-top: 10px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.16; letter-spacing: -0.045em; }
body.app-route #generation.generation-studio > .section-title p { max-width: 680px; margin-top: 8px; color: #7a7066; font-size: 15px; }
body.app-route #generation .generation-studio-layout { grid-template-columns: minmax(230px, .72fr) minmax(480px, 1.28fr) minmax(260px, .78fr) !important; gap: 24px !important; align-items: stretch; }
body.app-route #generation .generation-studio-layout > aside:first-child, body.app-route #generation .generation-studio-layout > section, body.app-route #generation .generation-studio-layout > aside.result-stack { border: 1px solid rgba(232, 221, 207, .9) !important; border-radius: 30px !important; background: rgba(255, 253, 249, .88) !important; box-shadow: 0 18px 46px rgba(63, 55, 43, .08) !important; }
body.app-route #generation .generation-filter-panel, body.app-route #generation .generation-compose-panel, body.app-route #generation .generation-result-panel { min-width: 0; }
body.app-route #generation .generation-filter-panel { background: linear-gradient(180deg, #fffaf3, #fffdf9) !important; }
body.app-route #generation .generation-compose-panel { background: linear-gradient(145deg, #fffdf9, #fbf7ff 58%, #fff7ed) !important; }
body.app-route #generation .generation-result-panel { background: linear-gradient(180deg, #fffaf3, #fffdf9) !important; }
body.app-route #generation .filter-stack label, body.app-route #generation .compact-form label { font-weight: 720; color: #2f2a24; }
body.app-route #generation input, body.app-route #generation select, body.app-route #generation textarea { border-color: #eadfce; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
body.app-route #generation input:focus, body.app-route #generation select:focus, body.app-route #generation textarea:focus { border-color: #7c5cff; box-shadow: 0 0 0 4px rgba(124, 92, 255, .12); }
body.app-route #generation .generation-source-uploader { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 16px; align-items: stretch; margin-bottom: 18px; padding: 18px; border: 1px solid rgba(226, 213, 194, .9); border-radius: 28px; background: radial-gradient(circle at 82% 14%, rgba(124, 92, 255, .14), transparent 38%), linear-gradient(135deg, #fbf8ff, #fff7ec); }
body.app-route #generation .generation-source-copy { grid-column: 1 / -1; }
body.app-route #generation .generation-source-copy h3 { margin: 10px 0 6px; font-size: 22px; letter-spacing: -0.035em; }
body.app-route #generation .generation-source-copy p { color: #766b60; font-size: 13px; }
body.app-route #generation .generation-upload-dropzone { position: relative; min-height: 188px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 22px; border: 2px dashed rgba(124, 92, 255, .42); border-radius: 30px; background: rgba(255,255,255,.80); text-align: center; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
body.app-route #generation .generation-upload-dropzone:hover { transform: translateY(-1px); border-color: #7c5cff; box-shadow: 0 18px 36px rgba(124, 92, 255, .13); }
body.app-route #generation .generation-upload-dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
body.app-route #generation .generation-upload-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #7c5cff, #5d3bff); box-shadow: 0 16px 30px rgba(124, 92, 255, .26); font-size: 34px; line-height: 1; font-weight: 800; }
body.app-route #generation .generation-upload-dropzone strong { color: #5d3bff; font-size: 18px; letter-spacing: -0.025em; }
body.app-route #generation .generation-upload-dropzone small { max-width: 310px; color: #7a7066; font-size: 12px; line-height: 1.6; }
body.app-route #generation .generation-source-preview { min-height: 188px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(226, 213, 194, .9); border-radius: 26px; background: repeating-linear-gradient(135deg, #f4eee5 0 8px, #fffaf3 8px 16px); color: #8a8178; font-size: 13px; font-weight: 720; }
body.app-route #generation .generation-source-preview img { width: 100%; height: 100%; max-height: 220px; object-fit: contain; background: #fff; }
body.app-route #generation .generation-source-preview-grid {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 8px;
  padding: 8px;
}
body.app-route #generation .generation-source-preview-grid figure {
  position: relative;
  min-width: 0;
  min-height: 88px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(217, 213, 202, .95);
  border-radius: 10px;
  background: #fff;
}
body.app-route #generation .generation-source-preview-grid img {
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  object-fit: cover;
}
body.app-route #generation .generation-source-preview-grid figcaption {
  position: absolute;
  left: 6px;
  bottom: 6px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(17, 17, 15, .82);
  font-size: 11px;
  font-weight: 800;
}
body.app-route #generation .generation-blueprint, body.app-route #generation .upload-guide { display: none !important; }
body.app-route #generation #templateDetail { margin: 0 0 16px; padding: 16px; border: 1px solid rgba(232, 221, 207, .9); border-radius: 24px; background: rgba(255,255,255,.76); }
body.app-route #generation .template-list { grid-template-columns: 1fr !important; }
body.app-route #generation .template-card { border-radius: 22px !important; border-color: #eadfce; background: rgba(255,255,255,.84); box-shadow: none; }
body.app-route #generation .template-card[aria-pressed="true"] { outline: 0 !important; border-color: rgba(124, 92, 255, .58) !important; background: linear-gradient(135deg, #fbf8ff, #fff) !important; box-shadow: 0 14px 30px rgba(124, 92, 255, .12); }
body.app-route #generation .button:not(.secondary) { min-height: 54px; border-radius: 20px; background: linear-gradient(135deg, #111827, #4f46e5); box-shadow: 0 18px 34px rgba(79, 70, 229, .20); font-weight: 840; }
body.app-route #generation .button.secondary { border-color: #eadfce; border-radius: 16px; background: #f8f2e9; color: #5f4b38; }
body.app-route #generation .result-preview { min-height: 260px !important; aspect-ratio: 1 / 1.08 !important; border-radius: 26px !important; border-color: #ded2c1; background: repeating-linear-gradient(135deg, #f4eee5 0 8px, #fffaf3 8px 16px) !important; }
body.app-route #generation .result-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: 24px; background: #fff; }
body.app-route #generation .result-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
body.app-route #generation #generationReset { grid-column: 1 / -1; }
body.app-route #generation #generationJobSummary { border-radius: 18px; border-color: #eadfce; background: rgba(255,255,255,.76); }
@media (max-width: 1280px) { body.app-route #generation .generation-studio-layout { grid-template-columns: 1fr !important; } body.app-route #generation .generation-studio-layout > aside:first-child, body.app-route #generation .generation-studio-layout > section, body.app-route #generation .generation-studio-layout > aside.result-stack { grid-column: 1 !important; grid-row: auto !important; } }
@media (max-width: 640px) { body.app-route #generation.generation-studio { padding: 22px 16px 28px; border-radius: 24px; } body.app-route #generation .generation-source-uploader { grid-template-columns: 1fr; padding: 14px; border-radius: 22px; } body.app-route #generation .generation-source-preview { min-height: 150px; } body.app-route #generation .result-actions { grid-template-columns: 1fr; } body.app-route #generation #generationReset { grid-column: auto; } }


/* BRAND-FAVICON-FIX-20260702: stable header logo/text layout and favicon asset. */
.brand { align-items: center !important; gap: 10px !important; text-decoration: none !important; }
.brand-mark.brand-mark-logo { width: 46px !important; height: 38px !important; min-width: 46px !important; flex: 0 0 46px !important; display: grid !important; place-items: center !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; }
.brand-mark.brand-mark-logo svg { width: 46px !important; height: 38px !important; display: block !important; overflow: visible !important; }
.brand-text-main { display: grid !important; grid-template-rows: auto auto !important; gap: 2px !important; align-content: center !important; line-height: 1 !important; }
.brand-text-main > span { color: #111827 !important; font-size: 22px !important; font-weight: 900 !important; letter-spacing: -.055em !important; line-height: 1 !important; }
.brand-text-main small { margin: 0 !important; color: #4b5563 !important; font-size: 11px !important; font-weight: 820 !important; letter-spacing: .13em !important; line-height: 1 !important; white-space: nowrap !important; }
body.app-route .brand-mark.brand-mark-logo { width: 40px !important; height: 34px !important; min-width: 40px !important; flex-basis: 40px !important; }
body.app-route .brand-mark.brand-mark-logo svg { width: 40px !important; height: 34px !important; }
body.app-route .brand-text-main > span { font-size: 19px !important; }
body.app-route .brand-text-main small { font-size: 9px !important; letter-spacing: .12em !important; }
@media (max-width: 640px) { .brand-mark.brand-mark-logo { width: 38px !important; height: 32px !important; min-width: 38px !important; flex-basis: 38px !important; } .brand-mark.brand-mark-logo svg { width: 38px !important; height: 32px !important; } .brand-text-main > span { font-size: 18px !important; } .brand-text-main small { font-size: 8px !important; letter-spacing: .10em !important; } }


/* BRAND-FAVICON-FIX-20260702-FINAL; BRAND-TRANSPARENT-LOGO-FIX-20260702; BRAND-INLINE-LOGO-SLIM-FIX-20260702: override route-specific legacy logo sizes. */
body.auth-route .brand-mark.brand-mark-logo,
body:not(.auth-route):not(.app-route) .brand-mark.brand-mark-logo {
  width: 46px !important;
  height: 38px !important;
  min-width: 46px !important;
  flex: 0 0 46px !important;
}
body.auth-route .brand-mark.brand-mark-logo svg,
body:not(.auth-route):not(.app-route) .brand-mark.brand-mark-logo svg {
  width: 46px !important;
  height: 38px !important;
}
body.auth-route .brand,
body:not(.auth-route):not(.app-route) .brand {
  gap: 9px !important;
  align-items: center !important;
}
body.auth-route .brand-text-main,
body:not(.auth-route):not(.app-route) .brand-text-main {
  display: grid !important;
  gap: 2px !important;
  line-height: 1 !important;
  align-content: center !important;
}





/* BRAND-LOGO-NO-TRUNCATE-20260703: keep the header logo identical to the compact sidebar logo. */
.brand {
  flex: 0 0 auto !important;
  max-width: none !important;
  overflow: visible !important;
}
.brand > .brand-text-main {
  flex: 0 0 auto !important;
  min-width: 106px !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}
.brand-text-main small {
  display: block !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body:not(.app-route) .brand-mark.brand-mark-logo,
body.auth-route .brand-mark.brand-mark-logo,
body.app-route .brand-mark.brand-mark-logo {
  width: 38px !important;
  height: 32px !important;
  min-width: 38px !important;
  flex-basis: 38px !important;
}
body:not(.app-route) .brand-mark.brand-mark-logo svg,
body.auth-route .brand-mark.brand-mark-logo svg,
body.app-route .brand-mark.brand-mark-logo svg {
  width: 38px !important;
  height: 32px !important;
}
body:not(.app-route) .brand-text-main > span,
body.auth-route .brand-text-main > span,
body.app-route .brand-text-main > span {
  font-size: 18px !important;
  line-height: .95 !important;
}
body:not(.app-route) .brand-text-main small,
body.auth-route .brand-text-main small,
body.app-route .brand-text-main small {
  font-size: 8px !important;
  letter-spacing: .055em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* BRAND-LOGO-CLEAN-STROKE-20260703: remove the black-looking edge on the online header logo. */
.brand-mark.brand-mark-logo,
.brand-mark.brand-mark-logo svg {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
body:not(.auth-route):not(.app-route) .brand-mark.brand-mark-logo,
body.auth-route .brand-mark.brand-mark-logo,
body.app-route .brand-mark.brand-mark-logo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
.brand-mark.brand-mark-logo .brand-logo-photo {
  stroke: #b99a64 !important;
  stroke-width: 1.8 !important;
}
.brand-mark.brand-mark-logo .brand-logo-line {
  stroke: #7f786f !important;
  stroke-width: 1.8 !important;
}
.brand-mark.brand-mark-logo .brand-logo-brush {
  stroke: #7c5cff !important;
  stroke-width: 2.6 !important;
}

/* SMART-RECOMMEND-GENERATION-UI-20260702: beginner friendly upload -> recommend -> edit -> generate flow. */
body.app-route #generation.smart-generation-studio { max-width: 1420px; padding: 24px 28px 32px; border-radius: 32px; background: radial-gradient(circle at 18% 10%, rgba(124, 92, 255, .10), transparent 30rem), linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,250,243,.94)); }
.smart-generation-heading { align-items: flex-start; margin-bottom: 12px !important; }
.start-generation-brief { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 10px; margin: 0 0 12px; }
.start-generation-brief-card { padding: 12px 14px; border: 1px solid rgba(124,92,255,.16); border-radius: 18px; background: linear-gradient(135deg, rgba(124,92,255,.08), rgba(255,255,255,.82)); box-shadow: 0 10px 24px rgba(63,55,43,.05); }
.start-generation-brief-card strong { display: block; margin-bottom: 4px; color: #151515; font-size: 14px; letter-spacing: -.02em; }
.start-generation-brief-card p { margin: 0; color: #6e6459; line-height: 1.55; font-size: 12px; }
.start-generation-brief-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.start-generation-brief-flow span { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 9px; border-radius: 999px; background: #fff; border: 1px solid #ebe2d6; color: #5f564d; font-weight: 820; font-size: 11px; }
.start-generation-brief-flow i { color: #8b8176; font-style: normal; font-weight: 900; }
.smart-generation-steps { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.smart-step { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 12px; border: 1px solid #ebe2d6; border-radius: 999px; background: rgba(255,255,255,.76); color: #776d61; font-size: 13px; font-weight: 760; }
.smart-step b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: #f2eee8; color: #151515; font-size: 12px; }
.smart-step.active { border-color: rgba(124,92,255,.28); color: #151515; box-shadow: 0 10px 24px rgba(124,92,255,.08); }
.smart-step.active b { color: #fff; background: #6b4cff; }
body.app-route #generation .smart-generation-layout { grid-template-columns: minmax(230px, 290px) minmax(520px, 1fr) minmax(250px, 300px) !important; gap: 14px !important; align-items: start; }
#generation .generation-upload-panel, #generation .smart-compose-panel, #generation .smart-result-panel { border: 1px solid rgba(232,221,207,.92) !important; border-radius: 24px !important; background: rgba(255,253,249,.92) !important; box-shadow: 0 14px 34px rgba(63,55,43,.06) !important; }
.smart-card-title h3 { margin: 6px 0 4px; font-size: 18px; letter-spacing: -.03em; }
.smart-card-title p { margin: 0; color: #766d62; line-height: 1.55; font-size: 12px; }
.smart-upload-dropzone { min-height: 122px; margin-top: 10px; border-radius: 20px !important; background: linear-gradient(145deg, #fff, #fbf7ef) !important; }
.smart-source-preview { min-height: 180px; margin-top: 10px; border-radius: 20px !important; background: repeating-linear-gradient(135deg, #fff, #fff 8px, #f7f2ea 8px, #f7f2ea 16px); overflow: hidden; }
.smart-source-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smart-quota-card { margin-top: 10px; padding: 10px 12px; border: 1px solid #ebe2d6; border-radius: 16px; background: #fffaf3; display: grid; gap: 8px; }
.smart-quota-card strong { display: block; font-size: 15px; color: #151515; }
.smart-quota-card span { color: #7b7166; font-size: 12px; }
.smart-quota-track { height: 8px; overflow: hidden; border-radius: 999px; background: #ede7df; }
.smart-quota-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #111, #7c5cff); transition: width .2s ease; }
.smart-intent-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 14px; }
.smart-intent-tabs.start-intent-cards, .smart-intent-tabs.start-intent-compact { display: flex; flex-wrap: wrap; gap: 8px; }
.smart-intent-button { appearance: none; border: 1px solid #e7ded2; border-radius: 999px; padding: 9px 14px; background: #fff; color: #342d26; font-weight: 760; cursor: pointer; }
.start-intent-cards .smart-intent-button { text-align: left; display: inline-flex; gap: 6px; min-height: 40px; border-radius: 999px; padding: 9px 12px; align-items: center; }
.start-intent-cards .smart-intent-button strong { display: block; font-size: 14px; white-space: nowrap; }
.start-intent-cards .smart-intent-button small { color: #756a60; line-height: 1.2; font-weight: 650; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-intent-button.active, .smart-intent-button[aria-pressed="true"] { color: #fff; border-color: #6b4cff; background: linear-gradient(135deg, #7c5cff, #4f36e8); box-shadow: 0 14px 28px rgba(124,92,255,.22); }
.start-intent-cards .smart-intent-button.active small, .start-intent-cards .smart-intent-button[aria-pressed="true"] small { color: rgba(255,255,255,.82); }
.smart-recommend-action { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; background: linear-gradient(135deg, rgba(124,92,255,.09), rgba(255,250,243,.9)); border: 1px solid rgba(124,92,255,.16); }
.smart-recommend-button { min-height: 44px; border-radius: 14px !important; background: linear-gradient(135deg, #7c5cff, #111) !important; }
.smart-recommend-action p { margin: 0; color: #71675d; line-height: 1.5; font-size: 12px; }
.smart-recommend-result { margin-top: 10px; padding: 12px; border: 1px dashed #ded4c8; border-radius: 18px; background: rgba(255,255,255,.72); }
.smart-recommend-result h3 { margin: 8px 0 8px; }
.smart-recommend-result p { margin: 0; color: #70665c; line-height: 1.75; }
.smart-recommend-fields { display: grid; gap: 8px; margin-top: 12px; }
.smart-recommend-fields span { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: #fffaf4; color: #5e554c; line-height: 1.55; }
.smart-recommend-fields b { min-width: 76px; color: #151515; }
.smart-plan-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.smart-plan-card { text-align: left; display: grid; gap: 4px; width: 100%; border: 1px solid #e9ddcc; border-radius: 14px; padding: 9px 10px; background: rgba(255,255,255,.88); color: #151515; cursor: pointer; }
.smart-plan-card strong { font-size: 14px; }
.smart-plan-card span { font-weight: 820; }
.smart-plan-card small { color: #6b6258; line-height: 1.55; }
.smart-plan-card em { color: #6b4cff; font-style: normal; font-size: 12px; font-weight: 820; }
.smart-plan-card.is-selected { border-color: #7c5cff; box-shadow: 0 12px 24px rgba(124, 92, 255, .14); background: #fbf9ff; }
.smart-manual-template, .smart-more-settings { margin-top: 10px; border: 1px solid #ebe2d6; border-radius: 16px; background: #fffaf4; padding: 0; }
.smart-manual-template summary, .smart-more-settings summary { cursor: pointer; padding: 10px 12px; font-weight: 820; color: #151515; }
.smart-manual-template[open], .smart-more-settings[open] { padding-bottom: 14px; }
.smart-manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 12px; }
.smart-template-list { padding: 0 16px 14px; max-height: 280px; overflow: auto; }
.smart-generation-form { margin-top: 10px; }
.smart-generation-form .generation-form-fields { display: grid; gap: 8px; }
.smart-basic-fields, .smart-auto-fields { display: grid; gap: 8px; }
.smart-basic-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.smart-basic-fields label:first-child { grid-column: 1 / -1; }
.smart-auto-settings { border: 1px solid #ebe2d6; border-radius: 16px; background: #fffaf4; }
.smart-auto-settings summary { cursor: pointer; padding: 10px 12px; font-weight: 820; color: #151515; }
.smart-auto-settings .smart-auto-fields { padding: 0 16px 14px; }
.smart-auto-note { margin: 0 0 10px; color: #766d62; font-size: 12px; line-height: 1.6; }
.smart-template-summary { display: grid; gap: 10px; }
.smart-template-summary-collapsed { border: 1px solid #ebe2d6; border-radius: 16px; padding: 0; background: rgba(255,250,244,.72); }
.smart-template-summary-collapsed summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; color: #151515; font-weight: 820; }
.smart-template-summary-collapsed summary strong { color: #6b4cff; font-size: 13px; }
.smart-template-summary-collapsed .smart-template-summary-body { display: grid; gap: 8px; padding: 0 12px 12px; }
.smart-template-compact-note { margin: 0; padding: 10px 12px; border-radius: 16px; background: rgba(124,92,255,.08); color: #5f564d; line-height: 1.65; font-size: 13px; }
.smart-template-fields-toggle { border: 1px dashed #e4d9cc; border-radius: 16px; background: rgba(255,250,244,.72); }
.smart-template-fields-toggle summary { cursor: pointer; padding: 10px 12px; color: #5f4b38; font-weight: 820; }
.smart-template-fields-list { display: grid; gap: 8px; padding: 0 12px 12px; }
.smart-generation-form label { border: 1px solid #ebe2d6; border-radius: 14px; padding: 10px; background: rgba(255,255,255,.78); }
.smart-generation-form label input, .smart-generation-form label textarea, .smart-generation-form label select { margin-top: 6px; }
.smart-generation-form label textarea { min-height: 74px; }
.smart-generation-form label .field-hint { display: block; margin-top: 6px; font-size: 11px; line-height: 1.45; }
.smart-product-info-box { border-color: rgba(124,92,255,.22) !important; background: linear-gradient(135deg, rgba(124,92,255,.06), rgba(255,255,255,.86)) !important; }
.smart-product-info-box textarea { min-height: 120px !important; font-size: 14px; line-height: 1.7; }
.smart-product-info-box .field-hint { color: #5f564d; }
.smart-more-settings label { margin: 0 16px 10px; }
.smart-generate-submit { width: 100%; min-height: 48px; margin-top: 10px; border-radius: 14px !important; font-size: 15px; }
.smart-result-panel .result-preview { min-height: 230px; border-radius: 20px !important; background: repeating-linear-gradient(135deg, #fff, #fff 9px, #f6f1e9 9px, #f6f1e9 18px); }
.smart-result-actions { grid-template-columns: 1fr 1fr; }
.smart-result-actions #generationReset { grid-column: 1 / -1; }
/* START-GENERATION-SIMPLE-UI-20260709: reduce smart generation first-screen noise and mirror listing-suite flow. */
#generation .start-generation-brief { grid-template-columns: 1fr; margin-bottom: 10px; }
#generation .start-generation-brief-flow { display: none; }
.smart-generation-compact-v2 .smart-card-title { margin-bottom: 8px; }
.smart-generation-compact-v2 .smart-intent-tabs { margin: 10px 0; }
.smart-generation-compact-v2 .smart-recommend-action { grid-template-columns: minmax(150px, 210px) 1fr; padding: 9px 10px; }
.smart-generation-compact-v2 .smart-generation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid rgba(124,92,255,.16); border-radius: 18px; background: rgba(255,255,255,.72); }
.smart-generation-compact-v2 .generation-form-fields, .smart-generation-compact-v2 .smart-more-settings, .smart-generation-compact-v2 .smart-generate-submit { grid-column: 1 / -1; }
.smart-generation-compact-v2 .smart-output-count, .smart-generation-compact-v2 .smart-similarity-control { margin: 0; }
.smart-generation-compact-v2 .smart-recommend-result, .smart-generation-compact-v2 #templateDetail { margin-top: 10px; }
.smart-generation-compact-v2 .smart-recommend-result { padding: 10px 12px; background: rgba(255,250,244,.7); }
.smart-generation-compact-v2 .smart-recommend-result h3 { margin: 6px 0; font-size: 15px; }
.smart-generation-compact-v2 .smart-recommend-result p { font-size: 12px; line-height: 1.55; }
.smart-generation-compact-v2 #templateDetail > .empty-state { min-height: auto; padding: 10px 12px; font-size: 12px; }
.generation-mode-tabs { display: inline-flex; flex-wrap: wrap; gap: 8px; padding: 6px; border: 1px solid #ebe2d6; border-radius: 999px; background: rgba(255,255,255,.78); margin: 0 0 12px; }
.generation-mode-tab { border: 0; border-radius: 999px; padding: 9px 14px; background: transparent; color: #51483f; font-weight: 860; cursor: pointer; }
.generation-mode-tab.active { color: #fff; background: linear-gradient(135deg, #7c5cff, #111); box-shadow: 0 10px 22px rgba(124,92,255,.18); }
.listing-suite-panel { display: none; gap: 14px; border-color: rgba(124,92,255,.22) !important; background: linear-gradient(135deg, rgba(124,92,255,.06), rgba(255,250,243,.94)) !important; }
#generation[data-generation-mode="suite"] .listing-suite-panel { display: grid; }
#generation[data-generation-mode="suite"] .smart-generation-layout, #generation[data-generation-mode="suite"] .smart-generation-steps { display: none !important; }
.listing-suite-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(420px, 1fr) minmax(240px, 300px); gap: 14px; align-items: start; }
.listing-suite-dropzone { min-height: 148px; border: 2px dashed rgba(124,92,255,.35); border-radius: 22px; background: #fff; display: grid; place-items: center; text-align: center; cursor: pointer; position: relative; padding: 18px; }
.listing-suite-dropzone input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.listing-suite-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.listing-suite-preview-grid img, .listing-suite-preview-empty { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid #eee4d8; background: repeating-linear-gradient(135deg, #fff, #fff 8px, #f7f2ea 8px, #f7f2ea 16px); display: grid; place-items: center; color: #8a8177; font-size: 12px; }
.listing-suite-plan { display: grid; gap: 8px; }
.listing-suite-plan-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #ebe2d6; border-radius: 14px; background: rgba(255,255,255,.75); }
.listing-suite-plan-row strong { color: #151515; }
.listing-suite-plan-row span { color: #6f665d; font-size: 12px; }
@media (max-width: 1180px) { .listing-suite-grid { grid-template-columns: 1fr; } }
@media (max-width: 1180px) { body.app-route #generation .smart-generation-layout { grid-template-columns: 1fr !important; } .smart-generation-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .start-generation-brief { grid-template-columns: 1fr; } .smart-plan-list { grid-template-columns: 1fr; } }
@media (max-width: 640px) { body.app-route #generation.smart-generation-studio { padding: 22px 14px 28px; border-radius: 24px; } .smart-generation-steps, .smart-manual-grid, .smart-recommend-action, .smart-basic-fields, .smart-generation-compact-v2 .smart-generation-form { grid-template-columns: 1fr; } .smart-result-actions { grid-template-columns: 1fr; } }

/* UX-COMPLIANCE-20260719: keep the result before optional template browsing. */
body.app-route #generation .generation-studio-layout > .smart-generation-advanced {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-width: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.app-route #generation .smart-generation-advanced #templateDetail { margin-top: 12px; }
@media (max-width: 1280px) {
  body.app-route #generation .generation-studio-layout > .smart-generation-advanced {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}


/* HISTORY-DOWNLOAD-FORMAT-20260702: works download cards include explicit output format control. */
body.app-route .history-row { grid-template-columns: 96px minmax(0, 1fr) 172px; }
body.app-route .history-global-download-format { display: grid; gap: 6px; }
body.app-route .history-global-download-format select { min-height: 38px; padding: 8px 10px; border-radius: 10px; }
body.app-route .history-actions .button { min-height: 38px; }
body.app-route .history-preview.history-preview-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; place-items: stretch; }
body.app-route .history-preview.history-preview-multi img { border-radius: 6px; }
/* HISTORY-MULTI-PREVIEW-DROPDOWN-20260703: the compact selector now only chooses follow-up edit/slice targets. */
body.app-route .history-preview-select-row { display: grid; gap: 6px; }
body.app-route .history-preview-select-label { display: block; color: #64748b; font-size: 12px; text-align: center; }
body.app-route .history-preview-select { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); font-size: 13px; }
body.app-route .history-preview-select-row .button { min-height: 36px; padding: 7px 10px; }
body.app-route .history-row:has(.history-safe-continue) { grid-template-columns: 96px minmax(0, 1fr) 260px; }
body.app-route .history-row:has(.history-appeal),
body.app-route .history-row:has(.history-appeal-result) { grid-template-columns: 96px minmax(0, 1fr) 280px; }
body.app-route .history-safe-continue { display: grid; gap: 7px; padding: 12px; border: 1px solid #e8d8b7; border-radius: 14px; background: #fffaf0; }
body.app-route .history-safe-continue strong { color: #241d14; font-size: 14px; }
body.app-route .history-safe-continue span { color: #75664f !important; font-size: 12px; line-height: 1.5; }
body.app-route .history-safe-continue select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #d8cab0; border-radius: 10px; background: #fff; color: #241d14; }
body.app-route .history-safe-continue .button { width: 100%; }
body.app-route .history-safe-continue.is-created { border-color: #c9ddbc; background: #f5faef; }
body.app-route .history-appeal,
body.app-route .history-appeal-result { display: grid; gap: 7px; padding: 12px; border: 1px solid #d8dce8; border-radius: 14px; background: #f8f9fc; }
body.app-route .history-appeal strong,
body.app-route .history-appeal-result strong { color: #241d14; font-size: 14px; }
body.app-route .history-appeal span,
body.app-route .history-appeal-result span { color: #64748b !important; font-size: 12px; line-height: 1.5; }
body.app-route .history-appeal textarea { width: 100%; min-height: 68px; padding: 8px 10px; resize: vertical; border: 1px solid #cfd5e2; border-radius: 10px; background: #fff; color: #241d14; }
body.app-route .history-appeal .button { width: 100%; }
body.app-route .history-appeal-result.is-approved { border-color: #b8d8ae; background: #f3faef; }
body.app-route .history-appeal-result.is-rejected { border-color: #ead0ca; background: #fff7f5; }
@media (max-width: 900px) { body.app-route .history-row { grid-template-columns: 1fr !important; } }

/* MOBILE-CLEANUP-20260703: final mobile layout guard and icon polish for the user workspace. */
body.app-route .mobile-action-card .mobile-action-icon {
  position: relative;
  flex: 0 0 auto;
  font-size: 0 !important;
}
body.app-route .mobile-action-card .mobile-action-icon::before {
  content: "";
  width: 23px;
  height: 23px;
  display: block;
  background: #fff;
  -webkit-mask: var(--mobile-action-icon) center / contain no-repeat;
  mask: var(--mobile-action-icon) center / contain no-repeat;
}
body.app-route .mobile-action-card:nth-child(1) { --mobile-action-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%273%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%2710%27%20r%3D%272%27%2F%3E%3Cpath%20d%3D%27m21%2016-5-5L5%2020%27%2F%3E%3C%2Fsvg%3E"); }
body.app-route .mobile-action-card:nth-child(2) { --mobile-action-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%205h10%27%2F%3E%3Cpath%20d%3D%27M9%205v14%27%2F%3E%3Cpath%20d%3D%27M5%2019h8%27%2F%3E%3Cpath%20d%3D%27M15%209h5%27%2F%3E%3Cpath%20d%3D%27M18%209c-.5%203-2%205.5-5%207%27%2F%3E%3Cpath%20d%3D%27M15%2016c2.5-1.2%204-3.5%205-7%27%2F%3E%3C%2Fsvg%3E"); }
body.app-route .mobile-action-card:nth-child(3) { --mobile-action-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2020h9%27%2F%3E%3Cpath%20d%3D%27M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4Z%27%2F%3E%3C%2Fsvg%3E"); }
body.app-route .mobile-action-card:nth-child(4) { --mobile-action-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15%204V2%27%2F%3E%3Cpath%20d%3D%27M15%2016v-2%27%2F%3E%3Cpath%20d%3D%27M8%209H6%27%2F%3E%3Cpath%20d%3D%27M21%209h-2%27%2F%3E%3Cpath%20d%3D%27m18%206-1.4-1.4%27%2F%3E%3Cpath%20d%3D%27m8.4%2013.6-1.4%201.4%27%2F%3E%3Cpath%20d%3D%27m18%2012-1.4%201.4%27%2F%3E%3Cpath%20d%3D%27M8.4%204.4%207%203%27%2F%3E%3Cpath%20d%3D%27M12%209l-8%208%203%203%208-8Z%27%2F%3E%3C%2Fsvg%3E"); }
body.app-route .mobile-action-card:nth-child(5) { --mobile-action-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%272%27%2F%3E%3C%2Fsvg%3E"); }
body.app-route .mobile-action-card:nth-child(6) { --mobile-action-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203%205%206v6c0%204.5%203%207.5%207%209%204-1.5%207-4.5%207-9V6Z%27%2F%3E%3Cpath%20d%3D%27m9%2012%202%202%204-5%27%2F%3E%3C%2Fsvg%3E"); }
body.app-route .mobile-action-card:nth-child(7) { --mobile-action-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%276%27%20cy%3D%276%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%2718%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M20%204%208.1%2015.9%27%2F%3E%3Cpath%20d%3D%27M14.5%2014.5%2020%2020%27%2F%3E%3C%2Fsvg%3E"); }
@media (max-width: 640px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body.app-route .shell {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 64px minmax(0, 1fr) !important;
  }
  body.app-route .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 64px !important;
    padding: 0 12px !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(16px);
  }
  body.app-route .brand { min-width: 0; max-width: calc(100vw - 112px); }
  body.app-route .brand-text-main { min-width: 0; }
  body.app-route .brand-text-main span {
    display: block;
    max-width: 138px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.app-route .brand-text-main small { display: none; }
  body.app-route #appView {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 12px 34px !important;
    overflow: visible !important;
  }
  body.app-route .dashboard,
  body.app-route .scheme-a-home,
  body.app-route section.workspace-page-active {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  body.app-route .section-title,
  body.app-route .dashboard-head,
  body.app-route .scheme-a-home-header {
    gap: 10px;
    align-items: stretch;
  }
  body.app-route .section-title > div,
  body.app-route .dashboard-head > div { min-width: 0; }
  body.app-route .section-title h2,
  body.app-route .section-title p,
  body.app-route .dashboard-head h2,
  body.app-route .dashboard-head p { overflow-wrap: anywhere; }
  body.app-route .card,
  body.app-route .subcard,
  body.app-route .panel,
  body.app-route .scheme-a-hero-banner,
  body.app-route .scheme-a-quick,
  body.app-route .more-tools-details {
    border-radius: 16px !important;
  }
  body.app-route .card,
  body.app-route .subcard,
  body.app-route .panel,
  body.app-route .scheme-a-quick {
    padding: 16px !important;
  }
  body.app-route .generation-layout,
  body.app-route .translation-layout,
  body.app-route .remix-layout,
  body.app-route .batch-layout,
  body.app-route .image-audit-layout,
  body.app-route .brand-manager-layout,
  body.app-route .online-batch-layout,
  body.app-route .slicer-workspace,
  body.app-route .profile-layout,
  body.app-route #image-edit .generation-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body.app-route .compact-form,
  body.app-route .filters,
  body.app-route .online-param-grid,
  body.app-route .result-actions,
  body.app-route .history-filters {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body.app-route input,
  body.app-route select,
  body.app-route textarea,
  body.app-route .button {
    min-height: 44px;
    font-size: 16px;
  }
  body.app-route .result-preview,
  body.app-route #gptSourcePreview,
  body.app-route #gptResultPreview {
    min-height: 150px;
  }
  body.app-route .mobile-action-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body.app-route .mobile-action-card {
    min-height: auto;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    align-content: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 14px !important;
  }
  body.app-route .mobile-action-card .mobile-action-icon {
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
  }
  body.app-route .mobile-action-card strong,
  body.app-route .mobile-action-card span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.app-route .workspace-announcement {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
}


/* CDK-PACKAGE-CLEAN-UI-20260703: make the credit package page scanable and reduce scattered cards. */
body.app-route #cdk {
  max-width: 1440px !important;
  margin-inline: auto !important;
  padding: 26px !important;
  border-radius: 28px !important;
  border-color: #e8edf3 !important;
  background:
    radial-gradient(circle at 9% 0%, rgba(184, 137, 66, .08), transparent 280px),
    radial-gradient(circle at 100% 10%, rgba(124, 92, 255, .06), transparent 300px),
    #fff !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .06) !important;
}
body.app-route #cdk > .section-title {
  align-items: center !important;
  padding-bottom: 16px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid #edf1f6 !important;
}
body.app-route #cdk > .section-title h2 {
  margin-top: 4px !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
}
body.app-route #cdk .purchase-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
body.app-route #cdk .purchase-flow li {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #e7edf5;
  border-radius: 16px;
  background: rgba(255, 255, 255, .82);
}
body.app-route #cdk .purchase-flow li > b,
body.app-route #cdk .purchase-step-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #111827;
  color: #fff !important;
  font-size: 13px;
  font-weight: 850;
}
body.app-route #cdk .purchase-flow span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
body.app-route #cdk .purchase-flow strong {
  color: #111827 !important;
  font-size: 14px;
}
body.app-route #cdk .purchase-flow small {
  color: #64748b;
  font-size: 12px;
}
body.app-route #cdk .purchase-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #f6f8f7;
  color: #40514b;
  font-size: 12px;
  font-weight: 750;
}
body.app-route #cdk .purchase-assurances span::before {
  content: "✓";
  margin-right: 6px;
  color: #147a55;
  font-weight: 900;
}
body.app-route #cdk .purchase-target-card > strong {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #111827 !important;
}
body.app-route #cdk .purchase-stage-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 10px;
}
body.app-route #cdk .purchase-stage-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
body.app-route #cdk .purchase-stage-heading strong {
  color: #111827 !important;
  font-size: 17px;
}
body.app-route #cdk .purchase-stage-heading p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}
body.app-route #cdk .purchase-settlement-heading {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #edf1f6;
}
body.app-route #cdkPlanGuide {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 0 !important;
}
body.app-route #cdk .package-card {
  min-height: 190px !important;
  padding: 18px !important;
  border-radius: 20px !important;
  border-color: #e7edf5 !important;
  background: linear-gradient(180deg, #fff, #fffaf5) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .045) !important;
  grid-template-rows: auto auto auto auto 1fr auto !important;
}
body.app-route #cdk .package-card.featured {
  border-color: #c7a769 !important;
  background: linear-gradient(160deg, #fffdf7, #fff, #f9f6ff) !important;
  box-shadow: 0 18px 44px rgba(184, 137, 66, .15) !important;
}
body.app-route #cdk .package-card.best-value {
  border-color: #d9c59d !important;
  background: linear-gradient(160deg, #fff, #fffbf3) !important;
}
body.app-route #cdk .package-card .pill {
  justify-self: start !important;
}
body.app-route #cdk .package-card strong {
  font-size: 15px !important;
  color: #111827 !important;
}
body.app-route #cdk .package-price {
  font-size: clamp(24px, 2.2vw, 30px) !important;
  color: #111827 !important;
}
body.app-route #cdk .package-summary {
  color: #64748b !important;
  line-height: 1.7 !important;
}
body.app-route #cdk .package-saving {
  justify-self: start;
  margin: 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: #ecf8f1;
  color: #147a55;
  font-size: 12px;
  font-weight: 820;
}
body.app-route #cdk .package-card .button {
  width: 100% !important;
  margin-top: 6px !important;
}
body.app-route #cdk .package-note {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 12px 0 14px !important;
  padding: 10px 12px !important;
  border: 1px dashed #e7d8c0 !important;
  border-radius: 14px !important;
  background: #fffaf2 !important;
  color: #7c6a55 !important;
}
body.app-route #cdk .package-note::before {
  content: "提示";
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
} /* PACKAGE-NOTE-NO-QUESTION-MARK-20260709 */
body.app-route #cdk .balance-layout {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}
body.app-route #paymentStatusCard {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
body.app-route #cdkRedeemCard {
  grid-column: 1 !important;
  grid-row: 2 !important;
}
body.app-route #billingOrdersCard {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
body.app-route #transactionsCard {
  grid-column: 2 !important;
  grid-row: 2 / span 2 !important;
}
body.app-route #cdk .balance-layout > .subcard {
  padding: 16px !important;
  border-radius: 20px !important;
  border-color: #e7edf5 !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .04) !important;
}
body.app-route #cdkRedeemCard .stat {
  margin-bottom: 12px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #fbfdff, #fffaf5) !important;
}
body.app-route #cdkRedeemCard .compact-form {
  gap: 10px !important;
  margin-top: 0 !important;
}
body.app-route #paymentStatusCard .section-title,
body.app-route #billingOrdersCard .section-title,
body.app-route #transactionsCard .section-title {
  margin-bottom: 10px !important;
}
body.app-route #billingOrdersList,
body.app-route #transactionsList {
  max-height: 390px !important;
  overflow: auto !important;
  padding-right: 4px !important;
  scrollbar-gutter: stable !important;
}
body.app-route #transactionsList {
  max-height: 460px !important;
}
body.app-route #billingOrdersList .billing-order-row,
body.app-route #transactionsList .transaction-row {
  border-color: #edf1f6 !important;
  border-radius: 14px !important;
  background: #fff !important;
}
body.app-route #billingOrdersList .billing-order-row[data-order-status="expired"] {
  background: #fff7f7 !important;
  border-color: #fecaca !important;
}
body.app-route .billing-order-expiry {
  display: inline-flex;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}
body.app-route .billing-order-row[data-order-status="expired"] .billing-order-expiry {
  color: #b91c1c;
  font-weight: 760;
}
body.app-route #transactionsList .transaction-row {
  grid-template-columns: 96px 86px minmax(0, 1fr) 138px !important;
}
@media (max-width: 1180px) {
  body.app-route #cdkPlanGuide {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.app-route #cdk .balance-layout {
    grid-template-columns: 1fr !important;
  }
  body.app-route #paymentStatusCard,
  body.app-route #cdkRedeemCard,
  body.app-route #billingOrdersCard,
  body.app-route #transactionsCard {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}
@media (max-width: 640px) {
  body.app-route #cdk {
    padding: 16px !important;
    border-radius: 20px !important;
  }
  body.app-route #cdk > .section-title {
    align-items: stretch !important;
  }
  body.app-route #cdk .purchase-flow {
    grid-template-columns: 1fr !important;
  }
  body.app-route #cdk .purchase-flow li {
    padding: 11px 12px;
  }
  body.app-route #cdk .purchase-assurances {
    display: grid;
    gap: 7px;
  }
  body.app-route #cdk .purchase-stage-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  body.app-route #cdkPlanGuide {
    grid-template-columns: 1fr !important;
  }
  body.app-route #cdk .package-card {
    min-height: auto !important;
  }
  body.app-route #transactionsList .transaction-row {
    grid-template-columns: 1fr !important;
  }
}


    
.team-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,360px); gap:18px; align-items:start; } /* TEAM-MANAGEMENT-UX-20260722 */
.team-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.team-stat-card { border: 1px solid #ece4d8; border-radius: 20px; background: rgba(255,253,249,.9); padding: 18px; box-shadow: 0 14px 36px rgba(63,55,43,.06); }
.team-stat-card span { display:block; color:#766b5f; font-size:12px; margin-bottom:6px; }
.team-stat-card strong { font-size: 28px; letter-spacing: -.04em; }
.team-panel-grid { display:grid; gap:16px; }
.team-primary-column { grid-column:1; grid-row:1; }
.team-side-column { grid-column:2; grid-row:1; position:sticky; top:18px; align-self:start; }
.team-member-section { min-height:420px; }
.team-invite-card { border-color:#dfcfaa !important; background:linear-gradient(180deg,#fffdf8 0%,#fff9ec 100%) !important; box-shadow:0 16px 36px rgba(78,58,24,.07) !important; }
.team-invite-card.team-invite-attention { animation:team-invite-attention 1s ease; }
@keyframes team-invite-attention { 0%,100% { box-shadow:0 16px 36px rgba(78,58,24,.07); } 45% { box-shadow:0 0 0 4px rgba(180,137,67,.22),0 18px 42px rgba(78,58,24,.12); } }
.team-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
.team-card-heading > div { display:grid; gap:4px; }
.team-card-heading span { color:#9a6b20; font-size:11px; font-weight:800; letter-spacing:.08em; }
.team-card-heading h3 { margin:0; }
.team-card-heading b { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:#17130f; color:#fff; font-size:10px; }
/* TEAM-LAYOUT-MINWIDTH-20260718: allow nested identity/table grids to shrink inside the two-column team layout. */
.team-layout > *, .team-panel-grid, .team-panel-grid > *, .team-identity-card { min-width:0; }
.team-identity-card { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) auto; gap:14px; align-items:center; padding:16px 18px; border:1px solid #e8ddcf; border-radius:18px; background:#fffaf3; }
.team-identity-card > div { min-width:0; }
.team-identity-card span { display:block; margin-bottom:5px; color:#766b5f; font-size:12px; }
.team-identity-card strong, .team-identity-card code { display:block; min-width:0; overflow-wrap:anywhere; color:#111827; font-size:14px; }
.team-identity-card code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; user-select:all; }
.team-identity-card .status { grid-column:1 / -1; min-height:0; }
.team-member-table-wrap { overflow:visible; border:0; border-radius:18px; background:transparent; }
.team-member-table { display:block; width:100%; min-width:0; border-collapse:separate; }
.team-member-table thead { display:none; }
.team-member-table tbody { display:grid; gap:10px; }
.team-member-table tbody tr { display:grid; grid-template-columns:minmax(170px,1.3fr) minmax(62px,.48fr) minmax(72px,.54fr) minmax(90px,.62fr) minmax(220px,1.45fr); grid-template-areas:"member role status usage credit" "member permissions permissions actions actions"; gap:0 10px; padding:12px; border:1px solid #e8ddcf; border-radius:15px; background:#fff; }
.team-member-table tbody td { display:grid; align-content:start; gap:4px; min-width:0; padding:4px 0; border:0; text-align:left; font-size:12px; vertical-align:top; }
.team-member-table tbody td::before { content:attr(data-label); color:#817568; font-size:10px; font-weight:800; }
.team-member-table tbody td:nth-child(1) { grid-area:member; padding-right:8px; border-right:1px solid #f0e7db; }
.team-member-table tbody td:nth-child(2) { grid-area:role; }
.team-member-table tbody td:nth-child(3) { grid-area:status; }
.team-member-table tbody td:nth-child(4) { grid-area:usage; }
.team-member-table tbody td:nth-child(5) { grid-area:credit; }
.team-member-table tbody td:nth-child(6) { grid-area:permissions; align-self:end; padding-top:10px; color:#665b4e; }
.team-member-table tbody td:nth-child(7) { grid-area:actions; align-self:end; padding-top:8px; }
.team-member-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.team-period-filter { display:flex; align-items:center; gap:4px; padding:4px; border:1px solid #e5dacb; border-radius:12px; background:#fffaf3; }
.team-period-filter > span { padding:0 7px; color:#766b5f; font-size:11px; font-weight:700; }
.team-period-filter button { min-height:32px; padding:6px 10px; border:0; border-radius:8px; background:transparent; color:#62584b; font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.team-period-filter button:hover { background:#eee6da; }
.team-period-filter button.is-active { background:#17130f; color:#fff; box-shadow:0 5px 12px rgba(31,27,22,.14); }
.team-member-usage { display:grid; gap:3px; min-width:88px; }
.team-member-usage strong { font-size:17px; font-variant-numeric:tabular-nums; }
.team-member-usage small { color:#817568; font-size:11px; }
.team-credit-cell { display:grid; gap:8px; min-width:210px; }
.team-credit-balance { display:grid; gap:2px; }
.team-credit-balance strong { font-size:16px; font-variant-numeric:tabular-nums; }
.team-credit-balance small { color:#817568; font-size:11px; }
.team-credit-limit-note { margin-top:3px; padding:6px 8px; border:1px solid #ecd7ad; border-radius:9px; background:#fff8e7; color:#8a5a12 !important; line-height:1.45; }
.team-inline-grant { display:grid; grid-template-columns:minmax(100px,1fr) auto; gap:6px; }
.team-inline-grant input { width:100%; min-height:36px; padding:7px 9px; border:1px solid #d9cec0; border-radius:9px; background:#fff; color:#17130f; font:inherit; font-size:12px; }
.team-inline-grant input:focus { border-color:#8b7352; outline:2px solid rgba(139,115,82,.14); }
.team-inline-grant .button { min-height:36px; padding:7px 12px; white-space:nowrap; }
.team-role-badge, .team-status-badge { display:inline-flex; align-items:center; min-height:24px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:700; background:#f5f0ff; color:#5b34d6; }
.team-status-badge.disabled { background:#fef2f2; color:#b91c1c; }
.team-action-row { display:flex; flex-wrap:wrap; gap:8px; }
.team-credit-balance { display:grid; gap:2px; min-width:86px; }
.team-credit-balance strong { color:#17130f; font-size:16px; font-variant-numeric:tabular-nums; }
.team-credit-balance small { color:#817568; font-size:11px; }
.team-credit-grant-modal-card { width:min(560px,100%); }
.team-credit-grant-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0; }
.team-credit-grant-summary > div { padding:14px 16px; border:1px solid #e8ddcf; border-radius:16px; background:#fffaf3; }
.team-credit-grant-summary span { display:block; margin-bottom:4px; color:#766b5f; font-size:12px; }
.team-credit-grant-summary strong { color:#17130f; font-size:26px; font-variant-numeric:tabular-nums; }
.team-credit-grant-summary small { margin-left:4px; color:#766b5f; }
.team-credit-grant-form { gap:12px; }
.team-credit-grant-impact { grid-column:1 / -1; margin:0; padding:11px 13px; border:1px solid #ead9b5; border-radius:12px; background:#fff8e8; color:#76501c; font-size:12px; line-height:1.55; }
.team-invite-box { display:grid; gap:10px; padding:14px; border:1px dashed #d8cbbc; border-radius:16px; background:#fffaf3; }
.team-invite-code { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:#111; color:#fff; font-weight:700; word-break:break-all; }
.team-invite-code strong { flex:1; min-width:0; color:#fff !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:.02em; overflow-wrap:anywhere; user-select:all; }
.team-invite-code .button.secondary { flex:0 0 auto; background:#fff !important; color:#111 !important; border-color:#fff !important; }
.team-invite-box input[readonly] { color:#111827; background:#fff; overflow:hidden; text-overflow:ellipsis; }
.team-permission-grid { display:grid; gap:10px; }
.team-permission-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid #eee5d8; border-radius:14px; background:#fff; }
.team-permission-details, .team-usage-details { padding:0 !important; overflow:hidden; }
.team-usage-details { grid-column:1 / -1; grid-row:2; }
.team-details-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; cursor:pointer; list-style:none; }
.team-details-summary::-webkit-details-marker { display:none; }
.team-details-summary > div { display:grid; gap:4px; min-width:0; }
.team-details-summary strong { color:#17130f; font-size:15px; }
.team-details-summary small { color:#817568; font-size:12px; }
.team-details-summary > span { display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; color:#6f6254; font-size:11px; font-weight:800; }
.team-details-summary > span::after { content:"＋"; display:grid; place-items:center; width:24px; height:24px; border-radius:999px; background:#f0eadf; color:#17130f; font-size:14px; }
details[open] > .team-details-summary { border-bottom:1px solid #eee5d8; }
details[open] > .team-details-summary > span::after { content:"−"; }
.team-details-body { padding:16px 18px 18px; }
.team-permission-details .team-details-body { padding-top:4px; }
.team-usage-details .team-usage-chart-card { margin-bottom:14px; }
.team-usage-chart-card { display:grid; gap:14px; margin-bottom:14px; padding:16px; border:1px solid #e8ddcf; border-radius:18px; background:linear-gradient(180deg,#fffdf9 0%,#fffaf2 100%); overflow:hidden; } /* TEAM-USAGE-CHART-20260721 */
.team-usage-chart-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.team-usage-chart-heading > div { display:grid; gap:3px; }
.team-usage-chart-heading strong { color:#17130f; font-size:15px; }
.team-usage-chart-heading small { color:#817568; font-size:12px; }
.team-usage-chart-heading > span { flex:0 0 auto; padding:5px 9px; border-radius:999px; background:#f0eadf; color:#665b4e; font-size:11px; font-weight:800; }
.team-usage-chart-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.team-usage-chart-summary > div { min-width:0; padding:10px 11px; border:1px solid #eee5d8; border-radius:13px; background:rgba(255,255,255,.86); }
.team-usage-chart-summary span { display:block; margin-bottom:2px; color:#817568; font-size:11px; }
.team-usage-chart-summary strong { color:#17130f; font-size:20px; font-variant-numeric:tabular-nums; }
.team-usage-chart-summary small { margin-left:3px; color:#817568; font-size:11px; }
.team-usage-chart { display:grid; grid-template-columns:repeat(var(--team-usage-days,7),minmax(24px,1fr)); gap:8px; min-height:176px; padding:12px 10px 8px; border-radius:14px; background:repeating-linear-gradient(to top,rgba(123,109,91,.10) 0,rgba(123,109,91,.10) 1px,transparent 1px,transparent 42px),#fff; overflow-x:auto; }
.team-usage-chart > .empty-state { grid-column:1 / -1; align-self:center; }
.team-usage-chart-column { display:grid; grid-template-rows:22px minmax(96px,1fr) 20px; gap:4px; min-width:0; align-items:end; text-align:center; }
.team-usage-chart-column > strong { color:#3a2f23; font-size:11px; font-variant-numeric:tabular-nums; }
.team-usage-chart-track { display:flex; align-items:flex-end; width:100%; height:100%; min-height:96px; border-radius:8px 8px 4px 4px; background:rgba(224,215,200,.42); overflow:hidden; }
.team-usage-chart-track i { display:block; width:100%; height:var(--team-usage-bar-height,4%); min-height:4px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,#1f1d19 0%,#62584b 100%); box-shadow:0 6px 12px rgba(41,35,29,.15); transition:height .24s ease; }
.team-usage-chart-column.is-zero .team-usage-chart-track i { background:#d9d0c3; box-shadow:none; }
.team-usage-chart-column > small { overflow:hidden; color:#75695c; font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.team-usage-list { display:grid; gap:10px; }
.team-usage-item { display:grid; grid-template-columns: 1fr auto; gap:8px; padding:12px 14px; border:1px solid #eee5d8; border-radius:14px; background:#fff; }
.team-usage-item small { color:#766b5f; }
.team-empty-hero { display:grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap:18px; align-items:start; }
.purchase-target-card { display:grid; gap:10px; margin: 0 0 14px; padding:16px; border:1px solid #eadfce; border-radius:20px; background:rgba(255,253,249,.92); }
.purchase-target-options { display:flex; flex-wrap:wrap; gap:10px; }
.purchase-target-option { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid #e5d9c8; border-radius:999px; background:#fff; color:#111827; font-weight:800; cursor:pointer; }
.purchase-target-option input { width:auto; min-height:auto; accent-color:#2563eb; }
.purchase-target-option:has(input:checked) { border-color:#111; background:#111; color:#fff !important; } /* PURCHASE-TARGET-READABLE-20260709 */
.purchase-target-option:has(input:checked) input { accent-color:#fff; }
.purchase-target-hint { color:#6f6458; font-size:13px; margin:0; }

@media (max-width: 1180px) { .team-layout, .team-empty-hero { grid-template-columns:1fr; } .team-primary-column, .team-side-column, .team-usage-details { grid-column:1; grid-row:auto; } .team-side-column { position:static; } .team-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .team-stat-grid, .team-identity-card { grid-template-columns:1fr; } .team-identity-card .button, .team-action-row .button { width:100%; } .team-credit-grant-summary { grid-template-columns:1fr; } .team-member-toolbar { width:100%; align-items:stretch; flex-direction:column; } .team-period-filter { width:100%; } .team-period-filter > span { display:none; } .team-period-filter button { flex:1; } .team-member-toolbar > .button { width:100%; } .team-details-summary { align-items:flex-start; padding:15px; } .team-details-summary > span { font-size:10px; } .team-details-body { padding:12px; } .team-usage-chart-card { padding:13px 10px; } .team-usage-chart-heading { align-items:flex-start; flex-direction:column; } .team-usage-chart-summary { gap:6px; } .team-usage-chart-summary > div { padding:9px 7px; } .team-usage-chart { gap:5px; padding-inline:5px; } }
@media (max-width: 560px) {
  .team-member-table-wrap { overflow:visible; border:0; background:transparent; }
  .team-member-table { display:block; min-width:0; }
  .team-member-table thead { display:none; }
  .team-member-table tbody { display:grid; gap:10px; }
  .team-member-table tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:none; gap:0; padding:0; border:1px solid #e8ddcf; border-radius:14px; background:#fff; overflow:hidden; }
  .team-member-table tbody td { display:grid; gap:5px; min-width:0; padding:10px !important; border:0; border-bottom:1px solid #f0e7db; }
  .team-member-table tbody td::before { content:attr(data-label); color:#817568; font-size:10px; font-weight:800; }
  .team-member-table tbody td:first-child, .team-member-table tbody td:nth-child(5), .team-member-table tbody td:nth-child(6), .team-member-table tbody td:nth-child(7) { grid-column:1 / -1; }
  .team-member-table tbody td:last-child { border-bottom:0; }
  .team-member-table tbody td:nth-child(n) { grid-area:auto; border-right:0; }
  .team-inline-grant { grid-template-columns:minmax(0,1fr) auto; }
}

/* TEMPLATE-TASK-GALLERY-20260802: Cursor-inspired warm, outcome-first template gallery. */
/* TEMPLATE-COVER-FILL-20260802: each comparison image fills one exact half; cards avoid fixed empty body space. */
body.app-route #template-square {
  --template-canvas: #f3f2ed;
  --template-surface: #fbfbf8;
  --template-ink: #171714;
  --template-muted: #74736c;
  --template-line: rgba(23, 23, 20, .11);
  --template-soft: #e9e8e1;
  padding: 0 0 52px !important;
  overflow: hidden;
  border: 1px solid var(--template-line) !important;
  border-radius: 24px !important;
  background: var(--template-canvas) !important;
  box-shadow: none !important;
  color: var(--template-ink);
}

body.app-route:has(#template-square.workspace-page-active) :is(.customer-service-float, .feedback-fab) {
  display: none !important;
}

body.app-route #template-square .template-square-hero {
  min-height: 320px;
  margin: 0;
  padding: 58px 54px 48px;
  align-items: flex-end;
  border: 0;
  border-bottom: 1px solid var(--template-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.app-route #template-square .template-square-hero-copy { max-width: 840px; }
body.app-route #template-square .template-square-hero .eyebrow {
  color: #75746d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.app-route #template-square .template-square-hero h2 {
  max-width: 780px;
  margin: 18px 0 14px;
  color: var(--template-ink) !important;
  font-size: clamp(40px, 4.1vw, 62px) !important;
  font-weight: 650 !important;
  line-height: 1.03 !important;
  letter-spacing: -.045em;
}
body.app-route #template-square .template-square-hero p {
  max-width: 690px;
  margin: 0;
  color: var(--template-muted) !important;
  font-size: 15px;
  line-height: 1.75;
}
body.app-route #template-square .template-square-stats {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
body.app-route #template-square .template-square-stats span {
  padding: 7px 11px;
  border: 1px solid var(--template-line);
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  color: var(--template-muted);
  font-size: 12px;
}
body.app-route #template-square .template-square-stats strong { color: var(--template-ink); font-size: 12px; }
body.app-route #template-square .template-square-toolbar { flex: 0 0 auto; }
body.app-route #template-square .template-square-publish,
body.app-route #template-square .template-square-card-footer .button,
body.app-route .template-detail-actions .button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #171714 !important;
  border-radius: 999px !important;
  background: #171714 !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.app-route #template-square .template-square-publish:hover,
body.app-route #template-square .template-square-card-footer .button:hover,
body.app-route .template-detail-actions .button:hover { background: #35352f !important; transform: none !important; }

body.app-route #template-square .template-square-switcher {
  width: fit-content;
  margin: 28px 36px 0;
  padding: 4px;
  border: 1px solid var(--template-line);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
}
body.app-route #template-square .template-square-tab {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: var(--template-muted);
  background: transparent;
}
body.app-route #template-square .template-square-tab.is-active { color: var(--template-ink); background: #fff; box-shadow: 0 1px 5px rgba(23,23,20,.08); }
body.app-route #template-square[data-template-experience="agent"] .template-square-tab[data-template-square-view="agent"].is-active {
  color: #fff;
  background: #191a17;
}
body.app-route #template-square[data-template-experience="classic"] .template-square-tab[data-template-square-view="classic"].is-active {
  color: #563f22;
  background: #fffaf0;
}
body.app-route #template-square .template-square-card[data-template-experience="agent"] .template-square-cover .badge {
  color: #fff;
  background: rgba(25,26,23,.88);
}
body.app-route #template-square .template-square-card[data-template-experience="agent"] .template-square-card-footer .button {
  background: #191a17 !important;
}
body.app-route #template-square .template-square-card[data-template-experience="classic"] .template-square-card-footer .button {
  color: #3f3527 !important;
  background: #eee8dc !important;
}

body.app-route #template-square .template-square-categories {
  display: flex;
  gap: 8px;
  margin: 26px 36px 0;
  padding: 0 0 4px;
  overflow-x: auto;
}
body.app-route #template-square .template-square-categories button {
  min-height: 42px;
  padding: 0 15px;
  flex: 0 0 auto;
  border: 1px solid var(--template-line);
  border-radius: 999px;
  background: transparent;
  color: var(--template-muted);
  font-size: 13px;
  font-weight: 650;
}
body.app-route #template-square .template-square-categories button:hover { border-color: rgba(23,23,20,.28); color: var(--template-ink); background: rgba(255,255,255,.35); }
body.app-route #template-square .template-square-categories button.is-active { border-color: #171714; color: #fff; background: #171714; }

body.app-route #template-square .template-square-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 18px 36px 0;
}
body.app-route #template-square .template-square-search input {
  width: 100%;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--template-line);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  color: var(--template-ink);
  font-size: 14px;
  box-shadow: none;
}
body.app-route #template-square .template-square-search input:focus { outline: 2px solid rgba(23,23,20,.18); outline-offset: 2px; }
body.app-route #template-square .template-square-filter-toggle { min-width: 104px; min-height: 48px; border-radius: 14px; }
body.app-route #template-square .template-square-filter-toggle span { display: inline-grid; min-width: 20px; height: 20px; place-items: center; margin-left: 4px; border-radius: 999px; background: var(--template-soft); font-size: 11px; }
body.app-route #template-square .template-square-filterbar {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important;
  gap: 10px;
  margin: 10px 36px 0;
  padding: 14px;
  border: 1px solid var(--template-line);
  border-radius: 16px;
  background: rgba(255,255,255,.5);
}
body.app-route #template-square .template-square-filterbar.hidden { display: none !important; }
body.app-route #template-square .template-square-filterbar label { display: grid; gap: 6px; color: var(--template-muted); font-size: 11px; }
body.app-route #template-square .template-square-filterbar select { height: 42px; border: 1px solid var(--template-line); border-radius: 10px; background: #fff; color: var(--template-ink); }
body.app-route #template-square .template-square-reset { align-self: end; min-height: 42px; border-radius: 10px; }
body.app-route #template-square .template-square-summary { margin: 14px 36px 0; color: var(--template-muted); font-size: 12px; }
body.app-route #template-square .template-persona-hint { color: var(--template-muted) !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
body.app-route #template-square > section > .status { margin-inline: 36px; }

body.app-route #template-square .template-square-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px;
  margin: 20px 36px 0;
}
body.app-route #template-square .template-square-card {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--template-line) !important;
  border-radius: 18px !important;
  background: var(--template-surface) !important;
  box-shadow: none !important;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
body.app-route #template-square .template-square-card:hover { border-color: rgba(23,23,20,.28) !important; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(23,23,20,.07) !important; }
body.app-route #template-square .template-square-card.is-persona-recommended { border-color: var(--template-line) !important; }
body.app-route #template-square .template-square-cover { aspect-ratio: 4 / 3; height: auto; border-radius: 0; background: #e8e7e1; }
body.app-route #template-square .template-square-cover > img { width: 100%; height: 100%; object-fit: cover; }
body.app-route #template-square .template-square-card:hover .template-square-cover img { transform: none; }
body.app-route #template-square .template-square-comparison { width: 100%; height: 100%; }
body.app-route #template-square .template-square-comparison-half { width: 100%; height: 100%; overflow: hidden; }
body.app-route #template-square .template-square-comparison-half img { width: 100%; height: 100%; object-fit: cover; }
body.app-route #template-square .template-square-comparison-half.is-before img { filter: none; opacity: 1; }
body.app-route #template-square .template-square-comparison::before { width: 1px; background: rgba(255,255,255,.88); }
body.app-route #template-square .template-square-comparison::after { display: none; }
body.app-route #template-square .template-square-comparison-half b,
body.app-route #template-square .template-square-single-label {
  bottom: 10px;
  top: auto;
  padding: 5px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(17,17,15,.75);
  color: #fff;
  font-size: 10px;
  backdrop-filter: blur(8px);
}
body.app-route #template-square .template-square-cover .template-square-badges { top: 10px; left: 10px; right: auto; }
body.app-route #template-square .template-square-cover .badge { border: 0; border-radius: 999px; background: rgba(251,251,248,.86); color: var(--template-ink); font-size: 10px; backdrop-filter: blur(8px); }
body.app-route #template-square .template-square-card-body { display: flex; flex-direction: column; min-height: 0; padding: 17px; }
body.app-route #template-square .template-square-card-body h3 { margin: 0; color: var(--template-ink); font-size: 18px; line-height: 1.35; letter-spacing: -.02em; }
body.app-route #template-square .template-square-card-body > p { display: -webkit-box; min-height: 40px; margin: 6px 0 0; overflow: hidden; color: var(--template-muted); font-size: 13px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.app-route #template-square .template-square-actions { display: grid; gap: 5px; margin: 12px 0 0; padding: 0; list-style: none; }
body.app-route #template-square .template-square-actions li { position: relative; padding-left: 16px; color: #4b4b45; font-size: 12px; line-height: 1.45; }
body.app-route #template-square .template-square-actions li::before { content: ""; position: absolute; left: 1px; top: .48em; width: 6px; height: 6px; border-radius: 50%; background: #929b57; }
body.app-route #template-square .template-square-io { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 7px; margin-top: 12px; padding: 9px 10px; border-radius: 11px; background: #eeede7; color: #55554f; font-size: 11px; line-height: 1.35; }
body.app-route #template-square .template-square-io span:last-child { text-align: right; }
body.app-route #template-square .template-square-io b { color: #93928b; }
body.app-route #template-square .template-square-card-footer { margin-top: auto; padding-top: 14px; border: 0; align-items: center; }
body.app-route #template-square .template-square-uploader { max-width: 52%; color: #8a8982; font-size: 10px; }
body.app-route #template-square .template-square-card-footer .button { min-height: 38px; padding: 0 14px; font-size: 12px; }

body.template-detail-open { overflow: hidden; }
body.app-route .template-detail-overlay { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: flex-end; background: rgba(20,20,17,.28); backdrop-filter: blur(3px); }
body.app-route .template-detail-overlay.hidden { display: none; }
body.app-route .template-detail-panel { display: grid; grid-template-rows: auto minmax(0,1fr) auto; width: min(460px, 100%); height: 100%; outline: 0; border-left: 1px solid rgba(23,23,20,.12); background: #f8f7f2; box-shadow: -22px 0 60px rgba(23,23,20,.12); }
body.app-route .template-detail-head { display: flex; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid rgba(23,23,20,.1); }
body.app-route .template-detail-head span { color: #7d7c74; font-size: 11px; }
body.app-route .template-detail-head h3 { margin: 5px 0 0; color: #171714; font-size: 22px; line-height: 1.25; }
body.app-route .template-detail-close { width: 40px; height: 40px; border: 1px solid rgba(23,23,20,.12); border-radius: 50%; background: transparent; color: #171714; font-size: 24px; line-height: 1; }
body.app-route .template-detail-close:hover { background: #ebeae4; }
body.app-route .template-detail-scroll { overflow-y: auto; padding: 22px 24px 28px; }
body.app-route .template-detail-comparison { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 15px; background: #e8e7e1; }
body.app-route .template-detail-comparison figure { position: relative; min-width: 0; margin: 0; overflow: hidden; }
body.app-route .template-detail-comparison figure + figure { border-left: 1px solid rgba(255,255,255,.8); }
body.app-route .template-detail-comparison img { width: 100%; height: 100%; object-fit: cover; }
body.app-route .template-detail-comparison figcaption,
body.app-route .template-detail-single span { position: absolute; left: 10px; bottom: 10px; padding: 5px 8px; border-radius: 999px; background: rgba(17,17,15,.75); color: #fff; font-size: 10px; }
body.app-route .template-detail-single { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 15px; }
body.app-route .template-detail-single img { width: 100%; height: 100%; object-fit: cover; }
body.app-route .template-detail-lead { margin: 18px 0 0; color: #65645e; font-size: 13px; line-height: 1.7; }
body.app-route .template-detail-section { padding: 20px 0; border-bottom: 1px solid rgba(23,23,20,.09); }
body.app-route .template-detail-section h4 { margin: 0 0 11px; color: #171714; font-size: 13px; }
body.app-route .template-detail-section ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
body.app-route .template-detail-section li { position: relative; padding-left: 17px; color: #575750; font-size: 12px; line-height: 1.55; }
body.app-route .template-detail-section li::before { content: "✓"; position: absolute; left: 0; color: #879241; font-weight: 800; }
body.app-route .template-detail-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 20px 0; border-bottom: 1px solid rgba(23,23,20,.09); }
body.app-route .template-detail-facts div { display: grid; gap: 5px; padding: 12px; border-radius: 12px; background: #ecebe5; }
body.app-route .template-detail-facts span { color: #83827b; font-size: 10px; }
body.app-route .template-detail-facts strong { color: #363631; font-size: 12px; line-height: 1.45; }
body.app-route .template-detail-tags { display: flex; flex-wrap: wrap; gap: 7px; }
body.app-route .template-detail-tags span { padding: 6px 9px; border-radius: 999px; background: #e8e7e1; color: #55554f; font-size: 11px; }
body.app-route .template-detail-prompt { margin-top: 18px; border: 1px solid rgba(23,23,20,.1); border-radius: 12px; background: rgba(255,255,255,.38); }
body.app-route .template-detail-prompt summary { padding: 12px; color: #4c4c46; font-size: 12px; cursor: pointer; }
body.app-route .template-detail-prompt p { max-height: 220px; margin: 0; overflow: auto; padding: 0 12px 14px; color: #74736c; font-size: 11px; line-height: 1.65; white-space: pre-wrap; }
body.app-route .template-detail-usage { margin: 18px 0 0; color: #92918a; font-size: 10px; }
body.app-route .template-detail-actions { padding: 16px 24px; border-top: 1px solid rgba(23,23,20,.1); background: rgba(248,247,242,.94); }
body.app-route .template-detail-actions .button { width: 100%; min-height: 48px; }

body.app-route #template-square .community-template-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; grid-column: 1 / -1; margin: 0; padding: 16px; border: 1px solid var(--template-line); border-radius: 14px; background: #f6f5f0; }
body.app-route #template-square .community-template-guide legend { padding: 0 6px; color: #24241f; font-weight: 700; }
body.app-route #template-square .community-template-guide > p { grid-column: 1 / -1; margin: 0; color: #77766f; font-size: 11px; }
body.app-route #template-square .community-template-guide label:nth-last-child(1) { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  body.app-route #template-square .template-square-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.app-route #template-square .template-square-filterbar { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  body.app-route #template-square .template-square-reset { width: 100%; }
}

@media (max-width: 640px) {
  body.app-route #template-square { border-radius: 18px !important; }
  body.app-route #template-square .template-square-hero { min-height: 0; align-items: stretch; padding: 34px 18px 30px; }
  body.app-route #template-square .template-square-hero h2 { margin-top: 14px; font-size: 34px !important; line-height: 1.06 !important; }
  body.app-route #template-square .template-square-hero p { font-size: 13px; line-height: 1.65; }
  body.app-route #template-square .template-square-toolbar { margin-top: 24px; }
  body.app-route #template-square .template-square-toolbar .button { width: 100%; min-height: 46px; }
  body.app-route #template-square .template-square-switcher,
  body.app-route #template-square .template-square-categories,
  body.app-route #template-square .template-square-search-row,
  body.app-route #template-square .template-square-filterbar,
  body.app-route #template-square .template-square-summary,
  body.app-route #template-square .template-square-grid { margin-left: 14px; margin-right: 14px; }
  body.app-route #template-square .template-square-switcher { width: auto; }
  body.app-route #template-square .template-square-tab { flex: 1; min-height: 40px; }
  body.app-route #template-square .template-square-categories { margin-top: 18px; }
  body.app-route #template-square .template-square-categories button { min-height: 44px; }
  body.app-route #template-square .template-square-search-row { grid-template-columns: minmax(0,1fr) auto; }
  body.app-route #template-square .template-square-filter-toggle { min-width: 88px; padding-inline: 12px; }
  body.app-route #template-square .template-square-filterbar { grid-template-columns: 1fr !important; }
  body.app-route #template-square .template-square-grid { grid-template-columns: 1fr !important; gap: 14px; }
  body.app-route #template-square .template-square-card-body { min-height: 0; padding: 18px; }
  body.app-route #template-square .template-square-card-footer .button { min-height: 44px; }
  body.app-route .template-detail-panel { width: 100%; border-left: 0; }
  body.app-route .template-detail-head { padding: 18px 16px 14px; }
  body.app-route .template-detail-scroll { padding: 16px 16px 24px; }
  body.app-route .template-detail-actions { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  body.app-route #template-square .community-template-guide { grid-template-columns: 1fr; }
  body.app-route #template-square .community-template-guide > * { grid-column: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.app-route #template-square .template-square-card { transition: none; }
  body.app-route #template-square .template-square-card:hover { transform: none; }
}

/* REFERENCE-REMIX-20260727: isolated next-workspace flow; classic workspace remains unchanged. */
.next-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.next-action-card {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 174px;
  padding: 20px;
  border: 1px solid #e1e2db;
  border-radius: 18px;
  background: #fff;
  color: #1b1d19 !important;
  gap: 7px;
  box-shadow: 0 12px 32px rgba(57, 54, 43, .045);
}
.next-action-card:hover {
  border-color: #a9ba58;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(57, 61, 37, .09);
}
.next-action-card.is-featured {
  border-color: #cdd89a;
  background: linear-gradient(145deg, #f5f8df, #fff);
}
.next-action-card .next-action-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: #f0f3e3;
  color: #596516;
  font-size: 18px;
  font-weight: 850;
}
.next-action-card strong { font-size: 16px; }
.next-action-card small { color: #777c72; font-size: 11px; line-height: 1.55; }
.next-action-card > b {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e8f09f;
  color: #4e590d;
  font-size: 9px;
}
.next-overview-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #e1e2db;
  border-radius: 17px;
  background: rgba(255, 255, 253, .88);
  overflow: hidden;
}
.next-overview-strip > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: 17px 20px;
  border-right: 1px solid #e8e9e2;
}
.next-overview-strip > div:last-child { border-right: 0; }
.next-overview-strip span { grid-column: 1 / -1; color: #7d8179; font-size: 10px; }
.next-overview-strip strong { color: #171916; font-size: 25px; }
.next-overview-strip small { color: #8a8e85; font-size: 9px; }

.reference-remix-page {
  width: min(1320px, 100%);
  margin: 0 auto;
}
.reference-remix-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.reference-remix-heading > div { display: grid; gap: 4px; }
.reference-remix-heading span { color: #77821d; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.reference-remix-heading h1 { margin: 0; color: #171916; font-size: clamp(32px, 3vw, 48px); letter-spacing: -.04em; }
.reference-remix-heading p { margin: 0; color: #747870; font-size: 13px; }
.reference-remix-layout {
  display: grid;
  grid-template-columns: minmax(620px, 1.55fr) minmax(300px, .78fr);
  gap: 18px;
  align-items: start;
}
.reference-remix-form,
.reference-remix-guide,
.reference-remix-progress {
  border: 1px solid #dedfd8;
  border-radius: 18px;
  background: rgba(255, 255, 253, .97);
  box-shadow: 0 16px 42px rgba(57, 54, 43, .055);
}
.reference-remix-form { overflow: hidden; }
.reference-remix-step { padding: 18px 20px; border-bottom: 1px solid #ecece7; }
.reference-remix-step-title {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 13px;
}
.reference-remix-step-title > b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #b2c366;
  color: #fff;
  font-size: 12px;
}
.reference-remix-step-title h2 { margin: 0; color: #23251f; font-size: 16px; }
.reference-remix-step-title h2 small { color: #92968c; font-size: 10px; font-weight: 600; }
.reference-remix-step-title p { margin: 3px 0 0; color: #81857c; font-size: 10px; }
.reference-remix-upload-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.reference-remix-upload-actions input[type="url"] { flex: 1; min-width: 210px; min-height: 38px; }
.reference-remix-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}
.reference-remix-preview-grid.is-product { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.reference-remix-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 74px;
  padding: 14px;
  border: 1px dashed #d8dbcf;
  border-radius: 12px;
  background: #fafbf7;
  color: #8b8f86;
  font-size: 10px;
}
.reference-remix-preview {
  position: relative;
  margin: 0;
  border: 1px solid #e1e3da;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.reference-remix-preview img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.reference-remix-preview figcaption { padding: 6px 8px; color: #666b61; font-size: 9px; }
.reference-remix-preview button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #d75246;
  cursor: pointer;
}
.reference-remix-choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.reference-remix-choice-row label input,
.reference-remix-mode-grid label input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}
.reference-remix-choice-row label span {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid #dedfd8;
  border-radius: 10px;
  background: #fff;
  color: #4b5047;
  font-size: 11px;
  cursor: pointer;
}
.reference-remix-choice-row label input:checked + span {
  border-color: #9faf4c;
  background: #f1f5db;
  color: #31370c;
  font-weight: 750;
}
.reference-remix-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reference-remix-mode-grid label > span {
  display: grid;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid #dedfd8;
  border-radius: 12px;
  background: #fff;
  gap: 3px;
  cursor: pointer;
}
.reference-remix-mode-grid label strong { color: #2c3029; font-size: 13px; }
.reference-remix-mode-grid label small { color: #81867c; font-size: 9px; }
.reference-remix-mode-grid label input:checked + span { border-color: #9faf4c; background: #f4f7e6; box-shadow: inset 3px 0 #a8bc43; }
.reference-remix-step textarea { min-height: 94px; resize: vertical; }
.reference-remix-more { margin: 14px 20px 0; border: 1px solid #e1e3da; border-radius: 12px; background: #fafbf7; overflow: hidden; }
.reference-remix-more summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: #33372f;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.reference-remix-more summary span { color: #81857c; font-size: 9px; font-weight: 500; }
.reference-remix-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px 14px; }
.reference-remix-more-grid label { display: grid; gap: 6px; color: #666a62; font-size: 10px; }
.reference-remix-submit-row { display: grid; grid-template-columns: minmax(260px, .8fr) 1fr; align-items: center; gap: 14px; padding: 16px 20px 8px; }
.reference-remix-submit {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: #171916;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.reference-remix-submit:disabled { background: #c4c6bf; cursor: not-allowed; }
.reference-remix-submit-row span { color: #858980; font-size: 10px; }
#referenceRemixStatus { min-height: 32px; margin: 0 20px 12px; }
.reference-remix-guide { position: sticky; top: 18px; display: grid; gap: 14px; padding: 20px; }
.reference-remix-guide h2 { margin: 0; color: #20231e; font-size: 17px; }
.reference-remix-guide-pair { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 7px; }
.reference-remix-guide-pair img { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; object-fit: cover; }
.reference-remix-guide-pair span { color: #9caf43; font-size: 20px; text-align: center; }
.reference-remix-guide ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.reference-remix-guide li { color: #555b50; font-size: 11px; }
.reference-remix-guide li::before { content: "✓"; margin-right: 7px; color: #829225; font-weight: 850; }
.reference-remix-compliance { margin: 0; padding: 12px; border: 1px solid #cdd89a; border-radius: 11px; background: #f5f8e7; color: #596220; font-size: 10px; }
.reference-remix-progress { display: grid; gap: 12px; margin-top: 18px; padding: 18px; }
.reference-remix-progress > header { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.reference-remix-progress header span { color: #7f8928; font-size: 10px; font-weight: 800; }
.reference-remix-progress h2 { margin: 2px 0 0; color: #22251f; font-size: 20px; }
.reference-remix-progress header a { color: #6e7468; font-size: 10px; }
.reference-remix-job-list { display: grid; gap: 9px; }
.reference-remix-job {
  display: grid;
  grid-template-columns: 28px 104px minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #e3e4de;
  border-radius: 13px;
  background: #fff;
}
.reference-remix-job-index { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eef1df; color: #657019; font-size: 10px; font-weight: 800; }
.reference-remix-job-preview { display: grid; place-items: center; width: 104px; height: 78px; border-radius: 9px; background: #f2f2ee; overflow: hidden; }
.reference-remix-job-preview img { width: 100%; height: 100%; object-fit: cover; }
.reference-remix-job-placeholder { color: #aeb3a7; font-size: 26px; }
.reference-remix-job-copy { display: grid; gap: 3px; }
.reference-remix-job-copy strong { color: #30332e; font-size: 12px; }
.reference-remix-job-copy span { color: #858a80; font-size: 10px; }
.reference-remix-job.is-succeeded .reference-remix-job-copy span { color: #74851b; }
.reference-remix-job.is-failed .reference-remix-job-copy span { color: #c65145; }
.reference-remix-job-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }
.reference-remix-job-actions .button { min-height: 34px; padding: 7px 10px; font-size: 10px; }

@media (max-width: 1180px) {
  .next-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-remix-layout { grid-template-columns: 1fr; }
  .reference-remix-guide { position: static; grid-template-columns: 1fr 1fr; }
  .reference-remix-guide h2,
  .reference-remix-guide ul,
  .reference-remix-compliance { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body.workspace-ui-next.app-route #appView { padding-top: 88px !important; }
  .next-action-grid { grid-template-columns: 1fr; }
  .next-action-card { min-height: 136px; }
  .next-overview-strip { grid-template-columns: 1fr; }
  .next-overview-strip > div { border-right: 0; border-bottom: 1px solid #e8e9e2; }
  .next-overview-strip > div:last-child { border-bottom: 0; }
  .reference-remix-heading { align-items: start; flex-direction: column; }
  .reference-remix-step { padding: 16px 14px; }
  .reference-remix-preview-grid,
  .reference-remix-preview-grid.is-product { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-remix-mode-grid,
  .reference-remix-more-grid { grid-template-columns: 1fr; }
  .reference-remix-more { margin-inline: 14px; }
  .reference-remix-submit-row { position: sticky; bottom: 78px; z-index: 4; grid-template-columns: 1fr; padding: 12px 14px; background: rgba(255,255,253,.96); box-shadow: 0 -8px 22px rgba(30,30,25,.06); }
  #referenceRemixStatus { margin-inline: 14px; }
  .reference-remix-guide { grid-template-columns: 1fr; padding: 16px; }
  .reference-remix-guide h2,
  .reference-remix-guide ul,
  .reference-remix-compliance { grid-column: 1; }
  .reference-remix-progress > header { align-items: start; flex-direction: column; }
  .reference-remix-job { grid-template-columns: 28px 82px minmax(0, 1fr); }
  .reference-remix-job-preview { width: 82px; height: 68px; }
  .reference-remix-job-actions { grid-column: 1 / -1; justify-content: stretch; }
  .reference-remix-job-actions .button { flex: 1; }
}

/* ROLE-PERSONA-UX-20260714: role-oriented entry order and cross-tool workflow context. */
body.app-route .workspace-persona-home-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
}
body.app-route .workspace-persona-select {
  display: grid;
  gap: 5px;
  min-width: 154px;
  color: #3f4a46 !important;
  font-size: 12px;
  font-weight: 700;
}
body.app-route .workspace-persona-select select {
  min-height: 38px;
  padding: 7px 34px 7px 10px;
  border: 1px solid #cbd5d1 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #17201d !important;
  font-size: 13px;
  font-weight: 700;
}
body.app-route .workspace-persona-home {
  padding: 16px 0;
  border-top: 1px solid #dfe6e2;
  border-bottom: 1px solid #dfe6e2;
}
body.app-route .workspace-persona-home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
body.app-route .workspace-persona-home-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid #dbe4df;
  border-radius: 8px;
  background: #fff;
}
body.app-route .workspace-persona-home-item > b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #173d32;
  color: #fff !important;
  font-size: 13px;
}
body.app-route .workspace-persona-action {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #17201d !important;
  text-decoration: none;
}
body.app-route .workspace-persona-action span {
  color: inherit !important;
  font-size: 14px;
  font-weight: 800;
}
body.app-route .workspace-persona-action small {
  color: #5b6863 !important;
  font-size: 12px;
}
.history-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .74);
  backdrop-filter: blur(8px);
}
.history-preview-modal-card {
  width: min(92vw, 1040px);
  max-height: 92vh;
  display: grid;
  grid-template-rows: auto minmax(240px, 1fr) auto;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .32);
}
.history-preview-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.history-preview-modal-head h3 { margin: 0 0 4px; }
.history-preview-modal-head p { margin: 0; color: #64748b; font-size: 12px; }
.history-preview-frame {
  min-height: 360px;
  max-height: calc(92vh - 150px);
  display: grid;
  place-items: center;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: repeating-linear-gradient(135deg, #f8fafc 0 12px, #f1f5f9 12px 24px);
}
.history-preview-frame > img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 170px);
  object-fit: contain;
}
/* HISTORY-ALL-RESULTS-GALLERY-20260721: show every result together and allow click-to-expand. */
.history-preview-gallery {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-self: start;
  padding: 12px;
}
.history-preview-gallery-item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.history-preview-gallery-item.is-expanded { grid-column: 1 / -1; }
.history-preview-gallery-button {
  width: 100%;
  display: grid;
  gap: 0;
  padding: 0;
  border: 0;
  background: #fff;
  color: #334155;
  cursor: zoom-in;
}
.history-preview-gallery-item.is-expanded .history-preview-gallery-button { cursor: zoom-out; }
.history-preview-gallery-button img {
  width: 100%;
  height: 380px;
  display: block;
  object-fit: contain;
  background: #f8fafc;
}
.history-preview-gallery-item.is-expanded .history-preview-gallery-button img {
  height: auto;
  max-height: none;
}
.history-preview-gallery-button > span {
  padding: 9px 12px;
  border-top: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}
.history-preview-gallery-item.is-error { display: grid; min-height: 180px; place-items: center; }
.history-preview-carousel {
  position: relative;
  width: 100%;
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: 16px 76px 48px;
}
.history-preview-carousel > img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 220px);
  object-fit: contain;
  transition: opacity .16s ease;
}
.history-preview-carousel.is-loading > img { opacity: .42; }
.history-preview-carousel-nav {
  position: absolute;
  top: 50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0 0 5px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, .68);
  color: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .24);
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
}
.history-preview-carousel-nav.is-previous { left: 14px; }
.history-preview-carousel-nav.is-next { right: 14px; }
.history-preview-carousel-nav:disabled { opacity: .28; cursor: default; }
.history-preview-carousel-counter {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .76);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.history-preview-loading {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 32px;
  color: #475569;
  text-align: center;
}
.history-preview-loading span:last-child { color: #64748b; font-size: 12px; }
.history-preview-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid #e2e8f0;
  border-top-color: #111827;
  border-radius: 50%;
  animation: history-preview-spin .8s linear infinite;
}
@keyframes history-preview-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .history-date-heading { top: 82px; }
  .history-preview-modal { padding: 10px; }
  .history-preview-modal-card { width: 100%; max-height: 96vh; padding: 12px; border-radius: 14px; }
  .history-preview-modal-head { align-items: flex-start; }
  .history-preview-modal-head p { display: none; }
  .history-preview-frame { min-height: 260px; max-height: calc(96vh - 130px); }
  .history-preview-frame > img { max-height: calc(96vh - 150px); }
  .history-preview-gallery { grid-template-columns: 1fr; gap: 10px; padding: 8px; }
  .history-preview-gallery-button img { height: 300px; }
  .history-preview-gallery-item.is-expanded { grid-column: 1; }
  .history-preview-carousel { min-height: 260px; padding: 10px 46px 44px; }
  .history-preview-carousel > img { max-height: calc(96vh - 200px); }
  .history-preview-carousel-nav { width: 42px; height: 42px; font-size: 34px; }
  .history-preview-carousel-nav.is-previous { left: 4px; }
  .history-preview-carousel-nav.is-next { right: 4px; }
}
body.app-route .workspace-persona-action:hover span { color: #0f766e !important; }
body.app-route .workspace-persona-context {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(142px, 170px) auto;
  gap: 16px;
  align-items: center;
  align-self: start;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid #d8e2dd;
  border-left: 4px solid #0f766e;
  border-radius: 8px;
  background: #f7faf8;
}
body.app-route .workspace-persona-context.hidden { display: none !important; }
body.app-route #appView { align-content: start; grid-auto-rows: max-content; }
body.app-route .workspace-persona-context-copy { display: grid; gap: 3px; min-width: 0; }
body.app-route .workspace-persona-kicker {
  color: #0f766e !important;
  font-size: 11px;
  font-weight: 800;
}
body.app-route .workspace-persona-context-copy strong {
  color: #17201d !important;
  font-size: 14px;
}
body.app-route .workspace-persona-context-copy p {
  margin: 0;
  color: #45534e !important;
  font-size: 12px;
  line-height: 1.5;
}
body.app-route .workspace-persona-context-toggle {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #cbd8d2;
  border-radius: 8px;
  background: #fff;
  color: #173d32;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
body.app-route .workspace-persona-guide-restore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  align-self: start;
  width: max-content;
  min-height: 32px;
  margin: 0 0 8px auto;
  padding: 5px 10px;
  border: 1px solid #cbd8d2;
  border-radius: 8px;
  background: #fff;
  color: #173d32;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
body.app-route .workspace-persona-guide-restore.hidden { display: none !important; }
body.app-route .workspace-persona-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
body.app-route .workspace-persona-action.compact {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #cbd8d2;
  border-radius: 8px;
  background: #fff;
}
body.app-route .workspace-persona-action.compact.is-current {
  border-color: #173d32;
  background: #173d32;
  color: #fff !important;
}
body.app-route .template-persona-hint {
  margin: 10px 0 4px;
  padding: 9px 11px;
  border-left: 3px solid #b45309;
  background: #fff9ed;
  color: #69411b !important;
  font-size: 12px;
}
body.app-route .template-square-badges { display: flex; flex-wrap: wrap; gap: 6px; }
body.app-route .template-square-card.is-persona-recommended { border-color: #9dc8b9 !important; }
body.app-route .template-square-card .badge.persona-recommended {
  background: #e9f7f1 !important;
  color: #0f604f !important;
}
body.app-route .template-square-uploader {
  margin: 8px 0 0;
  color: #4b5b55 !important;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
  body.app-route .workspace-persona-context {
    grid-template-columns: minmax(220px, 1fr) minmax(142px, 170px) auto;
  }
  body.app-route .workspace-persona-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}

/* TEMPLATE-EXPERIENCE-SPLIT-20260803: Agent and classic templates are distinct creation paths. */
body.app-route #template-square[data-template-experience="agent"] .template-square-tab[data-template-square-view="agent"].is-active {
  color: #fff !important;
  background: #191a17 !important;
}

body.app-route #template-square[data-template-experience="classic"] .template-square-tab[data-template-square-view="classic"].is-active {
  color: #563f22 !important;
  background: #fffaf0 !important;
}

body.app-route #template-square .template-square-card[data-template-experience="agent"] .template-square-cover .badge {
  color: #fff !important;
  background: rgba(25, 26, 23, .88) !important;
}

body.app-route #template-square .template-square-card[data-template-experience="agent"] .template-square-card-footer .button {
  color: #fff !important;
  background: #191a17 !important;
}

body.app-route #template-square .template-square-card[data-template-experience="classic"] .template-square-card-footer .button {
  color: #3f3527 !important;
  background: #eee8dc !important;
}

@media (max-width: 640px) {
  body.app-route #template-square .template-square-switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.app-route #template-square .template-square-tab {
    min-width: 0;
    padding-inline: 8px;
    font-size: 11px;
  }
}

/* AGENT-FLOW-20260731: faster planning feedback, compact steps and live canvas states. */
.agent-plan-card {
  scroll-margin-top: 12px;
}

.agent-plan-card[data-phase="planning"] > div {
  border-color: #d9dfc1;
  background: linear-gradient(135deg, #fff 0%, #fbfcf5 100%);
}

.agent-plan-card[data-phase="planning"] .agent-plan-heading span::after {
  content: " · 正在处理";
}

.agent-plan-card[data-phase="planning"] :is(.agent-plan-details, .agent-safety-note, #agentApproveButton) {
  display: none;
}

.agent-plan-card[data-phase="planning"] .agent-approval-actions {
  padding-top: 9px;
}

.agent-plan-card[data-phase="planning"] #agentRevisePlanButton {
  color: #4d5147;
  background: #fff;
}

.agent-send-button[data-busy="true"] {
  animation: agent-send-busy 1s ease-in-out infinite;
}

@keyframes agent-send-busy {
  50% { opacity: .58; }
}

.agent-canvas-grid.is-progress {
  display: block;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 48px);
  background:
    radial-gradient(circle at 50% 0%, rgba(151, 166, 81, .08), transparent 38%),
    #fff;
}

.agent-canvas-grid.is-failed {
  background:
    radial-gradient(circle at 50% 0%, rgba(172, 92, 70, .09), transparent 42%),
    linear-gradient(180deg, #faf9f7 0%, #f6f3f1 100%);
}

.agent-canvas-failed > span {
  border-color: rgba(172, 92, 70, .34) !important;
  color: #9b4f3f;
}

.agent-canvas-progress {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #dedfd7;
  border-radius: 12px;
  background: rgba(252, 252, 249, .96);
  box-shadow: 0 14px 34px rgba(52, 55, 42, .05);
}

.agent-canvas-progress-copy {
  display: grid;
  gap: 5px;
}

.agent-canvas-progress-copy > span {
  color: #758039;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

.agent-canvas-progress-copy > strong {
  color: #20221d;
  font-size: 16px;
  line-height: 1.35;
}

.agent-canvas-progress-copy > p {
  margin: 0;
  color: #757970;
  font-size: 10px;
  line-height: 1.65;
}

.agent-canvas-progress-bar {
  height: 4px;
  margin: 16px 0 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9ebe2;
}

.agent-canvas-progress-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #71813b, #a6b65a);
  transition: width .35s ease;
}

.agent-canvas-progress[data-phase="planning"] .agent-canvas-progress-bar > i,
.agent-canvas-progress[data-phase="generating"] .agent-canvas-progress-bar > i {
  position: relative;
  overflow: hidden;
}

.agent-canvas-progress[data-phase="planning"] .agent-canvas-progress-bar > i::after,
.agent-canvas-progress[data-phase="generating"] .agent-canvas-progress-bar > i::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  content: "";
  animation: agent-progress-sheen 1.25s linear infinite;
}

@keyframes agent-progress-sheen {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.agent-canvas-progress ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-canvas-progress li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #969991;
  font-size: 9px;
}

.agent-canvas-progress li > i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #d4d6cf;
}

.agent-canvas-progress li[data-state="complete"] {
  color: #667236;
}

.agent-canvas-progress li[data-state="complete"] > i {
  background: #71813b;
}

.agent-canvas-progress li[data-state="active"] {
  color: #34382d;
  font-weight: 750;
}

.agent-canvas-progress li[data-state="active"] > i {
  background: #91a048;
  box-shadow: 0 0 0 4px rgba(145, 160, 72, .14);
}

.agent-canvas-slots {
  display: grid;
  width: min(560px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px auto 0;
}

.agent-canvas-slots > div {
  position: relative;
  display: grid;
  min-height: 112px;
  align-content: end;
  gap: 4px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #e1e2dc;
  border-radius: 10px;
  color: #777b72;
  background: linear-gradient(135deg, #f6f6f2, #fbfbf9);
}

.agent-canvas-slots > div::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, .85) 42%, transparent 62%);
  content: "";
  transform: translateX(-100%);
}

.agent-canvas-slots > div[data-state="planning"]::before,
.agent-canvas-slots > div[data-state="generating"]::before {
  animation: agent-slot-sheen 1.8s ease-in-out infinite;
}

@keyframes agent-slot-sheen {
  to { transform: translateX(100%); }
}

.agent-canvas-slots span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: #677333;
  background: #edf0dc;
  font-size: 9px;
  font-weight: 800;
}

.agent-canvas-slots strong {
  overflow: hidden;
  color: #62665d;
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 761px) {
  .agent-step-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 8px 10px;
  }

  .agent-step-list li {
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 58px;
    padding: 7px 9px;
    border-right: 1px solid #ebe8e1;
    border-bottom: 0;
  }

  .agent-step-list li:last-child {
    border-right: 0;
  }

  .agent-step-list li > b {
    grid-column: 2;
    font-size: 9px;
  }

  .agent-step-list li small {
    display: none;
  }
}

@media (max-width: 640px) {
  .agent-canvas-grid.is-progress {
    padding: 18px 12px;
  }

  .agent-canvas-progress {
    padding: 16px;
  }

  .agent-canvas-progress ol {
    grid-template-columns: 1fr;
  }

  .agent-canvas-slots > div {
    min-height: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-send-button[data-busy="true"],
  .agent-canvas-progress-bar > i::after,
  .agent-canvas-slots > div::before {
    animation: none !important;
  }
}

/* AGENT-LOW-LEARNING-20260801: one outcome-led path with progressive disclosure. */
.agent-workspace[data-stage="setup"],
.agent-workspace[data-stage="planning"],
.agent-workspace[data-stage="confirm"],
.agent-workspace[data-stage="failed"] {
  grid-template-columns: minmax(0, 1fr);
}

.agent-workspace[data-stage="setup"] .agent-canvas-pane,
.agent-workspace[data-stage="planning"] .agent-canvas-pane,
.agent-workspace[data-stage="confirm"] .agent-canvas-pane,
.agent-workspace[data-stage="failed"] .agent-canvas-pane {
  display: none;
}

.agent-workspace:is([data-stage="setup"], [data-stage="planning"], [data-stage="confirm"], [data-stage="failed"]) .agent-conversation-pane {
  border-right: 0;
}

.agent-workspace:is([data-stage="setup"], [data-stage="planning"], [data-stage="confirm"], [data-stage="failed"]) .agent-thread {
  width: min(100%, 900px);
  margin-inline: auto;
  padding: 28px 28px 18px;
}

.agent-workspace[data-stage="results"] .agent-plan-card {
  display: none;
}

.agent-message.agent-start-message {
  grid-template-columns: minmax(0, 1fr) !important;
}

.agent-start-message > .agent-avatar {
  display: none;
}

.agent-start-message > .agent-start-card {
  grid-column: 1 / -1;
  width: 100% !important;
  justify-self: stretch;
  padding: 28px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 253, .94);
  box-shadow: 0 18px 54px rgba(39, 42, 32, .075), inset 0 0 0 1px rgba(65, 69, 58, .08);
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .next-sidebar-all-tools {
  display: block;
}

.agent-start-heading > span,
.agent-intent-fieldset legend > span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  margin-right: 8px;
  padding: 0 8px;
  border-radius: 999px;
  color: #5f6d32;
  background: #eef2df;
  font-size: 11px;
  font-weight: 700;
}

.agent-start-heading > strong {
  display: block;
  margin-top: 7px;
  color: #242720;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.25;
}

.agent-start-heading > p {
  margin: 7px 0 0;
  color: #73766d;
  font-size: 13px;
}

.agent-upload-dropzone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 22px;
  padding: 18px;
  border: 1px dashed rgba(102, 113, 68, .34);
  border-radius: 16px;
  background: linear-gradient(145deg, #fafbf5, #f5f6ef);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.agent-upload-dropzone.is-dragging {
  border-color: #788849;
  background: #f0f4e2;
  box-shadow: 0 0 0 4px rgba(120, 136, 73, .1);
}

.agent-upload-primary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 1px 12px;
  align-items: center;
  min-height: 68px;
  padding: 8px 12px;
  border: 0;
  color: #2f3328;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.agent-upload-primary > span {
  grid-row: 1 / 3;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: #252821;
  font-size: 22px;
}

.agent-upload-primary b {
  align-self: end;
  font-size: 14px;
}

.agent-upload-primary small {
  align-self: start;
  color: #85887f;
  font-size: 11px;
}

.agent-material-entry {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(65, 69, 58, .12);
  border-radius: 10px;
  color: #53574d;
  background: rgba(255, 255, 253, .9);
  font-size: 12px;
  cursor: pointer;
}

.agent-upload-dropzone > .agent-source-count {
  grid-column: 1 / -1;
  color: #73776d;
  font-size: 12px;
}

.agent-setup-source-preview {
  grid-column: 1 / -1;
  display: flex;
  gap: 9px;
  overflow-x: auto;
}

.agent-setup-source-preview:empty {
  display: none;
}

.agent-setup-source-preview figure {
  position: relative;
  width: 72px;
  min-width: 72px;
  height: 72px;
  margin: 0;
  overflow: hidden;
  border-radius: 11px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(65, 69, 58, .08);
}

.agent-setup-source-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-setup-source-preview figcaption {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(25, 27, 22, .72);
  font-size: 10px;
}

.agent-intent-fieldset {
  min-width: 0;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}

.agent-intent-fieldset legend {
  margin-bottom: 12px;
  color: #454940;
  font-size: 13px;
  font-weight: 650;
}

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

.agent-intent-grid > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 84px;
  padding: 14px;
  border: 1px solid rgba(65, 69, 58, .1);
  border-radius: 14px;
  color: #343830;
  background: #fafaf7;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.agent-intent-grid > button:hover,
.agent-intent-grid > button.is-selected {
  border-color: rgba(113, 128, 68, .34);
  background: #f3f6e8;
  box-shadow: 0 8px 22px rgba(59, 69, 37, .07);
  transform: translateY(-1px);
}

.agent-intent-grid i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #65743a;
  background: #e9eed9;
  font-style: normal;
  font-size: 17px;
}

.agent-intent-grid span,
.agent-intent-grid b,
.agent-intent-grid small {
  display: block;
}

.agent-intent-grid b {
  font-size: 13px;
}

.agent-intent-grid small {
  margin-top: 4px;
  color: #81847a;
  font-size: 11px;
  line-height: 1.4;
}

.agent-start-hint {
  margin: 14px 0 0 !important;
  color: #777b70 !important;
  font-size: 11px !important;
}

.agent-prompt-label {
  color: #3f433a;
  font-size: 12px;
  font-weight: 700;
}

.agent-workspace[data-stage="setup"] .agent-composer,
.agent-workspace[data-stage="editing"] .agent-composer {
  width: min(calc(100% - 56px), 844px);
  margin-inline: auto;
  margin-bottom: 6px;
}

.agent-composer-toolbar {
  justify-content: flex-end;
}

.agent-composer-toolbar > div:last-child {
  margin-left: auto;
}

.agent-send-button {
  min-width: 136px;
  min-height: 40px;
  padding-inline: 16px;
  color: #fff;
  font-size: 12px;
}

.agent-confirm-summary {
  display: grid;
  gap: 0;
  margin: 4px 18px 14px;
  border: 1px solid rgba(65, 69, 58, .08);
  border-radius: 12px;
  background: #f8f8f4;
}

.agent-confirm-summary > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(65, 69, 58, .07);
}

.agent-confirm-summary > div:last-child {
  border-bottom: 0;
}

.agent-confirm-summary dt,
.agent-confirm-summary dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.agent-confirm-summary dt {
  color: #8a8d83;
}

.agent-confirm-summary dd {
  min-width: 0;
  color: #40443a;
  overflow-wrap: anywhere;
}

.agent-plan-details > .agent-step-list {
  margin: 8px 0;
}

.agent-plan-details > #agentPlanOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 10px 10px;
}

.agent-plan-details > #agentPlanOptions span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 8px;
  color: #62665b;
  font-size: 11px;
}

.agent-plan-details > #agentPlanOptions i {
  font-style: normal;
}

.agent-inspector {
  position: relative;
  padding: 12px 16px 14px;
}

.agent-canvas-actions {
  display: grid;
  grid-template-columns: minmax(120px, 1.35fr) repeat(3, minmax(88px, 1fr));
  gap: 8px;
  padding: 0;
}

.agent-more-panel {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid rgba(65, 69, 58, .1);
  border-radius: 12px;
  background: #fafaf7;
}

.agent-more-panel > nav {
  display: flex;
  min-height: 40px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(65, 69, 58, .08);
}

.agent-more-panel > nav button {
  min-width: 64px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #898c83;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.agent-more-panel > nav button.active {
  border-bottom-color: #718044;
  color: #34382f;
}

.agent-more-panel dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 18px;
  margin: 0;
  padding: 12px;
}

.agent-more-panel dl > div {
  display: grid;
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
  gap: 8px;
}

.agent-more-panel :is(dt, dd) {
  margin: 0;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.agent-more-actions {
  display: flex;
  gap: 8px;
  padding: 0 12px 12px;
}

.agent-more-actions button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(65, 69, 58, .12);
  border-radius: 8px;
  color: #50544a;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}

@media (min-width: 1181px) {
  .agent-workspace[data-stage="setup"] .agent-mobile-tabs,
  .agent-workspace[data-stage="planning"] .agent-mobile-tabs,
  .agent-workspace[data-stage="confirm"] .agent-mobile-tabs,
  .agent-workspace[data-stage="failed"] .agent-mobile-tabs,
  .agent-workspace[data-stage="editing"] .agent-mobile-tabs,
  .agent-workspace[data-stage="generating"] .agent-mobile-tabs,
  .agent-workspace[data-stage="results"] .agent-mobile-tabs {
    display: none;
  }
}

@media (max-width: 1180px) {
  .agent-workspace:is([data-stage="setup"], [data-stage="planning"], [data-stage="confirm"], [data-stage="failed"]) .agent-mobile-tabs {
    display: none !important;
  }

  .agent-workspace:is([data-stage="generating"], [data-stage="results"], [data-stage="editing"]) .agent-mobile-tabs {
    display: flex !important;
  }

  .agent-workspace:is([data-stage="generating"], [data-stage="results"], [data-stage="editing"]) {
    padding-top: 48px;
  }
}

@media (max-width: 760px) {
  .agent-workspace:is([data-stage="setup"], [data-stage="planning"], [data-stage="confirm"], [data-stage="failed"]) .agent-thread {
    width: 100%;
    padding: 14px 12px 10px;
  }

  .agent-start-message > .agent-start-card {
    padding: 18px 14px;
    border-radius: 16px;
  }

  .agent-upload-dropzone {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .agent-material-entry {
    width: 100%;
    min-height: 44px;
  }

  .agent-intent-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .agent-intent-grid > button {
    min-height: 72px;
  }

  .agent-workspace[data-stage="setup"] .agent-composer,
  .agent-workspace[data-stage="editing"] .agent-composer {
    width: calc(100% - 24px);
  }

  .agent-confirm-summary {
    margin-inline: 12px;
  }

  .agent-plan-heading {
    padding-inline: 12px;
  }

  .agent-plan-card #agentPlanSummary,
  .agent-safety-note,
  .agent-approval-actions,
  .agent-plan-details {
    margin-right: 12px;
    margin-left: 12px;
  }

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

  .agent-more-panel dl {
    grid-template-columns: 1fr;
  }

  .agent-more-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* AGENT-SELF-AUDIT-20260731: mobile result discovery, readable type and accessible controls. */
.agent-mobile-tabs {
  display: none;
}

.agent-upload-failures {
  display: grid;
  gap: 6px;
  margin: 8px 20px 0;
}

.agent-upload-failures > div {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(178, 86, 74, .2);
  border-radius: 10px;
  color: #7c3e36;
  background: #fff5f2;
}

.agent-upload-failures span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.agent-upload-failures strong,
.agent-upload-failures small {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-upload-failures button {
  min-width: 62px;
  min-height: 34px;
  border: 1px solid rgba(155, 70, 59, .25);
  border-radius: 8px;
  color: #7c3e36;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}

.agent-workspace :is(button, a, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid rgba(113, 128, 68, .28) !important;
  outline-offset: 2px;
}

.agent-sidebar-recent a small,
.agent-task-kicker,
.agent-source-preview figcaption,
.agent-plan-heading span,
.agent-plan-heading > b,
.agent-step-list li small,
.agent-step-list li > b,
.agent-plan-details > div span,
.agent-plan-details > div i,
.agent-safety-note,
.agent-source-count,
.agent-count-field select,
.agent-status,
.agent-canvas-header small,
.agent-canvas-header button,
.agent-canvas-header a,
.agent-canvas-empty p,
.agent-result-card i,
.agent-result-download,
.agent-inspector dt,
.agent-inspector dd {
  font-size: 11px !important;
}

.agent-run-badge,
.agent-starter-grid b,
.agent-step-list li strong,
.agent-plan-details summary,
.agent-approval-actions .button,
.agent-quick-prompts button,
.agent-icon-button,
.agent-tool-chip,
.agent-mode-chip,
.agent-count-field,
.agent-result-card b,
.agent-inspector > nav button,
.agent-canvas-actions .button {
  font-size: 12px !important;
}

.agent-inspector dl div {
  align-items: start;
}

.agent-inspector dd {
  overflow: visible;
  text-overflow: initial;
  white-space: normal;
  overflow-wrap: anywhere;
}

.agent-step-list li[data-state="failed"] {
  background: #fff2ef;
  box-shadow: inset 0 0 0 1px rgba(178, 86, 74, .18);
}

@media (max-width: 1180px) {
  .agent-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .agent-mobile-tabs {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-column: 1;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 7px;
    border-bottom: 1px solid var(--agent-soft-line, #deded9);
    background: rgba(249, 249, 246, .94);
    backdrop-filter: blur(16px);
  }

  .agent-mobile-tabs button {
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    color: #6c7067;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
  }

  .agent-mobile-tabs button.active {
    color: #30342a;
    background: #fff;
    box-shadow: 0 3px 12px rgba(38, 40, 32, .08), inset 0 0 0 1px rgba(65, 69, 58, .07);
  }

  .agent-mobile-tabs span {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    margin-left: 4px;
    place-items: center;
    border-radius: 999px;
    color: #59662f;
    background: #eef2df;
    font-size: 11px;
  }

  .agent-workspace[data-mobile-pane="conversation"] .agent-canvas-pane,
  .agent-workspace[data-mobile-pane="results"] .agent-conversation-pane {
    display: none !important;
  }

  .agent-conversation-pane,
  .agent-canvas-pane {
    min-height: calc(100vh - 59px);
    border-top: 0;
  }

  .agent-task-actions :is(button, .button),
  .agent-mobile-classic-switch,
  .agent-composer-toolbar button,
  .agent-composer-toolbar select,
  .agent-canvas-header :is(button, a),
  .agent-inspector > nav button,
  .agent-canvas-actions .button,
  .agent-result-download,
  .agent-upload-failures button {
    min-height: 44px !important;
  }

  .agent-icon-button,
  .agent-send-button {
    width: 44px !important;
    height: 44px !important;
  }

  .agent-tool-chip,
  .agent-count-field {
    min-height: 44px;
  }

  .agent-canvas-grid {
    min-height: calc(100vh - 265px);
  }
}

@media (max-width: 640px) {
  .agent-upload-failures {
    margin-right: 12px;
    margin-left: 12px;
  }

  .agent-message {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .agent-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .agent-composer-toolbar > div {
    flex-wrap: wrap;
  }

  .agent-source-count {
    max-width: none;
    white-space: normal;
  }

  .agent-canvas-grid.is-compare {
    grid-template-columns: 1fr;
  }
}

/* AGENT-FUNCTIONS-20260731: material picker, inspector tabs, version restore and selectable compare. */
.agent-material-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(24, 25, 22, .48);
  backdrop-filter: blur(4px);
}

.agent-material-modal.hidden {
  display: none;
}

.agent-material-card {
  display: grid;
  width: min(820px, 100%);
  max-height: min(720px, 92vh);
  gap: 14px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid #d8d8d2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(25, 26, 22, .18);
}

.agent-material-card > header,
.agent-material-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agent-material-card > header span {
  color: #788146;
  font-size: 10px;
  font-weight: 800;
}

.agent-material-card > header h2 {
  margin: 3px 0;
  color: #20211d;
  font-size: 20px;
}

.agent-material-card > header p {
  margin: 0;
  color: #767970;
  font-size: 12px;
}

.agent-material-card > header > button {
  width: 34px;
  height: 34px;
  border: 1px solid #d9d9d3;
  border-radius: 7px;
  background: #fff;
  font-size: 20px;
  cursor: pointer;
}

.agent-material-toolbar {
  justify-content: flex-start;
}

.agent-material-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: 180px;
  overflow-y: auto;
}

.agent-material-grid > button {
  display: grid;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid #ddddda;
  border-radius: 9px;
  color: #33352f;
  text-align: left;
  background: #fafaf8;
  cursor: pointer;
}

.agent-material-grid > button:hover {
  border-color: #7d894a;
  box-shadow: 0 0 0 2px rgba(125, 137, 74, .12);
}

.agent-material-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f0f0ec;
}

.agent-material-grid button > span {
  display: grid;
  gap: 3px;
  padding: 9px;
}

.agent-material-grid strong,
.agent-material-grid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-material-grid strong {
  font-size: 11px;
}

.agent-material-grid small {
  color: #85887f;
  font-size: 9px;
}

.agent-material-empty {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 180px;
  border: 1px dashed #d5d5cf;
  border-radius: 9px;
  color: #777a72;
  font-size: 12px;
  text-align: center;
}

.agent-compare-controls {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid #deded9;
  background: #f7f7f3;
}

.agent-compare-controls.hidden {
  display: none;
}

.agent-compare-controls label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #666a5f;
  font-size: 10px;
  font-weight: 700;
}

.agent-compare-controls select {
  min-height: 30px;
  padding: 4px 26px 4px 8px;
  border: 1px solid #d2d3cc;
  border-radius: 6px;
  color: #30332c;
  background: #fff;
  font-size: 10px;
}

.agent-compare-controls > span {
  color: #87904d;
  font-size: 9px;
  font-weight: 900;
}

.agent-inspector dl.is-parameters {
  max-height: 148px;
  overflow-y: auto;
}

.agent-inspector dl.is-parameters div {
  align-items: start;
}

.agent-inspector dl.is-parameters dd {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.agent-inspector dl.is-version-list {
  display: block;
  max-height: 160px;
  overflow-y: auto;
}

.agent-version-list {
  display: grid;
  gap: 7px;
}

.agent-version-list > button {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid #deded9;
  border-radius: 7px;
  color: #3d4037;
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.agent-version-list > button[aria-pressed="true"] {
  border-color: #7b8748;
  background: #f3f4eb;
}

.agent-version-list > button span {
  display: grid;
  gap: 2px;
}

.agent-version-list strong {
  font-size: 10px;
}

.agent-version-list small,
.agent-version-list > button > span:last-child {
  color: #7f8278;
  font-size: 8px;
}

@media (max-width: 760px) {
  .agent-material-modal {
    align-items: end;
    padding: 0;
  }

  .agent-material-card {
    width: 100%;
    max-height: 88vh;
    padding: 14px;
    border-radius: 14px 14px 0 0;
  }

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

  .agent-compare-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .agent-compare-controls > span {
    display: none;
  }

  .agent-compare-controls label,
  .agent-compare-controls select {
    width: 100%;
  }
}
@media (max-width: 720px) {
  body.app-route .scheme-a-home-header,
  body.app-route .workspace-persona-home-controls {
    align-items: stretch !important;
  }
  body.app-route .workspace-persona-home-controls {
    width: 100%;
    flex-direction: column;
  }
  body.app-route .workspace-persona-home-controls .workspace-persona-select,
  body.app-route .workspace-persona-home-controls .scheme-a-balance-chip {
    width: 100%;
  }
  body.app-route .workspace-persona-home-grid { grid-template-columns: 1fr; }
  body.app-route .workspace-persona-context {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }
  body.app-route .workspace-persona-actions {
    grid-column: auto;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body.app-route .workspace-persona-action.compact {
    justify-content: center;
    min-width: 0;
    padding-inline: 6px;
    text-align: center;
  }
  body.app-route .workspace-persona-action.compact span {
    overflow-wrap: anywhere;
    font-size: 12px;
  }
  body.app-route .workspace-persona-context .workspace-persona-select { width: 100%; }
}
body.app-route .workspace-persona-context.is-collapsed {
  display: none !important;
}

/* Template square refresh — 2026-07-20 */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
body.app-route #template-square {
  overflow: hidden;
  padding: 0 !important;
  border-color: #ddd8cf !important;
  background: #fbfaf7 !important;
}
body.app-route .template-square-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 30px;
  border-bottom: 1px solid #ded8cd;
  background:
    radial-gradient(circle at 88% 18%, rgba(232, 161, 76, .18), transparent 27%),
    linear-gradient(135deg, #fffdf8 0%, #f5f1e8 100%);
}
body.app-route .template-square-hero-copy { max-width: 720px; }
body.app-route .template-square-hero h2 {
  max-width: 680px;
  margin: 7px 0 10px;
  color: #17231f !important;
  font-size: clamp(26px, 3vw, 40px) !important;
  line-height: 1.12;
  letter-spacing: -.035em;
}
body.app-route .template-square-hero p {
  max-width: 650px;
  margin: 0;
  color: #5c665f !important;
  line-height: 1.7;
}
body.app-route .template-square-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}
body.app-route .template-square-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 11px;
  border: 1px solid rgba(23, 61, 50, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: #53615b;
  font-size: 12px;
}
body.app-route .template-square-stats strong { color: #173d32; font-size: 16px; }
body.app-route .template-square-switcher {
  display: flex;
  gap: 5px;
  margin: 22px 30px 0;
  padding: 4px;
  width: fit-content;
  border: 1px solid #ddd8cf;
  border-radius: 12px;
  background: #f0ede7;
}
body.app-route .template-square-tab {
  min-height: 38px;
  padding: 8px 15px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #66716b;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
body.app-route .template-square-tab span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e4e0d8;
  font-size: 11px;
}
body.app-route .template-square-tab.is-active {
  background: #fff;
  color: #173d32;
  box-shadow: 0 2px 8px rgba(31, 45, 39, .08);
}
body.app-route .template-square-tab.is-active span { background: #e7f1ed; }
body.app-route #templateSquareDiscoverPanel,
body.app-route #templateSquareMinePanel { padding: 18px 30px 30px; }
body.app-route .template-square-categories {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  overflow-x: auto;
  padding: 2px 1px 4px;
  scrollbar-width: none;
}
body.app-route .template-square-categories::-webkit-scrollbar { display: none; }
body.app-route .template-square-categories button {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 15px;
  border: 1px solid #d9d5cd;
  border-radius: 999px;
  color: #59635e;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
body.app-route .template-square-categories button:hover {
  border-color: #9faa88;
  background: #f7f8f1;
}
body.app-route .template-square-categories button.is-active {
  border-color: #293027;
  color: #fff;
  background: #293027;
}
body.app-route .template-square-filterbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(132px, 160px)) auto;
  gap: 10px;
  align-items: end;
  margin: 0;
}
body.app-route .template-square-filterbar label { min-width: 0; }
body.app-route .template-square-filterbar input,
body.app-route .template-square-filterbar select {
  width: 100%;
  height: 44px;
  margin: 0;
  border-color: #d9d5cd;
  border-radius: 10px;
  background-color: #fff;
}
body.app-route .template-square-search input {
  padding-left: 40px;
  background-image: radial-gradient(circle, transparent 45%, #6c746f 48%, #6c746f 58%, transparent 61%), linear-gradient(45deg, transparent 43%, #6c746f 45%, #6c746f 55%, transparent 57%);
  background-position: 16px 15px, 26px 27px;
  background-size: 14px 14px, 8px 8px;
  background-repeat: no-repeat;
}
body.app-route .template-square-reset { height: 44px; }
body.app-route .template-square-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 16px;
}
body.app-route .template-square-summary .template-persona-hint {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #66716b !important;
}
body.app-route #templateSquareResultCount {
  flex: 0 0 auto;
  color: #758079;
  font-size: 12px;
  font-weight: 700;
}
body.app-route .template-square-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
body.app-route .template-square-card {
  min-height: 430px;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid #ddd8cf !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(28, 37, 33, .055) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.app-route .template-square-card:hover {
  transform: translateY(-3px);
  border-color: #9fb5ac !important;
  box-shadow: 0 16px 34px rgba(28, 37, 33, .1) !important;
}
body.app-route .template-square-cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #eeebe5, #f8f6f1);
  color: #8a918d;
  font-size: 12px;
}
body.app-route .template-square-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .3s ease;
}
body.app-route .template-square-card:hover .template-square-cover img { transform: scale(1.025); }
body.app-route .template-square-comparison {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}
body.app-route .template-square-comparison::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(31, 42, 37, .08), 0 0 16px rgba(31, 42, 37, .14);
}
body.app-route .template-square-comparison::after {
  content: "→";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  background: rgba(29, 37, 33, .82);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 18px rgba(24, 31, 28, .2);
  backdrop-filter: blur(8px);
}
body.app-route .template-square-comparison-half {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
body.app-route .template-square-comparison-half img {
  position: absolute;
  inset: 0;
}
body.app-route .template-square-comparison-half.is-before img {
  filter: saturate(.72) brightness(.94);
}
body.app-route .template-square-comparison-half b,
body.app-route .template-square-single-label {
  position: absolute;
  z-index: 4;
  bottom: 12px;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .66);
  border-radius: 999px;
  background: rgba(23, 31, 27, .76);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  box-shadow: 0 4px 14px rgba(20, 29, 25, .14);
  backdrop-filter: blur(8px);
}
body.app-route .template-square-comparison-half.is-before b { left: 12px; }
body.app-route .template-square-comparison-half.is-after b { right: 12px; }
body.app-route .template-square-single-label { right: 12px; }
body.app-route .template-square-cover .template-square-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
}
body.app-route .template-square-cover .badge {
  border: 1px solid rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.9) !important;
  color: #23342e !important;
  backdrop-filter: blur(8px);
}
body.app-route .template-square-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 18px;
}
body.app-route .template-square-card-body h3 {
  margin: 0 0 7px;
  color: #1c2824 !important;
  font-size: 17px;
  line-height: 1.35;
}
body.app-route .template-square-card-body > p {
  display: -webkit-box;
  min-height: 42px;
  margin: 0;
  overflow: hidden;
  color: #69736e !important;
  font-size: 13px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body.app-route .template-square-card .template-meta { margin-top: 12px; }
body.app-route .template-square-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 11px;
  color: #9a6630;
  font-size: 12px;
}
body.app-route .template-square-prompt {
  margin: 12px 0 0;
  border-color: #e5e1da;
  background: #f8f6f2;
}
body.app-route .template-square-prompt summary { color: #315c4d; }
body.app-route .template-square-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}
body.app-route .template-square-card-footer .button { flex: 0 0 auto; }
body.app-route .template-square-uploader {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #707a74 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.app-route .template-square-empty {
  grid-column: 1 / -1;
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-color: #d9d4ca;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
body.app-route .template-square-empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #edf3f0;
  color: #315c4d;
  font-size: 24px;
}
body.app-route .template-square-empty h3 { margin: 6px 0 0; color: #24332d !important; }
body.app-route .template-square-empty p { max-width: 460px; margin: 0 0 8px; color: #717a75 !important; }
body.app-route .template-square-my-section { margin: 0; }
body.app-route .template-square-my-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
body.app-route .template-square-my-card {
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-color: #ddd8cf !important;
  border-radius: 14px !important;
  background: #fff !important;
}
body.app-route .template-square-my-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  background: #f0ede7;
}
body.app-route .template-square-my-card-head,
body.app-route .template-square-my-card > .template-meta,
body.app-route .template-square-my-card > .field-hint,
body.app-route .template-square-my-actions { margin-inline: 16px; }
body.app-route .template-square-my-card-head { margin-top: 16px; }
body.app-route .template-square-my-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 16px;
}
body.app-route .template-square-modal-card .compact-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.app-route .template-square-modal-card .compact-form label:nth-of-type(8),
body.app-route .template-square-modal-card .compact-form label:nth-of-type(9),
body.app-route .template-square-modal-card .compact-form label:nth-of-type(10),
body.app-route .template-square-modal-card .community-template-auto-summary,
body.app-route .template-square-modal-card .status,
body.app-route .template-square-modal-card .template-square-modal-actions { grid-column: 1 / -1; }
body.app-route .community-template-auto-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #d9e5df;
  border-radius: 10px;
  background: #f1f7f4;
  color: #40534b;
  font-size: 12px;
}
body.app-route .community-template-auto-summary strong { flex: 0 0 auto; color: #173d32; }
body.app-route .community-template-auto-summary span { text-align: right; }

@media (max-width: 1100px) {
  body.app-route .template-square-filterbar { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(132px, 1fr)); }
  body.app-route .template-square-filterbar .template-square-reset { width: fit-content; }
  body.app-route .template-square-grid,
  body.app-route .template-square-my-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  body.app-route .template-square-hero { align-items: stretch; flex-direction: column; padding: 22px 18px; }
  body.app-route .template-square-hero h2 { font-size: 27px !important; }
  body.app-route .template-square-toolbar { justify-content: stretch; }
  body.app-route .template-square-toolbar .button { flex: 1; }
  body.app-route .template-square-switcher { width: auto; margin: 16px 16px 0; }
  body.app-route .template-square-tab { flex: 1; }
  body.app-route #templateSquareDiscoverPanel,
  body.app-route #templateSquareMinePanel { padding: 16px; }
  body.app-route .template-square-filterbar { grid-template-columns: 1fr 1fr; }
  body.app-route .template-square-search { grid-column: 1 / -1; }
  body.app-route .template-square-filterbar label:nth-of-type(4) { grid-column: 1 / -1; }
  body.app-route .template-square-reset { width: 100% !important; grid-column: 1 / -1; }
  body.app-route .template-square-summary { align-items: flex-start; }
  body.app-route .template-square-grid,
  body.app-route .template-square-my-grid { grid-template-columns: 1fr !important; }
  body.app-route .template-square-card { min-height: 0; }
  body.app-route .template-square-modal-card .compact-form { grid-template-columns: 1fr; }
  body.app-route .template-square-modal-card .compact-form label,
  body.app-route .template-square-modal-card .community-template-auto-summary,
  body.app-route .template-square-modal-card .status,
  body.app-route .template-square-modal-card .template-square-modal-actions { grid-column: auto; }
  body.app-route .community-template-auto-summary { align-items: flex-start; flex-direction: column; }
  body.app-route .community-template-auto-summary span { text-align: left; }
}

/* NEWCOMER-DEMO-20260727: fixed, no-credit first-run experience on the workspace home. */
body.app-route .newcomer-demo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, .9fr) minmax(440px, 1.1fr);
  gap: 32px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid #d9d4ca;
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 8%, rgba(195, 255, 88, .24), transparent 26%),
    linear-gradient(135deg, #fff 0%, #fbfaf6 56%, #f4f7ed 100%);
  box-shadow: 0 24px 64px rgba(38, 46, 40, .09);
}
body.app-route .newcomer-demo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #161a17 0 28%, #b5ee35 28% 62%, transparent 62%);
}
body.app-route .newcomer-demo-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-width: 0;
}
body.app-route .newcomer-demo-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 14px;
}
body.app-route .newcomer-demo-kicker span,
body.app-route .newcomer-demo-kicker b {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}
body.app-route .newcomer-demo-kicker span {
  background: #171b18;
  color: #fff;
  font-weight: 800;
  letter-spacing: .05em;
}
body.app-route .newcomer-demo-kicker b {
  border: 1px solid #d3e8a5;
  background: #effbd6;
  color: #3d5413;
}
body.app-route .newcomer-demo h2 {
  max-width: 560px;
  margin: 0;
  color: #161a17 !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.16;
  letter-spacing: -.04em;
}
body.app-route .newcomer-demo-copy > p {
  max-width: 590px;
  margin: 12px 0 18px;
  color: #68716b !important;
  font-size: 13px;
  line-height: 1.7;
}
body.app-route .newcomer-demo-prompt {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid #dce2dc;
  border-left: 3px solid #8ebe28;
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
}
body.app-route .newcomer-demo-prompt > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.app-route .newcomer-demo-prompt span {
  color: #27332d;
  font-size: 12px;
  font-weight: 850;
}
body.app-route .newcomer-demo-prompt em {
  color: #7a867f;
  font-size: 11px;
  font-style: normal;
}
body.app-route .newcomer-demo-prompt p {
  margin: 0;
  color: #4c5751 !important;
  font-size: 12px;
  line-height: 1.62;
}
body.app-route .newcomer-demo-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 16px 0;
  list-style: none;
}
body.app-route .newcomer-demo-steps li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #e5e7e3;
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
  color: #8a928d;
  font-size: 11px;
}
body.app-route .newcomer-demo-steps li b {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e8ebe8;
  color: #67706b;
  font-size: 10px;
}
body.app-route .newcomer-demo-steps li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.app-route .newcomer-demo-steps li.is-active {
  border-color: #b8d77a;
  background: #f3fadd;
  color: #334217;
}
body.app-route .newcomer-demo-steps li.is-active b {
  background: #a9dd3d;
  color: #142000;
  box-shadow: 0 0 0 4px rgba(169, 221, 61, .17);
}
body.app-route .newcomer-demo-steps li.is-done {
  border-color: #d9dfd8;
  color: #415048;
}
body.app-route .newcomer-demo-steps li.is-done b {
  background: #26302b;
  color: transparent;
}
body.app-route .newcomer-demo-steps li.is-done b::after {
  content: "✓";
  color: #fff;
}
body.app-route .newcomer-demo-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
body.app-route .newcomer-demo-start {
  min-width: 168px;
  min-height: 44px;
  border-radius: 11px !important;
  background: #171b18 !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(23, 27, 24, .16);
}
body.app-route .newcomer-demo-start:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #2b332e !important;
}
body.app-route .newcomer-demo-start:disabled {
  cursor: default;
  opacity: 1;
}
body.app-route .newcomer-demo.is-running .newcomer-demo-start {
  background: linear-gradient(90deg, #171b18, #53642e, #171b18) !important;
  background-size: 220% 100% !important;
  animation: newcomer-demo-progress 1.25s linear infinite;
}
body.app-route .newcomer-demo.is-complete .newcomer-demo-start {
  border-color: #b9d87e !important;
  background: #eaf7cf !important;
  color: #324215 !important;
  box-shadow: none;
}
body.app-route .newcomer-demo-own-image {
  min-height: 44px;
  border-radius: 11px !important;
  background: #fff !important;
  color: #202722 !important;
}
body.app-route .newcomer-demo-status {
  min-height: 18px;
  margin-top: 9px;
  color: #6c766f;
  font-size: 11px;
}
body.app-route .newcomer-demo.is-complete .newcomer-demo-status { color: #496022; }
body.app-route .newcomer-demo-visual {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
}
body.app-route .newcomer-demo-shot {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(49, 58, 52, .14);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(48, 55, 50, .09);
}
body.app-route .newcomer-demo-shot figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 41px;
  padding: 9px 11px;
  border-bottom: 1px solid #ebece8;
}
body.app-route .newcomer-demo-shot figcaption span {
  color: #202823;
  font-size: 12px;
  font-weight: 850;
}
body.app-route .newcomer-demo-shot figcaption em {
  color: #8b938e;
  font-size: 10px;
  font-style: normal;
}
body.app-route .newcomer-demo-shot > img,
body.app-route .newcomer-demo-result,
body.app-route .newcomer-demo-result > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
body.app-route .newcomer-demo-shot > img,
body.app-route .newcomer-demo-result > img {
  object-fit: cover;
}
body.app-route .newcomer-demo-result { position: relative; overflow: hidden; }
body.app-route .newcomer-demo-result > img {
  transform: scale(1.03);
  filter: blur(13px) saturate(.7);
  transition: filter .55s ease, transform .55s ease;
}
body.app-route .newcomer-demo-result-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 18px;
  background: rgba(17, 21, 18, .48);
  color: #fff;
  text-align: center;
  transition: opacity .35s ease, visibility .35s ease;
}
body.app-route .newcomer-demo-result-cover > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  color: #d4ff70;
  font-size: 18px;
}
body.app-route .newcomer-demo-result-cover strong { font-size: 12px; }
body.app-route .newcomer-demo-result-cover small { color: rgba(255, 255, 255, .72); font-size: 10px; }
body.app-route .newcomer-demo.is-running .newcomer-demo-result-cover > span {
  animation: newcomer-demo-pulse 1s ease-in-out infinite;
}
body.app-route .newcomer-demo.is-complete .newcomer-demo-result > img {
  transform: scale(1);
  filter: none;
}
body.app-route .newcomer-demo.is-complete .newcomer-demo-result-cover {
  visibility: hidden;
  opacity: 0;
}
body.app-route .newcomer-demo-arrow {
  display: grid;
  place-items: center;
  gap: 4px;
  color: #667069;
  text-align: center;
}
body.app-route .newcomer-demo-arrow span { font-size: 9px; font-weight: 750; }
body.app-route .newcomer-demo-arrow b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #171b18;
  color: #d4ff70;
  font-size: 18px;
}
@keyframes newcomer-demo-progress {
  to { background-position: -220% 0; }
}
@keyframes newcomer-demo-pulse {
  50% { transform: scale(1.12); }
}
@media (max-width: 1100px) {
  body.app-route .newcomer-demo {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  body.app-route .newcomer-demo-visual { max-width: 720px; }
}
@media (max-width: 640px) {
  body.app-route .newcomer-demo { padding: 22px 16px 18px; border-radius: 18px; }
  body.app-route .newcomer-demo h2 { font-size: 25px !important; }
  body.app-route .newcomer-demo-prompt > div { align-items: flex-start; }
  body.app-route .newcomer-demo-steps { grid-template-columns: 1fr; }
  body.app-route .newcomer-demo-steps li span { white-space: normal; }
  body.app-route .newcomer-demo-visual {
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  }
  body.app-route .newcomer-demo-arrow span { display: none; }
  body.app-route .newcomer-demo-arrow b {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }
  body.app-route .newcomer-demo-shot { border-radius: 11px; }
  body.app-route .newcomer-demo-shot figcaption { display: grid; align-content: center; min-height: 50px; padding: 7px 8px; }
  body.app-route .newcomer-demo-shot figcaption em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.app-route .newcomer-demo-result-cover { padding: 8px; }
  body.app-route .newcomer-demo-result-cover > span { width: 28px; height: 28px; font-size: 14px; }
  body.app-route .newcomer-demo-result-cover strong { font-size: 10px; }
  body.app-route .newcomer-demo-result-cover small { display: none; }
  body.app-route .newcomer-demo-actions,
  body.app-route .newcomer-demo-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.app-route .newcomer-demo *,
  body.app-route .newcomer-demo *::before,
  body.app-route .newcomer-demo *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* WORKSPACE-UI-SWITCH-20260727: classic remains default; next UI is explicit and reversible. */
.workspace-ui-next-only { display: none !important; }
body.workspace-ui-next .workspace-ui-classic-only { display: none !important; }
body.workspace-ui-next .next-sidebar-shell { display: flex !important; }
body.workspace-ui-next .next-workspace-home:not([hidden]) { display: grid !important; }
body.workspace-ui-next .mobile-nav-menu .workspace-ui-next-only:not(.hidden) { display: flex !important; }
body.workspace-ui-classic .workspace-ui-next-only,
body.workspace-ui-next [hidden] { display: none !important; }

.workspace-version-entry {
  margin: 0 0 12px;
}
.workspace-version-entry-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid rgba(171, 194, 66, .42);
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbea, #fff);
  color: #1a1d17;
  text-align: left;
  cursor: pointer;
}
.workspace-version-entry-button span {
  display: grid;
  gap: 2px;
}
.workspace-version-entry-button b {
  font-size: 13px;
  font-weight: 800;
}
.workspace-version-entry-button small {
  color: #737a6d;
  font-size: 10px;
}
.workspace-version-entry-button i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #181a17;
  color: #d7f36b;
  font-style: normal;
}
.workspace-version-entry-button:hover {
  border-color: #9eb82c;
  box-shadow: 0 10px 24px rgba(68, 76, 37, .1);
}

.sidebar-version-nav {
  display: grid;
  gap: 4px;
}
.workspace-version-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid #dfe3d4;
  border-radius: 12px;
  background: #f5f6f1;
}
.workspace-version-switch span,
.workspace-version-switch button {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.workspace-version-switch span {
  background: #eaf3be;
  color: #48510f;
}
.workspace-version-switch button {
  background: transparent;
  color: #5d6257;
  cursor: pointer;
}
.workspace-version-switch button:hover {
  background: #fff;
  color: #111;
}

body.workspace-ui-next.app-route .shell {
  grid-template-columns: 246px minmax(0, 1fr) !important;
}
body.workspace-ui-next.app-route .reference-sidebar {
  width: 246px !important;
  padding: 14px 14px 18px !important;
  border-right: 1px solid #e6e8df !important;
  background: rgba(255, 255, 253, .98) !important;
}
body.workspace-ui-next .reference-sidebar .sidebar-stack:first-child {
  gap: 0 !important;
}
body.workspace-ui-next .next-sidebar-shell {
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
}
body.workspace-ui-next .sidebar-version-nav-next {
  gap: 3px;
}
body.workspace-ui-next .sidebar-version-nav-next .sidebar-group-label {
  margin: 8px 10px 3px;
  color: #898d83 !important;
  font-size: 10px !important;
  font-weight: 750;
  letter-spacing: .08em;
}
body.workspace-ui-next .sidebar-version-nav-next .sidebar-link {
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  color: #2e312c !important;
  font-size: 13px !important;
  font-weight: 680 !important;
  gap: 10px !important;
  box-shadow: none !important;
}
body.workspace-ui-next .sidebar-version-nav-next .sidebar-link:hover {
  border-color: #e6e8df !important;
  background: #f7f8f3 !important;
}
body.workspace-ui-next .sidebar-version-nav-next .sidebar-link.primary,
body.workspace-ui-next .sidebar-version-nav-next .sidebar-link[aria-current="page"] {
  border-color: #dce8a4 !important;
  background: #f0f5d8 !important;
  color: #1b1d17 !important;
}
body.workspace-ui-next .sidebar-version-nav-next .sidebar-icon {
  display: grid;
  place-items: center;
  width: 22px !important;
  min-width: 22px;
  height: 22px !important;
  border: 0 !important;
  background: transparent !important;
  color: #454a41 !important;
  font-size: 15px !important;
}
.next-sidebar-all-tools {
  margin-top: 5px;
  border: 1px solid #e3e6db;
  border-radius: 12px;
  background: #fafbf7;
  overflow: hidden;
}
.next-sidebar-all-tools summary {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  color: #2e312c;
  font-size: 13px;
  font-weight: 750;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.next-sidebar-all-tools summary::-webkit-details-marker { display: none; }
.next-sidebar-all-tools summary i {
  font-style: normal;
  transition: transform .18s ease;
}
.next-sidebar-all-tools[open] summary i { transform: rotate(180deg); }
.next-sidebar-tool-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px 8px 9px;
  border-top: 1px solid #e7e9e1;
  background: #fff;
}
.next-sidebar-tool-list a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #64695f !important;
  font-size: 11px;
  font-weight: 650;
}
.next-sidebar-tool-list a:hover,
.next-sidebar-tool-list a[aria-current="page"] {
  background: #f0f5d8;
  color: #1b1d17 !important;
}
body.workspace-ui-next .sidebar-bottom-stack {
  padding-top: 10px;
  border-top: 1px solid #eceee7;
}
body.workspace-ui-next .sidebar-credit-card {
  border-color: #e0e3d8 !important;
  border-radius: 13px !important;
  background: #fafbf7 !important;
  box-shadow: none !important;
}
body.workspace-ui-next .sidebar-logout-button {
  min-height: 40px !important;
  color: #777c72 !important;
  font-size: 12px !important;
}
body.workspace-ui-next .topbar-help { display: none !important; }
body.workspace-ui-next .workspace-persona-context,
body.workspace-ui-next .workspace-persona-guide-restore,
body.workspace-ui-next .dashboard-top-stepper { display: none !important; }
body.workspace-ui-next.app-route #appView {
  padding: 30px clamp(24px, 3vw, 52px) 64px !important;
  background: #f6f5ef !important;
}

.next-workspace-home {
  width: min(1220px, 100%);
  margin: 0 auto;
  gap: 24px;
}
.next-workspace-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}
.next-workspace-heading > div {
  display: grid;
  gap: 4px;
}
.next-workspace-heading > div > span,
.next-home-section-head > div > span {
  color: #758018;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}
.next-workspace-heading h1 {
  margin: 0;
  color: #151713 !important;
  font-size: clamp(34px, 3.4vw, 54px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.045em !important;
}
.next-workspace-heading p {
  margin: 4px 0 0;
  color: #73766f;
  font-size: 14px;
}
.next-workspace-heading > a,
.next-home-section-head > a {
  color: #4e5449 !important;
  font-size: 12px;
  font-weight: 750;
}
.next-workspace-heading > a:hover,
.next-home-section-head > a:hover { color: #111 !important; }

.next-create-card {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(520px, 1.5fr);
  gap: 22px;
  padding: 22px;
  border: 1px solid #e1e2db;
  border-radius: 22px;
  background: rgba(255, 255, 253, .96);
  box-shadow: 0 18px 48px rgba(57, 54, 43, .07);
}
.next-create-upload,
.next-create-outcomes {
  min-width: 0;
}
.next-create-upload {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  column-gap: 8px;
}
.next-create-step {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8f29d;
  color: #33390a;
  font-size: 11px;
  font-weight: 850;
}
.next-create-upload h2 {
  margin: 1px 0 0;
  color: #1b1d19;
  font-size: 18px;
}
.next-create-upload > p {
  grid-column: 1 / -1;
  margin: 7px 0 14px;
  color: #7c8078;
  font-size: 11px;
}
.next-upload-button {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 238px;
  padding: 18px;
  border: 1.5px dashed #a9b853;
  border-radius: 16px;
  background: #fcfdf7;
  color: #20231d;
  cursor: pointer;
}
.next-upload-button:hover {
  border-color: #788a1e;
  background: #f7fae8;
}
.next-upload-button b {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: #a8bf24;
  color: #fff;
  font-size: 28px;
}
.next-upload-button strong { font-size: 15px; }
.next-upload-button small {
  margin-top: 5px;
  color: #7e8378;
  font-size: 10px;
}
.next-create-outcomes {
  display: grid;
  align-content: start;
  gap: 14px;
}
.next-create-outcomes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.next-create-outcomes-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.next-create-outcomes-head strong {
  color: #1c1f1a;
  font-size: 16px;
}
.next-create-outcomes-head > small {
  color: #8a8d86;
  font-size: 10px;
}
.next-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.next-outcome-card {
  position: relative;
  display: grid;
  grid-template-rows: 142px auto;
  padding: 0;
  border: 1px solid #e1e2dc;
  border-radius: 15px;
  background: #fff;
  color: #1c1e1a;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}
.next-outcome-card:hover,
.next-outcome-card.is-selected {
  border-color: #a5bc25;
  box-shadow: 0 10px 26px rgba(82, 94, 29, .1);
}
.next-outcome-card > img {
  width: 100%;
  height: 142px;
  object-fit: cover;
}
.next-outcome-card > span {
  display: grid;
  gap: 2px;
  padding: 11px 12px 12px;
}
.next-outcome-card > span strong { font-size: 13px; }
.next-outcome-card > span small {
  color: #858981;
  font-size: 9px;
}
.next-outcome-card > b {
  position: absolute;
  top: 9px;
  right: 9px;
  display: none;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #a7c10c;
  color: #fff;
  font-size: 13px;
}
.next-outcome-card.is-selected > b { display: grid; }
.next-create-primary {
  justify-self: center;
  width: min(360px, 100%);
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: #171916;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.next-create-primary:hover { background: #34382f; }
.next-create-trust {
  margin: -4px 0 0;
  color: #777c72;
  font-size: 10px;
  text-align: center;
}

.next-home-section {
  display: grid;
  gap: 12px;
}
.next-home-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}
.next-home-section-head > div {
  display: grid;
  gap: 2px;
}
.next-home-section-head h2 {
  margin: 0;
  color: #1a1c18;
  font-size: 21px;
}
.next-recent-work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.next-recent-work-card,
.next-template-grid > button {
  display: grid;
  min-width: 0;
  padding: 0;
  border: 1px solid #e0e2da;
  border-radius: 15px;
  background: #fff;
  color: #20221e !important;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}
.next-recent-work-card:hover,
.next-template-grid > button:hover {
  border-color: #bccb6d;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(57, 61, 37, .08);
}
.next-recent-work-preview {
  position: relative;
  display: block;
  min-height: 158px;
  background: #efeee8;
}
.next-recent-work-preview > img {
  display: block;
  width: 100%;
  height: 158px;
  object-fit: cover;
}
.next-recent-work-preview > b {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #4b5146;
  font-size: 9px;
}
.next-recent-work-placeholder {
  display: grid;
  place-items: center;
  min-height: 158px;
  color: #adb1a7;
  font-size: 34px;
}
.next-recent-work-card > span:last-child,
.next-template-grid > button > span {
  display: grid;
  gap: 3px;
  padding: 10px 11px 12px;
}
.next-recent-work-card strong,
.next-template-grid strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.next-recent-work-card small,
.next-template-grid small {
  color: #858980;
  font-size: 9px;
}
.next-home-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  min-height: 112px;
  place-content: center;
  padding: 20px;
  border: 1px dashed #daddd2;
  border-radius: 15px;
  background: rgba(255, 255, 255, .64);
  color: #777c72 !important;
  text-align: center;
}
.next-home-empty strong { color: #30342d; }
.next-home-empty span { font-size: 11px; }
.next-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.next-template-grid > button {
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
}
.next-template-grid > button > img {
  width: 116px;
  height: 90px;
  object-fit: cover;
}

@media (max-width: 1180px) {
  .next-create-card {
    grid-template-columns: minmax(220px, .65fr) minmax(440px, 1.35fr);
  }
  .next-outcome-card {
    grid-template-rows: 112px auto;
  }
  .next-outcome-card > img { height: 112px; }
}

@media (max-width: 980px) {
  body.workspace-ui-next.app-route .shell {
    grid-template-columns: 1fr !important;
  }
  body.workspace-ui-next.app-route #appView {
    padding: 22px 18px 110px !important;
  }
  body.workspace-ui-next .topbar-help { display: none !important; }
  .next-create-card {
    grid-template-columns: 1fr;
  }
  .next-upload-button { min-height: 190px; }
  .next-recent-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body.workspace-ui-next.app-route #appView {
    padding: 18px 14px 110px !important;
  }
  .next-workspace-home { gap: 18px; }
  .next-workspace-heading {
    align-items: start;
    flex-direction: column;
  }
  .next-workspace-heading h1 {
    font-size: 34px !important;
  }
  .next-create-card {
    gap: 18px;
    padding: 16px;
    border-radius: 18px;
  }
  .next-upload-button { min-height: 156px; }
  .next-create-outcomes-head {
    align-items: start;
    flex-direction: column;
  }
  .next-outcome-grid {
    grid-template-columns: 1fr;
  }
  .next-outcome-card {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: 92px;
    align-items: center;
  }
  .next-outcome-card > img {
    width: 112px;
    height: 92px;
  }
  .next-outcome-card > span { padding: 10px; }
  .next-create-primary { width: 100%; }
  .next-recent-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next-recent-work-preview,
  .next-recent-work-preview > img,
  .next-recent-work-placeholder { min-height: 128px; height: 128px; }
  .next-template-grid { grid-template-columns: 1fr; }
  .next-template-grid > button {
    grid-template-columns: 108px minmax(0, 1fr);
  }
  .next-template-grid > button > img {
    width: 108px;
    height: 84px;
  }
}

/* REFERENCE-REMIX-MOBILE-TOP-OFFSET-20260728: keep next pages below the fixed mobile header. */
@media (max-width: 640px) {
  body.workspace-ui-next.app-route #appView {
    padding-top: 88px !important;
  }
}

/* AGENT-WORKSPACE-20260731: Cursor-inspired Agent UI replaces only the opt-in next homepage. */
body.workspace-ui-next.app-route #appView:has(.agent-workspace:not([hidden])) {
  padding: 0 !important;
  overflow: hidden;
  background: #f4f1ea !important;
}

.agent-sidebar-recent {
  display: grid;
  gap: 3px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #eceee7;
}

.agent-sidebar-recent > div {
  display: grid;
  gap: 2px;
}

.agent-sidebar-recent a {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: #43463f !important;
  text-decoration: none;
}

.agent-sidebar-recent a:hover {
  background: #f4f5f0;
}

.agent-sidebar-recent a span,
.agent-sidebar-recent a small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-sidebar-recent a span {
  font-size: 11px;
  font-weight: 700;
}

.agent-sidebar-recent a small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #92958d;
  font-size: 9px;
}

.agent-sidebar-recent a small i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #b6b8b1;
}

.agent-sidebar-recent a small i[data-status="succeeded"] { background: #71843b; }
.agent-sidebar-recent a small i[data-status="failed"] { background: #ba6255; }
.agent-sidebar-recent a small i[data-status="running"],
.agent-sidebar-recent a small i[data-status="queued"] { background: #c18a37; }

.agent-workspace {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 72px);
  margin: 0 !important;
  grid-template-columns: minmax(520px, 1.12fr) minmax(410px, .88fr);
  gap: 0 !important;
  color: #191a17;
  background: #f7f5ef;
}

.agent-conversation-pane,
.agent-canvas-pane {
  min-width: 0;
}

.agent-conversation-pane {
  display: flex;
  min-height: calc(100vh - 72px);
  flex-direction: column;
  border-right: 1px solid #dcd9d1;
  background: #f7f5ef;
}

.agent-task-header,
.agent-canvas-header {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid #dedbd4;
  background: rgba(250, 249, 245, .96);
}

.agent-task-header > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.agent-task-kicker {
  color: #71803d;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
}

.agent-task-header h1 {
  overflow: hidden;
  margin: 0 !important;
  color: #181916 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-task-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.agent-task-actions .button {
  min-height: 34px !important;
  padding: 7px 11px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
}

.agent-run-badge {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid #dedbd4;
  border-radius: 999px;
  color: #74776e;
  background: #f8f7f3;
  font-size: 10px;
}

.agent-run-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a7aaa2;
}

.agent-run-badge[data-state="planning"] i,
.agent-run-badge[data-state="uploading"] i,
.agent-run-badge[data-state="generating"] i {
  background: #8c9c4e;
  box-shadow: 0 0 0 4px rgba(123, 139, 65, .12);
  animation: agent-pulse 1.4s ease-in-out infinite;
}

.agent-run-badge[data-state="awaiting_approval"] i { background: #c18a37; }
.agent-run-badge[data-state="complete"] i { background: #667d31; }
.agent-run-badge[data-state="failed"] i { background: #b95549; }

@keyframes agent-pulse {
  50% { opacity: .45; transform: scale(.82); }
}

.agent-thread {
  display: flex;
  min-height: 340px;
  max-height: calc(100vh - 340px);
  flex: 1;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding: 22px;
}

.agent-message {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.agent-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #1c1d1a;
  font-size: 10px;
  font-weight: 800;
}

.agent-message-user .agent-avatar {
  color: #4f5d20;
  background: #e3e8cb;
}

.agent-message > div {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #dedbd4;
  border-radius: 9px;
  background: #fbfaf7;
}

.agent-message-user > div {
  background: #f1f0eb;
}

.agent-message strong {
  color: #20211e;
  font-size: 13px;
}

.agent-message p {
  margin: 7px 0 0;
  color: #686b64;
  font-size: 12px;
  line-height: 1.65;
}

.agent-starter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.agent-starter-grid button {
  display: grid;
  gap: 3px;
  min-height: 70px;
  padding: 10px;
  border: 1px solid #e0ded7;
  border-radius: 7px;
  color: #292a27;
  text-align: left;
  background: #f8f7f3;
  cursor: pointer;
}

.agent-starter-grid button:hover {
  border-color: #aab27c;
  background: #f1f3e5;
}

.agent-starter-grid b {
  font-size: 11px;
}

.agent-starter-grid span {
  color: #85877f;
  font-size: 9px;
  line-height: 1.4;
}

.agent-source-preview {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.agent-source-preview figure {
  position: relative;
  width: 76px;
  min-width: 76px;
  margin: 0;
}

.agent-source-preview img,
.agent-source-preview figure > span {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 1px solid #ddd9d0;
  border-radius: 7px;
  object-fit: cover;
  background: #fff;
}

.agent-source-preview figcaption {
  overflow: hidden;
  margin-top: 4px;
  color: #888b83;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-plan-card > div {
  padding: 0;
  overflow: hidden;
}

.agent-plan-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px 4px;
}

.agent-plan-heading > div {
  display: grid;
  gap: 3px;
}

.agent-plan-heading span {
  color: #78844a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
}

.agent-plan-heading h2 {
  margin: 0 !important;
  color: #1c1d1a !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.agent-plan-heading > b {
  padding: 5px 8px;
  border-radius: 999px;
  color: #51601e;
  background: #eef1dd;
  font-size: 9px;
  white-space: nowrap;
}

.agent-plan-card #agentPlanSummary {
  padding: 0 16px 12px;
}

.agent-step-list {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid #e2dfd8;
  border-bottom: 1px solid #e2dfd8;
  list-style: none;
}

.agent-step-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 8px 14px;
  border-bottom: 1px solid #ebe8e1;
}

.agent-step-list li:last-child { border-bottom: 0; }

.agent-step-list li > i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #d1cec6;
  border-radius: 50%;
  color: #888a84;
  font-size: 9px;
  font-style: normal;
}

.agent-step-list li > span {
  display: grid;
  gap: 1px;
}

.agent-step-list li strong { font-size: 11px; }
.agent-step-list li small { color: #8a8c85; font-size: 8px; }
.agent-step-list li > b { color: #92948d; font-size: 9px; font-weight: 700; }
.agent-step-list li[data-state="complete"] > i { border-color: #71843b; color: #fff; background: #71843b; }
.agent-step-list li[data-state="complete"] > b { color: #647735; }
.agent-step-list li[data-state="running"] > i { border-color: #9aa65d; color: #596524; background: #edf0dc; }
.agent-step-list li[data-state="running"] > b,
.agent-step-list li[data-state="approval"] > b { color: #7a843d; }
.agent-step-list li[data-state="failed"] > i { border-color: #c9786e; color: #a84438; background: #fbebe8; }
.agent-step-list li[data-state="failed"] > b { color: #a84438; }

.agent-plan-details {
  margin: 12px 14px 0;
  border: 1px solid #e0ddd6;
  border-radius: 7px;
  background: #f8f7f3;
}

.agent-plan-details summary {
  padding: 9px 11px;
  color: #4c4e48;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.agent-plan-details > div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 10px 10px;
}

.agent-plan-details > div span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid #dedbd3;
  border-radius: 999px;
  color: #575a52;
  background: #fff;
  font-size: 9px;
}

.agent-plan-details > div i {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #7c874b;
  font-size: 8px;
  font-style: normal;
}

.agent-safety-note {
  margin: 10px 14px 0 !important;
  padding-left: 18px;
  color: #777b70 !important;
  font-size: 9px !important;
}

.agent-safety-note::before {
  content: "✓";
  margin-left: -18px;
  margin-right: 7px;
  color: #74813f;
  font-weight: 900;
}

.agent-approval-actions {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
}

.agent-approval-actions .button {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
}

.agent-quick-prompts {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 22px 9px;
}

.agent-quick-prompts button {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #dedbd4;
  border-radius: 7px;
  color: #62655e;
  background: #f9f8f4;
  font-size: 9px;
  cursor: pointer;
}

.agent-quick-prompts button:hover {
  border-color: #a9b179;
  color: #34372e;
}

.agent-composer {
  display: grid;
  gap: 9px;
  margin: 0 22px;
  padding: 12px;
  border: 1px solid #cfcac0;
  border-radius: 9px;
  background: #fbfaf7;
  box-shadow: 0 10px 28px rgba(55, 51, 43, .06);
}

.agent-composer textarea {
  min-height: 58px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  resize: none;
  color: #252622;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px;
  line-height: 1.55;
}

.agent-composer-toolbar,
.agent-composer-toolbar > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.agent-composer-toolbar {
  justify-content: space-between;
}

.agent-icon-button,
.agent-tool-chip,
.agent-mode-chip,
.agent-count-field {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #dfdcd5;
  border-radius: 6px;
  color: #60635b;
  background: #f7f6f2;
  font-size: 9px;
}

button.agent-icon-button,
button.agent-tool-chip { cursor: pointer; }
.agent-icon-button { width: 28px; justify-content: center; padding: 0; font-size: 15px; }
.agent-source-count { max-width: 150px; overflow: hidden; color: #8b8e86; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.agent-count-field select { width: auto; min-width: 52px; padding: 0; border: 0; background: transparent; font-size: 9px; }
.agent-mode-chip { color: #4c542f; background: #f0f2e4; }

.agent-send-button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: #1c1d1a;
  font-size: 16px;
  cursor: pointer;
}

.agent-send-button:disabled { opacity: .4; cursor: not-allowed; }

.agent-status {
  min-height: 30px;
  margin: 0 !important;
  padding: 7px 22px 10px !important;
  border: 0 !important;
  color: #7d8078;
  background: transparent !important;
  font-size: 9px;
}

.agent-canvas-pane {
  display: flex;
  min-height: calc(100vh - 72px);
  flex-direction: column;
  background: #fbfaf7;
}

.agent-canvas-header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-canvas-header > div:first-child {
  display: grid;
  gap: 2px;
}

.agent-canvas-header span {
  color: #22231f;
  font-size: 13px;
  font-weight: 800;
}

.agent-canvas-header small {
  color: #8b8e86;
  font-size: 9px;
}

.agent-canvas-header button,
.agent-canvas-header a {
  padding: 6px 8px;
  border: 1px solid #ddd9d1;
  border-radius: 6px;
  color: #5b5e56;
  background: #f8f7f3;
  font-size: 9px;
  text-decoration: none;
  cursor: pointer;
}

.agent-canvas-header button:disabled { opacity: .45; cursor: not-allowed; }

.agent-canvas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}

.agent-canvas-grid.is-empty {
  display: grid;
  place-items: center;
}

.agent-canvas-empty {
  display: grid;
  max-width: 260px;
  place-items: center;
  gap: 8px;
  color: #8b8d86;
  text-align: center;
}

.agent-canvas-empty > span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px dashed #c8c5bd;
  border-radius: 12px;
  color: #899454;
  font-size: 25px;
}

.agent-canvas-empty strong { color: #555850; font-size: 12px; }
.agent-canvas-empty p { margin: 0; font-size: 9px; line-height: 1.6; }

.agent-result-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ddd9d1;
  border-radius: 9px;
  background: #f7f6f2;
}

.agent-result-card.is-selected {
  border-color: #778647;
  box-shadow: 0 0 0 2px rgba(119, 134, 71, .12);
}

.agent-result-card > button:first-child {
  display: grid;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.agent-result-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #eee;
}

.agent-result-card > button:first-child span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
}

.agent-result-card b { color: #464941; font-size: 9px; }
.agent-result-card i { color: #7b844c; font-size: 8px; font-style: normal; }

.agent-result-download {
  position: absolute;
  right: 7px;
  bottom: 34px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 5px;
  color: #fff;
  background: rgba(20, 21, 18, .76);
  font-size: 8px;
  cursor: pointer;
}

.agent-canvas-grid.is-compare .agent-result-card:nth-child(n+3) { display: none; }

.agent-inspector {
  border-top: 1px solid #dedbd4;
  background: #faf9f5;
}

.agent-inspector > nav {
  display: flex;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid #e4e1da;
}

.agent-inspector > nav button {
  min-height: 38px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #8a8d85;
  background: transparent;
  font-size: 9px;
}

.agent-inspector > nav button.active {
  border-bottom-color: #778647;
  color: #30332b;
  font-weight: 800;
}

.agent-inspector dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 12px 18px;
}

.agent-inspector dl div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
}

.agent-inspector dt,
.agent-inspector dd {
  overflow: hidden;
  margin: 0;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-inspector dt { color: #92958d; }
.agent-inspector dd { color: #555850; }

.agent-canvas-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 18px 16px;
}

.agent-canvas-actions .button {
  min-height: 38px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
}

@media (max-width: 1180px) {
  body.workspace-ui-next.app-route #appView:has(.agent-workspace:not([hidden])) {
    overflow: auto;
  }
  .agent-workspace {
    min-height: auto;
    grid-template-columns: 1fr;
  }
  .agent-conversation-pane,
  .agent-canvas-pane {
    min-height: auto;
  }
  .agent-thread {
    max-height: none;
    overflow: visible;
  }
  .agent-canvas-pane {
    border-top: 1px solid #dcd9d1;
  }
  .agent-canvas-grid {
    min-height: 520px;
    flex: none;
  }
}

@media (max-width: 760px) {
  .agent-task-header,
  .agent-canvas-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }
  .agent-task-actions {
    width: 100%;
    justify-content: space-between;
  }
  .agent-thread { min-height: 0; padding: 14px; }
  .agent-starter-grid { grid-template-columns: 1fr; }
  .agent-quick-prompts { padding: 0 14px 8px; }
  .agent-composer { margin: 0 14px; }
  .agent-status { padding-right: 14px !important; padding-left: 14px !important; }
  .agent-composer-toolbar { align-items: flex-start; flex-direction: column; }
  .agent-composer-toolbar > div { width: 100%; }
  .agent-composer-toolbar > div:last-child { justify-content: flex-end; }
  .agent-canvas-grid { min-height: 420px; padding: 12px; }
}

@media (max-width: 640px) {
  body.workspace-ui-next.app-route #appView:has(.agent-workspace:not([hidden])) {
    padding-top: 72px !important;
  }
  .agent-message { grid-template-columns: 24px minmax(0, 1fr); gap: 7px; }
  .agent-avatar { width: 24px; height: 24px; font-size: 8px; }
  .agent-message > div { padding: 12px; }
  .agent-plan-card > div { padding: 0; }
  .agent-plan-heading { align-items: flex-start; flex-direction: column; }
  .agent-step-list li { grid-template-columns: 22px minmax(0, 1fr); }
  .agent-step-list li > b { grid-column: 2; }
  .agent-approval-actions { grid-template-columns: 1fr; display: grid; }
  .agent-mode-chip { display: none; }
  .agent-source-count { max-width: 118px; }
  .agent-canvas-grid { grid-template-columns: 1fr; }
  .agent-canvas-grid.is-compare { grid-template-columns: 1fr 1fr; }
  .agent-inspector dl { grid-template-columns: 1fr; }
  .agent-canvas-actions { grid-template-columns: 1fr; }
}

/* AGENT-UI-ALIGN-20260731: align the opt-in Agent homepage with the approved three-pane reference. */
body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) {
  overflow: hidden;
  background: #f7f7f5 !important;
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .shell {
  display: grid !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  grid-template-columns: clamp(252px, 17.625vw, 282px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden;
  background: #fff !important;
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .topbar {
  display: none !important;
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .reference-sidebar {
  position: relative !important;
  top: 0 !important;
  display: grid !important;
  width: clamp(252px, 17.625vw, 282px) !important;
  height: 100vh !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  padding: 18px 18px 14px !important;
  border-right: 1px solid #deded9 !important;
  background: #fbfbf9 !important;
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) #appView {
  width: 100% !important;
  height: 100vh !important;
  min-height: 0 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  overflow: hidden !important;
  background: #fff !important;
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) #moreToolsPanel {
  display: none !important;
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) :is(.customer-service-float, .feedback-fab) {
  display: none !important;
}

.agent-sidebar-brand {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 10px 8px;
}

.agent-sidebar-brand a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #171815 !important;
  text-decoration: none;
}

.agent-sidebar-brand strong {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.08em;
  white-space: nowrap;
}

.agent-sidebar-brand small {
  color: #242520;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1.12;
}

.agent-sidebar-brand button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #d8d8d3;
  border-radius: 7px;
  color: #4e5148;
  background: #fff;
  font-size: 17px;
  cursor: pointer;
}

.agent-sidebar-new-task {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 14px;
  border: 1px solid #171815;
  border-radius: 8px;
  color: #fff;
  background: #171815;
  font-size: 15px;
  font-weight: 760;
  cursor: pointer;
}

.agent-sidebar-new-task:hover {
  background: #292a26;
}

body.workspace-ui-next .next-sidebar-shell {
  gap: 0;
}

body.workspace-ui-next .sidebar-version-nav-next {
  gap: 2px;
}

body.workspace-ui-next .sidebar-version-nav-next .sidebar-link {
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: #2f312b !important;
  font-size: 14px !important;
  font-weight: 560 !important;
}

body.workspace-ui-next .sidebar-version-nav-next .sidebar-link:hover {
  border: 0 !important;
  background: #f1f1ed !important;
}

body.workspace-ui-next .sidebar-version-nav-next .sidebar-link.primary,
body.workspace-ui-next .sidebar-version-nav-next .sidebar-link[aria-current="page"] {
  border: 0 !important;
  color: #566326 !important;
  background: #efefe8 !important;
}

body.workspace-ui-next .sidebar-version-nav-next .sidebar-icon {
  width: 24px !important;
  min-width: 24px;
  color: #30322c !important;
  font-size: 16px !important;
}

.agent-sidebar-recent {
  margin-top: 18px;
  padding-top: 14px;
  border-top-color: #deded9;
}

.agent-sidebar-recent > .sidebar-group-label {
  margin: 0 10px 8px !important;
  color: #777a71 !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  text-transform: none;
}

.agent-sidebar-recent > div {
  gap: 6px;
}

.agent-sidebar-recent a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.agent-sidebar-recent a:hover {
  border-color: #deded8;
  background: #fff;
}

.agent-sidebar-recent a > img,
.agent-sidebar-recent a > em {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #ddddda;
  border-radius: 6px;
  object-fit: cover;
  color: #7d854d;
  background: #f5f5f1;
  font-style: normal;
}

.agent-sidebar-recent a > span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.agent-sidebar-recent a b {
  overflow: hidden;
  color: #35372f;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-sidebar-recent a small {
  font-size: 9px;
}

body.workspace-ui-next .next-sidebar-all-tools {
  margin-top: 10px;
  border: 0;
  background: transparent;
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .next-sidebar-all-tools {
  display: none;
}

body.workspace-ui-next .next-sidebar-all-tools summary {
  min-height: 36px;
  padding: 0 12px;
  color: #777a71;
  font-size: 11px;
  font-weight: 620;
}

body.workspace-ui-next .sidebar-bottom-stack {
  gap: 5px;
  padding-top: 10px;
}

body.workspace-ui-next .sidebar-credit-card {
  padding: 11px 13px !important;
  border: 1px solid #deded9 !important;
  border-radius: 7px !important;
  background: #fff !important;
}

body.workspace-ui-next .sidebar-credit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.workspace-ui-next .sidebar-credit-head strong {
  color: #5f6d2d;
  font-size: 16px;
}

body.workspace-ui-next .sidebar-credit-card :is(.usage-bar, .sidebar-credit-actions) {
  display: none !important;
}

body.workspace-ui-next .sidebar-logout-button {
  min-height: 42px !important;
  padding: 0 12px !important;
  border-top: 1px solid #e1e1dc !important;
  border-radius: 0 !important;
}

.agent-workspace {
  height: 100vh;
  min-height: 0;
  grid-template-columns: minmax(0, 1.18fr) minmax(440px, 1fr);
  background: #fff;
}

.agent-conversation-pane,
.agent-canvas-pane {
  height: 100vh;
  min-height: 0;
  background: #fff;
}

.agent-conversation-pane {
  border-right-color: #deded9;
}

.agent-task-header,
.agent-canvas-header {
  min-height: 64px;
  padding: 11px 20px;
  border-bottom-color: #deded9;
  background: #fff;
}

.agent-task-header {
  padding-left: 22px;
}

.agent-task-header > div:first-child {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 30px;
}

.agent-task-header > div:first-child::before {
  position: absolute;
  left: 0;
  content: "‹";
  color: #252721;
  font-size: 29px;
  font-weight: 350;
  line-height: 1;
}

.agent-task-kicker {
  display: none;
}

.agent-task-header h1 {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
}

.agent-task-actions .button,
.agent-mobile-classic-switch {
  display: grid;
  min-width: 34px;
  min-height: 34px !important;
  place-items: center;
  padding: 0 10px !important;
  border: 1px solid #d9d9d4 !important;
  border-radius: 7px !important;
  color: #4b4d46;
  background: #fff !important;
  font-size: 13px !important;
  cursor: pointer;
}

.agent-mobile-classic-switch {
  display: none;
}

.agent-run-badge {
  min-height: 30px;
  border-color: #dfe2d5;
  color: #657033;
  background: #f4f5ed;
  font-size: 11px;
}

.agent-thread {
  min-height: 0;
  max-height: none;
  gap: 14px;
  padding: 16px 20px 12px;
}

.agent-message {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
}

.agent-avatar {
  width: 30px;
  height: 30px;
  font-size: 10px;
}

.agent-message > div {
  padding: 16px 18px;
  border-color: #dfdfda;
  border-radius: 8px;
  background: #fff;
}

.agent-message-user > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  background: #fafaf8;
}

.agent-message-user > div > p {
  margin: 0;
  color: #3e4039;
  font-size: 13px;
}

.agent-message strong {
  font-size: 14px;
}

.agent-message p {
  font-size: 12px;
}

.agent-source-preview figure,
.agent-source-preview img,
.agent-source-preview figure > span {
  width: 96px;
  min-width: 96px;
  height: 96px;
}

.agent-plan-heading h2 {
  font-size: 17px !important;
}

.agent-plan-heading {
  padding: 16px 18px 6px;
}

.agent-plan-card #agentPlanSummary {
  padding: 0 18px 13px;
}

.agent-step-list li {
  min-height: 50px;
  padding: 9px 18px;
}

.agent-step-list li strong {
  font-size: 12px;
}

.agent-step-list li > b {
  font-size: 10px;
}

.agent-quick-prompts {
  padding: 0 20px 10px 64px;
}

.agent-quick-prompts button {
  padding: 7px 11px;
  border-radius: 6px;
  background: #fff;
  font-size: 10px;
}

.agent-composer {
  gap: 12px;
  margin: 0 20px;
  padding: 13px;
  border-color: #bfc0b9;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.agent-composer textarea {
  min-height: 58px !important;
  font-size: 13px;
}

.agent-status {
  padding: 7px 20px 10px !important;
  font-size: 9px;
}

.agent-canvas-pane {
  background: #fbfbf9;
}

.agent-canvas-header span {
  font-size: 15px;
}

.agent-canvas-header small {
  font-size: 9px;
}

.agent-canvas-header button,
.agent-canvas-header a {
  min-width: 36px;
  min-height: 32px;
  font-size: 10px;
}

.agent-canvas-grid {
  gap: 12px;
  padding: 16px;
  background: #fff;
}

.agent-result-card {
  border-radius: 9px;
  background: #fff;
}

.agent-result-card > button:first-child span {
  min-height: 36px;
}

.agent-inspector {
  border-top-color: #deded9;
  background: #fff;
}

.agent-inspector > nav {
  min-height: 42px;
}

.agent-inspector > nav button {
  font-size: 10px;
}

.agent-inspector dl {
  padding: 13px 18px;
}

.agent-inspector dt,
.agent-inspector dd {
  font-size: 9px;
}

.agent-canvas-actions {
  padding-bottom: 14px;
}

@media (max-width: 1180px) {
  body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) {
    overflow: auto;
  }

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

  body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .shell,
  body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) #appView {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .agent-workspace,
  .agent-conversation-pane,
  .agent-canvas-pane {
    height: auto;
  }
}

@media (max-width: 980px) {
  body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .reference-sidebar {
    display: none !important;
  }

  body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) #appView {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .agent-mobile-classic-switch {
    display: grid;
  }
}

@media (max-width: 640px) {
  body.workspace-ui-next.app-route #appView:has(.agent-workspace:not([hidden])) {
    padding-top: 0 !important;
  }

  .agent-task-header,
  .agent-canvas-header {
    min-height: 58px;
    padding: 10px 12px;
  }

  .agent-task-header {
    align-items: center;
    flex-direction: row;
  }

  .agent-task-header > div:first-child {
    padding-left: 0;
  }

  .agent-task-header > div:first-child::before {
    display: none;
  }

  .agent-task-header h1 {
    font-size: 15px !important;
  }

  .agent-task-actions {
    width: auto;
  }

  .agent-run-badge {
    display: none;
  }

  .agent-mobile-classic-switch {
    min-width: 48px;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .agent-thread {
    padding: 12px;
  }

  .agent-message-user > div {
    grid-template-columns: 1fr;
  }

  .agent-source-preview figure,
  .agent-source-preview img,
  .agent-source-preview figure > span {
    width: 74px;
    min-width: 74px;
    height: 74px;
  }

  .agent-quick-prompts {
    padding: 0 12px 8px;
  }

  .agent-composer {
    margin: 0 12px;
  }

  .agent-status {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
}

/* AGENT-FLOW-FINAL-20260731: keep compact planning rules after reference alignment overrides. */
@media (min-width: 761px) {
  .agent-step-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 8px 10px;
  }

  .agent-step-list li {
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 58px;
    padding: 7px 9px;
    border-right: 1px solid #ebe8e1;
    border-bottom: 0;
  }

  .agent-step-list li:last-child {
    border-right: 0;
  }

  .agent-step-list li > b {
    grid-column: 2;
    font-size: 9px;
  }

  .agent-step-list li small {
    display: none;
  }
}

/* AGENT-SOFT-POLISH-20260731: soften the opt-in Agent workspace without touching classic UI. */
body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) {
  --agent-soft-bg: #f6f6f3;
  --agent-soft-panel: rgba(255, 255, 253, .82);
  --agent-soft-line: rgba(51, 54, 45, .09);
  --agent-soft-line-strong: rgba(51, 54, 45, .14);
  --agent-soft-olive: #718044;
  --agent-soft-olive-dark: #59662f;
  --agent-soft-olive-wash: #f0f3e5;
  --agent-soft-shadow: 0 8px 26px rgba(38, 40, 32, .055);
  color: #242620;
  background: var(--agent-soft-bg) !important;
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .shell {
  background: var(--agent-soft-bg) !important;
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .reference-sidebar {
  border-right-color: var(--agent-soft-line) !important;
  background: linear-gradient(180deg, #fafaf7 0%, #f5f5f1 100%) !important;
}

.agent-sidebar-brand button,
.agent-task-actions .button,
.agent-mobile-classic-switch,
.agent-canvas-header button,
.agent-canvas-header a {
  border-color: var(--agent-soft-line-strong) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 253, .78) !important;
  box-shadow: 0 2px 8px rgba(37, 39, 31, .025);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.agent-sidebar-brand button:hover,
.agent-task-actions .button:hover,
.agent-canvas-header button:not(:disabled):hover,
.agent-canvas-header a:hover {
  border-color: rgba(113, 128, 68, .3) !important;
  background: #fff !important;
  box-shadow: 0 5px 14px rgba(37, 39, 31, .055);
  transform: translateY(-1px);
}

.agent-sidebar-new-task {
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #292b25 0%, #20221d 100%);
  box-shadow: 0 8px 18px rgba(28, 30, 24, .12), inset 0 1px rgba(255, 255, 255, .08);
  transition: box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.agent-sidebar-new-task:hover {
  background: linear-gradient(180deg, #303229 0%, #252720 100%);
  box-shadow: 0 10px 24px rgba(28, 30, 24, .16), inset 0 1px rgba(255, 255, 255, .1);
  transform: translateY(-1px);
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .sidebar-version-nav-next .sidebar-link {
  border-radius: 10px !important;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .sidebar-version-nav-next .sidebar-link:hover {
  background: rgba(234, 235, 229, .72) !important;
  transform: translateX(2px);
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .sidebar-version-nav-next .sidebar-link.primary,
body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .sidebar-version-nav-next .sidebar-link[aria-current="page"] {
  color: #4d592b !important;
  background: linear-gradient(135deg, #ecefe2, #f3f4ed) !important;
  box-shadow: inset 0 0 0 1px rgba(113, 128, 68, .08);
}

.agent-sidebar-recent {
  border-top-color: var(--agent-soft-line);
}

.agent-sidebar-recent a {
  border-radius: 11px;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.agent-sidebar-recent a:hover {
  border-color: transparent;
  background: rgba(255, 255, 253, .86);
  box-shadow: 0 5px 16px rgba(36, 38, 31, .045);
  transform: translateY(-1px);
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .sidebar-credit-card {
  border-color: transparent !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 253, .82) !important;
  box-shadow: inset 0 0 0 1px var(--agent-soft-line), 0 5px 16px rgba(36, 38, 31, .035);
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .sidebar-logout-button {
  border-top-color: transparent !important;
  border-radius: 10px !important;
}

.agent-workspace,
.agent-conversation-pane,
.agent-canvas-pane {
  background: var(--agent-soft-bg);
}

.agent-conversation-pane {
  border-right-color: var(--agent-soft-line);
  background: linear-gradient(180deg, #fbfbf9 0%, #f8f8f5 100%);
}

.agent-canvas-pane {
  background: linear-gradient(180deg, #f9f9f6 0%, #f5f5f2 100%);
}

.agent-task-header,
.agent-canvas-header {
  border-bottom-color: var(--agent-soft-line);
  background: rgba(250, 250, 247, .82);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px);
}

.agent-run-badge {
  border-color: transparent;
  background: var(--agent-soft-olive-wash);
  box-shadow: inset 0 0 0 1px rgba(113, 128, 68, .1);
}

.agent-thread {
  gap: 18px;
  scrollbar-color: rgba(105, 109, 96, .22) transparent;
}

.agent-avatar {
  border-radius: 10px;
  background: linear-gradient(145deg, #2c2e27, #1e201b);
  box-shadow: 0 4px 12px rgba(29, 31, 25, .1);
}

.agent-message-user .agent-avatar {
  color: #52602d;
  background: linear-gradient(145deg, #eef2dd, #e2e8c9);
  box-shadow: 0 4px 12px rgba(94, 110, 51, .08);
}

.agent-message > div {
  border-color: var(--agent-soft-line);
  border-radius: 15px;
  background: var(--agent-soft-panel);
  box-shadow: var(--agent-soft-shadow);
}

.agent-message-user > div {
  background: linear-gradient(135deg, rgba(247, 247, 243, .98), rgba(251, 251, 248, .88));
  box-shadow: 0 5px 18px rgba(38, 40, 32, .035);
}

.agent-plan-card > div {
  border-color: rgba(79, 84, 68, .11);
  border-radius: 16px;
  background: rgba(255, 255, 253, .92);
  box-shadow: 0 12px 34px rgba(39, 42, 32, .065);
}

.agent-plan-card[data-phase="planning"] > div {
  border-color: rgba(125, 140, 72, .18);
  background: linear-gradient(145deg, rgba(255, 255, 253, .96), rgba(248, 250, 240, .94));
}

.agent-plan-heading {
  padding-top: 18px;
}

.agent-plan-heading > b {
  color: var(--agent-soft-olive-dark);
  background: var(--agent-soft-olive-wash);
  box-shadow: inset 0 0 0 1px rgba(113, 128, 68, .07);
}

.agent-step-list {
  gap: 7px;
  padding: 10px 18px 12px;
  border: 0;
  background: transparent;
}

.agent-step-list li {
  position: relative;
  border: 0 !important;
  border-radius: 11px;
  background: #f6f6f2;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.agent-step-list li[data-state="complete"] {
  background: #f1f4e7;
}

.agent-step-list li[data-state="running"],
.agent-step-list li[data-state="approval"] {
  background: #f4f6e9;
  box-shadow: inset 0 0 0 1px rgba(128, 143, 74, .12);
}

.agent-step-list li > i {
  border-color: transparent;
  background: rgba(255, 255, 253, .88);
  box-shadow: inset 0 0 0 1px rgba(80, 84, 70, .13);
}

.agent-step-list li[data-state="complete"] > i {
  border-color: transparent;
  background: linear-gradient(145deg, #80904a, #687a37);
  box-shadow: 0 4px 10px rgba(99, 117, 52, .16);
}

.agent-plan-details {
  border-color: transparent;
  border-radius: 11px;
  background: #f6f6f3;
  box-shadow: inset 0 0 0 1px rgba(65, 69, 58, .07);
}

.agent-plan-details > div span {
  border-color: transparent;
  background: rgba(255, 255, 253, .82);
  box-shadow: inset 0 0 0 1px rgba(65, 69, 58, .07);
}

.agent-approval-actions .button {
  border-radius: 10px !important;
  transition: box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

#agentApproveButton:not(:disabled) {
  border-color: transparent !important;
  background: linear-gradient(180deg, #2a2c25, #20221d) !important;
  box-shadow: 0 7px 16px rgba(30, 32, 26, .12);
}

#agentApproveButton:not(:disabled):hover {
  box-shadow: 0 9px 22px rgba(30, 32, 26, .16);
  transform: translateY(-1px);
}

#agentRevisePlanButton {
  border-color: var(--agent-soft-line-strong) !important;
  background: rgba(255, 255, 253, .82) !important;
}

.agent-quick-prompts button {
  border-color: transparent;
  border-radius: 999px;
  background: rgba(238, 239, 234, .82);
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.agent-quick-prompts button:hover {
  border-color: transparent;
  color: #353a2d;
  background: #e8ecdc;
  transform: translateY(-1px);
}

.agent-composer {
  border-color: var(--agent-soft-line-strong);
  border-radius: 16px;
  background: rgba(255, 255, 253, .92);
  box-shadow: 0 12px 32px rgba(38, 40, 32, .07), inset 0 1px rgba(255, 255, 255, .8);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.agent-composer:focus-within {
  border-color: rgba(118, 133, 65, .46);
  box-shadow: 0 15px 36px rgba(38, 40, 32, .08), 0 0 0 3px rgba(125, 140, 72, .09);
  transform: translateY(-1px);
}

.agent-icon-button,
.agent-tool-chip,
.agent-mode-chip,
.agent-count-field {
  border-color: transparent;
  border-radius: 9px;
  background: #f3f3ef;
  box-shadow: inset 0 0 0 1px rgba(65, 69, 58, .055);
  transition: background-color 150ms ease, color 150ms ease;
}

button.agent-icon-button:hover,
button.agent-tool-chip:hover {
  color: #414735;
  background: #e9ecdf;
}

.agent-mode-chip {
  background: var(--agent-soft-olive-wash);
}

.agent-send-button {
  border-radius: 10px;
  background: linear-gradient(180deg, #2d2f28, #20221d);
  box-shadow: 0 6px 14px rgba(30, 32, 26, .14);
  transition: box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.agent-send-button:not(:disabled):hover {
  box-shadow: 0 8px 18px rgba(30, 32, 26, .2);
  transform: translateY(-1px);
}

.agent-canvas-grid {
  background:
    radial-gradient(circle at 50% -10%, rgba(133, 148, 75, .075), transparent 36%),
    linear-gradient(180deg, #fafaf8 0%, #f6f6f3 100%);
}

.agent-canvas-grid.is-progress {
  background:
    radial-gradient(circle at 50% 0%, rgba(142, 157, 80, .11), transparent 42%),
    linear-gradient(180deg, #fafaf7 0%, #f5f5f2 100%);
}

.agent-canvas-progress {
  border-color: transparent;
  border-radius: 17px;
  background: rgba(255, 255, 253, .84);
  box-shadow: 0 16px 44px rgba(39, 42, 32, .075), inset 0 0 0 1px rgba(65, 69, 58, .07);
  backdrop-filter: blur(12px);
}

.agent-canvas-progress-bar {
  height: 5px;
  background: #e7e9df;
}

.agent-canvas-slots {
  gap: 12px;
}

.agent-canvas-slots > div {
  min-height: 120px;
  border-color: transparent;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(250, 250, 247, .96), rgba(243, 245, 237, .9));
  box-shadow: inset 0 0 0 1px rgba(65, 69, 58, .07), 0 7px 22px rgba(40, 43, 34, .035);
}

.agent-result-card {
  border-color: transparent;
  border-radius: 15px;
  background: rgba(255, 255, 253, .94);
  box-shadow: 0 8px 24px rgba(38, 40, 32, .07), inset 0 0 0 1px rgba(65, 69, 58, .07);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.agent-result-card:hover {
  box-shadow: 0 12px 30px rgba(38, 40, 32, .1), inset 0 0 0 1px rgba(65, 69, 58, .08);
  transform: translateY(-2px);
}

.agent-result-card.is-selected {
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(81, 96, 42, .11), inset 0 0 0 2px rgba(113, 128, 68, .52);
}

.agent-result-download {
  border-color: rgba(255, 255, 255, .45);
  border-radius: 8px;
  background: rgba(28, 30, 25, .72);
  backdrop-filter: blur(8px);
}

.agent-inspector {
  border-top-color: var(--agent-soft-line);
  background: rgba(255, 255, 253, .84);
  box-shadow: 0 -5px 20px rgba(38, 40, 32, .025);
}

.agent-inspector > nav {
  border-bottom-color: var(--agent-soft-line);
}

.agent-canvas-actions .button {
  border-radius: 10px !important;
  font-size: 12px !important;
}

@media (max-width: 1180px) {
  body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .agent-workspace :is(button, select, .button) {
    min-height: 44px !important;
    font-size: 12px !important;
  }

  .agent-canvas-actions .button {
    min-height: 44px !important;
  }
}

@media (min-width: 761px) {
  .agent-step-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 10px 18px 12px;
  }

  .agent-step-list li {
    min-height: 60px;
    padding: 8px 10px;
  }
}

@media (max-width: 760px) {
  .agent-step-list {
    gap: 6px;
    padding: 9px 12px 12px;
  }

  .agent-step-list li {
    min-height: 52px;
  }

  .agent-composer {
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) :is(
    .agent-sidebar-new-task,
    .sidebar-link,
    .agent-sidebar-recent a,
    .agent-message > div,
    .agent-composer,
    .agent-send-button,
    .agent-quick-prompts button,
    .agent-result-card,
    .agent-task-actions .button,
    .agent-canvas-header button,
    .agent-canvas-header a
  ) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* AGENT-LOW-LEARNING-FINAL-20260801: keep progressive controls after legacy Agent overrides. */
body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .next-sidebar-all-tools {
  display: block;
}

.agent-message.agent-start-message {
  grid-template-columns: minmax(0, 1fr) !important;
}

.agent-message.agent-start-message > .agent-start-card {
  grid-column: 1 / -1;
  width: 100% !important;
  justify-self: stretch;
}

.agent-inspector .agent-canvas-actions {
  display: grid;
  grid-template-columns: minmax(120px, 1.35fr) repeat(3, minmax(88px, 1fr));
  gap: 8px;
  padding: 0;
}

.agent-workspace:is([data-stage="generating"], [data-stage="results"], [data-stage="editing"]) {
  grid-template-columns: minmax(380px, .8fr) minmax(520px, 1.2fr);
}

.agent-workspace[data-stage="editing"] .agent-plan-card[data-phase="complete"] {
  display: none;
}

.agent-canvas-grid:not(.is-empty) {
  align-content: start;
  grid-auto-rows: max-content;
}

.agent-canvas-grid:not(.is-empty) .agent-result-card {
  align-self: start;
}

.agent-run-badge {
  min-width: 76px;
  flex: 0 0 auto;
  justify-content: center;
  white-space: nowrap;
}

.agent-task-header > div:first-child,
.agent-task-header h1 {
  min-width: 0;
}

.agent-task-header h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* AGENT-COUNT-PICKER-20260801: two is the default, never a locked value. */
.agent-count-picker {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(52px, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid #dedfd7;
  border-radius: 10px;
  background: #f1f2ec;
}

.agent-count-picker button {
  min-width: 52px;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  color: #666a60;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.agent-count-picker button:hover:not(:disabled) {
  color: #25271f;
  background: rgba(255, 255, 255, .72);
}

.agent-count-picker button[aria-pressed="true"] {
  color: #fff;
  background: #20221d;
  box-shadow: 0 1px 4px rgba(24, 27, 20, .16);
}

.agent-count-picker button:focus-visible {
  outline: 2px solid #8b9850;
  outline-offset: 1px;
}

.agent-count-picker button:disabled {
  cursor: wait;
  opacity: .56;
}

@media (max-width: 760px) {
  .agent-inspector .agent-canvas-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-count-picker {
    width: min(100%, 228px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .agent-count-picker button {
    min-width: 0;
    min-height: 44px;
    padding-inline: 4px;
  }
}

@media (max-width: 1180px) {
  .agent-workspace:is([data-stage="generating"], [data-stage="results"], [data-stage="editing"]) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* AGENT-UX-CONTINUITY-20260801: safe return, manageable uploads and reachable mobile actions. */
.agent-task-actions {
  position: relative;
}

.agent-mobile-menu-button,
.agent-mobile-menu {
  display: none;
}

.agent-upload-failure-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.agent-setup-source-preview figure,
.agent-source-preview figure {
  position: relative;
}

.agent-setup-source-preview [data-agent-source-remove],
.agent-source-preview [data-agent-source-remove] {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 999px;
  color: #fff;
  background: rgba(30, 32, 27, .72);
  box-shadow: 0 3px 10px rgba(20, 22, 18, .18);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

@media (max-width: 980px) {
  .agent-task-header {
    position: relative;
    z-index: 170;
  }

  .agent-mobile-menu-button {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--agent-soft-line-strong, #d8d9d3);
    border-radius: 10px;
    color: #34372f;
    background: rgba(255, 255, 253, .88);
    font-size: 17px;
    cursor: pointer;
  }

  .agent-mobile-menu:not(.hidden) {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 160;
    display: grid;
    width: min(330px, calc(100vw - 24px));
    max-height: min(520px, calc(100dvh - 82px));
    gap: 10px;
    overflow: auto;
    padding: 12px;
    border: 1px solid rgba(65, 69, 58, .11);
    border-radius: 14px;
    background: rgba(255, 255, 253, .98);
    box-shadow: 0 18px 48px rgba(30, 33, 26, .16);
    backdrop-filter: blur(18px);
  }

  .agent-mobile-menu-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .agent-mobile-menu :is(a, button) {
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    color: #373b31;
    background: #f3f4ee;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
  }

  .agent-mobile-recent {
    display: grid;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--agent-soft-line, #e2e2dd);
  }

  .agent-mobile-recent > span {
    color: #858980;
    font-size: 11px;
    font-weight: 700;
  }

  .agent-mobile-recent > div {
    display: grid;
    gap: 6px;
  }

  .agent-mobile-recent a {
    display: grid;
    gap: 2px;
  }

  .agent-mobile-recent small {
    color: #7a7e74;
    font-size: 11px;
    font-weight: 500;
  }
}

@media (max-width: 760px) {
  .agent-workspace[data-mobile-pane="results"] .agent-inspector {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 120;
    max-height: min(64dvh, 540px);
    overflow: auto;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(65, 69, 58, .12);
    background: rgba(255, 255, 253, .97);
    box-shadow: 0 -12px 34px rgba(34, 37, 29, .12);
    backdrop-filter: blur(18px);
  }

  .agent-workspace[data-mobile-pane="results"] .agent-canvas-grid {
    padding-bottom: 138px;
  }

  .agent-workspace[data-mobile-pane="results"] .agent-more-panel {
    max-height: 42dvh;
    overflow: auto;
  }

  .agent-upload-failures > div {
    align-items: flex-start;
  }

  .agent-upload-failure-actions {
    flex-direction: column;
  }
}

/* AGENT-RESULT-CONTINUITY-20260802 */
.agent-source-preview {
  overflow-y: hidden;
}

.agent-source-preview figure {
  height: auto;
}

.agent-follow-up-context {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin: 0 20px 10px 64px;
  padding: 8px;
  border: 1px solid var(--agent-soft-line, #e2e2dd);
  border-radius: 12px;
  background: #f7f8f3;
}

.agent-follow-up-context img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
}

.agent-follow-up-context > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.agent-follow-up-context span,
.agent-follow-up-context small {
  color: #777b70;
  font-size: 11px;
  line-height: 1.45;
}

.agent-follow-up-context strong {
  color: #252820;
  font-size: 13px;
  line-height: 1.45;
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .sidebar-credit-card.is-empty .sidebar-credit-actions {
  display: grid !important;
  grid-template-columns: 1fr;
  margin-top: 2px;
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .sidebar-credit-card.is-empty .sidebar-credit-actions .button {
  min-height: 36px;
  border-radius: 9px;
  font-size: 12px;
}

body.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) .sidebar-credit-card.is-empty .sidebar-credit-actions .button.secondary {
  display: none !important;
}

body.workspace-ui-next.app-route .agent-status.warning {
  color: #6d5b20 !important;
  background: #f7f3df !important;
  font-weight: 700 !important;
}

@media (max-width: 640px) {
  .agent-follow-up-context {
    grid-template-columns: 52px minmax(0, 1fr);
    margin: 0 12px 8px;
    padding: 8px;
  }

  .agent-follow-up-context img {
    width: 52px;
    height: 52px;
  }
}