styles.css

*{box-sizing:border-box} :root{font-family:Inter,system-ui,-apple-system,sans-serif;--o:#ff5b1a;color:#fff;background:#000}html,body{margin:0;min-height:100%;background:#000}button,input{font:inherit}.hidden{display:none!important}header{position:fixed;z-index:20;inset:0 0 auto;height:64px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#000 58%,transparent)}.brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none}.brand img{width:42px;height:42px;filter:drop-shadow(0 0 14px #ff5b1a88)}.brand b{display:grid;font-size:.7rem;color:#aaa;line-height:1}.brand b span{font-size:.92rem;color:#fff;letter-spacing:.15em}.round{width:42px;height:42px;border-radius:50%;border:1px solid #333;background:#111;color:#fff}.screen{min-height:100svh;padding:82px 18px 30px}.welcome{display:grid;place-items:center;background:radial-gradient(circle at 70% 15%,#421300,transparent 30%)}.welcome>div{width:min(100%,650px)}.eyebrow{color:var(--o);font-size:.7rem;font-weight:900;letter-spacing:.18em}.welcome h1{font-size:clamp(3.1rem,14vw,7rem);line-height:.84;letter-spacing:-.075em;margin:22px 0}.welcome h1 span{color:#666}.lead{color:#aaa}.primary,.secondary{width:100%;min-height:56px;border-radius:16px;padding:0 18px;font-weight:800}.primary{border:0;color:#fff;background:linear-gradient(120deg,var(--o),#a22a00);display:flex;justify-content:space-between;align-items:center}.secondary{margin-top:9px;background:#111;color:#fff;border:1px solid #333}.promo{display:block;margin-top:20px;color:#ff7a38;text-decoration:none}.editor{max-width:760px;margin:auto}.title{display:flex;gap:12px}.title button{border:0;background:none;color:#fff;font-size:28px}.title h2{margin:2px 0 20px;font-size:2rem}.grid{display:grid;gap:13px}form{display:grid;gap:18px}label{font-size:.75rem;color:#aaa}input{width:100%;margin-top:7px;padding:15px;border-radius:14px;border:1px solid #333;background:#111;color:#fff}.photoPick{display:flex;gap:14px;align-items:center}.photoPick label{width:110px;height:110px;border:1px dashed #555;border-radius:50%;display:grid;place-items:center;text-align:center;overflow:hidden}.photoPick input{display:none}.photoPick img{width:100%;height:100%;object-fit:cover}.photoPick small{color:#777}fieldset{border:1px solid #333;border-radius:18px;padding:14px;display:grid;gap:10px}.choice{display:flex;gap:10px;padding:12px;background:#111;border-radius:12px}.choice input{width:auto;margin:3px}.choice span{display:grid}.cardScreen{padding:64px 0 0;overflow:hidden}.stage{position:relative;width:100vw;height:calc(100svh - 64px);perspective:1800px;contain:layout paint style}.card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .82s cubic-bezier(.2,.8,.2,1);transform-origin:50% 50%;will-change:transform}.card.flipped{transform:rotateY(180deg)}.face{position:absolute;inset:0;padding:clamp(20px,5vw,30px) max(22px,6vw);overflow:hidden;background:#000;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden}.front{transform:rotateY(0) translateZ(1px);background:radial-gradient(circle at 85% 13%,#ff6a1945,transparent 25%),radial-gradient(circle at 5% 65%,#ff4b002c,transparent 30%),linear-gradient(160deg,#090909,#000 52%,#090300)}.backFace{transform:rotateY(180deg) translateZ(1px);background:radial-gradient(circle at 50% 35%,#ff5b1a32,transparent 37%),#000}.card.show-front .front,.card.show-back .backFace,.card.is-flipping .face{visibility:visible}.card.show-front .backFace,.card.show-back .front{visibility:hidden}.card.is-flipping .front,.card.is-flipping .backFace{visibility:visible}.aura{position:absolute;inset:-20%;background:conic-gradient(from 180deg,transparent,#ff5b1a22,transparent 34%);filter:blur(22px);animation:aura 9s linear infinite}@keyframes aura{to{transform:rotate(360deg)}}.sweep{position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 42%,#ff9c5838 49%,transparent 56%);animation:sweep 6s ease-in-out infinite}@keyframes sweep{0%,55%{transform:translateX(-70%)}90%,100%{transform:translateX(70%)}}.cardHead,.scanHead{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}.miniBrand{display:flex;align-items:center;gap:8px;font-size:.67rem;font-weight:900;letter-spacing:.12em}.miniBrand img{width:43px;height:43px;filter:drop-shadow(0 0 13px #ff5b1a88)}.live{font-size:.55rem;letter-spacing:.13em}.live:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--o);margin-right:5px;box-shadow:0 0 12px var(--o)}.portrait{position:relative;z-index:2;min-height:clamp(175px,30svh,300px);display:grid;place-items:center}.portrait img{width:clamp(155px,43vw,230px);height:clamp(155px,43vw,230px);border-radius:50%;object-fit:cover;filter:none;box-shadow:0 0 0 2px #ffffff1c,0 0 44px #ff5b1a38,0 18px 50px #000}.identity{position:relative;z-index:2}.identity>p:first-child{margin:0 0 7px;color:#ff7a38;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.identity h2{margin:0 0 8px;font-size:clamp(2.5rem,12vw,5rem);line-height:.88;letter-spacing:-.07em}.identity #cardCompany{margin:0;color:#bbb}.details{position:relative;z-index:2;display:grid;gap:2px;margin-top:12px;color:#888;font-size:.7rem;min-height:32px}.details span:empty{display:none}.actions{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:auto}.actions a,.actions button{height:58px;border:1px solid #ff5b1a48;border-radius:17px;background:linear-gradient(145deg,#17100d,#080808);color:#fff;text-decoration:none;display:grid;place-items:center;align-content:center;gap:3px;padding:4px}.actions svg{width:20px;height:20px;fill:none;stroke:#ff7a38;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.actions span{font-size:.56rem;text-transform:uppercase}.scanHint{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding-top:8px;border-top:1px solid #ffffff15;color:#777;font-size:.61rem;text-transform:uppercase}.scanHint canvas{width:42px;height:42px;padding:3px;background:#fff;border-radius:7px;image-rendering:pixelated}.scanHead{font-size:.65rem;letter-spacing:.15em;font-weight:900}.scanHead button{width:36px;height:36px;border:1px solid #333;border-radius:50%;background:#111;color:#fff}.qr{width:min(72vw,350px);aspect-ratio:1;margin:clamp(18px,3svh,34px) auto 17px;padding:12px;background:#fff;border:1px solid #ff5b1a66;border-radius:24px;box-shadow:0 0 70px #ff5b1a48}.qr canvas{width:100%;height:100%;display:block;image-rendering:pixelated}.backIdentity{text-align:center;display:grid;gap:4px}.backIdentity h3{margin:0;font-size:clamp(1.8rem,8vw,3rem);line-height:1}.backIdentity>p{margin:0;color:#ff7a38;font-size:.7rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.backIdentity div{display:flex;justify-content:center;flex-wrap:wrap;gap:3px 11px;color:#aaa;font-size:.66rem}.backIdentity div span:empty{display:none}.backIdentity small{color:#777}.scanPromo{margin-top:auto;padding:12px 14px;border:1px solid #ff5b1a55;border-radius:14px;background:#110a07;color:#fff;text-decoration:none;display:flex;justify-content:space-between}.scanPromo span{color:#ff7a38;font-size:.65rem}.vcf{display:none}.sharedBanner{position:fixed;z-index:30;top:68px;left:12px;right:12px;padding:12px 14px;border:1px solid #ff5b1a66;border-radius:14px;background:#1b0c06e8;backdrop-filter:blur(16px);display:grid}.sharedBanner b{color:#ff7a38;font-size:.68rem;letter-spacing:.14em}.sharedBanner span{font-size:.74rem;color:#ddd}.shared-mode #settingsBtn,.shared-mode #shareBtn{display:none}.shared-mode .actions{grid-template-columns:repeat(3,1fr)}dialog{width:min(92vw,420px);background:#111;color:#fff;border:1px solid #333;border-radius:24px;padding:18px}dialog>div{display:flex;justify-content:space-between}dialog>button{width:100%;padding:16px;background:#171717;color:#fff;border:0;border-bottom:1px solid #333}dialog a{display:block;margin-top:16px;color:#ff7a38}#toast{position:fixed;z-index:50;bottom:20px;left:50%;transform:translate(-50%,120px);padding:11px 16px;border-radius:99px;background:#fff;color:#000;transition:.3s}#toast.show{transform:translate(-50%,0)}@media(min-width:700px){.grid{grid-template-columns:1fr 1fr}.cardScreen{padding-top:76px}.stage{width:min(430px,90vw);height:min(84svh,765px);margin:auto}.card,.face{border-radius:38px}.face{box-shadow:0 28px 90px #000,0 0 0 1px #ffffff10}.vcf{display:block;margin:12px auto;width:min(430px,90vw);padding:13px;border:1px solid #333;border-radius:13px;background:#111;color:#fff}}

/* V6.1 official Phoenorg logo and permanently visible Smartcard promotion */
.fixedPromo{position:fixed;z-index:24;right:12px;bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid #ff5b1a66;border-radius:15px;background:#100805e8;color:#fff;text-decoration:none;box-shadow:0 0 28px #ff5b1a26,0 12px 32px #000;backdrop-filter:blur(16px)}.fixedPromo img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 9px #ff5b1a77)}.fixedPromo span{display:grid;gap:1px}.fixedPromo b{font-size:.61rem;letter-spacing:.11em}.fixedPromo small{font-size:.57rem;color:#ff7a38}.cardScreen .fixedPromo{display:flex}.scanPromo{border-color:#ff5b1a88!important;box-shadow:0 0 34px #ff5b1a2e!important}.scanPromo b{color:#fff}.miniBrand img,.brand img{object-fit:contain}
@media(max-height:720px) and (max-width:699px){.fixedPromo{right:8px;bottom:8px;padding:7px 9px}.fixedPromo img{width:25px;height:25px}.fixedPromo b{font-size:.55rem}.fixedPromo small{font-size:.52rem}}

/* V6.2 profile URL, QR portrait fallback, mobile shared banner, enhanced typography */
.fieldHelp{display:block;margin-top:5px;color:#666;font-size:.62rem}.portraitQr{position:relative;z-index:2;width:clamp(155px,43vw,230px);height:clamp(155px,43vw,230px);border-radius:28px;padding:14px;background:#fff;box-shadow:0 0 0 1px #ff5b1a66,0 0 55px #ff5b1a42,0 20px 55px #000;display:grid;place-items:center}.portraitQr canvas{width:100%;height:100%;image-rendering:pixelated}.portraitQr small{position:absolute;bottom:-22px;color:#ff7a38;font-size:.55rem;font-weight:900;letter-spacing:.15em}.identity{padding-left:14px;border-left:3px solid var(--o)}.identity>p:first-child{display:inline-flex;padding:5px 8px;border:1px solid #ff5b1a42;border-radius:999px;background:#ff5b1a12}.identity h2{font-size:clamp(3rem,14vw,5.6rem);text-wrap:balance}.identity #cardCompany{font-size:clamp(.95rem,4vw,1.2rem);font-weight:700;letter-spacing:.01em}.details{margin-left:17px;padding:10px 12px;border-radius:13px;background:#ffffff07;border:1px solid #ffffff0c;font-size:clamp(.72rem,3vw,.9rem);line-height:1.35}.details span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sharedBanner{top:66px;left:8px;right:8px;padding:9px 11px;border-radius:12px;grid-template-columns:auto 1fr;align-items:center;gap:9px}.sharedBanner b{font-size:.58rem;white-space:nowrap}.sharedBanner span{font-size:.64rem;line-height:1.25}.shared-mode .portrait{padding-top:38px}.fixedPromo{display:flex!important}.front .scanPromo{display:flex!important}@media(min-width:420px) and (min-height:780px){.identity h2{font-size:clamp(3.5rem,15vw,6rem)}.details{font-size:.88rem}.portrait{min-height:32svh}}@media(max-width:370px){.sharedBanner{grid-template-columns:1fr;gap:2px}.sharedBanner b{font-size:.55rem}.sharedBanner span{font-size:.58rem}.identity h2{font-size:2.7rem}.details{font-size:.68rem}}

/* V6.3 identity hierarchy, full-width mobile promotion and refined settings */
.fixedPromo{display:none!important}.scanPromo{display:none!important}
.identity{padding-left:0!important;border-left:0!important;display:grid;gap:6px;align-content:end}
.identity .jobTitle{display:block!important;width:max-content;max-width:100%;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;color:#ff7a38!important;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:clamp(.72rem,3vw,.92rem)!important;font-weight:650!important;letter-spacing:.14em!important;line-height:1.2;text-transform:uppercase}
.identity h2{margin:0!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:clamp(3rem,14vw,5.8rem)!important;font-weight:850;line-height:.86!important;letter-spacing:-.075em!important;text-shadow:0 0 34px #ff5b1a22}
.identity .companyName{margin:2px 0 0!important;color:#f4f4f4!important;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.02rem,4.5vw,1.35rem)!important;font-style:italic;font-weight:400!important;letter-spacing:.01em!important;line-height:1.1}
.details{margin:13px 0 0!important;padding:0!important;border:0!important;background:none!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px!important;min-height:0!important}
.contactLine{position:relative;min-width:0;padding:9px 10px 9px 35px;border:1px solid #ffffff12;border-radius:13px;background:linear-gradient(135deg,#ffffff0a,#ffffff03);color:#d7d7d7!important;font-family:ui-sans-serif,system-ui,sans-serif;font-size:clamp(.67rem,2.7vw,.82rem)!important;font-weight:560;letter-spacing:.01em;line-height:1.2;box-shadow:inset 0 1px #ffffff08;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contactLine:before{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:17px;height:17px;display:grid;place-items:center;color:#ff7a38;font-size:.76rem}.emailLine:before{content:"@"}.phoneLine:before{content:"☎"}.webLine:before{content:"↗"}.webLine{grid-column:1/-1}
.smartcardBanner{position:fixed;z-index:35;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));min-height:64px;padding:9px 12px;display:flex;align-items:center;gap:11px;border:1px solid #ff6a1988;border-radius:18px;background:linear-gradient(105deg,#1b0b04f2,#080808f2);color:#fff;text-decoration:none;box-shadow:0 0 42px #ff5b1a38,0 16px 42px #000;backdrop-filter:blur(18px)}.smartcardBanner img{width:43px;height:43px;object-fit:contain;filter:drop-shadow(0 0 12px #ff5b1a88)}.bannerCopy{display:grid;gap:1px}.bannerCopy small{color:#ff8b4d;font-size:.57rem;font-weight:850;letter-spacing:.13em}.bannerCopy b{font-size:1.02rem;letter-spacing:-.02em}.bannerArrow{margin-left:auto;width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:#ff5b1a;color:#fff;font-size:1rem;box-shadow:0 0 20px #ff5b1a66}
.cardScreen{padding-bottom:82px}.cardScreen .stage{height:calc(100svh - 146px)}
.sharedBanner{top:68px!important;left:10px!important;right:10px!important;display:grid!important;grid-template-columns:1fr!important;gap:3px!important;padding:10px 12px!important;border-radius:14px!important;background:linear-gradient(105deg,#241006f2,#0a0807f2)!important;box-shadow:0 12px 35px #000,0 0 0 1px #ff5b1a33}.sharedBanner b{font-size:.62rem!important;letter-spacing:.15em;color:#ff7a38}.sharedBanner span{font-size:.72rem!important;line-height:1.32!important;color:#eee}
.shared-mode .portrait{padding-top:58px!important}
dialog#settings{width:min(calc(100% - 20px),430px);max-height:min(86svh,650px);padding:0!important;border:1px solid #ffffff16!important;border-radius:25px!important;background:linear-gradient(165deg,#18110e,#080808 48%)!important;color:#fff;box-shadow:0 30px 100px #000,0 0 50px #ff5b1a1d;overflow:hidden}dialog#settings::backdrop{background:#000c;backdrop-filter:blur(12px)}.settingsHead{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 20px 15px;border-bottom:1px solid #ffffff10}.settingsHead p{margin:0 0 5px;color:#ff7a38;font-size:.59rem;font-weight:900;letter-spacing:.16em}.settingsHead h2{margin:0;font-size:1.55rem;letter-spacing:-.04em}.settingsList{display:grid;padding:8px}.settingsList>button{width:100%;min-height:67px;padding:12px 13px;border:0;border-bottom:1px solid #ffffff0d;border-radius:13px;background:transparent;color:#fff;display:flex;align-items:center;justify-content:space-between;text-align:left}.settingsList>button:hover,.settingsList>button:focus-visible{background:#ffffff08;outline:1px solid #ff5b1a55}.settingsList>button span{display:grid;gap:3px}.settingsList>button b{font-size:.86rem}.settingsList>button small{color:#777;font-size:.66rem}.settingsList>button i{font-style:normal;color:#ff7a38;font-size:1.1rem}.settingsList>.dangerSetting b,.settingsList>.dangerSetting i{color:#ff7652}.settingsPromo{margin:0!important;padding:15px 20px 18px!important;border-top:1px solid #ffffff10;color:#ff7a38!important;text-decoration:none;display:flex!important;justify-content:space-between;font-size:.75rem;font-weight:800}
@media(max-height:720px){.smartcardBanner{min-height:55px;padding:7px 10px}.smartcardBanner img{width:35px;height:35px}.bannerCopy b{font-size:.9rem}.cardScreen{padding-bottom:69px}.cardScreen .stage{height:calc(100svh - 133px)}.identity h2{font-size:clamp(2.55rem,12vw,4.3rem)!important}.contactLine{padding-top:7px;padding-bottom:7px}.actions a,.actions button{height:51px}}
@media(min-width:700px){.smartcardBanner{left:50%;right:auto;transform:translateX(-50%);width:min(430px,90vw)}.cardScreen .stage{height:min(78svh,720px)}.details{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V6.4: Create yours is exclusive to shared-contact mode */
.smartcardBanner{display:none!important}
.shared-mode .smartcardBanner{display:flex!important}
.cardScreen{padding-bottom:0}
.cardScreen .stage{height:calc(100svh - 64px)}
.shared-mode .cardScreen{padding-bottom:82px}
.shared-mode .cardScreen .stage{height:calc(100svh - 146px)}
@media(max-height:720px){.shared-mode .cardScreen{padding-bottom:69px}.shared-mode .cardScreen .stage{height:calc(100svh - 133px)}}
@media(min-width:700px){.cardScreen .stage{height:min(84svh,765px)}.shared-mode .cardScreen .stage{height:min(78svh,720px)}}

/* V6.4 shared-only promotion and restored installation option */
.smartcardBanner.sharedOnly{display:none!important}
.shared-mode .smartcardBanner.sharedOnly{display:flex!important}
#installBtn{display:flex!important}
@media(min-width:700px){.shared-mode .smartcardBanner.sharedOnly{display:flex!important}}

/* V6.5 own-card banner isolation and paired portrait/QR layout */
body:not(.shared-mode) .sharedBanner{display:none!important}
body.shared-mode .sharedBanner:not(.hidden){display:grid!important}
.portrait{grid-template-columns:1fr;justify-items:center;gap:14px}
.portrait.has-photo{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;justify-items:stretch;gap:14px;width:100%;padding-left:0;padding-right:0}
.portrait.has-photo #cardPhoto,.portrait.has-photo .portraitQr{width:100%;height:auto;aspect-ratio:1;max-width:none;min-width:0}
.portrait.has-photo #cardPhoto{justify-self:start;border-radius:24px}
.portrait.has-photo .portraitQr{justify-self:end;border-radius:24px;padding:11px}
.portrait:not(.has-photo) .portraitQr{justify-self:center}
.portrait.has-photo .portraitQr small{bottom:-19px;font-size:.48rem}
@media(max-width:360px){.portrait.has-photo{gap:9px}.portrait.has-photo .portraitQr{padding:9px}.portrait.has-photo #cardPhoto,.portrait.has-photo .portraitQr{border-radius:20px}}

/* V6.6 rear QR at top, profile image in lower free space, external Phoenorg link */
.backFace{justify-content:flex-start!important}
.backFace .scanHead{flex:0 0 auto}
.backFace .qr{flex:0 0 auto;width:min(68vw,330px);margin:12px auto 12px!important}
.backIdentity{flex:0 0 auto;gap:3px!important}
.backIdentity h3{font-size:clamp(1.5rem,6.8vw,2.6rem)!important}
.backIdentity div{max-height:38px;overflow:hidden}
.backProfileWrap{position:relative;z-index:2;flex:1 1 auto;min-height:0;margin:12px auto 0;width:min(42vw,185px);display:grid;place-items:end center}
.backProfileWrap img{display:block;width:100%;height:auto;max-height:100%;aspect-ratio:1;object-fit:cover;border-radius:24px;box-shadow:0 0 0 1px #ffffff1b,0 0 42px #ff5b1a35,0 18px 38px #000}
.backProfileWrap.hidden{display:none!important}
#phoenHomeLink{cursor:pointer}
@media(max-height:720px){.backFace .qr{width:min(57vw,260px);margin:7px auto 8px!important}.backProfileWrap{width:min(31vw,130px);margin-top:7px}.backIdentity h3{font-size:1.45rem!important}.backIdentity div{max-height:29px}}
@media(min-width:700px){.backFace .qr{width:min(65%,300px)}.backProfileWrap{width:min(38%,165px)}}

/* V6.7 remove duplicate in-card label and enlarge rear profile to QR size */
.miniBrand{font-size:0!important;gap:0!important}
.miniBrand img{width:48px!important;height:48px!important}
.backProfileWrap{flex:0 0 auto!important;width:min(68vw,330px)!important;height:auto!important;aspect-ratio:1;margin:14px auto 0!important;place-items:center!important}
.backProfileWrap img{width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:1!important;object-fit:cover!important;border-radius:24px!important}
@media(max-height:720px){.backFace .qr,.backProfileWrap{width:min(57vw,260px)!important}.backProfileWrap{margin-top:8px!important}}
@media(min-width:700px){.backFace .qr,.backProfileWrap{width:min(65%,300px)!important}}
/* V6.7 rear image sizing, single card branding and scanned history */
.miniBrand.logoOnly{min-width:44px}.miniBrand.logoOnly img{width:46px;height:46px}
.backFace .qr{width:min(68vw,330px)!important;max-height:none!important}
.backProfileWrap{flex:0 0 auto!important;width:min(68vw,330px)!important;height:auto!important;aspect-ratio:1!important;margin:14px auto 0!important;place-items:center!important;overflow:hidden}
.backProfileWrap img{width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:1!important;object-fit:cover!important;border-radius:24px!important}
.backFace{overflow-y:auto!important;overscroll-behavior:contain}.backFace::-webkit-scrollbar{width:0}
.historySection{padding:8px 12px 13px;border-top:1px solid #ffffff10}.historyHead{display:flex;align-items:end;justify-content:space-between;padding:8px 5px 10px}.historyHead p{margin:0 0 3px;color:#ff7a38;font-size:.55rem;font-weight:900;letter-spacing:.15em}.historyHead h3{margin:0;font-size:1rem;letter-spacing:-.02em}.historyHead>button{border:1px solid #ffffff14;border-radius:10px;background:#ffffff08;color:#aaa;padding:7px 10px;font-size:.66rem}.historyList{display:grid;gap:6px;max-height:190px;overflow:auto}.historyEmpty{margin:0;padding:14px;color:#666;text-align:center;font-size:.72rem}.historyItem{display:grid;grid-template-columns:39px 1fr 34px;align-items:center;gap:8px;padding:7px;border:1px solid #ffffff0d;border-radius:14px;background:#ffffff05}.historyAvatar{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:#1c0d07;color:#ff7a38;font-weight:900}.historyAvatar img{width:100%;height:100%;object-fit:cover}.historyOpen{min-width:0;border:0;background:none;color:#fff;text-align:left;display:grid;gap:2px;padding:2px}.historyOpen b,.historyOpen small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.historyOpen b{font-size:.76rem}.historyOpen small{color:#777;font-size:.61rem}.historyDelete{width:32px;height:32px;border:0;border-radius:10px;background:#ff5b1a10;color:#ff7652;font-size:1.08rem}
@media(max-height:800px){.backFace .qr,.backProfileWrap{width:min(54vw,250px)!important}.backIdentity div{display:none}.historyList{max-height:140px}}
@media(min-width:700px){.backFace .qr,.backProfileWrap{width:min(66%,300px)!important}}

/* V6.10 requested contact, flip, decentralization and legal updates */
.details{grid-template-columns:1fr!important;gap:10px!important;margin-top:16px!important}.details .contactLine{width:100%;min-height:58px;padding:12px 15px 12px 50px!important;border:1px solid #ff692d61!important;border-radius:17px!important;background:linear-gradient(135deg,#ff5b1a24,#ffffff0a)!important;color:#fff!important;text-decoration:none;display:flex!important;align-items:center;overflow:hidden;font-size:clamp(.88rem,3.7vw,1.05rem)!important;font-weight:720!important;box-shadow:0 10px 28px #0006,inset 0 1px #ffffff0b}.details .contactLine span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.details .contactLine:before{left:15px!important;width:24px!important;height:24px!important;font-size:1rem!important}.details .shareLine{position:relative;justify-content:space-between;cursor:pointer;text-align:left}.shareLine:before{content:"↗"!important}.shareLine b{font-size:1.2rem;color:#ff7a38}.shared-mode #shareBtn{display:none!important}.scanHint{margin-top:auto}.backFace{justify-content:flex-start!important}.backFace .qr{width:min(82vw,390px)!important;margin:clamp(24px,5svh,48px) auto 20px!important}.backIdentity{margin:0 auto;max-width:390px}.decentralizedNote{margin:8px auto 0!important;color:#aaa!important;font-size:.68rem!important;line-height:1.4;text-transform:none!important;letter-spacing:.02em!important}.phoenPrimary{display:inline-flex!important;align-items:center;min-height:54px;padding:0 18px;border:1px solid #ff692d66;border-radius:16px;background:#ff5b1a12;font-weight:850}.projectLinks{padding:14px 20px 18px;border-top:1px solid #ffffff10;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.projectLinks>a{margin:0!important;padding:10px;border:1px solid #ffffff12;border-radius:11px;background:#ffffff05;color:#ff7a38!important;text-decoration:none;font-size:.68rem;font-weight:750}.projectLinks .settingsPromo{grid-column:1/-1;font-size:.86rem!important;border-color:#ff5b1a55;background:#ff5b1a10;display:flex!important;justify-content:space-between}.projectLinks p{grid-column:1/-1;margin:2px 0 0;color:#777;font-size:.62rem;text-align:center}.card.is-flipping .face{display:flex!important}.card.is-flipping .front,.card.is-flipping .backFace{backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important}@media(max-height:760px){.details{gap:7px!important;margin-top:10px!important}.details .contactLine{min-height:49px;padding-top:8px!important;padding-bottom:8px!important}.backFace .qr{width:min(68vw,300px)!important;margin:12px auto!important}}

/* V6.11 scanned-contact save control */
.headerActions{display:flex;align-items:center;gap:8px}.saveContactBtn{color:#ff7a38;font-size:1.45rem;line-height:1}.saveContactBtn[aria-pressed="true"]{background:#ff5b1a1c;border-color:#ff5b1a88;box-shadow:0 0 20px #ff5b1a33}.shared-mode .scanHint{display:none!important}

/* V6.12 separate scanned contacts access */
.contactsBtn{font-size:1.25rem;color:#fff}.shared-mode #contactsBtn{display:block}.historyItem.favorite{order:-1}