* { box-sizing: border-box; }
body { margin: 0; background: #f3f7ff; color: #10233e; font: 15px system-ui, sans-serif; }
.bar { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 18px; background: #0641ad; color: white; border-bottom: 2px solid #f4c400; }
.desktop-photo-mode-slot { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; }
.mobile-photo-mode-slot { display: none; }
.desktop-photo-mode-slot.hidden,
.mobile-photo-mode-slot.hidden { display: none !important; }
.header-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.brand { font-size: 20px; font-weight: 800; letter-spacing: .2px; color: #fff; }
.brand strong { color: #ffe100; }
.bar #account { color: #42d17b; font-weight: 800; }
.bar #account:empty { display: none; }
.bar #account .vc-v, .bar #account .vc-c { display: inline-block; position: relative; font-weight: 900; line-height: 1; }
.bar #account .vc-v { z-index: 2; color: #fff; }
.bar #account .vc-c { z-index: 1; margin-left: -3px; color: #ffe100; }
.bar #account .vc-amount { margin-left: 6px; color: #42d17b; }
.bar #account .free-trials { color: #fff; }
.bar #account .login-required { color: #ffe100; }
.bar #account.wallet-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border: 1px solid #ffffff33; border-radius: 18px; background: #082b5c; white-space: nowrap; }
.server-status { position: sticky; top: 60px; z-index: 19; margin: 0; padding: 9px 16px; background: #fff0f1; color: #c52d3c; font-size: 13px; font-weight: 900; letter-spacing: .04em; text-align: center; }
.server-status.hidden { display: none; }
.account-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.account-icon svg { width: 28px; height: 28px; }
.card { width: min(94vw, 720px); margin: 16px auto; padding: 14px 26px 24px; border-radius: 16px; background: transparent; box-shadow: none; }
#intro { margin: 0 0 12px; }
.photo-mode-switch { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; margin: 0; padding: 2px; border: 0; border-radius: 7px; background: transparent; }
.photo-mode-button { display: block; min-width: 0; padding: 6px 11px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #dbe8ff; font: inherit; font-size: 12px; font-weight: 750; line-height: 1.2; text-align: center; white-space: nowrap; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.photo-mode-button:hover, .photo-mode-button:focus-visible { border-color: #ffffff66; background: #ffffff18; color: #fff; outline: none; }
.photo-mode-button.selected { border-color: #ffffff88; background: #ffffff20; color: #fff; }
.photo-mode-title { font-size: inherit; font-weight: inherit; }
.photo-mode-help { display: none; }
.home-auth + hr { display: none !important; }
.account-page { width: 100%; min-height: 100vh; margin: 0; padding: 0; background: transparent; box-shadow: none; }
.account-page h2 { margin-top: 0; }
.account-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 0 58px; background: #0641ad; color: #fff; border-bottom: 2px solid #f4c400; }
.account-header h2 { margin: 0; color: #fff; font-size: 22px; }
.account-back { position: absolute; left: 16px; display: inline-grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.account-back:hover, .account-back:focus-visible { background: #ffffff22; outline: none; }
.account-back svg { width: 25px; height: 25px; }
.account-content { width: min(94vw, 720px); margin: 0 auto; padding: 26px 0 40px; }
h1 { margin: 0 0 8px; font-size: 28px; }
h3 { margin-bottom: 0; }
p { color: #52657d; }
.row, .account-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { border: 0; border-radius: 9px; padding: 12px 16px; background: #0641ad; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.btn:disabled { opacity: .65; cursor: wait; }
.btn.alt { background: #fff; color: #0641ad; border: 1px solid #0641ad; }
.btn.green { background: #14835c; }
.account-page .danger { background: #c52d3c; }
input, select, textarea { width: 100%; padding: 12px; border: 1px solid #cbd6e6; border-radius: 9px; font: inherit; }
.upload-card { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 86px; padding: 14px 16px; border: 1.5px dashed #83a7d5; border-radius: 14px; background: linear-gradient(135deg, #f8fbff, #edf5ff); color: #0641ad; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.upload-card:hover, .upload-card:focus-within, .upload-card.drag-over { border-color: #0641ad; background: #e8f2ff; box-shadow: 0 7px 18px #0641ad18; }
.upload-card:active { transform: translateY(1px); }
.upload-card.has-file { border-style: solid; border-color: #14835c; background: #f1fcf7; }
.upload-icon { display: inline-grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #dcecff; color: #0641ad; }
.upload-icon svg { width: 24px; height: 24px; }
.upload-copy { display: grid; min-width: 0; gap: 4px; flex: 1; }
.upload-copy strong { color: #10233e; font-size: 15px; }
.upload-copy small, .photo-preview-copy small { overflow: hidden; color: #60748e; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.upload-action { flex: 0 0 auto; padding: 8px 12px; border-radius: 8px; background: #0641ad; color: #fff; font-size: 13px; font-weight: 800; }
.upload-card input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.photo-preview { display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 10px 12px; border: 1px solid #d4e1f1; border-radius: 12px; background: #fff; }
.photo-preview img { flex: 0 0 62px; width: 62px; height: 62px; border-radius: 9px; object-fit: cover; background: #f3f7ff; }
.photo-preview-copy { display: grid; min-width: 0; gap: 3px; }
.photo-preview-copy strong { overflow: hidden; color: #10233e; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.preview-change { width: fit-content; margin-top: 3px; padding: 0; border: 0; background: transparent; color: #0641ad; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.preview-change:hover, .preview-change:focus-visible { color: #14835c; text-decoration: underline; outline: none; }
.photo-preview.hidden { display: none; }
.multiple-photo-preview { display: grid; gap: 10px; padding: 12px; border: 1px solid #cbd9ea; border-radius: 12px; background: #fff; }
.multiple-photo-preview.hidden { display: none; }
.multiple-photo-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.multiple-photo-preview-head strong { color: #10233e; font-size: 13px; }
.multiple-photo-thumb-grid, .multiple-photo-modal-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.multiple-photo-thumb { display: grid; gap: 7px; min-width: 0; }
.multiple-photo-image { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #f3f7ff; }
.multiple-photo-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.multiple-photo-image > span { position: absolute; right: 4px; bottom: 4px; min-width: 18px; padding: 2px 4px; border-radius: 5px; background: #10233ecc; color: #fff; font-size: 10px; font-weight: 800; text-align: center; }
.multiple-photo-color-row { display: grid; gap: 3px; min-width: 0; }
.multiple-photo-color-row > span { color: #60748e; font-size: 10px; font-weight: 800; line-height: 1; }
.multiple-photo-color-picker { display: flex; align-items: center; gap: 3px; min-width: 0; overflow-x: auto; padding: 1px 1px 3px; scrollbar-width: none; }
.multiple-photo-color-picker::-webkit-scrollbar { display: none; }
.multiple-photo-color { display: inline-grid; flex: 0 0 21px; place-items: center; width: 21px; height: 21px; padding: 2px; border: 1px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; }
.multiple-photo-color > span { display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid #aebfd3; border-radius: 50%; background: var(--photo-color); color: #0641ad; font-size: 13px; font-weight: 900; line-height: 1; }
.multiple-photo-color.selected { border-color: #0641ad; box-shadow: 0 0 0 2px #0641ad22; }
.multiple-photo-color:hover, .multiple-photo-color:focus-visible { border-color: #f4c400; outline: none; }
.multiple-photo-color-custom > span { border-color: #b5c6d9; background: var(--photo-color); box-shadow: inset 0 0 0 2px #fff; }
.multiple-photo-remove { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 21px; height: 21px; padding: 0; border: 0; border-radius: 50%; background: #c52d3c; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.multiple-photo-copies { display: flex; align-items: center; justify-content: space-between; gap: 4px; color: #60748e; font-size: 10px; font-weight: 800; }
.multiple-photo-copy-select { min-width: 0; width: 100%; padding: 4px 3px; border: 1px solid #cbd6e6; border-radius: 6px; background: #fff; color: #10233e; font: inherit; font-size: 10px; font-weight: 800; }
.multiple-photo-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; background: #10233e73; overflow-y: auto; }
.multiple-photo-modal.hidden { display: none; }
.multiple-photo-panel { position: relative; width: min(94vw, 620px); max-height: calc(100vh - 36px); overflow-y: auto; padding: 24px; border: 1px solid #dbe7f4; border-radius: 18px; background: #fff; box-shadow: 0 18px 45px #10233e33; }
.multiple-photo-panel h2 { margin: 0; color: #10233e; font-size: 21px; }
.multiple-photo-modal-note { margin: 5px 0 16px; color: #60748e; font-size: 13px; }
.multiple-photo-modal-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-height: 55vh; overflow-y: auto; padding: 2px; }
.multiple-photo-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.multiple-photo-close { position: absolute; top: 10px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #c52d3c; color: #fff; font-size: 23px; line-height: 1; cursor: pointer; }
.multiple-photo-close:hover, .multiple-photo-close:focus-visible { background: #a51e2d; outline: 2px solid #f4c400; outline-offset: 2px; }
.form.multiple-mode .color-picker { display: none; }
.color-picker { display: grid; gap: 8px; }
.color-swatches { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.color-swatch { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 3px; border: 2px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.color-swatch:hover, .color-swatch:focus-visible { transform: translateY(-1px); outline: none; }
.color-swatch.selected { border-color: #0641ad; box-shadow: 0 0 0 3px #0641ad22; }
.swatch-dot { display: block; width: 29px; height: 29px; border: 1px solid #aebfd3; border-radius: 50%; background: var(--swatch); }
.color-swatch:first-child .swatch-dot { border-color: #7d91aa; }
.swatch-check { position: absolute; display: none; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #0641ad; color: #fff; font-size: 11px; font-weight: 900; line-height: 1; }
.color-swatch.selected .swatch-check { display: grid; }
.other-color { border-color: #b5c6d9; background: #fff; }
.other-color.selected { border-color: #0641ad; }
.other-dot { border: 0; background: conic-gradient(#e83f5b 0 16.6%, #f7c948 0 33.2%, #59c36a 0 49.8%, #35a7de 0 66.4%, #7366d9 0 83%, #e83f9b 0); }
.swatch-plus { position: absolute; color: #0641ad; font-size: 19px; font-weight: 800; line-height: 1; text-shadow: 0 1px #fff; }
.custom-color-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: start center; padding: 70px 18px 18px; background: #10233e73; overflow-y: auto; }
.custom-color-modal.hidden { display: none; }
.custom-color-panel { position: relative; width: min(94vw, 410px); max-height: calc(100vh - 88px); overflow-y: auto; padding: 22px; border: 1px solid #dbe7f4; border-radius: 18px; background: #fff; box-shadow: 0 18px 45px #10233e33; }
.custom-color-close { position: absolute; top: 12px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #eef5ff; color: #52657d; font-size: 25px; line-height: 1; cursor: pointer; }
.custom-color-close:hover, .custom-color-close:focus-visible { background: #dcecff; color: #0641ad; outline: none; }
.custom-color-heading { display: flex; align-items: center; gap: 12px; padding-right: 28px; }
.custom-color-heading h2 { margin: 0; color: #10233e; font-size: 20px; }
.custom-color-heading p { margin: 3px 0 0; color: #60748e; font-size: 13px; }
.custom-color-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #eaf4ff; color: #0b72d1; font-size: 21px; }
.custom-color-picker-row { display: grid; gap: 12px; margin-top: 18px; }
.custom-color-picker { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 9px 12px 9px 9px; border: 1px solid #cbd6e6; border-radius: 12px; background: #f8fbff; color: #10233e; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.custom-color-picker:hover, .custom-color-picker:focus-within { border-color: #0641ad; background: #f1f7ff; box-shadow: 0 0 0 3px #0641ad18; }
.custom-color-preview { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #9eb3ca; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px #fff; }
.custom-color-picker-copy { display: grid; min-width: 0; gap: 2px; }
.custom-color-picker-copy strong { font-size: 14px; }
.custom-color-picker-copy small { color: #60748e; font-size: 12px; }
.custom-color-picker-arrow { margin-left: auto; color: #52657d; font-size: 25px; line-height: 1; }
.custom-color-picker input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.custom-color-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #10233e; font-size: 13px; font-weight: 800; }
.custom-color-field input[type=text] { width: 160px; padding: 9px 10px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.custom-color-error { min-height: 18px; margin-top: 7px; color: #b4232f; font-size: 12px; }
.custom-color-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 8px; }
.custom-color-actions .btn { padding: 10px 13px; font-size: 13px; }
.low-balance-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; background: #10233e66; }
.low-balance-modal.hidden { display: none; }
.low-balance-panel { position: relative; width: min(94vw, 380px); padding: 28px 22px 22px; border: 1px solid #dbe7f4; border-radius: 18px; background: #fff; box-shadow: 0 18px 45px #10233e33; text-align: center; }
.low-balance-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 16px; background: #fff8d6; font-size: 23px; font-weight: 900; }
.low-balance-icon .vc-v { color: #10233e; }
.low-balance-icon .vc-c { margin-left: -3px; color: #d6a900; }
.low-balance-panel h2 { margin: 0; color: #10233e; font-size: 21px; }
.low-balance-panel p { margin: 8px 0 18px; color: #52657d; line-height: 1.5; }
.low-balance-close { position: absolute; top: 10px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #52657d; font-size: 25px; line-height: 1; cursor: pointer; }
.low-balance-close:hover, .low-balance-close:focus-visible { background: #f3f7ff; color: #0641ad; outline: none; }
.low-balance-actions { display: flex; justify-content: center; gap: 9px; }
.low-balance-actions .btn { padding: 10px 14px; font-size: 13px; }
.grid { position: relative; z-index: 10; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.select-control { position: relative; min-width: 0; }
.layout-control { display: none; }
.layout-control.layout-visible { display: block; }
.form.multiple-mode #copiesControl { display: none; }
.native-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.select-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 12px; border: 1px solid #cbd6e6; border-radius: 9px; background: #fff; color: #10233e; font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease; }
.select-trigger:hover, .select-control.open .select-trigger, .select-trigger:focus-visible { border-color: #0641ad; box-shadow: 0 0 0 3px #0641ad18; outline: none; }
.select-chevron { color: #52657d; font-size: 19px; line-height: .7; transform: translateY(-2px); transition: transform .18s ease; }
.select-control.open .select-chevron { transform: rotate(180deg) translateY(2px); }
.select-menu { position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 40; display: grid; gap: 4px; padding: 7px; border: 1px solid #d6e3f2; border-radius: 12px; background: #fff; box-shadow: 0 12px 28px #10233e24; opacity: 0; transform: translateY(-7px) scale(.98); transform-origin: top center; transition: opacity .16s ease, transform .16s ease, visibility .16s ease; visibility: hidden; pointer-events: none; }
.select-menu[hidden] { display: none !important; }
.select-control.open .select-menu:not([hidden]) { opacity: 1; transform: translateY(0) scale(1); visibility: visible; pointer-events: auto; }
.select-option { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 11px; border: 0; border-radius: 8px; background: transparent; color: #10233e; font: inherit; text-align: left; cursor: pointer; }
.select-option:hover, .select-option:focus-visible { background: #edf5ff; color: #0641ad; outline: none; }
.select-option.selected { background: #eaf4ff; color: #0641ad; font-weight: 800; }
.select-option.selected::after { content: '✓'; color: #14835c; font-weight: 900; }
.form { display: grid; gap: 10px; }
.hidden { display: none; }
.home-auth, #intro { display: none; }
.error, .account-message.error { color: #b4232f; }
.account-message { min-height: 22px; font-weight: 700; }
.account-message.ok { color: #14835c; }
.account-section { display: grid; gap: 10px; margin: 18px 0; }
.result { margin-top: 16px; }
.result.loading { display: grid; gap: 9px; margin-top: 8px; padding: 10px 12px; border: 1px solid #cfe0f3; border-radius: 12px; background: #f7fbff; color: #45617c; font-size: 12px; font-weight: 700; line-height: 1.2; }
.processing-status { display: flex; align-items: center; gap: 9px; min-width: 0; }
.processing-spinner { flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid #cfe0f3; border-top-color: #14835c; border-right-color: #0641ad; border-radius: 50%; animation: photo-spin .8s linear infinite; }
.processing-copy { display: grid; gap: 2px; min-width: 0; }
.processing-copy strong { color: #0641ad; font-size: 12px; }
.processing-copy small { overflow: hidden; color: #60748e; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.processing-dots { min-width: 20px; color: #14835c; font-weight: 900; letter-spacing: 2px; animation: photo-dots 1.2s steps(4, end) infinite; }
.processing-track { height: 4px; overflow: hidden; border-radius: 999px; background: #dfeaf6; }
.processing-track span { display: block; width: 38%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0641ad, #14835c, #f4c400); animation: photo-progress 1.7s ease-in-out infinite; }
@keyframes photo-spin { to { transform: rotate(360deg); } }
@keyframes photo-dots { 0%, 20% { opacity: .25; } 45% { opacity: .55; } 70%, 100% { opacity: 1; } }
@keyframes photo-progress { 0% { transform: translateX(-120%); } 100% { transform: translateX(310%); } }
@media (prefers-reduced-motion: reduce) {
  .processing-spinner, .processing-dots, .processing-track span { animation: none; }
}
.wallet-link { cursor: pointer; }
.wallet-link:focus-visible { outline: 2px solid #f4c400; outline-offset: 4px; border-radius: 4px; }
.wallet-page { width: 100%; min-height: 100vh; margin: 0; padding: 0; background: linear-gradient(180deg, #f3f7ff 0, #f7fbff 190px, #f7fbff 100%); }
.wallet-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 7px 16px 7px 58px; background: #0641ad; color: #fff; border-bottom: 2px solid #f4c400; box-shadow: 0 5px 18px #0641ad22; }
.wallet-heading { display: grid; gap: 2px; min-width: 0; white-space: nowrap; }
.wallet-header h2 { margin: 0; color: #fff; font-size: 20px; line-height: 1.1; }
.wallet-rate { color: #dbe8ff; font-size: 11px; font-weight: 700; }
.wallet-header-total { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 4px 5px 4px 10px; border: 1px solid #ffffff38; border-radius: 12px; background: #072751; }
.wallet-balance-copy { display: grid; gap: 1px; min-width: 52px; }
.wallet-balance-copy span { color: #bcd3f2; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.wallet-balance-copy strong { color: #42d17b; font-size: 17px; line-height: 1.05; white-space: nowrap; }
.wallet-back { position: absolute; left: 16px; display: inline-grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.wallet-back:hover, .wallet-back:focus-visible { background: #ffffff22; outline: none; }
.wallet-back svg { width: 25px; height: 25px; }
.wallet-content { width: min(94vw, 720px); margin: 0 auto; padding: 18px 0 40px; }
.wallet-add { flex: 0 0 auto; padding: 8px 10px; border-radius: 8px; font-size: 12px; white-space: nowrap; }
.wallet-topup-note { margin: 0 0 12px; padding: 11px 13px; border: 1px solid #b9e5d2; border-radius: 12px; background: #effbf5; color: #14724f; font-size: 13px; font-weight: 700; box-shadow: 0 5px 14px #14835c12; }
.modal-open { overflow: hidden; }
.topup-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: start center; padding: max(68px, env(safe-area-inset-top) + 14px) 12px max(12px, env(safe-area-inset-bottom)); background: #10233e66; overflow-y: auto; overscroll-behavior: contain; }
.topup-modal.hidden { display: none; }
.topup-panel { position: relative; width: min(94vw, 520px); max-height: calc(100vh - 86px); overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 16px; border: 1px solid #dbe7f4; border-radius: 16px; background: #fff; box-shadow: 0 18px 45px #10233e33; }
.topup-close { position: absolute; top: 7px; right: 7px; z-index: 2; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #a51e2d; border-radius: 6px; background: #c52d3c; color: #fff; font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; }
.topup-close:hover, .topup-close:focus-visible { background: #a51e2d; color: #fff; outline: 2px solid #c52d3c55; }
.topup-qr-box { display: grid; place-items: center; min-height: 0; padding: 8px; border: 1px dashed #9eb3ca; border-radius: 11px; background: #f8fbff; color: #60748e; text-align: center; }
.topup-qr-box img { display: block; width: auto; max-width: 100%; height: auto; max-height: 240px; object-fit: contain; background: #fff; }
.topup-qr-box img.hidden { display: none; }
.topup-amount-label { display: block; margin-top: 10px; color: #10233e; font-size: 13px; font-weight: 800; }
.topup-plan-list { display: grid; grid-template-columns: repeat(5, minmax(62px, 1fr)); gap: 7px; min-width: 0; margin-top: 7px; padding: 2px 1px 5px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.topup-plan { display: grid; gap: 2px; min-width: 0; width: 100%; padding: 8px 6px; border: 1px solid #cbd6e6; border-radius: 9px; background: #fff; color: #0641ad; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; }
.topup-plan small { color: #60748e; font-size: 10px; font-weight: 700; white-space: nowrap; }
.topup-plan:hover, .topup-plan:focus-visible { border-color: #14835c; outline: none; transform: translateY(-1px); }
.topup-plan.is-selected { border-color: #14835c; background: #eaf8f1; color: #14724f; box-shadow: 0 0 0 2px #14835c22; }
.topup-plan.is-selected small { color: #14724f; }
.topup-payable { margin-top: 9px; color: #52657d; font-size: 13px; font-weight: 800; }
.topup-payable strong { color: #14835c; font-size: 18px; }
.topup-upi-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; margin-top: 8px; }
.topup-upi { color: #0641ad; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.copy-upi, .clear-proof { flex: 0 0 auto; border: 1px solid #b9cce2; border-radius: 7px; padding: 6px 9px; background: #fff; color: #0641ad; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.copy-upi:hover, .copy-upi:focus-visible, .clear-proof:hover, .clear-proof:focus-visible { border-color: #14835c; color: #14724f; outline: none; }
.topup-message { min-height: 20px; margin-top: 8px; color: #60748e; font-size: 12px; }
.topup-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 12px; }
.topup-actions .btn { padding: 10px 13px; font-size: 13px; }
.payment-proof-panel { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #dbe4f1; }
.payment-proof-panel label { color: #10233e; font-size: 13px; font-weight: 800; }
.proof-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.proof-upload { display: grid; place-items: center; gap: 5px; min-height: 82px; padding: 12px; border: 1px dashed #8eafd0; border-radius: 11px; background: #f8fbff; color: #0641ad; text-align: center; cursor: pointer; }
.proof-upload:hover, .proof-upload:focus-within { border-color: #14835c; background: #effbf5; }
.proof-upload-title { font-size: 13px; font-weight: 800; }
.proof-upload img { display: block; width: auto; max-width: 100%; max-height: 100px; border-radius: 7px; object-fit: contain; }
.proof-upload img.hidden { display: none; }
.proof-file-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 0; }
.payment-proof-panel small { color: #60748e; font-size: 11px; }
.payment-proof-panel textarea { resize: vertical; }
.topup-proof-message { min-height: 20px; color: #60748e; font-size: 12px; }
.topup-proof-message.ok { color: #14724f; font-weight: 700; }
.topup-proof-message.error { color: #b4232f; font-weight: 700; }
.wallet-list { display: grid; gap: 9px; margin-top: 4px; }
.wallet-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; min-width: 0; padding: 13px 14px 13px 16px; border: 1px solid #dbe7f4; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px #0641ad0d; }
.wallet-item:hover { border-color: #b9cde4; box-shadow: 0 7px 20px #0641ad16; }
.wallet-reason { overflow-wrap: anywhere; color: #10233e; font-size: 13px; font-weight: 800; line-height: 1.25; }
.wallet-date { margin-top: 3px; color: #6b7b90; font-size: 11px; line-height: 1.35; }
.wallet-amount { min-width: 68px; padding: 6px 8px; border-radius: 8px; font-size: 15px; font-weight: 900; line-height: 1.1; text-align: center; white-space: nowrap; }
.wallet-amount.credit, .wallet-amount.refund { background: #eaf8f1; color: #14835c; }
.wallet-amount.pending { background: #fff3d6; color: #9a6100; }
.wallet-pending { border-color: #f2d28b; border-left: 4px solid #f2b84b; padding-left: 13px; background: #fffdf6; }
.wallet-status { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #fff3d6; color: #9a6100; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.wallet-amount.debit { background: #fff0f1; color: #c52d3c; }
.wallet-empty { padding: 28px 16px; border: 1px dashed #b9cde4; border-radius: 14px; background: #fff; color: #52657d; text-align: center; }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #10233e66; padding: 16px; }
.modal.hidden { display: none; }
.modal > div { position: relative; width: min(94vw, 400px); padding: 22px; border-radius: 14px; background: #fff; }
.modal .btn { padding: 9px 12px; font-size: 14px; }
.modal-close { position: absolute; top: 8px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #52657d; font-size: 26px; line-height: 1; cursor: pointer; }
.modal-close:hover, .modal-close:focus-visible { background: #f3f7ff; color: #0641ad; outline: none; }
@media (max-width: 540px) {
  .modal { place-items: start center; padding: max(72px, env(safe-area-inset-top) + 18px) 12px max(18px, env(safe-area-inset-bottom)); overflow-y: auto; }
  .modal > div { max-height: calc(100vh - 90px); overflow-y: auto; }
  .bar { gap: 0 8px; padding: 0 12px; }
  .brand { order: 1; }
  .header-actions { order: 2; margin-left: auto; }
  .desktop-photo-mode-slot { display: none; }
  .mobile-photo-mode-slot { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 3px 12px 0; background: #f3f7ff; border-bottom: 1px solid #d3deed; }
  .mobile-photo-mode-slot .photo-mode-switch { justify-content: center; }
  .photo-mode-button { padding: 5px 10px; color: #52657d; }
  .photo-mode-button:hover, .photo-mode-button:focus-visible { border-color: #9eb3ca; background: #fff; color: #0641ad; }
  .photo-mode-button.selected { border-color: #0641ad; background: #fff; color: #0641ad; box-shadow: 0 2px 6px #0641ad1c; }
  .grid { grid-template-columns: 1fr; }
  .card { margin: 10px auto; padding: 10px 16px 18px; }
  .account-content { width: 100%; padding: 18px 16px 32px; }
  .wallet-header { gap: 7px; min-height: 60px; padding: 6px 9px 6px 52px; }
  .wallet-header h2 { font-size: 17px; }
  .wallet-rate { font-size: 10px; }
  .wallet-header-total { gap: 5px; padding-left: 7px; }
  .wallet-balance-copy { min-width: 46px; }
  .wallet-balance-copy strong { font-size: 15px; }
  .wallet-add { padding: 7px 8px; font-size: 11px; }
  .wallet-content { width: 100%; padding: 14px 16px 32px; }
  .wallet-list { gap: 8px; }
  .wallet-item { gap: 7px 9px; padding: 12px 10px 12px 12px; border-radius: 12px; }
  .wallet-pending { padding-left: 9px; }
  .wallet-reason { font-size: 12px; }
  .wallet-date { font-size: 10px; }
  .wallet-amount { min-width: 62px; padding: 6px 5px; font-size: 13px; }
  .topup-modal { padding: max(60px, env(safe-area-inset-top) + 10px) 8px max(8px, env(safe-area-inset-bottom)); }
  .topup-panel { width: 100%; max-height: calc(100vh - 72px); padding: 22px 14px 14px; }
  .topup-qr-box img { max-height: 220px; }
  .topup-plan-list { grid-template-columns: repeat(5, minmax(62px, 1fr)); gap: 6px; margin-inline: -2px; padding-inline: 2px; }
  .topup-plan { padding: 8px 5px; }
  .topup-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .topup-actions .btn { width: 100%; }
  .account-header h2 { font-size: 22px; }
  h1 { font-size: 24px; }
  .custom-color-modal { align-items: start; padding: 68px 10px 10px; }
  .custom-color-panel { width: 100%; max-height: calc(100vh - 82px); padding: 20px 16px 16px; border-radius: 12px 12px 18px 18px; }
  .custom-color-heading h2 { font-size: 18px; }
  .custom-color-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .custom-color-actions .btn { width: 100%; }
  .low-balance-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .low-balance-actions .btn { width: 100%; }
  .multiple-photo-thumb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .multiple-photo-modal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .multiple-photo-modal-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .multiple-photo-modal-actions .btn { width: 100%; }
}
@media (max-width: 360px) {
  .wallet-header { gap: 5px; padding-left: 46px; }
  .wallet-header h2 { font-size: 15px; }
  .wallet-rate { display: none; }
  .wallet-header-total { gap: 4px; padding: 3px 4px 3px 6px; }
  .wallet-balance-copy { min-width: 42px; }
  .wallet-balance-copy strong { font-size: 14px; }
  .wallet-add { padding: 6px 6px; font-size: 10px; }
}

/* Passport Photo / ganit.in brand */
:root { --brand-blue:#0641ad; --brand-yellow:#ffe100; --brand-ink:#08143d; }
body { background:radial-gradient(ellipse at top right,#e1edff,transparent 55%),#f3f7ff; }
.bar { min-height:88px; padding:12px clamp(12px,3vw,36px); border-bottom:4px solid var(--brand-yellow); background:linear-gradient(110deg,#06348d,#006dff); }
.brand-lockup { display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.brand-logo { width:64px; height:64px; border-radius:16px; background:white; box-shadow:0 4px 15px #00153c33; }
.brand-copy { display:grid; gap:3px; }.brand-copy strong { color:white; font-size:20px; }.brand-credit { font-size:11px; font-weight:500; color:#fff; letter-spacing:.2px; }.brand-credit b { color:#ffe100; font-size:13px; }
.card { background:#fff; margin:28px auto; border:1px solid #e0e8f7; border-radius:24px; box-shadow:0 18px 60px #06245e0b; padding:28px; }
.brand-intro { margin-bottom:16px; }.brand-eyebrow { display:inline-block; color:#0641ad; background:#edf3ff; border-radius:20px; padding:5px 12px; font-size:12px; font-weight:750; }.brand-intro h1 { color:#08143d; font-size:clamp(25px,4vw,34px); line-height:1.4; margin-top:12px; }.brand-intro h1 span { color:#0641ad; }
.btn.green { background:#ffe100; color:#08143d; box-shadow:0 4px 0 #e6c500; }.btn.green:hover { background:#ffed55; }.btn { border-radius:12px; }.upload-card { background:#f5f9ff; border-color:#85aaff; border-radius:18px; min-height:102px; }.upload-icon { background:#ffe100; color:#0641ad; }.upload-action { background:#0641ad; }
.account-header,.wallet-header { background:linear-gradient(110deg,#06348d,#006dff); border-bottom:4px solid #ffe100; }.account-page { background:#f3f7ff; }.wallet-page { background:#f3f7ff; }.account-content { background:white; border-radius:20px; padding:24px; margin-top:20px; }
.photo-mode-button.selected { background:#ffe100; border-color:#ffe100; color:#08143d; }.photo-mode-button { line-height:1.5; }.wallet-add { box-shadow:none!important; }.server-status { top:88px; }
@media(max-width:700px) { .bar { min-height:80px; gap:8px; padding:10px 12px; }.brand-logo { width:52px; height:52px; border-radius:13px; }.brand-copy strong { font-size:17px; }.brand-lockup { gap:8px; }.brand-credit { font-size:10px; }.brand-credit b { font-size:11px; }.card { width:calc(100% - 24px); margin:16px auto; padding:20px 16px; }.brand-intro h1 { font-size:26px; }.mobile-photo-mode-slot { background:#0641ad; }.server-status { top:80px; }.bar #account.wallet-link { padding:0 8px; }.account-content { width:calc(100% - 24px); padding:20px 16px; } }
@media(max-width:360px) { .brand-copy strong { font-size:15px; }.brand-logo { width:44px; height:44px; }.brand-credit { font-size:9px; } }
.pwa-install { border:1px solid #b5ceff;border-radius:20px;color:#0641ad;background:#f2f7ff;padding:7px 13px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;margin-top:8px; }
.mobile-photo-mode-slot .photo-mode-button { color:white; }.mobile-photo-mode-slot .photo-mode-button.selected { color:#08143d; }.upload-copy small { white-space:normal;line-height:1.5; }

.bar #account .coin-label { color: #ffe100; font-weight: 900; }
.low-balance-icon .coin-label { color: #10233e; font-weight: 900; }
.photo-mode-switch a.photo-mode-button { text-decoration: none; border-color: #ffffff55; }

.upload-photo-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.upload-photo-modes .photo-mode-button{padding:11px 8px;background:#edf2fa;color:#0641ad;border:1px solid #d5dfef;min-height:44px}.upload-photo-modes .photo-mode-button.selected{background:#ffe100;color:#08143d;border-color:#ffe100}

/* My Account uses the desktop width; Coin lives inside the account. */
.account-content{width:min(1180px,calc(100% - 48px));display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start;background:transparent;padding:0;margin:28px auto}
.account-content>hr{display:none}.account-section,.account-coins{background:#fff;border:1px solid #dbe4f1;border-radius:14px;padding:24px;min-width:0}
.account-section h3{margin:0 0 18px}.account-coins{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px}.account-coins h3{margin:0}.account-coins p{margin:8px 0 0}.account-actions{grid-column:1/-1;justify-content:flex-end}
#accountCoinSlot #account{display:inline-flex;align-items:center;gap:8px;background:#0641ad;color:white;padding:14px 24px;border-radius:10px;font-size:22px;font-weight:800;cursor:pointer}#accountCoinSlot .coin-label{color:#ffe100}#accountCoinSlot #account:focus-visible{outline:3px solid #e6a900;outline-offset:3px}
@media(min-width:900px){#profileForm{grid-template-columns:repeat(2,minmax(0,1fr))}#accountAddress,#profileForm button{grid-column:1/-1}.account-header{min-height:68px}}
@media(max-width:700px){.account-content{width:calc(100% - 24px);grid-template-columns:1fr;gap:14px;margin:16px auto;padding:0}.account-section,.account-coins{padding:18px}.account-coins{flex-wrap:wrap}.account-actions{justify-content:stretch}.account-actions button{width:100%}#accountCoinSlot #account{font-size:19px;padding:12px 18px}}

body>header.hidden{display:none!important}.account-content{gap:20px;margin:20px auto}.account-section{margin:0;padding:20px}.account-coins{padding:20px}.account-section h3{margin-bottom:8px}

@media(min-width:900px){.wallet-content{width:min(1180px,calc(100% - 48px));padding-top:24px}.account-content .account-actions{margin:0}}

/* Account uses the shared site header and no footer. */
body.my-account-view .ganit-footer{display:none!important}
body.my-account-view .account-header{position:relative;top:auto;min-height:58px;background:transparent;color:#0641ad;border:0;justify-content:flex-start;padding:8px 16px 8px 64px;gap:12px}
body.my-account-view .account-header h2{color:#0641ad;font-size:22px}
body.my-account-view .account-back{color:#0641ad;left:12px}
body.my-account-view .account-print-settings{margin-left:auto;text-decoration:none;font-size:14px;padding:10px 12px}
body.my-account-view .account-page{min-height:calc(100vh - 67px)}
@media(max-width:700px){body.my-account-view .account-header h2{font-size:19px}body.my-account-view .account-print-settings{font-size:12px;padding:9px}body.my-account-view .account-page{min-height:calc(100vh - 97px)}}

/* Account uses the available laptop width while retaining readable forms. */
body.my-account-view .account-content{width:calc(100% - 32px);max-width:1600px;margin:8px auto;padding:18px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;border-radius:12px}
body.my-account-view .account-coins{grid-column:1/-1;margin:0;padding:12px 16px}
body.my-account-view .account-section{min-width:0;padding:16px;border:1px solid #d9e3f2;border-radius:10px;background:#fff}
body.my-account-view .account-section h3{margin:0 0 12px;color:#0641ad}
body.my-account-view .account-content>hr{display:none}
body.my-account-view .account-actions{grid-column:1/-1;gap:12px;margin:0}
body.my-account-view .account-actions a{text-decoration:none;text-align:center}
body.my-account-view .account-content input,body.my-account-view .account-content textarea{min-width:0;padding:10px}
body.my-account-view #accountAddress{height:76px;resize:vertical}
body.my-account-view .account-message:empty{display:none}
@media(max-width:700px){body.my-account-view .account-content{width:calc(100% - 16px);padding:10px;grid-template-columns:minmax(0,1fr);gap:12px}body.my-account-view .account-section{padding:12px}body.my-account-view .account-actions>*{flex:1 1 auto}}

body.my-account-view .account-section .account-actions{margin-top:16px;gap:10px}body.my-account-view .account-section .account-actions .btn{padding:10px 12px;font-size:13px}

/* Compact automatic actions alongside the introduction. */
.brand-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.photo-auto-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:nowrap}
.photo-auto-toggle{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #c7d8f0;border-radius:10px;background:linear-gradient(180deg,#fff,#f0f5ff);color:#0641ad;font:650 12px/1.3 system-ui;cursor:pointer;box-shadow:0 2px 5px #0641ad0a;white-space:nowrap}
.photo-auto-toggle input{appearance:none;width:26px;height:15px;flex:0 0 26px;border:0;border-radius:20px;background:#c5d2e5;position:relative;margin:0;cursor:pointer}
.photo-auto-toggle input::after{content:'';position:absolute;left:2px;top:2px;width:11px;height:11px;background:white;border-radius:50%;box-shadow:0 1px 2px #0003;transition:transform .15s}
.photo-auto-toggle input:checked{background:#0641ad}.photo-auto-toggle input:checked::after{transform:translateX(11px)}
.photo-auto-toggle:has(input:checked){background:#fff6bd;border-color:#e1c538;color:#08143d}
.photo-auto-toggle:focus-within{outline:2px solid #83adff;outline-offset:2px}
@media(max-width:600px){.brand-intro{gap:9px}.photo-auto-actions{width:100%;margin-left:0;gap:7px}.photo-auto-toggle{flex:1;justify-content:center;padding:8px 6px;gap:5px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.photo-auto-toggle input::after{transition:none}}

/* Plain Download / Print switches. */
.photo-auto-actions{gap:16px;width:auto}
.photo-auto-toggle,.photo-auto-toggle:has(input:checked){padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#10233e;font:600 12px/1.3 system-ui;gap:6px;flex:none}
.photo-auto-toggle input{width:30px;height:17px;flex-basis:30px;background:#b8c3d3}
.photo-auto-toggle input::after{width:13px;height:13px}
.photo-auto-toggle input:checked{background:#0641ad}
.photo-auto-toggle input:checked::after{transform:translateX(13px)}
@media(max-width:600px){.photo-auto-actions{width:auto;margin-left:auto;gap:12px}.photo-auto-toggle{font-size:12px;padding:0;flex:none}.brand-intro{gap:8px}}

/* Photo actions: equal size, separate colors, side by side on phones too. */
.photo-result-actions{display:flex;align-items:center;gap:14px;margin-top:10px;width:100%;max-width:360px}
.photo-result-actions .download-result,.photo-result-actions .photo-print{display:flex;align-items:center;justify-content:center;flex:1;min-height:42px;padding:10px 16px;border:0;border-radius:10px;font:600 14px/1.3 system-ui;text-decoration:none;color:#fff;box-shadow:none;margin:0}
.photo-result-actions .download-result{background:#0641ad}.photo-result-actions .download-result:hover{background:#05348a}
.photo-result-actions .photo-print{background:#14835c}.photo-result-actions .photo-print:hover{background:#106a4a}
.btn.photo-create{background:#ffe100;color:#08143d;box-shadow:0 3px 0 #d8bf00}.btn.photo-create:hover{background:#ffed55}

/* Straight corners for the shared header and its navigation. */
body>header,body>header.bar,body>header nav a,body>header .photo-mode-button,body>header .header-tool-trigger,body>header .header-account-link,.header-tool-menu,.header-tool-menu .header-tool-option{border-radius:0!important}

.passport-intro{margin-bottom:16px}.passport-intro h1{font-size:22px;line-height:1.3;margin:0 0 8px}.passport-intro p{font-size:13px;line-height:1.5;margin:0;color:#52657d}.passport-intro a{color:#0641ad}

/* Wallet stays above the footer, with room for mobile navigation. */
body.wallet-view{display:flex;flex-direction:column;min-height:100dvh}
.wallet-page{min-height:calc(100dvh - 220px);flex:1;min-width:0}
.wallet-header{background:#0641ad;flex-wrap:wrap;position:relative}
.wallet-heading{white-space:normal}.wallet-header-total{max-width:100%}
.wallet-content{width:min(1180px,calc(100% - 32px));padding:20px 0 32px}
body.wallet-view .ganit-footer{display:block!important;margin-top:auto}
@media(max-width:480px){.wallet-header{padding:12px 12px 12px 52px}.wallet-header-total{flex-wrap:wrap}.wallet-content{width:calc(100% - 24px)}.wallet-item{gap:8px;padding:12px}.wallet-reason{line-height:1.5}.wallet-page{min-height:60dvh}}

.passport-workspace{display:contents}
.photo-sheet-preview{display:block;margin:12px 0;padding:10px;border:1px solid #d4e1f1;border-radius:12px;background:#fff}
.photo-sheet-preview img{display:block;max-width:100%;max-height:70vh;width:auto;height:auto;margin:auto;object-fit:contain}
.photo-preview-pages{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}
.photo-preview-pages[hidden]{display:none}
.photo-preview-pages button{min-width:36px;min-height:36px}
@media(min-width:1000px){
main.card{width:calc(100% - 32px);max-width:1600px;margin:12px auto;padding:14px 18px 24px}
.passport-workspace{display:grid;grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr);gap:26px;align-items:start}
.passport-workspace #photoForm{min-width:0}
.passport-workspace #result{min-width:0;margin-top:0}
.photo-sheet-preview{display:block;margin:14px 0 0;padding:14px;border:1px solid #d4e1f1;border-radius:12px;background:#fff}
.photo-sheet-preview img{display:block;max-width:100%;max-height:70vh;width:auto;height:auto;margin:auto;object-fit:contain}
.photo-sheet-preview p{margin:0;font-size:13px}
}

.passport-top-row{display:flex;align-items:center;flex-wrap:nowrap;gap:14px;overflow-x:auto;padding:4px 0 8px;margin-bottom:8px;scrollbar-width:thin}
.passport-top-row h1{flex:0 0 auto;white-space:nowrap;font-size:21px;line-height:1.3;margin:0}
.passport-top-row .upload-photo-modes{flex:0 0 auto;display:flex;flex-wrap:nowrap;margin:0;width:auto}
.passport-top-row .photo-auto-actions{flex:0 0 auto;display:flex;flex-wrap:nowrap;width:auto;margin:0;gap:12px}
.passport-top-row .photo-auto-toggle{flex:none;white-space:nowrap}
.passport-top-row .pwa-install{flex:0 0 auto;white-space:nowrap;margin:0}
@media(max-width:700px){.passport-top-row{gap:10px}.passport-top-row h1{font-size:18px}.passport-top-row .photo-mode-button{font-size:12px;padding:7px 9px}}

.passport-bottom-info{margin-top:18px;padding-top:12px;border-top:1px solid #e1e8f2}.passport-bottom-info .passport-intro{margin-bottom:8px}.passport-bottom-info .brand-intro{margin-bottom:0}

.passport-bottom-title h1{font-size:20px;line-height:1.35;margin:12px 0 0}@media(max-width:700px){.passport-bottom-title h1{font-size:18px}}

.photo-ready-controls>span{font-size:13px}
@media(min-width:1000px){.passport-top-row .photo-ready-controls{display:flex;flex:0 0 auto;align-items:center;gap:10px;white-space:nowrap}.passport-top-row .photo-result-actions{margin:0;gap:8px;width:auto;max-width:none}.passport-top-row .photo-result-actions .download-result,.passport-top-row .photo-result-actions .photo-print{min-height:34px;padding:7px 12px;font-size:12px}}
.passport-top-row > [data-print-quality-control][hidden] { display: none !important; }

/* Keep photo quantity beside DPI at every screen size. */
#photoForm>.grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
#copiesControl{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 12px;border:1px solid #cbd6e6;border-radius:9px;background:#fff;color:#10233e}
#photoCopies{width:100%;min-width:0;min-height:44px;padding:8px 0;border:0;background:transparent;color:inherit;font:inherit;font-size:16px}
#dpiTrigger{height:100%;min-height:46px}
#photoForm.multiple-mode>.grid{grid-template-columns:minmax(0,1fr)}
#photoForm.multiple-mode #copiesControl{display:none}

.upload-photo-modes .photo-mode-button{display:flex;align-items:center;gap:6px;padding:6px 9px}
.mode-photo-example{display:block;width:48px;height:32px;overflow:hidden;border-radius:4px;background:white;flex:none}
.mode-photo-example img{display:block;width:48px;height:32px;object-fit:cover}
[data-photo-mode="single"] .mode-photo-example img{width:144px;height:96px;max-width:none;transform:translate(-48px,-28px)}

[data-photo-mode="single"] .mode-photo-example img{width:180px;height:120px;max-width:none;transform:translate(-11px,-43px)}

.result.loading{padding:16px;gap:12px}.processing-spinner{width:30px;height:30px;border-width:3px}.processing-copy strong{font-size:15px}.processing-copy small{white-space:normal;font-size:12px}.processing-track{height:6px}

.result.loading{background:transparent;border:0;padding:0;justify-items:end}.result.loading .processing-status{justify-content:flex-end;text-align:right;width:100%;background:#edf5ff;border-radius:10px;padding:10px}.result.loading .processing-track{width:100%}.processing-a4-placeholder{width:min(100%,400px);aspect-ratio:210 / 297;background:white;border:1px solid #d8e0ea;box-shadow:2px 4px 12px #18334b16}.result.loading .processing-copy strong{font-size:13px}.result.loading .processing-copy small{font-size:11px}

/* Keep the complete passport example visible. */
[data-photo-mode="single"] .mode-photo-example img{width:48px;height:32px;max-width:100%;transform:none;object-fit:contain}

/* Complete A4 result, compact enough to fit the available screen height. */
.photo-sheet-preview{width:min(100%,340px);margin:14px auto;padding:8px;background:#eaf0f7;border:0;border-radius:10px}
.photo-sheet-preview img{width:auto;max-width:100%;height:auto;max-height:max(220px,calc(100dvh - 220px));object-fit:contain;border:1px solid #cad4df;background:#fff;box-shadow:3px 4px 0 #d7dfe8,6px 8px 16px #18334b24}
@media(min-width:1000px){.passport-workspace #result{position:sticky;top:95px;align-self:start}.photo-sheet-preview{margin:0 auto;padding:10px;max-width:360px}.photo-sheet-preview img{max-height:calc(100dvh - 155px)}}
@media(max-width:700px){.photo-sheet-preview{max-width:310px;padding:7px}.photo-sheet-preview img{max-height:max(220px,calc(100dvh - 240px))}}

.blank-a4-sheet{aspect-ratio:210/297;background:#fff;border:1px solid #cad4df;box-shadow:3px 4px 0 #d7dfe8,6px 8px 16px #18334b24;max-height:calc(100dvh - 220px);margin:auto}
.photo-sheet-preview canvas{display:block;width:100%;height:auto;max-height:calc(100dvh - 220px);object-fit:contain;box-shadow:3px 4px 0 #d7dfe8,6px 8px 16px #18334b24;background:#fff}

/* Unframed result and a compact expandable palette. */
.photo-sheet-preview{background:transparent;padding:0;border:0;border-radius:0}.photo-sheet-preview img,.photo-sheet-preview canvas,.blank-a4-sheet,.processing-a4-placeholder{border:0;box-shadow:none}.color-swatches [hidden]{display:none!important}#morePhotoColors{width:auto;min-height:32px;padding:4px 10px;background:transparent;border:1px solid #cbd7e8;border-radius:8px;color:#0641ad;font:600 12px system-ui}