/* Blue-and-white palette inspired by Luckin. UI only: photo pixels and background swatches stay unchanged. */
:root {
  --brand-blue: #003da5;
  --brand-blue-hover: #002f7f;
  --brand-blue-soft: #eef4ff;
  --ui-ink: #132c50;
  --ui-muted: #526784;
  --ui-subtle: #65758d;
  --ui-surface: #f4f7fc;
  --ui-border: #dce5f1;
  --ui-preview: #09275c;
  --ink: var(--ui-ink);
  --ink-soft: var(--ui-muted);
  --navy: var(--ui-preview);
  --navy-2: var(--brand-blue);
  --paper: #fff;
  --panel: #fff;
  --line: var(--ui-border);
  --line-dark: #b7cae5;
  --accent: var(--brand-blue);
  --accent-soft: var(--brand-blue-soft);
  --h5-paper: #fff;
  --h5-ink: var(--ui-ink);
  --h5-muted: var(--ui-muted);
  --h5-accent: var(--brand-blue);
}

/* Keep normal page scrolling, but do not use double-tap or pinch to zoom the
   H5 surface. Browser/OS accessibility zoom may deliberately override this. */
html,body { touch-action: pan-x pan-y; }
body { background: #eaf0f8; color: var(--ui-ink); }
::selection { color: var(--brand-blue-hover); background: #dce9ff; }
.h5-shell { background: #fff; border-color: var(--ui-border); box-shadow: 0 16px 70px #003da50c; }
.site-header { background: #fff; }
.brand { color: var(--brand-blue); }
.h5-brand-mark { color: #fff; border-color: var(--brand-blue); background: var(--brand-blue); }
.brand small,.h5-header-tag { color: var(--ui-subtle); }
.h5-steps { border-color: var(--ui-border); }
.h5-steps button { color: var(--ui-subtle); }
.h5-steps button span { color: var(--ui-muted); background: #eaf0fa; }
.h5-steps button[aria-current] { color: var(--brand-blue); }
.h5-steps button[aria-current] span { color: #fff; background: var(--brand-blue); }
.h5-steps button.is-complete { color: #1a59b6; }
.h5-steps button.is-complete span { color: var(--brand-blue); background: #e1ecff; }
.h5-steps > i { background: var(--ui-border); }
.h5-kicker,.h5-page-heading h1 em { color: var(--brand-blue); }
.h5-page-heading > p:last-child { color: var(--ui-muted); }
.h5-back { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0 0 16px; padding: 10px 15px; border: 1px solid var(--brand-blue); border-radius: 10px; background: var(--brand-blue-soft); color: var(--brand-blue); font-size: 15px; font-weight: 650; line-height: 1.4; cursor: pointer; transition: background .15s, border-color .15s; }
.h5-back:hover:not(:disabled) { background: #dce9ff; border-color: var(--brand-blue-hover); color: var(--brand-blue-hover); }
.h5-back:focus-visible { outline: 3px solid #6b9be5; outline-offset: 3px; }
.h5-back:disabled { border-color: #c3cfe0; background: var(--ui-surface); color: var(--ui-subtle); cursor: not-allowed; }
.h5-screen legend,.h5-outfit > span { color: var(--ui-ink); }
.h5-screen legend > small { color: var(--ui-subtle); }

.h5-style-options button { background: #fff; border-color: var(--ui-border); }
.h5-style-options button:hover:not(.is-selected) { border-color: #7b9ecc; }
.h5-style-options button > span:not(.h5-style-art) { color: var(--ui-ink); }
.h5-style-options button > small { color: var(--ui-muted); }
.h5-style-options button.is-selected { background: var(--brand-blue-soft); border-color: var(--brand-blue); box-shadow: 0 0 0 1px var(--brand-blue); }
.h5-style-options button.is-selected > span:not(.h5-style-art),.h5-style-options button.is-selected > small { color: var(--brand-blue); }
.is-selected .h5-choice-tick { color: #fff; border-color: var(--brand-blue); background: var(--brand-blue); }
.h5-choice-tick { box-shadow: 0 1px 4px #132c5026; }
.h5-style-options .h5-style-art { background: #e8eef7; }
.h5-art-note { color: var(--ui-subtle); }
.h5-surface { border-color: var(--ui-border); background: #fff; }
.h5-style-settings fieldset { border-color: var(--ui-border); }
.h5-style-settings .swatches button i { border-color: #fff; box-shadow: 0 0 0 1px #cbd7e8; }
.h5-style-settings .swatches button.is-selected i { box-shadow: 0 0 0 2px var(--brand-blue); }
.h5-style-settings .swatches button span { color: var(--ui-muted); }
.h5-style-settings .swatches button.is-selected span { color: var(--brand-blue); }
.h5-outfit small,.h5-promise { color: var(--ui-muted); }
.h5-outfit select { color: var(--ui-ink); border-color: var(--ui-border); background: var(--ui-surface); }
.h5-promise i { background: #91acd2; }
.h5-dock { background: linear-gradient(0deg,#fff 86%,#ffffffed); }
.h5-primary,.h5-result-screen .download-button { color: #fff; background: var(--brand-blue); border-color: var(--brand-blue); box-shadow: 0 6px 14px #003da518; }
.h5-primary:hover:not(:disabled),.h5-result-screen .download-button:hover:not(:disabled) { background: var(--brand-blue-hover); border-color: var(--brand-blue-hover); box-shadow: 0 8px 18px #003da522; }
.h5-primary:disabled { color: var(--ui-muted); background: #d7e2f3; border-color: #d7e2f3; box-shadow: none; }
.h5-primary.is-loading { color: #fff; background: var(--brand-blue); border-color: var(--brand-blue); opacity: 1; }
.h5-dock > p:last-child { color: var(--ui-subtle); }

.h5-screen .upload-zone { border-color: #9fb9e0; background: linear-gradient(135deg,#eef4ff,#fafcff); }
.h5-screen .upload-zone:hover,.h5-screen .upload-zone.is-dragging { border-color: var(--brand-blue); background: #e8f0ff; box-shadow: 0 8px 24px #003da512; }
.upload-zone .upload-icon { color: var(--brand-blue); background: #dce9ff; }
.h5-screen .upload-zone strong { color: var(--brand-blue); }
.h5-screen .upload-zone small { color: var(--ui-muted); }
.h5-upload-chip { color: var(--brand-blue); background: #fff; border-color: #a9c1e6; }
.h5-screen .file-summary { background: #fff; border-color: var(--ui-border); }
.h5-screen .file-summary span { color: var(--ui-muted); }
.h5-screen .file-summary button { color: var(--brand-blue); }
.h5-photo-guide h2,.h5-photo-guide strong { color: var(--ui-ink); }
.h5-photo-guide b { color: var(--brand-blue); background: var(--brand-blue-soft); }
.h5-photo-guide small,.h5-private-note { color: var(--ui-muted); }

.h5-screen .toggle-row strong { color: var(--ui-ink); }
.h5-screen .toggle-row small { color: var(--ui-muted); }
.h5-screen .switch i { background: #c9d6e9; }
.h5-screen .switch input:checked + i { background: var(--brand-blue); }
.h5-screen .card-fields { border-color: var(--ui-border); }
.h5-screen .card-fields label > span { color: var(--ui-ink); }
.h5-screen .card-fields label > span small { color: var(--ui-subtle); }
.h5-screen .card-fields input { color: var(--ui-ink); border-color: var(--ui-border); background: var(--ui-surface); }
.h5-screen .card-fields input::placeholder { color: var(--ui-subtle); }
.h5-screen .card-fields input:focus { border-color: var(--brand-blue); background: #fff; box-shadow: 0 0 0 3px #003da512; }
.h5-bilingual-example { background: var(--brand-blue-soft); }
.h5-bilingual-example small,.h5-screen .translation-help { color: var(--ui-muted); }
.h5-bilingual-example strong,.h5-english-details summary { color: var(--brand-blue); }
.h5-english-details summary > span { color: var(--ui-subtle); }
.h5-polish-surface > p { color: var(--ui-muted); border-color: var(--ui-border); }
.h5-recommend { color: var(--brand-blue); background: #e2ecff; }
.h5-screen .size-options button { border-color: var(--ui-border); background: #fff; }
.h5-screen .size-options button span { color: var(--ui-ink); }
.h5-screen .size-options button small { color: var(--ui-muted); }
.h5-screen .size-options button.is-selected { background: var(--brand-blue-soft); border-color: var(--brand-blue); }
.h5-screen .size-options button.is-selected span,.h5-screen .size-options button.is-selected small { color: var(--brand-blue); }
.h5-crop-details summary { color: var(--brand-blue); }
.h5-crop-details summary > span,.h5-crop-details summary::after,.h5-crop-details .range-field > span { color: var(--ui-muted); }
.h5-crop-details input { accent-color: var(--brand-blue); }
.h5-screen .service-notice { color: var(--ui-muted); background: var(--brand-blue-soft); }
.h5-service-retry { width: 100%; min-height: 44px; margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--brand-blue); border-radius: 10px; background: var(--brand-blue-soft); color: var(--brand-blue); font-size: 14px; font-weight: 600; cursor: pointer; }
.h5-service-retry:hover:not(:disabled) { border-color: var(--brand-blue-hover); background: #dce9ff; }
.h5-service-retry:focus-visible { outline: 3px solid #6b9be5; outline-offset: 3px; }
.h5-service-retry:disabled { border-color: var(--ui-border); color: var(--ui-muted); cursor: wait; }

.h5-result-screen .preview-panel { background: var(--ui-preview); }
.h5-result-screen .preview-topbar h2 { color: #fff; }
.h5-result-screen .preview-topbar p { color: #c3d3ec; }
.h5-result-screen .mode-badge { color: #d3e3ff; background: #ffffff12; border-color: #ffffff40; }
.h5-result-screen .view-toolbar button { color: #c3d3ec; }
.h5-result-screen .view-toolbar button[aria-pressed=true] { color: #fff; background: #ffffff24; }
.h5-result-screen .empty-preview p,.h5-result-screen .photo-guides { color: #c3d3ec; }
.h5-result-screen .photo-guides i { background: #adcaff; box-shadow: 0 0 0 3px #adcaff1f; }
.h5-result-screen .focus { border-color: #adcaff; }
.h5-result-screen .compare-control { color: #c3d3ec; }
.h5-result-screen .compare-control input { accent-color: #91b9ff; }
.h5-result-screen .generation-progress { color: #fff; background: #09275cf5; }
.h5-result-screen .generation-progress small { color: #c3d3ec; }
.progress-spinner { border-top-color: #91b9ff; }
.h5-preview-status { color: var(--ui-muted); }
.h5-result-screen .result-note b { color: var(--ui-ink); }
.h5-result-screen .result-note span,.h5-watermark-note,.h5-final-note { color: var(--ui-subtle); }
.h5-result-screen .secondary-button { color: var(--brand-blue); border-color: #b7cae5; background: #fff; }
.h5-result-screen .secondary-button:hover:not(:disabled) { background: var(--brand-blue-soft); }
footer.h5-footer { color: var(--ui-subtle); }
.toast:not(.is-error) { background: #09275cf5; box-shadow: 0 12px 32px #003da522; }

button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,
.switch input:focus-visible + i { outline-color: #6b9be5; }
.local-file-notice { background: var(--ui-preview); }
.local-file-notice a { color: var(--brand-blue); background: #fff; }
.api-status.is-online,.api-status.is-online b { color: var(--brand-blue); }
.api-status.is-online b { background: var(--brand-blue); }