/* PicSwap 1.0.0-dev — reference palette: ink, mint/lime and lavender glass. */
:root{--accent:#cce185;--muted:#bdbbd0;--line:#ffffff21;color:#f5f3fc;background:#080a16;font-family:"Aptos","Segoe UI",Arial,sans-serif}
body{background:radial-gradient(ellipse at 95% 5%,#626ccd35,transparent 50%),radial-gradient(ellipse at 4% 86%,#b9a1f525,transparent 48%),#080a16}
.nav{height:104px}.brand{color:#faf8ff}.brand-icon{color:#d6c5fa}.brand-dot{background:#caf28d}.nav #nav-links{padding:6px 10px;border:1px solid #ffffff12;border-radius:40px;background:#ffffff0a;gap:3px}.nav #nav-links button,.nav #nav-links a{padding:9px 14px;border-radius:24px;color:#d4d0e1;font-size:13px;transition:background .18s,color .18s}.nav #nav-links button:hover,.nav #nav-links a:hover{background:#faf8ff;color:#222134}
.workspace-heading h1{font-size:26px;letter-spacing:-.6px;color:#faf8ff}.workspace-heading h1 span{color:#c9bedf}
.photo-card{border-radius:27px;border:1px solid #ffffff1f;box-shadow:0 18px 40px #0003}.photo-card:first-child{background:linear-gradient(115deg,#98dabd,#cce185);color:#102a2c}.photo-card:first-child .card-title h2{color:#153537;font-weight:600}.photo-card:first-child .photo-space{background:#174b2c08;border:1px solid #214b382b}.photo-card:first-child .drop-label strong{color:#153537;font-weight:600;font-size:16px}.photo-card:first-child .upload-symbol{color:#214c42}.photo-card:first-child .format-note,.photo-card:first-child .card-controls,.photo-card:first-child .text-button,.photo-card:first-child #sent-placeholder strong{color:#254b40}.photo-card:first-child .pill{background:#244e3e44}.photo-card:first-child .pill[data-state=sealed],.photo-card:first-child .pill[data-state=ready]{background:#244b37;box-shadow:0 0 0 4px #e6ffb825}
#drop-zone{isolation:isolate;overflow:hidden}#drop-zone::before{content:"";position:absolute;right:-23%;top:2%;width:68%;height:120%;border-radius:45%;transform:rotate(30deg);background:linear-gradient(135deg,#cce18505,#98dabd25);z-index:-1}
.peer-card{background:linear-gradient(145deg,#b9a1f51c,#626ccd20),#202232;border-color:#c5b1e62b}.peer-card .card-title h2{color:#f1eafd}.peer-space{background:radial-gradient(ellipse at 28% 5%,#b9a1f565,transparent 70%),linear-gradient(145deg,#b9a1f5,#626ccd);border:1px solid #d9c6ff3b;box-shadow:inset 0 1px #f1dfff3b,0 15px 30px #00000012}.invite-action{color:#fff}.placeholder .invite-action strong{color:#fff;font-size:20px;font-weight:500}.invite-action>span:last-child{color:#f1e7ff;font-size:13px}.invite-icon{background:#f6f0ff;color:#493b66;border:1px solid #fff;border-radius:50%;box-shadow:0 0 42px #e7c6ff40}.invite-action:hover .invite-icon{background:#fff;box-shadow:0 0 48px #edcaff77}#waiting-label{color:#f0e9ff}.exchange-symbol{background:#252538;border-color:#c1b5d333;color:#cfc0e7}.peer-space.has-photo{background:linear-gradient(140deg,#b9a1f525,#626ccd20)}
.primary{background:linear-gradient(110deg,#98dabd,#cce185);border:1px solid #d7f5b888;color:#17372d;border-radius:50px;font-weight:600;box-shadow:0 5px 18px #a1e78a12}.primary:hover:not(:disabled){filter:brightness(1.07);box-shadow:0 8px 25px #a1e78a25}.primary:disabled{opacity:.42}.secondary{background:#ffffff0d;border:1px solid #ffffff24;border-radius:50px;color:#eee7fa}.menu-toggle{border-radius:50%;background:#ffffff09;border-color:#ffffff1f}.expiry{color:#c8bed7}.room-tools .text-button,#manage-account{color:#d9ceed}.notice{background:#bda0ed12;border:1px solid #c5afe438;border-radius:20px}.notice strong{color:#f4ebff}.link-field{background:#080a1655;color:#e6dcf4;border-color:#e0cfff30;border-radius:12px}
dialog,.info-dialog{background:linear-gradient(145deg,#b9a1f51a,#626ccd1a),#202232;border-color:#cdb8ef3b;border-radius:25px;color:#f7f2ff;box-shadow:0 30px 90px #0007}dialog::backdrop{background:#06071199;backdrop-filter:blur(10px)}.info-dialog p{color:#c9c4d7}.dialog-top .eyebrow{color:#c6b2e6}.dialog-top .close-button{color:#eee4fc}.pricing-dialog .dialog-top{background:#303242}.pricing-notice{background:#c3a4f412}.timer-option{background:#ffffff06;border-color:#c5b7d92a;color:#ddd4e9!important;border-radius:14px}.timer-option strong{color:#d8f6b6}.timer-option input{accent-color:#cce185}.timer-option:has(input:checked){background:linear-gradient(120deg,#98dabd1f,#cce18518);border-color:#c4ef91}.timer-estimate{color:#d5f4a8!important}#expiry-minutes{background:#14152275;color:#f1e9fb;border-color:#c7b3dc35}.pricing-dialog th{color:#eee6f8}.pricing-dialog td{color:#d2c9e0}.pricing-dialog td:last-child{color:#d7f0b7}.folder-cover{background:linear-gradient(140deg,#b9a1f5ed,#626ccdf2)}.folder-label{color:#f4ebff}.folder-meta{color:#c6bad9}.lock-label{color:#f4eaff}
.account-card,.contact-page{background:linear-gradient(145deg,#b9a1f526,#626ccd26),#202232;border-color:#cdb8ed30;border-radius:26px}.account-card p,.contact-page p{color:#c4bed1}.account-card h1,.contact-page h2{color:#f5eefe}#vault-key,#vault-existing-link,.contact-page input,.contact-page textarea,.contact-page select{background:#10132177;color:#ece3f7;border-color:#c6b3df35}.sync-button{color:#dfd2f0;border-color:#d2bde442}footer .text-button,.footer-note,.footer-status{color:#b7adc8}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline-color:#ddf6af}
@media(max-width:800px){.nav{height:84px}.workspace-heading h1{font-size:24px}}
@media(max-width:640px){.nav #nav-links{background:#272b40;border:1px solid #c7b4e83b;border-radius:20px;padding:9px}.nav #nav-links button,.nav #nav-links a{padding:13px 14px;font-size:14px}.workspace-heading h1{font-size:23px}.photo-card{border-radius:23px}.placeholder .invite-action strong{font-size:18px}.invite-icon{width:65px;height:65px}.photo-card:first-child .drop-label strong{font-size:15px}.timer-option{border-radius:12px}.primary{min-height:45px}footer{padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){.invite-icon,.nav #nav-links button,.nav #nav-links a{transition:none}.invite-action:hover .invite-icon{transform:none}}
/* Shared purple glass for both participants. */
.photo-card:first-child,.peer-card{background:linear-gradient(145deg,#b9a1f51c,#626ccd20),#202232;border-color:#c5b1e62b;color:#f5f3fc;backdrop-filter:blur(24px) saturate(125%)}
.photo-card:first-child .photo-space,.peer-space{background:radial-gradient(ellipse at 28% 5%,#b9a1f565,transparent 70%),linear-gradient(145deg,#b9a1f5,#626ccd);border:1px solid #d9c6ff3b;box-shadow:inset 0 1px #f1dfff3b,0 15px 30px #00000012}
#drop-zone::before{content:none}.photo-card:first-child .card-title h2,.photo-card:first-child .drop-label strong,.photo-card:first-child .upload-symbol,.photo-card:first-child #sent-placeholder strong{color:#f5edff}.photo-card:first-child .format-note,.photo-card:first-child .card-controls,.photo-card:first-child .text-button{color:#eee4fc}.photo-card:first-child .pill{background:#ffffff20}.photo-card:first-child .pill[data-state=sealed],.photo-card:first-child .pill[data-state=ready]{background:#b6e7a0;box-shadow:0 0 0 4px #e6ffb825}
.language-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:44px;min-height:44px}.language-dialog{width:min(400px,calc(100vw - 32px))}.language-dialog h2{font-size:24px;margin:0}.language-options{display:grid;gap:8px}.language-options button{padding:14px 20px;border:1px solid #c5b7d944;border-radius:14px;background:#ffffff09;color:#f5edff;text-align:start;font:inherit;min-height:48px}.language-options button[aria-pressed=true]{background:#cce185;color:#17372d}.account-header{gap:12px}.account-header>.brand{margin-right:auto}.language-dialog .dialog-top{align-items:center}.language-dialog button:focus-visible{outline:2px solid #cce185;outline-offset:3px}
@media(max-width:420px){.account-header{gap:5px}.account-header>.text-button:not(.language-toggle){font-size:12px}.account-header>.brand{font-size:25px}.account-header .language-toggle{min-width:36px;padding:5px}}
.credit-coin{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;color:#332b13;background:linear-gradient(135deg,#cce185,#98dabd);font-size:12px;font-weight:700;border:1px solid #fff4}.credits-toggle{display:flex;align-items:center;gap:7px;white-space:nowrap;min-height:44px;font-size:12px;margin-left:auto;padding:9px}.nav #menu-toggle{margin-left:8px}.nav:has(#nav-links){gap:12px}.credits-dialog .dialog-top h2{font-size:25px;margin:0}.credit-packs{display:grid;gap:10px}.credit-packs button{border:1px solid #d7c9eb35;border-radius:12px;padding:14px;color:#ddd4e9;background:#ffffff09;font:inherit}.credits-dialog button:disabled{opacity:.65;cursor:not-allowed}#account-new-link{width:100%;margin:12px 0}.vault-delete{color:#f4b9c5}.account-header>.brand{margin-right:0}.account-header .credits-toggle{margin-left:auto}.account-header{flex-wrap:wrap;height:auto;min-height:104px;padding:20px 0}.account-header>.brand{order:0}.account-header>.credits-toggle{order:1}.account-header>.language-toggle{order:2}.account-header>a.text-button{order:3;flex-basis:100%;text-align:right}
@media(max-width:640px){.nav:has(#nav-links){gap:5px}.credits-toggle{font-size:11px;padding:7px;gap:5px}.credit-coin{width:19px;height:19px}.account-header{padding:16px 0;min-height:90px}.account-header>a.text-button{font-size:12px}.account-header .brand{font-size:24px}}
.vault-expiry{font-size:11px;color:#c0b6cf;flex-basis:100%;order:5}#vault-list .text-button{min-height:40px}#vault-list li{column-gap:12px;row-gap:3px}#vault-list li>span{min-width:90px;order:-1}#vault-list .vault-delete{order:4}
@media(prefers-reduced-transparency:reduce){.photo-card:first-child,.peer-card{background:#303044;backdrop-filter:none}}
@media(max-width:560px){.peer-space{height:225px}}
.credit-label{display:inline-block;max-width:108px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.credit-signin{display:inline-flex;min-height:44px;align-items:center}
@media(max-width:380px){.credit-label{max-width:82px}}
.purchase-status:empty{display:none}.purchase-confirm{border:1px solid #cce18555;padding:16px;border-radius:16px;margin:16px 0;background:#cce18509}.purchase-confirm h3{margin-top:0}.purchase-confirm .primary,.purchase-confirm .secondary{white-space:normal}.purchase-orders{list-style:none;padding:0}.purchase-orders li{display:flex;flex-wrap:wrap;gap:8px 16px;padding:14px 0;border-top:1px solid #ffffff24;font-size:13px}.purchase-order-state{flex-basis:100%;color:#c8bed7}.purchase-history-heading{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}.purchase-history-heading h3{margin:16px 0}.purchase-total{font-size:18px!important;color:#d5f4a8!important}.purchase-status{overflow-wrap:anywhere}.purchase-panel .dialog-actions{flex-wrap:wrap}.purchase-panel .text-button{white-space:normal;min-height:40px}
.credit-packs a{display:block;text-align:center;text-decoration:none;border:1px solid #d7c9eb35;border-radius:12px;padding:14px;color:#ddd4e9;background:#ffffff09;font:inherit;min-height:48px}.credit-packs a:hover{background:#ffffff16}.credit-packs a[aria-disabled=true]{opacity:.65;cursor:not-allowed}
/* Consistent controls, compact settings, and unobtrusive scrollbars. */
*{scrollbar-width:thin;scrollbar-color:#b6a6cf66 transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#b6a6cf66;border-radius:99px}::-webkit-scrollbar-button{display:none;width:0;height:0}
.pricing-dialog .dialog-top{background:transparent;position:static}.pricing-dialog{backdrop-filter:none}.pricing-dialog h3.section-heading{font-size:20px;line-height:1.4;font-weight:600;margin:26px 0 12px}.pricing-dialog caption{text-align:start;font-size:14px;margin:14px 0;color:#d6cde6}.info-dialog h3{letter-spacing:0;line-height:1.5}
.invite-dialog{width:min(590px,calc(100vw - 32px))}.timer-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:none!important;overflow:visible!important}.timer-option{min-width:0;padding:13px 10px;display:flex;align-items:center;gap:7px;font-size:13px!important;line-height:1.4}.timer-option span{overflow-wrap:anywhere}.timer-option input{flex-shrink:0}.timer-option strong{display:none}.invite-notes{padding-left:20px;font-size:13px;line-height:1.7;color:#c9c4d7}.invite-dialog #timer-status:empty,.invite-dialog #invite-error:empty{display:none}.invite-dialog .get-link{margin-top:8px}.invite-dialog #timer-settings{margin:14px 0}
.upload-symbol,.invite-icon{display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:#f6f0ff;color:#493b66;border:1px solid #fff;box-shadow:0 0 42px #e7c6ff40;margin:0 0 18px}.upload-symbol svg,.invite-icon svg{width:40px;height:40px;stroke:currentColor;stroke-width:1.6}.drop-label,.invite-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}.photo-card:first-child .drop-label strong,.placeholder .invite-action strong{font-size:20px;font-weight:500;line-height:1.4;letter-spacing:0;margin:0 0 10px;color:#fff}.drop-label .format-note,.invite-action>span:last-child{font-size:13px;line-height:1.5;letter-spacing:0;color:#f1e7ff}.new-link-action{background:transparent!important;box-shadow:none!important;border:1px solid #ffffff25!important;color:#c9c4d7!important;font-size:13px!important;font-weight:400!important;min-height:40px;padding:10px 16px!important}
@media(max-width:640px){.upload-symbol,.invite-icon{width:65px;height:65px}.photo-card:first-child .drop-label strong,.placeholder .invite-action strong{font-size:18px}.timer-option{padding:12px 8px!important;font-size:12px!important}.invite-dialog{padding:24px 18px}.invite-notes{font-size:12px}}
@media(max-width:350px){.timer-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
.timer-option{grid-template-columns:16px minmax(0,1fr)!important}.pricing-dialog::backdrop{backdrop-filter:blur(3px)}
.photo-card:first-child .upload-symbol{color:#493b66}.photo-card:first-child .upload-symbol svg{stroke:#493b66}.drop-label .format-note{margin-top:0!important}.photo-card:first-child .drop-label strong{margin-bottom:10px!important}
.photo-card:first-child .format-note{color:#f1e7ff}

/* Matching photo hover and account navigation geometry. */
.drop-label .upload-symbol{transition:transform .2s,box-shadow .2s,background .2s}
.drop-label:hover .upload-symbol{background:#fff;box-shadow:0 0 48px #edcaff77;transform:translateY(-3px)}
#drop-zone.has-photo #own-photo{object-fit:cover;inset:0;width:100%;height:100%;border-radius:inherit}
.account-header{height:104px;min-height:104px;padding:0;flex-wrap:nowrap;align-items:center}
.account-header>a.text-button{order:1;flex-basis:auto;text-align:initial;white-space:nowrap}.account-header>.credits-toggle{order:2}.account-header>.language-toggle{order:3}
@media(max-width:800px){.account-header{height:84px;min-height:84px}}
@media(max-width:560px){.account-header{gap:6px}.account-header>a.text-button{font-size:11px}.account-header .brand{font-size:24px}.account-header .credits-toggle{padding:3px}.account-header .credit-label{max-width:64px}}
@media(prefers-reduced-motion:reduce){.drop-label .upload-symbol{transition:none}.drop-label:hover .upload-symbol{transform:none}}

#drop-zone.has-photo #own-photo.pixelated{transform:scale(1.04);box-shadow:none}
/* Fit the swap workspace to the available viewport without clipping controls. */
:root{--nav-height:clamp(64px,10svh,104px)}
.nav,.account-header{height:var(--nav-height);min-height:var(--nav-height);flex-shrink:0}
.swap-page{height:100svh;min-height:0}
.swap-page>main{flex:1 1 0;min-height:0;display:flex;flex-direction:column;padding:clamp(8px,2svh,24px) 0}
.swap-page .workspace-heading{flex-shrink:0;margin:0 0 clamp(12px,3svh,32px)}
.swap-page .workspace-heading h1{font-size:clamp(18px,2.6svh,26px)}
.swap-page #room{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:10px}
.swap-page .photo-grid{flex:1 1 0;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch}
.swap-page .photo-card{min-height:0;display:flex;flex-direction:column;padding:16px 16px 0}
.swap-page .card-top{flex-shrink:0;margin-bottom:10px}
.swap-page .photo-space{flex:1 1 0;min-height:0;height:auto}
.swap-page .card-controls{flex-shrink:0;min-height:32px}
.swap-page .exchange-symbol{align-self:center}
.swap-page .exchange-bar{flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:3px 0;gap:8px;min-height:42px}
.swap-page .exchange-bar .expiry{max-width:none;line-height:1.4}
.swap-page #room-tools{flex-shrink:0;gap:4px 14px;padding:2px 0;min-height:36px}
.swap-page #room-tools .text-button,.swap-page #room-tools .danger{min-height:32px;padding:5px 0}
.swap-page .notice{flex-shrink:0;margin:0;padding:10px 14px;gap:12px}
.swap-page .notice .link-field{margin-top:6px;padding:8px 10px}
.swap-page #message{max-height:20svh;overflow:auto;flex-shrink:0;margin:0;padding:8px 12px;background:#262738f5;box-shadow:0 6px 24px #0005}
.swap-page>footer{flex-shrink:0;min-height:40px;padding:6px 0;gap:12px}
@media(max-width:560px){
 .swap-page>main{padding:6px 0}.swap-page #room{gap:7px}
 .swap-page .workspace-heading{margin-bottom:10px}.swap-page .workspace-heading h1{font-size:18px}
 .swap-page .photo-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 20px minmax(0,1fr);gap:6px}
 .swap-page .photo-card{padding:10px 10px 0;border-radius:20px}.swap-page .card-top{margin-bottom:6px}
 .swap-page .card-title h2{font-size:13px}.swap-page .card-controls{min-height:25px;font-size:10px;line-height:1.3}
 .swap-page .exchange-symbol{width:20px;height:20px}.swap-page .exchange-symbol svg{width:16px;height:16px}
 .swap-page .upload-symbol,.swap-page .invite-icon{width:42px;height:42px;margin-bottom:8px}
 .swap-page .upload-symbol svg,.swap-page .invite-icon svg{width:25px;height:25px}
 .swap-page .photo-card:first-child .drop-label strong,.swap-page .placeholder .invite-action strong{font-size:15px;line-height:1.25;margin-bottom:6px!important}
 .swap-page .drop-label,.swap-page .invite-action{padding:8px}
 .swap-page .drop-label .format-note,.swap-page .invite-action>span:last-child{font-size:11px;line-height:1.4}
 .swap-page .notice{flex-direction:row;align-items:center;padding:8px 10px;gap:8px}
 .swap-page .notice .primary,.swap-page .notice .secondary{font-size:11px;padding:8px 12px;min-height:38px;align-self:center}
 .swap-page .notice strong{font-size:12px}.swap-page #invite-title{display:none}
 .swap-page .notice .link-field{margin:0;padding:8px;font-size:11px}
 .swap-page .exchange-bar .send-button{min-width:0;font-size:11px!important;padding:8px 12px!important;min-height:36px}
 .swap-page .exchange-bar .expiry{font-size:10px}.swap-page #room-tools{gap:3px 10px}
 .swap-page #room-tools .text-button,.swap-page #room-tools .danger{font-size:11px}
 .swap-page>footer{min-height:34px;padding:3px 0}
}
@media(max-width:560px) and (max-height:759px){
 .swap-page .photo-grid{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:6px}
 .swap-page .exchange-symbol{transform:none;justify-self:center}.swap-page .photo-card{padding:9px 9px 0}
}
@media(max-height:540px){
 .swap-page{--nav-height:52px}.swap-page .workspace-heading{display:none}
 .swap-page #room{gap:6px}.swap-page .photo-card{padding:8px 8px 0}.swap-page .card-top{margin-bottom:5px}
 .swap-page .upload-symbol,.swap-page .invite-icon{width:34px;height:34px;margin-bottom:5px}
 .swap-page .upload-symbol svg,.swap-page .invite-icon svg{width:22px;height:22px}
 .swap-page .photo-card:first-child .drop-label strong,.swap-page .placeholder .invite-action strong{font-size:14px;margin-bottom:4px!important}
 .swap-page .drop-label,.swap-page .invite-action{padding:5px}.swap-page .drop-label .format-note,.swap-page .invite-action>span:last-child{font-size:10px}
 .swap-page>footer{min-height:30px;padding:0}.swap-page #room-tools{min-height:30px}
}
/* Scroll only the inset content; the outer rounded border never scrolls. */
dialog,.info-dialog{--dialog-y:30px;--dialog-x:30px;padding:8px!important;overflow:hidden!important}
.info-dialog{--dialog-x:35px}
.dialog-scroll{max-height:calc(85svh - 18px);min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;border-radius:17px;padding:calc(var(--dialog-y) - 8px) calc(var(--dialog-x) - 8px)}
.invite-dialog .dialog-scroll{max-height:calc(100svh - 50px)}
.dialog-scroll .dialog-top{position:static}
@media(max-width:640px){dialog,.info-dialog{--dialog-y:24px;--dialog-x:24px}.invite-dialog{--dialog-x:18px}}
/* Status stays in the layout so it cannot cover swap controls. */
.swap-page #message{position:static;transform:none;width:auto;max-height:20svh;flex-shrink:0;padding:8px 12px}
.dialog-scroll:focus{outline:none}
/* Stable shared header slots across Account and the swap workspace. */
html{scrollbar-gutter:stable}
.nav>.brand{order:0;font-size:25px;line-height:1.2;white-space:nowrap;margin-right:0}
.nav>.credits-toggle{order:1;width:100px;flex:0 0 100px;margin-left:auto;justify-content:flex-start}
.nav>#menu-toggle{order:2}
.nav>#nav-links{order:3;width:350px;min-height:56px;flex-shrink:0}
.nav #nav-links .language-toggle{margin-left:auto;flex-shrink:0}
.nav .credit-label{max-width:61px}
.confirm-photo{padding:5px 12px;font-size:11px;min-height:28px;white-space:normal}
.swap-page .card-controls:has(.confirm-photo:not([hidden])){gap:6px;flex-wrap:wrap;padding:5px 0}
@media(max-width:640px){
 .nav>.brand{font-size:24px}.nav>.credits-toggle{width:92px;flex-basis:92px}
 .nav>#nav-links{width:210px;min-height:0}.nav #nav-links .language-toggle{margin-left:0}
 .nav .credit-label{max-width:53px}
}
.nav>.credits-toggle{padding:9px}
@media(max-width:640px){.nav>.credits-toggle{padding:7px}}
/* Square photos, proportional fitting, and intentional space around the exchange. */
.swap-page .photo-grid{--swap-stack:0;grid-template-columns:minmax(0,var(--swap-card-width,180px)) 48px minmax(0,var(--swap-card-width,180px));grid-template-rows:auto;justify-content:center;align-content:center;align-items:start}
.swap-page .photo-card{width:100%;height:auto}
.swap-page .photo-space{flex:none;aspect-ratio:1;height:auto}
.swap-page .photo-space img,#drop-zone.has-photo #own-photo,#drop-zone.has-photo #own-photo.pixelated,#peer-space #peer-photo{inset:0;width:100%;height:100%;object-fit:contain;background:transparent;transform:none;box-shadow:none;border-radius:inherit}
.swap-page .folder-cover{display:none}
#restore-status{text-align:center;color:#c9c4d7;font-size:13px;margin:auto}
.swap-page #recovery-panel{flex-direction:column;align-items:stretch;margin:auto;max-width:560px;padding:24px}
#recovery-panel p{display:block;font-size:14px;line-height:1.7;color:#c9c4d7}
.recovery-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.recovery-actions a{text-decoration:none}
@media(max-width:560px){.swap-page .photo-grid{--swap-stack:1;grid-template-columns:minmax(0,var(--swap-card-width,180px));grid-template-rows:auto 20px auto;gap:8px}}
@media(max-width:560px) and (max-height:759px){.swap-page .photo-grid{--swap-stack:0;grid-template-columns:minmax(0,var(--swap-card-width,100px)) 18px minmax(0,var(--swap-card-width,100px));grid-template-rows:auto;gap:6px}}

/* Brand assets and unified accent palette. */
:root{--purple-light:#b9a1f5;--purple-deep:#626ccd;--mint:#98dabd;--lime:#cce185}
.nav .brand-logo{display:block;width:34px;height:34px;object-fit:contain;flex:none;margin:0 7px 0 0}
#delete-account{align-self:flex-start;margin-top:28px;padding-top:20px;border-top:1px solid #ffffff18;width:100%;text-align:start;color:#c4bed1;font-size:13px}

/* Confirmed photos clear automatically; locked previews stay genuinely low resolution. */
.swap-page .photo-space img{image-rendering:auto;filter:blur(0);transition:filter 1s ease,opacity .4s ease}
.swap-page .photo-space img.frosted,#drop-zone.has-photo #own-photo.frosted,#peer-space #peer-photo.frosted{image-rendering:auto;filter:blur(20px) saturate(.75);transform:none}
.editable-photo{cursor:pointer}.editable-photo:focus-visible{outline:2px solid #cce185;outline-offset:4px}
.swap-page .photo-card .card-controls{height:68px;min-height:68px;padding:14px 0;flex:none;align-items:center}
.swap-page .confirm-photo{margin-left:auto}.exchange-actions{display:flex;align-items:center;gap:24px;margin-left:auto}.exchange-actions .danger{white-space:nowrap}
@media(max-width:560px){.exchange-actions{gap:16px}.exchange-actions .danger{font-size:11px}.swap-page .photo-card .card-controls{height:60px;min-height:60px;padding:12px 0}}
@media(prefers-reduced-motion:reduce){.swap-page .photo-space img{transition:none}}

#vault-status:empty{display:none}#vault-list{margin:12px 0 0}#vault-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:28px;align-items:center;border:0;padding:14px 0}#vault-list .swap-open{font-size:14px;line-height:1.5;min-width:0;padding:8px 0;color:#eee7fa}#vault-list .swap-copy,#vault-list .vault-delete{font-size:13px;margin:0;padding:10px 0;white-space:nowrap;line-height:1.5}#vault-list .swap-created{font:inherit;color:inherit;overflow-wrap:normal}#vault-list .swap-action-spacer{display:block}
.purchase-orders .purchase-date{flex-basis:100%;font-size:14px;line-height:1.5;color:#eee7fa;margin-bottom:4px}
.purchase-order-details{display:flex;align-items:baseline;justify-content:space-between;gap:20px;width:100%;min-width:0;line-height:1.6}
.purchase-order-details .purchase-order-state{flex-basis:auto;margin-left:auto;text-align:right;min-width:0}
.purchase-order-pack{flex-shrink:0}
@media(max-width:420px){.purchase-order-details{gap:12px;font-size:12px}}
@media(max-width:560px){#vault-list li{gap:24px}#vault-list .swap-open,#vault-list .swap-copy,#vault-list .vault-delete{font-size:12px}}

.photo-space.zoomable{cursor:zoom-in}
.photo-lightbox{max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;padding:48px 24px!important;border:0;background:transparent;overflow:hidden;opacity:0;transition:opacity .2s ease}
.photo-lightbox[open]{display:flex;align-items:center;justify-content:center}
.photo-lightbox::backdrop{background:rgba(5,6,16,.9);opacity:0;transition:opacity .2s ease}
.photo-lightbox.visible,.photo-lightbox.visible::backdrop{opacity:1}
.photo-lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px}
.photo-lightbox button{position:absolute;right:20px;top:16px;width:40px;height:40px;border-radius:50%;font-size:26px;background:#272a40;color:white;border:1px solid #ffffff30}
@media(prefers-reduced-motion:reduce){.photo-lightbox,.photo-lightbox::backdrop{transition:none}}

#vault-list .expired-swap{grid-template-columns:minmax(0,1fr) auto;align-items:center}#vault-list .expired-status{color:#aaa6ba;text-align:right;font-size:13px}

/* Reserve the same confirmation row before any image has been selected. */
.swap-page .photo-card .card-controls,.swap-page .photo-card .card-controls:has(.confirm-photo:not([hidden])){box-sizing:border-box;height:68px;min-height:68px;max-height:68px;padding:14px 0;flex:0 0 68px}
#vault-list li{grid-template-columns:minmax(0,1fr) 32px auto auto;text-align:left}
#vault-list .swap-created{grid-column:1;justify-self:start;text-align:left;font-size:14px}
#vault-list .swap-open{display:grid;place-items:center;padding:8px;min-width:32px}
#vault-list li.expired-swap{grid-template-columns:minmax(0,1fr) auto}
#vault-list .expired-status{grid-column:2;justify-self:end;text-align:right}
@media(max-width:560px){.swap-page .photo-card .card-controls,.swap-page .photo-card .card-controls:has(.confirm-photo:not([hidden])){height:60px;min-height:60px;max-height:60px;padding:12px 0;flex-basis:60px}#vault-list li{gap:16px}#vault-list .swap-created{font-size:12px}}
@media(max-width:360px){#vault-list li{column-gap:9px}#vault-list .swap-copy,#vault-list .vault-delete{font-size:11px}}

@media(max-width:560px){#vault-list li:not(.expired-swap){grid-template-columns:minmax(0,1fr) auto auto;row-gap:2px}#vault-list li:not(.expired-swap) .swap-created{grid-column:1/-1}#vault-list li:not(.expired-swap) .swap-open{grid-column:1;justify-self:end}}