/* Customer pages use the same two-column phone layout at every viewport. */
.customer-view { min-width:0 }
.customer-view .btn { min-height:44px; font-size:14px; padding:9px 15px }
.customer-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin:0 0 12px }
.customer-heading h1 { font-size:24px; line-height:1.5; margin:0; white-space:nowrap }
.customer-heading>.btn { white-space:nowrap }
.customer-search { display:flex; align-items:center; gap:8px; width:174px; min-width:0; min-height:44px; padding:0 12px; color:#94a3b8; background:#171923; border:1px solid #ffffff0d; border-radius:22px }
.customer-search input { width:100%; min-width:0; min-height:42px; font-size:14px; padding:0; border:0; background:none; outline-offset:1px }
.customer-filters { display:flex; align-items:center; gap:4px; margin:0 0 12px }
.customer-filter-group { display:flex; align-items:center; gap:2px }
.customer-filter-group button,.customer-filter-toggle { min-width:44px; min-height:44px; border:0; border-radius:24px; padding:9px 11px; background:none; color:#94a3b8; font-size:14px; white-space:nowrap }
.customer-filter-group button.active { background:#f3ba631a; color:#f3ba63; font-weight:600 }
.customer-sort { margin-left:auto }
.customer-sort select { min-height:44px; width:70px; padding:8px 5px; border:0; background:none; color:#d8dce5; font-size:14px }
.customer-filter-toggle { display:flex; align-items:center; justify-content:center; gap:3px; padding:9px 3px 9px 9px }
.customer-filter-toggle.active { color:#f3ba63 }
.customer-filter-toggle i { width:4px; height:4px; border-radius:50%; background:#f3ba63 }
.customer-filter-panel { padding:10px; border:1px solid #ffffff10; border-radius:12px; background:#171923; margin-bottom:14px }
.customer-filter-panel .customer-filter-group { justify-content:space-between }
.customer-filter-panel-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 1px 0 }
.customer-filter-panel-bottom label { display:flex; align-items:center; gap:8px; color:#94a3b8; font-size:14px }
.customer-filter-panel-bottom select { min-height:44px; font-size:14px; padding:8px 10px }
.customer-style-grid,.customer-history-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 10px }
.customer-style-card { position:relative; min-width:0; border-radius:12px; overflow:hidden; background:#171923; border:1px solid #ffffff0b }
.customer-card-image { display:block; position:relative; width:100%; padding:0; border:0; background:#232736; aspect-ratio:4/5; overflow:hidden }
.customer-card-image img { width:100%; height:100%; object-fit:cover; object-position:50% 25% }
.customer-favorite { position:absolute; top:5px; right:5px; width:44px; height:44px; display:grid; place-items:center; z-index:2; border:0; border-radius:50%; background:#10121a70; color:white; backdrop-filter:blur(8px) }
.customer-favorite.is-favorite,.customer-result-favorite.is-favorite { color:#f3ba63 }
.customer-favorite.is-favorite svg,.customer-result-favorite.is-favorite svg { fill:#f3ba6330 }
.customer-rank { position:absolute; left:9px; top:10px; height:25px; min-width:25px; display:grid; place-items:center; padding:0 6px; color:#17130d; background:#f3ba63; border-radius:7px; font-size:14px; font-weight:700 }
.customer-card-content { display:flex; align-items:center; justify-content:space-between; gap:3px; width:100%; min-height:50px; padding:10px 9px; border:0; background:none; text-align:left; color:#f8fafc }
.customer-card-content h3 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; margin:0; font-weight:500 }
.customer-card-content>span { display:flex; align-items:center; gap:2px; font-size:12px; white-space:nowrap; color:#f3ba63 }
.customer-footnote { text-align:center; color:#94a3b8; font-size:12px; line-height:1.5; margin:20px 0 4px }
.customer-empty { padding:48px 15px; text-align:center; border:1px dashed #ffffff15; border-radius:14px; background:#17192366 }
.customer-empty>svg { color:#f3ba63; margin:0 auto 14px }
.customer-empty h3 { color:#f8fafc; font-size:18px; margin:0 0 8px; font-weight:500 }
.customer-empty p { color:#94a3b8; font-size:14px; margin:0 0 12px }
.customer-back { display:flex; align-items:center; gap:8px; min-height:44px; margin:-5px 0 7px; padding:0 4px 0 0; border:0; background:none; color:#94a3b8; font-size:14px }
.customer-detail-layout { display:flex; flex-direction:column; gap:14px }
.customer-detail-image { position:relative; width:100%; height:260px; border-radius:14px; overflow:hidden; background:#171923 }
.customer-detail-image>img { width:100%; height:100%; object-fit:cover; object-position:center 24% }
.customer-detail-label { position:absolute; left:12px; bottom:12px; padding:4px 9px; border-radius:20px; background:#0f11178f; color:white; font-size:12px }
.customer-detail-options { width:100%; min-width:0 }
.customer-detail-options h1 { font-size:22px; margin:0 0 14px }
.customer-color-section { margin-bottom:14px }
.customer-option-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px }
.customer-option-title h2 { font-size:16px; margin:0; font-weight:600 }
.customer-option-title>span { font-size:12px; color:#f3ba63 }
.customer-color-options { display:flex; gap:14px; flex-wrap:wrap }
.customer-color-choice { min-width:48px; min-height:65px; padding:4px 2px; color:#94a3b8; background:none; border:0; text-align:center }
.customer-color-choice>span { width:34px; height:34px; display:grid; place-items:center; margin:0 auto 8px; border-radius:50%; color:white; background:var(--swatch); box-shadow:0 0 0 1px #ffffff30 }
.customer-color-choice.selected>span { box-shadow:0 0 0 3px #0f1117,0 0 0 4px #f3ba63 }
.customer-color-choice.selected { color:#f3ba63 }
.customer-color-choice small { font-size:12px }
.customer-color-note { margin:8px 0 0; font-size:12px; color:#94a3b8 }
.customer-your-profile { display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:14px; border:1px solid #ffffff0d; border-radius:12px; background:#171923 }
.customer-profile-thumb { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:9px; overflow:hidden; color:#f3ba63; background:#232736 }
.customer-profile-thumb img { width:100%; height:100%; object-fit:cover }
.customer-your-profile>div { flex:1; min-width:0 }
.customer-your-profile strong { display:block; font-size:14px; font-weight:500 }
.customer-your-profile small { display:block; font-size:12px; color:#94a3b8 }
.customer-your-profile .btn { padding:8px 13px }
.customer-generate-area { padding:0 0 3px }
.customer-generate { width:100%; min-height:50px!important; font-size:16px!important }
.customer-generate-note { font-size:12px; color:#a69bb8; text-align:center; line-height:1.5; margin:9px 0 0 }
.customer-compare-card { background:#171923; border:1px solid #ffffff0d; border-radius:14px; padding:0 8px 8px; overflow:hidden }
.customer-compare-toolbar { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:4px 0 }
.customer-compare-toolbar>span { color:#a99bbf; font-size:12px; padding-left:4px }
.customer-compare-toolbar>div { display:flex; gap:1px }
.customer-compare-toolbar button { background:none; border:0; border-radius:8px; color:#94a3b8; font-size:12px; min-width:44px; min-height:44px; padding:6px }
.customer-compare-toolbar button.active { color:#f3ba63; background:#232736 }
.customer-comparison { position:relative; height:310px; background:#232736; border-radius:10px; overflow:hidden }
.customer-comparison-before,.customer-comparison-after { position:absolute; inset:0 }
.customer-comparison-before { clip-path:inset(0 calc(100% - var(--split)) 0 0) }
.customer-comparison img { width:100%; height:100%; object-fit:cover; object-position:center 25% }
.customer-comparison-line { position:absolute; top:0; bottom:0; left:var(--split); width:2px; background:#f3ba63; transform:translateX(-50%); pointer-events:none }
.customer-comparison-line b { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:38px; height:38px; display:grid; place-items:center; background:#171923b0; color:#f3ba63; border:1px solid #f3ba63; border-radius:50%; font-size:18px; font-weight:500 }
.customer-slider { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:3 }
.customer-slider:focus-visible { opacity:.12; outline:3px solid #f3ba63 }
.customer-compare-label { position:absolute; bottom:10px; padding:4px 8px; border-radius:20px; font-size:12px; background:#0f1117a6; color:white; pointer-events:none }
.customer-compare-label.original { left:8px }
.customer-compare-label.after { right:8px }
.customer-comparison.is-side { height:270px }
.customer-comparison.is-side .customer-comparison-before { clip-path:none; right:50%; border-right:2px solid #171923 }
.customer-comparison.is-side .customer-comparison-after { left:50% }
.customer-result-info { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 1px; border-bottom:1px solid #ffffff0d }
.customer-result-info h2 { font-size:18px; margin:0 0 5px }
.customer-result-color { display:flex; align-items:center; gap:7px; color:#d6dce6; font-size:14px; margin:0 }
.customer-result-color i { flex:none; width:15px; height:15px; border-radius:50%; border:1px solid #ffffff30 }
.customer-result-color span { color:#94a3b8; font-size:12px }
.customer-result-favorite { flex:none; height:44px; width:44px; display:grid; place-items:center; border:1px solid #ffffff14; border-radius:50%; color:#94a3b8; background:#171923 }
.customer-recommendations { margin-top:20px }
.customer-profile-card { display:flex; align-items:center; gap:16px; padding:16px; overflow:hidden }
.customer-profile-large { width:110px; height:135px; flex:none; border-radius:10px; overflow:hidden; background:#232736 }
.customer-profile-large>img { width:100%; height:100%; object-fit:cover; object-position:center 25% }
.customer-profile-large>div { display:grid; place-items:center; height:100%; color:#f3ba63 }
.customer-profile-body { flex:1; min-width:0 }
.customer-profile-body h2 { font-size:18px; margin:0 0 5px }
.customer-profile-body .muted { font-size:12px; margin:0 0 12px }
.customer-profile-body .btn { width:100%; padding:9px 10px }
.customer-profile-side { display:grid; gap:10px; margin-top:16px }
.customer-profile-shortcut { display:flex; align-items:center; gap:12px; min-height:68px; padding:14px 16px; color:#f3ba63 }
.customer-profile-shortcut strong { flex:1; color:#f8fafc; font-size:14px; font-weight:500 }
.customer-profile-shortcut span { color:#94a3b8; font-size:14px }
.customer-privacy-note { font-size:12px; color:#94a3b8; line-height:1.7; margin:22px 3px 8px }
.customer-delete-link { min-height:44px; width:100%; padding:10px 0; background:none; border:0; color:#cf9d99; font-size:12px }
.customer-subtle-notice { padding:10px 12px; border-radius:8px; background:#f3ba630c; color:#c3af91; font-size:12px; margin:0 0 14px }
.customer-history-card { overflow:hidden; min-width:0; border-radius:12px }
.customer-history-photo { display:block; position:relative; width:100%; aspect-ratio:4/4.6; padding:0; border:0; background:#232736 }
.customer-history-photo>img { width:100%; height:100%; object-fit:cover; object-position:center 25% }
.customer-history-photo>span { position:absolute; bottom:8px; left:8px; padding:3px 7px; border-radius:16px; color:white; background:#0f111799; font-size:12px }
.customer-history-card>div { padding:10px }
.customer-history-card h3 { font-size:14px; margin:0; font-weight:500; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.customer-history-card p { font-size:12px; color:#94a3b8; margin:5px 0; line-height:1.5 }
.customer-history-actions { display:flex; align-items:center; justify-content:space-between; gap:3px }
.customer-history-actions .btn { padding:8px 6px; font-size:12px; border:0 }
.customer-history-delete { display:grid; place-items:center; flex:none; min-width:44px; height:44px; padding:0; border:0; border-radius:8px; background:none; color:#94a3b8 }
.customer-upload-dialog { position:fixed; width:440px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px); overflow:auto; padding:22px 18px; border:1px solid #f3ba634d; border-radius:16px; background:#171923; color:#f8fafc; box-shadow:0 12px 40px -10px #f3ba6326 }
.customer-upload-dialog::backdrop { background:#05060cc9; backdrop-filter:blur(8px) }
.customer-upload-dialog h2 { font-size:22px; font-weight:600; line-height:1.5; margin:0 35px 16px 0 }
.customer-modal-close { position:absolute; top:10px; right:10px; min-width:44px; min-height:44px; display:grid; place-items:center; border:0; background:none; color:#94a3b8 }
.customer-upload-preview { height:160px; border:1px dashed #ffffff24; background:#10121a; border-radius:10px; overflow:hidden }
.customer-upload-preview>img { width:100%; height:100%; object-fit:contain }
.customer-upload-preview>div { display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; gap:9px; color:#94a3b8 }
.customer-upload-preview svg { color:#a78bfa }
.customer-upload-preview strong { font-size:14px; font-weight:400; color:#d7dce4 }
.customer-upload-preview small { font-size:12px }
.customer-upload-buttons { display:flex; gap:10px; margin-top:12px }
.customer-upload-buttons .btn { flex:1; padding:9px 8px; min-height:44px; font-size:14px }
.customer-upload-status { font-size:12px; color:#94a3b8; min-height:0; line-height:1.5; margin:8px 0 14px }
.customer-upload-status:empty { margin:0 0 16px }
.customer-face-label { display:flex; align-items:center; justify-content:space-between; font-size:14px; margin-bottom:8px }
.customer-face-label span { font-size:12px; color:#94a3b8 }
.customer-face-select { width:100%; min-height:44px; display:block!important; background:#10121a; border:1px solid #ffffff20; border-radius:8px; color:#f8fafc; padding:8px 12px; font-size:14px; margin-bottom:0 }
.customer-consent { display:flex; align-items:flex-start; gap:9px; min-height:44px; font-size:12px; color:#b0b7c5; line-height:1.6; margin-top:15px; cursor:pointer }
.customer-consent input { accent-color:#a78bfa; margin:2px 0 0; flex:none; width:18px; height:18px }
.customer-upload-error { font-size:12px; color:#ffb4ab; margin:8px 0 }
.customer-upload-error:empty { display:none }
.customer-upload-submit { width:100%; min-height:48px; margin-top:14px; font-size:14px }
.customer-spinner { height:16px; width:16px; border:2px solid #ffffff44; border-top-color:#fff; border-radius:50%; animation:customer-spin .75s linear infinite }
.customer-progress { height:3px; overflow:hidden; border-radius:4px; background:#8b5cf61a; margin-top:10px }
.customer-progress i { display:block; height:100%; width:35%; background:#a78bfa; animation:customer-progress 1.5s ease-in-out infinite }
@keyframes customer-spin { to { transform:rotate(360deg) } }
@keyframes customer-progress { from { transform:translateX(-100%) } to { transform:translateX(380%) } }
@media(prefers-reduced-motion:reduce) { .customer-spinner,.customer-progress i { animation:none } }