.public-experience {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: var(--font-sans);
  --font-serif: var(--font-sans);
  --bg: #edf1f7;
  --surface: #fff;
  --surface-2: #eef2fa;
  --soft: #f1f4fa;
  --brd: #d5deeb;
  --brd-2: #a6b4c9;
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #64748b;
  --muted: #475569;
  --primary: #0f172a;
  --primary-hover: #1e293b;
  --primary-active: #020617;
  --primary-soft: #f1f5f9;
  --primary-on: #fff;
  --accent: #4338ca;
  --accent-hover: #3730a3;
  --accent-soft: #e0e7ff;
  --accent-border: #c7d2fe;
  --good: #0f766e;
  --good-soft: #f0fdfa;
  --warn: #92400e;
  --warn-soft: #fffbeb;
  --err: #be123c;
  --err-soft: #fff1f2;
  --info: #0369a1;
  --info-soft: #f0f9ff;
  --shadow-sm: 0 2px 5px rgb(15 23 42 / .035);
  --el-color-primary: #0f172a;
  --el-color-primary-light-9: #f1f5f9;
  --el-color-success: #0f766e;
  --el-color-success-light-9: #f0fdfa;
  --el-color-success-light-8: #99f6e4;
  --el-color-info: #64748b;
  --el-color-info-light-9: #f8fafc;
  --el-color-info-light-8: #e2e8f0;
  --el-font-family: var(--font-sans);
  --el-bg-color: #fff;
  --el-bg-color-page: var(--bg);
  --el-bg-color-overlay: #fff;
  --el-fill-color-blank: #fff;
  --el-fill-color-light: #eef2fa;
  --el-text-color-primary: #0f172a;
  --el-text-color-regular: #475569;
  --el-text-color-secondary: #64748b;
  --el-border-color: #d5deeb;
  --el-border-color-light: #d5deeb;
  --el-border-color-lighter: #e2e8f0;
  --el-border-color-hover: #a6b4c9;
  --el-border-radius-base: 9px;
  min-height: 100vh;
  padding: 0 24px 40px;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
  color-scheme: light;
}
.public-page { width: 100%; max-width: 1120px; margin: 0 auto; }
.public-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; }
.public-brand { display: inline-flex; align-items: center; flex: none; border-radius: 4px; }
.public-intro { margin: 32px 0 28px; }
.public-eyebrow { color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .16em; }
.public-intro h1 { margin: 10px 0 8px; font-size: 36px; line-height: 1.3; font-weight: 700; letter-spacing: -.05em; }
.public-intro > p:last-child { max-width: 680px; color: var(--ink-2); font-size: 14px; line-height: 1.75; }
.public-workspace { border: 1px solid var(--brd); border-radius: 20px; background: var(--surface); box-shadow: 0 8px 30px -20px rgb(30 41 59 / .18); overflow: clip; }
.public-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--brd); border-bottom: 1px solid var(--brd); }
.public-nav .redeem-tabs { flex: 1; }
.public-nav-note, .public-service-label { color: var(--ink-2); font-size: 12px; }
.public-topbar-tools { display: flex; align-items: center; gap: 20px; }
.public-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 0; color: var(--ink-2); font-size: 11px; }
.public-footer a:hover { color: var(--accent); }
.public-content { padding: 32px 36px; }
.public-stack { display: grid; gap: 24px; max-width: 680px; margin: 0 auto; }
.public-experience :is(h1,h2,h3,h4) { font-family: var(--font-sans); }
.public-experience :is(a,button,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.public-experience :is(.btn-primary,.btn-secondary) { min-height: 44px; border-radius: 9px; box-shadow: none; font-size: 14px; }
.public-experience button:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.public-experience .btn-primary:disabled { opacity: 1; color: #64748b; border-color: #cbd5e1; background: #e2e8f0; box-shadow: none; }
.public-experience .input { border-radius: 9px; border-color: var(--brd-2); }
.public-experience .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.public-experience .card { background: var(--surface); border: 1px solid var(--brd); border-radius: 12px; box-shadow: none; }
.public-experience .app-link { color: var(--accent); }
.public-experience .app-link:hover { color: var(--accent-hover); }
@media (max-width: 767px) {
  .public-experience { padding: 0 16px 24px; }
  .public-topbar { min-height: 64px; }
  .public-intro { margin: 12px 0 24px; }
  .public-intro h1 { margin-top: 0; font-size: 28px; }
  .public-eyebrow { display: none; }
  .public-nav { padding: 10px 0; }
  .public-nav-note, .public-service-label { display: none; }
  .public-content { padding: 26px 22px; }
  .public-experience :is(input.input,textarea.input) { font-size: 16px; }
  .public-footer { font-size: 10px; }
}
@media (max-width: 370px) { .public-content { padding: 24px 18px; } }
@media (prefers-reduced-motion: reduce) { .public-experience * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Shared customer workspaces: one input task and a separate, persistent result area. */
.customer-workbench { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); min-width: 0; }
.customer-input { min-width: 0; padding: 32px; border-right: 1px solid var(--brd); }
.customer-results { min-width: 0; padding: 32px; background: #f8faff; display: grid; align-content: start; gap: 22px; }
.customer-section-title { margin-bottom: 22px; }
.customer-section-title > span, .customer-kicker { color: var(--accent); font-size: 11px; letter-spacing: .08em; font-weight: 650; }
.customer-section-title h2 { margin-top: 8px; font-size: 22px; line-height: 1.4; font-weight: 650; }
.customer-section-title p { color: var(--ink-2); font-size: 13px; line-height: 1.8; margin-top: 8px; }
.customer-input .card, .customer-results > .card { padding: 0; border: 0; background: transparent; }
.customer-empty { display: grid; align-content: center; justify-items: start; min-height: 280px; padding: 28px; border: 1px dashed var(--brd-2); border-radius: 14px; }
.customer-empty > span { display: grid; place-items: center; width: 42px; height: 42px; background: var(--accent-soft); color: var(--accent); border-radius: 12px; font-size: 22px; margin-bottom: 20px; }
.customer-empty h2 { font-size: 20px; font-weight: 650; }
.customer-empty p { margin-top: 10px; color: var(--ink-2); font-size: 13px; line-height: 1.9; }
.customer-empty a { margin-top: 22px; }
.customer-facts { display: grid; gap: 0; margin: 0; }
.customer-facts > div { display: flex; justify-content: space-between; align-items: start; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--brd); }
.customer-facts dt { color: var(--ink-2); font-size: 13px; flex-shrink: 0; }
.customer-facts dd { margin: 0; color: var(--ink); text-align: right; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.customer-notice { border-left: 3px solid var(--accent); background: var(--soft); border-radius: 0 8px 8px 0; padding: 13px 16px; font-size: 12px; line-height: 1.85; color: var(--ink-2); }
.customer-empty-page { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 42px; padding: 64px; align-items: center; }
.customer-empty-mark { color: var(--accent); background: var(--accent-soft); border-radius: 24px; min-height: 170px; display: grid; place-items: center; font-size: 56px; font-weight: 700; }
.customer-empty-page h2 { font-size: 26px; font-weight: 650; }
.customer-empty-page p { max-width: 560px; color: var(--ink-2); font-size: 14px; line-height: 1.9; margin-top: 12px; }
.customer-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 767px) {
 .customer-workbench { grid-template-columns: minmax(0, 1fr); }
 .customer-input { padding: 24px 22px; border-right: 0; border-bottom: 1px solid var(--brd); }
 .customer-results { padding: 24px 22px; }
 .customer-empty { min-height: 190px; padding: 22px; }
 .customer-empty-page { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; }
 .customer-empty-mark { min-height: 96px; width: 96px; font-size: 36px; border-radius: 18px; }
 .customer-facts > div { gap: 12px; }
 .customer-facts dd { font-size: 13px; }
}