:root { --h5-paper:#f7f6f2; --h5-ink:#203247; --h5-muted:#88908f; --h5-accent:#b97049; }
body { min-width:320px; background:#eaece9; color:var(--h5-ink); }
.h5-shell { width:100%; max-width:480px; min-height:100dvh; margin:0 auto; background:var(--h5-paper); box-shadow:0 0 70px #2737330e; }
.h5-visually-hidden { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; overflow:hidden !important; clip:rect(0,0,0,0); white-space:nowrap; border:0 !important; }
.site-header { width:100%; height:78px; margin:0; padding:12px 23px; border:0; background:var(--h5-paper); }
.brand { gap:10px; font-size:22px; font-family:inherit; font-weight:650; letter-spacing:.04em; }
.h5-brand-mark { display:grid; place-items:center; width:36px; height:39px; border:1px solid #ae7554; border-radius:11px 4px 11px 4px; color:#a36d4d; font:500 23px/1 'Songti SC',serif; background:#eee5d9; }
.brand > span:last-child { display:flex; flex-direction:column; gap:3px; }
.brand small { color:#8b918c; font-size:9px; font-weight:400; letter-spacing:.03em; }
.h5-header-tag { font-size:8px; letter-spacing:.16em; color:#929991; }
.h5-steps { display:flex; align-items:center; padding:6px 23px 18px; gap:5px; border-bottom:1px solid #e8e8df; }
.h5-steps button { display:flex; align-items:center; gap:5px; padding:2px 0; border:0; background:none; font-size:10px; color:#a0a59f; cursor:pointer; white-space:nowrap; }
.h5-steps button span { width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-size:9px; background:#e9ebe4; }
.h5-steps button[aria-current] { color:#6c452e; font-weight:650; }.h5-steps button[aria-current] span { background:#a86e49; color:#fff; }
.h5-steps button.is-complete { color:#626f63; }.h5-steps button.is-complete span { background:#dbe2d9; color:#647760; }
.h5-steps > i { height:1px; flex:1; min-width:5px; background:#e2e5dc; }
main.h5-main { width:100%; margin:0; }.h5-screen { padding:24px 22px 0; border:0; width:100%; background:transparent; }.h5-screen[hidden] { display:none !important; }
.h5-page-heading { margin-bottom:25px; }.h5-kicker { margin:0 0 10px; color:#b18765; font-size:9px; letter-spacing:.13em; font-weight:600; }
.h5-page-heading h1 { margin:0; font-size:29px; letter-spacing:-.055em; font-weight:600; line-height:1.45; }.h5-page-heading h1 em { font-style:normal; color:#a36c4c; }.h5-page-heading > p:last-child { margin:9px 0 0; font-size:12px; color:#8a918b; line-height:1.75; }
.h5-page-heading h1:focus { outline:none; }.h5-screen fieldset { min-width:0; margin:0; border:0; padding:0; }.h5-screen legend { width:100%; margin:0 0 13px; padding:0; color:#3f4d50; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:space-between; }.h5-screen legend > small { font-size:9px; font-weight:400; color:#9a9e93; }
.h5-style-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.h5-style-options button { padding:0 0 14px; min-width:0; border:1px solid #e3e4da; border-radius:13px; background:#fff; text-align:left; position:relative; overflow:hidden; box-shadow:none; }
.h5-style-options button > span:not(.h5-style-art) { display:block; font-size:12px; font-weight:600; padding:0 10px; margin-top:12px; color:#394d59; }.h5-style-options button > small { display:block; font-size:8px; padding:0 10px; margin-top:5px; color:#939a99; line-height:1.5; }.h5-style-options button.is-selected { border-color:#a97451; box-shadow:0 0 0 1px #a97451; background:#fffefa; }
.h5-style-options button.is-selected > small { color:#96816d; }
.h5-choice-tick { position:absolute; z-index:2; top:8px; right:8px; width:17px; height:17px; border:1px solid #ffffffb3; border-radius:50%; background:#ffffff35; box-shadow:0 1px 4px #20324726; font-style:normal; color:transparent; font-size:10px; text-align:center; line-height:16px; pointer-events:none; }.is-selected .h5-choice-tick { background:#a97451; border-color:#a97451; color:white; }
.h5-style-options .h5-style-art { position:relative; display:block; height:169px; overflow:hidden; background:#dedbd4; padding:0; }
.h5-style-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 24%; pointer-events:none; user-select:none; }
.h5-art-note { margin:10px 0 18px; font-size:9px; text-align:right; color:#a4a99f; }.h5-surface { padding:18px; border:1px solid #e6e6dd; border-radius:14px; background:#fffefa; }.h5-style-settings fieldset { padding-bottom:17px; border-bottom:1px solid #edede5; }
.h5-style-settings .swatches { display:flex; justify-content:space-between; gap:12px; }.h5-style-settings .swatches button { width:40px; height:51px; padding:0; display:flex; flex-direction:column; gap:7px; align-items:center; border:0; background:none; box-shadow:none; }.h5-style-settings .swatches button i { width:26px; height:26px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #dadbd4; }.h5-style-settings .swatches button.is-selected i { box-shadow:0 0 0 2px #a97451; }.h5-style-settings .swatches button span { font-size:9px; color:#969c94; }.h5-style-settings .swatches button.is-selected span { color:#916043; }
.h5-outfit { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:17px; }.h5-outfit > span { font-size:12px; color:#3f4d50; font-weight:600; }.h5-outfit small { display:block; font-size:9px; font-weight:400; color:#9aa097; margin-top:5px; }.h5-outfit select { width:115px; height:36px; margin:0; font-size:11px; color:#6e746b; border:1px solid #e2e5db; background:#f7f8f2; border-radius:8px; }
.h5-promise { display:flex; gap:12px; align-items:center; justify-content:center; margin:21px 0 8px; font-size:9px; color:#8a9486; }.h5-promise i { width:3px; height:3px; background:#b7beaf; border-radius:50%; }
.h5-dock { position:sticky; bottom:0; padding:17px 0 max(12px,env(safe-area-inset-bottom)); margin-top:13px; background:linear-gradient(0deg,var(--h5-paper) 86%,#f7f6f2ed); z-index:20; border:0; }.h5-primary { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; height:49px; padding:0 18px; color:#fff; background:#253e4d; border:1px solid #253e4d; border-radius:12px; font-size:13px; font-weight:600; letter-spacing:.02em; cursor:pointer; box-shadow:0 6px 12px #253e4d0c; }.h5-primary:hover:not(:disabled) { background:#355465; }.h5-primary > span[aria-hidden] { font-size:18px; font-weight:400; }.h5-dock > p:last-child { margin:10px 0 0; color:#9a9f95; font-size:9px; line-height:1.7; text-align:center; }
.h5-back { border:0; background:none; padding:0; color:#8c978b; font-size:10px; margin:0 0 19px; cursor:pointer; }
.h5-screen .upload-zone { height:245px; border:1.5px dashed #b9c6b9; border-radius:17px; background:linear-gradient(135deg,#eef2e9,#fdfdf7); margin-bottom:18px; gap:12px; }.upload-zone .upload-icon { margin-bottom:0; width:45px; height:45px; color:#6c836d; background:#dde7d9; border-radius:13px; }.h5-screen .upload-zone strong { font-size:14px; font-weight:600; color:#4c6353; }.h5-screen .upload-zone small { font-size:9px; color:#9ca596; }.h5-upload-chip { background:#fffdf7; border:1px solid #c9d3c2; padding:7px 17px; border-radius:7px; color:#5e745d; font-size:10px; }
.h5-screen .file-summary { margin:0 0 18px; padding:12px; background:#fffefa; border:1px solid #e2e5d9; border-radius:13px; }.h5-screen .file-thumb { width:62px; height:74px; border-radius:8px; }.h5-screen .file-summary strong { font-size:11px; max-width:180px; }.h5-screen .file-summary span { font-size:9px; }.h5-screen .file-summary button { font-size:10px; white-space:nowrap; }
.h5-photo-guide h2 { margin:0 0 20px; font-size:12px; font-weight:600; }.h5-photo-guide > div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }.h5-photo-guide span { display:flex; flex-direction:column; align-items:center; }.h5-photo-guide b { width:34px; height:34px; display:grid; place-items:center; margin-bottom:12px; background:#eff1e9; border-radius:50%; color:#7c927a; font-size:23px; font-weight:400; }.h5-photo-guide strong { font-size:10px; font-weight:500; color:#586753; }.h5-photo-guide small { margin-top:6px; color:#a0a697; font-size:8px; }.h5-private-note { margin:18px 15px 32px; font-size:10px; color:#9ba492; text-align:center; line-height:1.8; }
.h5-info-surface { padding:17px; }.h5-info-surface .toggle-row { padding:0; margin:0; }.h5-screen .toggle-row strong { color:#455551; font-size:12px; }.h5-screen .toggle-row small { font-size:9px; line-height:1.8; color:#969f91; }.h5-screen .switch i { background:#d8ddd2; width:37px; height:23px; }.h5-screen .switch input:checked + i { background:#688363; }.h5-screen .switch input:checked + i::after { transform:translateX(14px); }
.h5-screen .toggle-row { border-top:0; }
.h5-screen .card-fields { padding:18px 0 0; margin-top:16px; border-top:1px solid #e9ece1; border-radius:0; background:none; display:grid; grid-template-columns:1fr; gap:14px; }.h5-screen .card-fields label { display:block; }.h5-screen .card-fields label > span { display:block; margin-bottom:7px; font-size:11px; color:#64705d; }.h5-screen .card-fields label > span small { margin-left:4px; color:#a5ad9d; font-size:9px; }.h5-screen .card-fields input { width:100%; height:42px; border:1px solid #e0e6d8; border-radius:8px; background:#fbfcf7; padding:0 11px; color:#42513e; font-size:12px; }.h5-screen .card-fields input::placeholder { color:#adb5a5; font-size:11px; }
.h5-bilingual-example { background:#eff2e9; border-radius:8px; padding:11px; overflow-wrap:anywhere; }.h5-bilingual-example small { color:#9aa58e; display:block; font-size:9px; }.h5-bilingual-example strong { display:block; margin-top:5px; color:#5d6e56; font-size:12px; font-weight:500; }.h5-screen .translation-help { margin:0; color:#9ea694; font-size:9px; line-height:1.8; }.h5-english-details { margin-top:0; }.h5-english-details summary { font-size:10px; color:#7b8a6e; cursor:pointer; }.h5-english-details summary > span { float:right; color:#a0aa95; font-size:9px; }.h5-english-details > div { display:grid; gap:13px; padding-top:16px; }
.h5-polish-surface { margin:16px 0 23px; padding:15px 17px; }.h5-polish-surface .toggle-row { margin:0; padding:0; }.h5-polish-surface > p { margin:12px 0 0; padding-top:10px; border-top:1px solid #ebeee3; font-size:9px; color:#a1aa95; line-height:1.8; }.h5-recommend { display:inline-block; margin-left:5px; padding:2px 4px; color:#a97547; background:#f2e8d6; border-radius:3px; font-size:8px; font-weight:400; }
.h5-screen .size-options { gap:7px; grid-template-columns:repeat(4,minmax(0,1fr)); }.h5-screen .size-options button { border-color:#e1e4d8; border-radius:9px; padding:12px 4px; background:#fffefa; }.h5-screen .size-options button span { font-size:11px; color:#67725c; }.h5-screen .size-options button small { font-size:8px; color:#a2aa99; }.h5-screen .size-options button.is-selected { background:#eff2e8; border-color:#879b75; }.h5-screen .size-options button.is-selected span { color:#64734e; }
.h5-screen .size-options button.is-selected small { color:#8b987c; }
.h5-crop-details { margin-top:13px; }.h5-crop-details summary { font-size:10px; color:#8e9982; padding:13px 0; }.h5-crop-details .range-field > span { font-size:10px; }.h5-crop-details input { accent-color:#839972; }.h5-screen .service-notice { margin:0 0 11px; padding:8px 10px; border-radius:7px; background:#ecefe5; color:#8a987b; font-size:9px; line-height:1.7; }.h5-screen .button-label { width:100%; justify-content:center; gap:12px; font-size:13px; }.h5-screen .button-loading { font-size:12px; }
.h5-result-screen .preview-panel { width:100%; position:relative; top:auto; border-radius:16px; min-height:0; overflow:hidden; background:#263d4c; }.h5-result-screen .preview-topbar { padding:15px 18px; height:auto; min-height:63px; border-bottom:1px solid #ffffff0c; }.h5-result-screen .preview-topbar > div { display:block; }.h5-result-screen .preview-topbar h2 { font-size:12px; color:#f0eee4; }.h5-result-screen .preview-topbar p { font-size:9px; color:#aeb9b8; margin:5px 0 0; }.h5-result-screen .mode-badge { font-size:8px; padding:5px 7px; background:#ffffff0c; color:#c3cfcb; }
.h5-result-screen .view-toolbar { padding:11px 14px 0; gap:4px; }.h5-result-screen .view-toolbar button { font-size:10px; padding:8px 12px; border-radius:6px; }.h5-result-screen .preview-stage { min-height:380px; padding:22px; position:relative; background:none; }.h5-result-screen .compare-frame { width:min(100%,285px); }.h5-result-screen .compare-control { width:min(100%,285px); }.h5-result-screen .empty-preview strong { font-size:13px; }.h5-result-screen .empty-preview p { font-size:10px; line-height:1.8; }.h5-result-screen .photo-guides { font-size:9px; padding:5px 10px 19px; gap:12px; }.h5-result-screen .photo-guides span { gap:4px; }.h5-result-screen .photo-guides i { width:3px; height:3px; background:#b0b69f; }
.h5-result-screen .generation-progress { position:absolute; inset:0; background:#263d4cf5; color:#f4f2e8; z-index:10; }.h5-result-screen .generation-progress strong { font-size:14px; }.h5-result-screen .generation-progress span { font-size:11px; }.h5-result-screen .generation-progress small { font-size:10px; color:#b8c4be; line-height:2; }.h5-result-screen .generation-error { font-size:11px; margin:0 0 14px; }
.h5-preview-status { margin:10px 0 0; color:#8a9980; font-size:10px; line-height:1.7; }.h5-preview-status:empty { display:none; }.h5-result-screen .result-actions { display:grid; grid-template-columns:1fr 1.3fr; padding:17px 0 12px; gap:10px; border:0; background:var(--h5-paper); }.h5-result-screen .result-note { display:flex; align-items:center; justify-content:space-between; gap:8px; grid-column:1 / -1; margin-bottom:7px; }.h5-result-screen .result-note b { color:#627259; font-size:10px; }.h5-result-screen .result-note span { font-size:8px; color:#a4ad9a; }.h5-result-screen .secondary-button,.h5-result-screen .download-button { height:45px; border-radius:10px; font-size:11px; }.h5-result-screen .secondary-button { background:#fffefa; color:#7c886e; border:1px solid #dce2d4; }.h5-result-screen .download-button { background:#253e4d; color:#fff; border:1px solid #253e4d; }.h5-watermark-note { grid-column:1 / -1; font-size:9px; margin:0 !important; }.h5-final-note { font-size:8px; line-height:1.8; color:#a8b09c; text-align:center; margin:17px 0 0; }
footer.h5-footer { width:100%; margin:0; padding:21px 22px 25px; color:#b4b9ad; font-size:8px; letter-spacing:.08em; display:flex; justify-content:space-between; align-items:center; border:0; }.h5-footer span { font-size:8px; letter-spacing:0; }.toast { max-width:min(400px,calc(100vw - 40px)); font-size:12px; line-height:1.7; bottom:90px; white-space:normal; text-align:center; z-index:200; }
.download-dialog { width:min(450px,calc(100vw - 18px)); max-height:calc(100dvh - 28px); border-radius:19px; }.download-sheet { padding:22px 18px; }.download-heading h2 { font-size:22px; }.download-form { display:block; }.download-preview { display:block; }.download-preview-stage { height:180px; min-height:150px; }.download-preview-image { max-height:100%; }.download-preview figcaption { flex-direction:row; }.download-actions { grid-template-columns:1fr; gap:8px; }.download-purchase { grid-row:1; }
@media(max-width:370px) { .site-header { padding-left:17px; padding-right:17px; }.h5-steps { padding-left:17px; padding-right:17px; gap:4px; }.h5-steps button { font-size:9px; gap:3px; }.h5-screen { padding-left:16px; padding-right:16px; }.h5-page-heading h1 { font-size:26px; }.h5-style-options { gap:7px; }.h5-style-options .h5-style-art { height:146px; }.h5-style-options button > span:not(.h5-style-art) { font-size:11px; padding:0 8px; }.h5-style-options button > small { font-size:7px; padding:0 8px; }.h5-outfit small { font-size:8px; }.h5-screen .file-summary strong { max-width:140px; } }
@media(min-width:600px) { .h5-shell { margin-top:20px; margin-bottom:20px; min-height:calc(100dvh - 40px); border:1px solid #e0e4d8; border-radius:25px; overflow:clip; }.site-header { border-radius:25px 25px 0 0; } }
@media(prefers-reduced-motion:reduce) { .h5-shell * { scroll-behavior:auto !important; } }

/* Touch targets and text stay readable on a real phone, including narrow iPhones. */
#apiStatus { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; overflow:hidden !important; clip:rect(0,0,0,0); white-space:nowrap; border:0 !important; }
.h5-steps { gap:4px; padding-bottom:12px; }
.h5-steps button { flex:1; min-width:0; min-height:48px; flex-direction:column; gap:5px; padding:5px 0; font-size:11px; color:#737d70; }
.h5-steps button span { width:21px; height:21px; font-size:10px; }
.h5-steps > i { flex:0 0 12px; margin-bottom:17px; }
.h5-back { min-height:42px; padding:9px 0; font-size:12px; color:#697a64; margin-bottom:12px; }
.h5-page-heading > p:last-child { color:#6d786b; font-size:13px; }
.h5-screen legend,.h5-outfit > span,.h5-screen .toggle-row strong { font-size:14px; }
.h5-style-options button > span:not(.h5-style-art) { font-size:13px; }
.h5-style-options button > small,.h5-style-options button.is-selected > small { font-size:10px; line-height:1.65; color:#777e72; }
.h5-art-note { font-size:10px; color:#7e8976; }
.h5-style-settings .swatches button { height:58px; min-width:40px; }
.h5-style-settings .swatches button span { font-size:11px; color:#73806d; }
.h5-outfit { flex-wrap:wrap; gap:12px; }
.h5-outfit small { font-size:11px; line-height:1.6; color:#788570; }
.h5-screen input:not([type='checkbox']):not([type='range']),.h5-screen select { font-size:16px; min-height:44px; }
.h5-outfit select { width:138px; }
.h5-promise { font-size:11px; color:#75836b; }
.h5-primary,.h5-screen .button-label { min-height:49px; font-size:14px; }
.h5-dock > p:last-child { font-size:11px; color:#7d8874; }
.h5-screen .upload-zone strong { font-size:16px; }.h5-screen .upload-zone small { font-size:11px; color:#7d8b72; }.h5-upload-chip { font-size:13px; padding:8px 18px; }
.h5-screen .file-summary strong { font-size:13px; }.h5-screen .file-summary span { font-size:11px; color:#788775; }.h5-screen .file-summary button { min-height:42px; font-size:12px; }
.h5-photo-guide h2 { font-size:14px; }.h5-photo-guide strong { font-size:12px; }.h5-photo-guide small { font-size:10px; color:#819075; }.h5-private-note { font-size:12px; color:#78876e; }
.h5-screen .toggle-row small { font-size:11px; color:#79866f; }.h5-screen .switch { min-width:45px; min-height:44px; display:flex; align-items:center; justify-content:flex-end; flex-shrink:0; }
.h5-screen .card-fields label > span { font-size:13px; color:#637357; }.h5-screen .card-fields label > span small { font-size:11px; color:#809070; }.h5-screen .card-fields input::placeholder { font-size:13px; color:#89977b; }
.h5-bilingual-example small { font-size:11px; color:#7a896a; }.h5-bilingual-example strong { font-size:14px; }.h5-screen .translation-help { font-size:11px; color:#78876b; }
.h5-english-details summary { display:flex; align-items:center; justify-content:space-between; min-height:44px; font-size:12px; color:#6d7e5d; }.h5-english-details summary > span { font-size:11px; color:#82916f; }
.h5-polish-surface > p { font-size:11px; color:#78866a; }.h5-recommend { font-size:10px; }
.h5-screen .size-options button span { font-size:12px; }.h5-screen .size-options button small { font-size:10px; color:#7c896d; }
.h5-crop-details.controls-panel { width:100%; padding:0; border:0; }.h5-crop-details summary { min-height:46px; font-size:13px; color:#71835e; }.h5-crop-details summary > span { font-size:11px; }.h5-crop-details .range-field > span { font-size:12px; }.h5-crop-details input { min-height:34px; }
.h5-screen .service-notice { font-size:11px; color:#6e7e5a; }
.h5-result-screen .preview-topbar h2 { font-size:14px; }.h5-result-screen .preview-topbar p { font-size:11px; color:#bfcac3; }.h5-result-screen .mode-badge { font-size:10px; }
.h5-result-screen .view-toolbar button { min-height:40px; font-size:12px; }.h5-result-screen .photo-guides { font-size:11px; }.h5-result-screen .empty-preview strong { font-size:15px; }.h5-result-screen .empty-preview p { font-size:12px; }
.h5-result-screen .generation-progress strong { font-size:16px; }.h5-result-screen .generation-progress span,.h5-result-screen .generation-progress small { font-size:12px; }.h5-result-screen .generation-error { font-size:13px; }
.h5-preview-status { font-size:12px; color:#73815f; }.h5-result-screen .result-note { flex-wrap:wrap; }.h5-result-screen .result-note b { font-size:12px; }.h5-result-screen .result-note span { font-size:11px; color:#7c8a6a; }
.h5-result-screen .secondary-button,.h5-result-screen .download-button { min-height:47px; font-size:14px; }.h5-watermark-note,.h5-final-note { font-size:11px; color:#7f8c6c; }
.h5-retry-button { margin:0 0 18px; }
.h5-result-screen .compare-image,.h5-result-screen .compare-image.before,.h5-result-screen .compare-image.after.local-preview,.h5-result-screen .after-layer.has-card .compare-image { width:100%; height:100%; object-fit:contain; object-position:center; filter:none; transform:none; }
.h5-result-screen .info-card { display:none !important; }
.download-intro,.download-choice-content small,.download-layout-choice .download-choice-content small,.download-price-note,.download-selection-note,.download-footnote { font-size:12px; }
.download-choice-content strong,.download-layout-choice .download-choice-content strong { font-size:14px; }.download-actions button { font-size:14px; min-height:48px; }.download-preview figcaption { font-size:11px; }
@media(max-width:370px) { .h5-steps > i { flex-basis:7px; }.h5-style-options button > small { font-size:9px; }.h5-outfit select { width:100%; }.h5-promise { gap:8px; font-size:10px; }.h5-screen .size-options button span { font-size:11px; }.h5-screen .size-options button small { font-size:9px; } }