:root{color-scheme:dark;--qbg:#0b0e12;--qpanel:#12171d;--qraised:#171d24;--qline:#2a333c;--qink:#f4f6f7;--qmuted:#a3adb7;--qaccent:#8be0c9;--qaccent-soft:#183a34;font-family:Inter,"Segoe UI Variable","Segoe UI",system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--qink);background:var(--qbg);font-size:15px;line-height:1.6}a{color:inherit}.site-nav{height:76px;padding:0 clamp(20px,5vw,80px);display:flex;align-items:center;gap:36px;position:sticky;top:0;z-index:10;background:#0b0e12ef;border-bottom:1px solid #ffffff12;backdrop-filter:blur(16px)}.site-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:850;font-size:1.05rem;white-space:nowrap}.site-brand img{width:38px;height:38px;border-radius:12px;object-fit:cover}.site-brand small{font-size:.65rem;letter-spacing:.15em;color:var(--qaccent);border-left:1px solid var(--qline);padding-left:10px}.site-nav nav,.site-footer nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);margin:auto}.site-nav nav a,.site-footer nav a{color:var(--qmuted);text-decoration:none;font-size:.88rem;font-weight:650;white-space:nowrap}.site-nav nav a:hover,.site-nav nav a.active,.site-footer nav a:hover{color:var(--qink)}.nav-cta{min-height:46px;padding:11px 17px;border-radius:14px;background:#e8ecee;color:#11171a;text-decoration:none;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:14px;white-space:nowrap;transition:transform .16s,background .16s}.nav-cta:hover{transform:translateY(-1px);background:#fff}.text-cta,.inline-link{font-weight:740;text-decoration:none}.text-cta:hover,.inline-link:hover{color:var(--qaccent)}.qr-home-page main{width:min(1240px,calc(100% - 48px));margin:auto}.home-hero{min-height:600px;display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center;padding:70px 0 78px}.hero-copy{max-width:670px}.eyebrow{display:flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.15em;color:var(--qaccent);font-size:.72rem;font-weight:850;margin:0 0 17px}.eyebrow>span,.live-dot{width:8px;height:8px;border-radius:50%;background:var(--qaccent);box-shadow:0 0 15px #8be0c977}.hero-copy h1,.info-hero h1{font-size:clamp(3.5rem,7.7vw,6.5rem);line-height:.96;letter-spacing:-.075em;margin:0 0 25px}.hero-copy h1 em,.info-hero h1 em,.privacy-callout h2 em{color:#aab5bd;font-style:normal}.hero-lede{max-width:580px;color:var(--qmuted);font-size:1.12rem;line-height:1.75;margin:0 0 29px}.hero-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.hero-facts{display:flex;gap:21px;flex-wrap:wrap;margin-top:36px;padding-top:20px;border-top:1px solid var(--qline);color:var(--qmuted);font-size:.78rem}.hero-facts span:before{content:"✓";color:var(--qaccent);margin-right:8px}.sample-card{border:1px solid var(--qline);background:linear-gradient(145deg,#171e25,#11161b);border-radius:25px;padding:21px;box-shadow:0 28px 80px #0005}.sample-top,.sample-top>div,.sample-footer{display:flex;align-items:center;justify-content:space-between}.sample-top>div{gap:9px}.sample-top strong{font-size:.87rem}.sample-top>span,.sample-footer{color:var(--qmuted);font-size:.75rem}.sample-content{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:24px;padding:29px 5px}.sample-qr{width:190px;aspect-ratio:1;display:grid;place-items:center;background:#fff;border-radius:18px;padding:9px}.sample-qr svg{width:100%;height:100%;display:block}.sample-caption{display:grid;gap:7px}.sample-kicker{color:var(--qaccent);font-size:.67rem;font-weight:850;letter-spacing:.13em}.sample-caption strong{font-size:1.35rem;letter-spacing:-.03em}.sample-caption p{color:var(--qmuted);font-size:.85rem;margin:0 0 7px}.sample-caption a{color:var(--qink);font-weight:750;text-decoration:none;font-size:.82rem}.sample-caption a:hover{color:var(--qaccent)}.sample-footer{padding-top:14px;border-top:1px solid var(--qline)}.format-section,.workflow-section{padding:38px 0 84px;border-top:1px solid #ffffff12}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.section-heading .eyebrow{margin-bottom:9px}.section-heading h2,.privacy-callout h2,.bottom-cta h2{font-size:clamp(1.8rem,4vw,3.1rem);letter-spacing:-.06em;line-height:1.08;margin:0}.section-heading>p{max-width:360px;color:var(--qmuted);margin:0}.inline-link{color:var(--qaccent);font-size:.86rem;white-space:nowrap}.format-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.format-card{min-height:156px;padding:18px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;border:1px solid var(--qline);border-radius:18px;background:var(--qpanel);text-decoration:none;transition:transform .16s,border-color .16s,background .16s}.format-card:hover{transform:translateY(-3px);border-color:#52615f;background:#171f24}.format-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:#1d2c2c;color:var(--qaccent);font-size:1.2rem;font-weight:800}.format-card strong{font-size:.94rem}.format-card small{color:var(--qmuted);font-size:.75rem}.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.workflow-grid article{min-height:200px;padding:22px;border:1px solid var(--qline);border-radius:20px;background:linear-gradient(145deg,#151b21,#10151a)}.workflow-grid article>span{color:var(--qaccent);font-size:.73rem;font-weight:850;letter-spacing:.12em}.workflow-grid h3{font-size:1.08rem;margin:20px 0 8px}.workflow-grid p{color:var(--qmuted);font-size:.85rem;margin:0 0 16px}.workflow-grid a{font-size:.8rem;font-weight:750;text-decoration:none}.workflow-grid a:hover{color:var(--qaccent)}.privacy-callout{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:36px;margin:5px 0 74px;border:1px solid #294b43;border-radius:24px;background:linear-gradient(120deg,#122420,#11171b 65%)}.privacy-callout>div{max-width:700px}.privacy-callout h2{margin:0 0 13px}.privacy-callout>div>p:last-child{color:var(--qmuted);margin:0;max-width:660px}.bottom-cta{padding:32px 0 70px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #ffffff12}.bottom-cta .eyebrow{margin-bottom:8px}.site-footer{min-height:88px;padding:20px clamp(20px,5vw,80px);display:flex;align-items:center;gap:30px;border-top:1px solid #ffffff12;color:var(--qmuted);font-size:.77rem}.site-footer .site-brand{margin-right:auto}.site-footer .site-brand img{width:29px;height:29px}.site-footer .site-brand small{display:none}.info-page{width:min(1000px,calc(100% - 48px));margin:auto;padding:74px 0 100px}.info-hero{max-width:760px;padding:0 0 55px}.info-hero h1{font-size:clamp(3.3rem,7vw,5.4rem)}.info-hero>p:not(.eyebrow){max-width:620px;color:var(--qmuted);font-size:1.08rem;margin:0 0 25px}.guide-steps{display:grid;border-top:1px solid var(--qline)}.guide-steps article{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:25px 4px;border-bottom:1px solid var(--qline)}.guide-steps article>span{color:var(--qaccent);font-weight:850;font-size:.8rem;letter-spacing:.12em}.guide-steps h2,.design-grid h2{font-size:1.15rem;margin:0 0 7px}.guide-steps p,.design-grid p,.guide-note p{color:var(--qmuted);font-size:.9rem;line-height:1.7;margin:0}.guide-note{margin:33px 0;padding:22px;border-left:3px solid var(--qaccent);background:var(--qpanel);border-radius:0 16px 16px 0}.guide-note strong{display:block;margin-bottom:6px}.design-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.design-grid article{padding:22px;border:1px solid var(--qline);border-radius:19px;background:var(--qpanel)}.design-symbol{display:grid;place-items:center;width:40px;height:40px;margin-bottom:18px;border-radius:13px;background:var(--qaccent-soft);color:var(--qaccent);font-size:1.25rem}.info-page>.nav-cta{margin-top:6px}.site-nav .nav-cta{font-size:.82rem}
/* The editor and dashboard are dedicated routes, rather than one long landing page. */
body[data-page="create"] .hero,body[data-page="create"] .feature-strip,body[data-page="create"] .ways{display:none!important}body[data-page="create"] main{padding-top:35px}.qr-app-nav{display:flex;align-items:center;gap:20px;margin:auto}.qr-app-nav a{color:var(--muted);text-decoration:none;font-size:.86rem;font-weight:700}.qr-app-nav a:hover{color:var(--ink)}body[data-page="dashboard"] .hero,body[data-page="dashboard"] .feature-strip,body[data-page="dashboard"] .ways,body[data-page="dashboard"] .workspace{display:none!important}body[data-page="dashboard"] main{padding-top:52px}body[data-page="dashboard"] #dashboard{margin-top:0}body[data-page="dashboard"] .auth-panel{margin-top:40px}body[data-page="dashboard"] .dashboard-title{align-items:center}body[data-page="dashboard"] .account{margin-left:0}
@media(max-width:960px){.site-nav{gap:20px;padding-inline:24px}.site-nav nav{gap:16px}.home-hero{gap:30px;min-height:540px}.sample-content{grid-template-columns:160px 1fr;gap:17px}.sample-qr{width:160px}.format-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:680px){.site-nav{height:auto;min-height:66px;padding:10px 14px;gap:10px;flex-wrap:wrap}.site-brand{font-size:.93rem}.site-brand img{width:32px;height:32px}.site-brand small{font-size:.55rem;padding-left:7px}.site-nav nav{order:3;width:100%;overflow:auto;justify-content:flex-start;padding:9px 0 3px;border-top:1px solid #ffffff10}.site-nav nav a{font-size:.78rem}.site-nav>.nav-cta{margin-left:auto;min-height:38px;padding:8px 11px;font-size:.75rem}.qr-home-page main{width:calc(100% - 28px)}.home-hero{grid-template-columns:1fr;gap:28px;padding:49px 0 52px}.hero-copy h1{font-size:clamp(3.5rem,15vw,5.4rem)}.hero-lede{font-size:1rem}.hero-facts{gap:10px 18px;margin-top:24px}.sample-card{padding:15px;border-radius:20px}.sample-content{grid-template-columns:minmax(110px,145px) 1fr;gap:14px;padding:20px 0}.sample-qr{width:100%;padding:7px;border-radius:13px}.sample-caption strong{font-size:1.08rem}.sample-caption p{font-size:.77rem}.sample-caption a{font-size:.76rem}.format-section,.workflow-section{padding:31px 0 53px}.section-heading{align-items:start}.section-heading h2,.privacy-callout h2,.bottom-cta h2{font-size:1.85rem}.format-grid{grid-template-columns:repeat(2,1fr);gap:9px}.format-card{min-height:136px;padding:14px}.workflow-grid{grid-template-columns:1fr}.workflow-grid article{min-height:0}.workflow-grid h3{margin-top:13px}.privacy-callout{margin-bottom:48px;padding:23px;align-items:flex-start;flex-direction:column}.bottom-cta{align-items:flex-start;flex-direction:column;padding-bottom:48px}.site-footer{align-items:flex-start;flex-wrap:wrap;padding:18px 15px;gap:14px}.site-footer .site-brand{width:100%}.site-footer nav{order:2;width:100%;justify-content:flex-start;flex-wrap:wrap;gap:13px}.site-footer>span{order:3}.info-page{width:calc(100% - 30px);padding:48px 0 65px}.info-hero{padding-bottom:35px}.info-hero h1{font-size:clamp(3.2rem,14vw,4.7rem)}.guide-steps article{grid-template-columns:40px 1fr;gap:10px;padding:21px 0}.guide-steps h2{font-size:1.03rem}.design-grid{grid-template-columns:1fr}.qr-app-nav{order:3;width:100%;overflow:auto;justify-content:flex-start;padding-top:8px;border-top:1px solid #ffffff10}.qr-app-nav a{white-space:nowrap;font-size:.78rem}.top{flex-wrap:wrap;height:auto;min-height:64px;padding:10px 14px}.account{margin-left:auto}.account #user-email{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body[data-page="create"] main{width:calc(100% - 24px);padding-top:18px}body[data-page="dashboard"] main{width:calc(100% - 24px);padding-top:25px}}
.qr-app-nav a[href="/create"]{color:var(--qaccent)}body[data-page="dashboard"] .qr-app-nav a[href="/create"]{color:var(--muted)}body[data-page="dashboard"] .qr-app-nav a[href="/dashboard"]{color:var(--qaccent)}
/* Full-width work area and expanded QR account controls */
body[data-page="create"] main,body[data-page="dashboard"] main{width:100%;max-width:none;margin:0;padding-left:clamp(18px,3vw,54px);padding-right:clamp(18px,3vw,54px)}body[data-page="create"] .workspace{width:100%;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);gap:clamp(16px,2vw,30px)}body[data-page="dashboard"] .dashboard{width:100%}body[data-page="dashboard"] .codes-panel{width:100%}.code-row{grid-template-columns:minmax(220px,1fr) auto}.code-row>.qr-row-actions,.code-row>.qr-manager,.code-row>.qr-image-tools,.code-row>.scan-history,.code-row>.scan-chart{grid-column:1/-1}.qr-row-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px}.qr-row-actions .button{min-height:38px}.qr-manager,.qr-image-tools{border:1px solid var(--line);border-radius:15px;background:#11171d;padding:0 14px}.qr-manager summary,.qr-image-tools summary{padding:13px 0;cursor:pointer;font-weight:760;font-size:.87rem}.qr-manager-form{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(260px,1.5fr) auto;align-items:end;gap:12px;padding:0 0 14px}.qr-manager-form label{display:grid;gap:6px;color:var(--muted);font-size:.78rem;font-weight:700}.qr-manager-form input{width:100%;height:42px;padding:0 11px;color:var(--ink);background:#0b1015;border:1px solid var(--line);border-radius:10px}.qr-image-content{display:flex;align-items:center;gap:18px;padding:0 0 15px}.dashboard-qr-image{width:min(180px,35vw);padding:10px;border-radius:14px;background:#fff}.dashboard-qr-image svg{width:100%;height:auto;display:block}.qr-image-tools .actions{gap:8px}.code-row .scan-history{margin-top:2px}.code-row .scan-chart{margin-top:-8px}@media(max-width:960px){body[data-page="create"] .workspace{grid-template-columns:1fr}.body[data-page="dashboard"] .dashboard{margin-top:0}}@media(max-width:620px){body[data-page="create"] main,body[data-page="dashboard"] main{padding-left:12px;padding-right:12px}.code-row{grid-template-columns:minmax(0,1fr) auto}.code-row>.qr-row-actions,.code-row>.qr-manager,.code-row>.qr-image-tools,.code-row>.scan-history,.code-row>.scan-chart{grid-column:1/-1}.qr-manager-form{grid-template-columns:1fr}.qr-row-actions .button{flex:1;min-width:calc(50% - 5px)}.qr-image-content{align-items:flex-start;flex-direction:column}.dashboard-qr-image{width:min(220px,70vw)}}
body[data-page="create"] main,body[data-page="dashboard"] main{padding-left:clamp(12px,1.2vw,22px);padding-right:clamp(12px,1.2vw,22px)}body[data-page="create"] .top,body[data-page="dashboard"] .top{padding-left:clamp(12px,1.5vw,24px);padding-right:clamp(12px,1.5vw,24px)}
/* Visual pattern and frame selectors; compact QR preview */
.hidden-style-values{display:none!important}.style-pickers{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.9fr);gap:16px}.style-picker{min-width:0;margin:0;padding:0;border:0}.style-picker legend{margin-bottom:9px;font-size:.88rem;font-weight:760}.style-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.frame-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.style-choice{min-width:0;min-height:72px;padding:8px 7px;display:flex;align-items:center;justify-content:center;gap:7px;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:#0b1015;color:var(--muted);font:inherit;font-size:.7rem;font-weight:680;cursor:pointer;transition:border-color .16s,background .16s,color .16s}.style-choice:hover{border-color:#687781;color:var(--ink)}.style-choice.selected{border-color:var(--mint);background:#14231f;color:var(--ink);box-shadow:0 0 0 1px #81e1cb35}.style-choice:focus-visible{outline:3px solid #81e1cb55;outline-offset:2px}.pattern-sample{width:29px;height:29px;display:grid;grid-template-columns:repeat(3,7px);grid-template-rows:repeat(3,7px);gap:3px;place-content:center;color:var(--qaccent,#8be0c9)}.pattern-sample i{display:block;background:currentColor;border-radius:0}.sample-rounded i{border-radius:2px}.sample-extra i{border-radius:4px}.sample-dots i{border-radius:50%}.sample-diamond i{transform:scale(.76) rotate(45deg)}.sample-bars i{height:4px;align-self:center;border-radius:4px}.frame-sample{position:relative;width:34px;height:28px;display:block;color:var(--qaccent,#8be0c9)}.frame-sample i{position:absolute;inset:3px 7px;border:1.5px solid currentColor;border-radius:3px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 4px);background-blend-mode:screen}.frame-none i{border-color:transparent;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 4px)}.frame-box i{inset:1px 5px;border:1.5px solid currentColor;background:transparent}.frame-sample b{position:absolute;left:8px;right:8px;bottom:0;height:3px;border-radius:5px;background:currentColor}.frame-label i{inset:2px 7px 7px;border-width:1.5px}.frame-label b{left:11px;right:11px;bottom:1px;height:4px}.qr-stage{min-height:290px;padding:16px;margin:14px 0;border-radius:17px}.qr-preview{width:min(100%,270px);min-height:0;aspect-ratio:auto;overflow:visible}.qr-preview svg{width:100%;max-height:310px;height:auto}.empty-qr{padding:22px;font-size:.88rem}@media(max-width:960px){.style-pickers{grid-template-columns:minmax(0,1.2fr) minmax(180px,.8fr)}.qr-stage{min-height:260px}.qr-preview{width:min(100%,245px)}}@media(max-width:620px){.style-pickers{grid-template-columns:1fr;gap:14px}.style-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.frame-choices{grid-template-columns:repeat(4,minmax(0,1fr))}.style-choice{min-height:66px;padding:6px 3px;font-size:.65rem}.qr-stage{min-height:235px;padding:12px}.qr-preview{width:min(100%,215px)}}
/* Separate pattern/frame rows and keep preview close to a real QR size. */
body[data-page="create"] .style-pickers{grid-template-columns:1fr;gap:17px}.style-pickers .style-picker{padding:12px 14px;border:1px solid var(--line);border-radius:15px;background:#11171d}.style-pickers .style-picker legend{padding:0 6px}.style-pickers .style-choices{grid-template-columns:repeat(6,minmax(0,1fr))}.style-pickers .frame-choices{grid-template-columns:repeat(4,minmax(0,1fr))}.style-pickers .style-choice{min-height:68px}body[data-page="create"] .preview-panel{align-self:start}.qr-stage{min-height:0;height:auto;display:grid;place-items:center;padding:0;margin:12px 0 15px;background:transparent;border:0;border-radius:0}.qr-preview{width:min(100%,310px);max-width:310px;min-height:0;height:auto;aspect-ratio:auto;display:grid;place-items:center;overflow:visible}.qr-preview svg{display:block;width:100%;height:auto;max-height:none}.empty-qr{width:100%;aspect-ratio:1;display:grid;place-items:center;padding:28px;border:1px dashed #39464e;border-radius:17px;background:#10161c;color:var(--muted);font-size:.88rem;text-align:center}.preview-panel{padding:24px}.preview-panel .hint{max-width:480px;margin-inline:auto;text-align:center}@media(max-width:960px){.qr-preview{width:min(100%,275px);max-width:275px}}@media(max-width:620px){.style-pickers .style-picker{padding:10px}.style-pickers .style-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.style-pickers .frame-choices{grid-template-columns:repeat(4,minmax(0,1fr))}.style-pickers .style-choice{min-height:63px}.qr-preview{width:min(100%,240px);max-width:240px}.empty-qr{padding:18px}.preview-panel{padding:17px}}
@media(min-width:961px){body[data-page="create"] .workspace{grid-template-columns:minmax(0,1fr) minmax(350px,440px);gap:20px}body[data-page="create"] .preview-panel{position:sticky;top:94px}.qr-preview{width:min(100%,270px);max-width:270px}.preview-panel .panel-head{margin-bottom:4px}.qr-stage{margin:8px 0 12px}}
.design-presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.design-presets>span{margin-right:3px;color:var(--qmuted);font-size:.77rem;font-weight:750}.preset-chip{min-height:38px;padding:6px 11px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--qline);border-radius:999px;background:#0b1015;color:var(--qmuted);font:inherit;font-size:.76rem;font-weight:700}.preset-chip:hover,.preset-chip.selected{border-color:var(--qaccent);color:var(--qink);background:#15221f}.preset-swatch{width:14px;height:14px;border:1px solid #ffffff44;border-radius:50%;background:#111820}.ocean-swatch{background:linear-gradient(135deg,#123c5a,#087e8b)}.forest-swatch{background:linear-gradient(135deg,#173c2d,#28734d)}.mono-swatch{background:linear-gradient(135deg,#050505 50%,#fff 50%)}.design-options{border:1px solid var(--qline);border-radius:16px;background:#11171d;padding:0 14px}.design-options>summary{padding:14px 0;cursor:pointer;font-weight:780;font-size:.88rem}.design-options[open]>summary{margin-bottom:12px;border-bottom:1px solid var(--qline)}.design-options .colors{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.advanced-controls{grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0}.advanced-controls label{font-size:.8rem}.advanced-controls select,.advanced-controls input{min-width:0;width:100%;height:42px;padding:0 10px;border:1px solid var(--qline);border-radius:10px;background:#0b1015;color:var(--qink)}.design-options .upload{margin:8px 0 14px}.design-options .check-option{margin:10px 0}@media(max-width:960px){.design-options .colors{grid-template-columns:repeat(3,minmax(0,1fr))}.advanced-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.design-presets{gap:6px}.design-presets>span{flex-basis:100%}.preset-chip{min-height:35px;padding:5px 9px;font-size:.72rem}.design-options{padding-inline:10px}.design-options .colors{grid-template-columns:repeat(2,minmax(0,1fr))}.advanced-controls{grid-template-columns:1fr;gap:10px}}
/* Expanded scan-conscious shape samples and ready-made looks. */
.sample-vertical i{width:5px;justify-self:center;border-radius:3px}
.sample-octagon i{clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)}
.sample-inset i{transform:scale(.76)}
.frame-double i{inset:3px 8px;border:1px solid currentColor;outline:1px solid currentColor;outline-offset:3px;background:transparent}
.frame-corners i{inset:3px 8px;border:0;border-radius:0;background:linear-gradient(currentColor,currentColor) left top/8px 2px no-repeat,linear-gradient(currentColor,currentColor) left top/2px 8px no-repeat,linear-gradient(currentColor,currentColor) right top/8px 2px no-repeat,linear-gradient(currentColor,currentColor) right top/2px 8px no-repeat,linear-gradient(currentColor,currentColor) left bottom/8px 2px no-repeat,linear-gradient(currentColor,currentColor) left bottom/2px 8px no-repeat,linear-gradient(currentColor,currentColor) right bottom/8px 2px no-repeat,linear-gradient(currentColor,currentColor) right bottom/2px 8px no-repeat}
.sunset-swatch{background:linear-gradient(135deg,#6b1837,#bf562e)}
.violet-swatch{background:linear-gradient(135deg,#35145f,#5b369e)}
.graphite-swatch{background:linear-gradient(135deg,#222b34,#aab4bc)}
.citrus-swatch{background:linear-gradient(135deg,#315221,#a2c957)}

/* Focused QR workspace: use the viewport width and keep the preview compact. */
@media(min-width:961px){
  body[data-page="create"] main{max-width:none;width:100%;padding-inline:clamp(16px,2vw,32px)}
  body[data-page="create"] .workspace{grid-template-columns:minmax(0,1fr) minmax(320px,390px);gap:18px}
  body[data-page="create"] .editor{padding:clamp(20px,2vw,30px);gap:16px}
  body[data-page="create"] .preview-panel{padding:20px;top:88px}
  body[data-page="create"] .qr-preview{width:min(100%,260px);max-width:260px}
}
body[data-page="create"] .site-nav{padding-inline:clamp(16px,2vw,32px);gap:clamp(14px,2vw,30px)}
body[data-page="create"] .site-brand{flex:0 0 auto}
body[data-page="create"] .site-nav nav{flex:1;min-width:0;justify-content:center;gap:clamp(10px,1.5vw,22px)}
body[data-page="create"] .site-nav .account{flex:0 0 auto;margin-left:auto}
@media(max-width:680px){body[data-page="create"] .site-nav nav{order:3;flex-basis:100%;justify-content:flex-start}body[data-page="create"] .site-nav .account{margin-left:auto}}

/* Resolve the stored Firebase session before showing the signed-out panel. */
#session-pending{display:none}
body[data-page="dashboard"][data-auth-state="pending"] #session-pending{display:block;width:min(680px,calc(100% - 32px));margin:64px auto;padding:24px;border:1px solid var(--qline);border-radius:20px;background:var(--qpanel);color:var(--qmuted);text-align:center;font-weight:650}
body[data-auth-state="pending"] #auth-panel,body[data-auth-state="pending"] #verify-panel{display:none!important}

/* Keep account actions in the same quiet, dark visual language as the navigation. */
.site-nav .account{position:relative;gap:10px;min-width:0;margin-left:auto}
.account-trigger{width:42px;height:42px;padding:3px;border:1px solid var(--qline);border-radius:50%;background:var(--qraised);color:var(--qink);cursor:pointer}
.account-trigger:hover,.account-trigger[aria-expanded="true"]{border-color:#64747e;background:#202831}
.account-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font-size:.78rem;font-weight:850;letter-spacing:.02em}
.account-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:20;width:min(260px,calc(100vw - 28px));padding:8px;border:1px solid var(--qline);border-radius:17px;background:#141a21;box-shadow:0 18px 50px #0008}
.account-menu-heading{display:grid;gap:2px;padding:12px 12px 14px;border-bottom:1px solid var(--qline);margin-bottom:6px}
.account-menu-heading strong{font-size:.9rem;overflow-wrap:anywhere}.account-menu-heading small{color:var(--qmuted);font-size:.73rem}
.account-menu>a,.account-menu>button{width:100%;min-height:42px;padding:10px 12px;display:flex;align-items:center;border:0;border-radius:10px;background:transparent;color:var(--qink);font:inherit;font-size:.84rem;font-weight:680;text-align:left;text-decoration:none;cursor:pointer}
.account-menu>a:hover,.account-menu>button:hover{background:#222c35}
@media(max-width:680px){.site-nav .account{margin-left:auto}.account-trigger{width:38px;height:38px}.account-avatar{width:30px;height:30px}}

.ruby-swatch{background:linear-gradient(135deg,#761b35,#b52c4c)}.lagoon-swatch{background:linear-gradient(135deg,#075665,#008b78)}.cobalt-swatch{background:linear-gradient(135deg,#173c91,#2866c7)}.plum-swatch{background:linear-gradient(135deg,#55224f,#873b78)}.espresso-swatch{background:linear-gradient(135deg,#4b2c1d,#80502f)}.rose-swatch{background:linear-gradient(135deg,#74233f,#bd4e69)}

/* Clear visual legends for QR style choices */
.style-choice{min-height:88px;padding:8px 5px;gap:4px}
.style-choice::after{content:attr(data-help);display:block;max-width:100%;color:var(--qmuted,#9aa8b5);font-size:.61rem;line-height:1.2;font-weight:500;text-align:center}
.style-choice.selected::after{color:#c7d5d1}
.pattern-sample{width:34px;height:30px;grid-template-columns:repeat(3,7px);grid-template-rows:repeat(3,7px);gap:3px}
.sample-rounded i{border-radius:2px}
.sample-extra i{border-radius:50%}
.sample-dots i{border-radius:50%;transform:scale(.62)}
.sample-circle i{border-radius:50%;transform:scale(.94)}
.sample-diamond i{transform:scale(.72) rotate(45deg)}
.sample-bars i{width:7px;height:3px;align-self:center;border-radius:4px}
.sample-vertical i{width:4px;height:7px;justify-self:center;border-radius:4px}
.sample-octagon i{clip-path:polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%)}
.sample-inset i{transform:scale(.64)}
.sample-hexagon i{clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%)}
.sample-pill i{border-radius:999px;transform:scaleY(.68)}
.sample-cross i{clip-path:polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%)}
.sample-star i{clip-path:polygon(50% 0,64% 32%,100% 36%,73% 59%,81% 100%,50% 77%,19% 100%,27% 59%,0 36%,36% 32%)}
.sample-squircle i{border-radius:38%}
.frame-sample{width:36px;height:30px}
.frame-sample i{inset:4px 9px;border:0;border-radius:0;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 4px)}
.frame-none i{inset:4px 9px;border:0;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 4px)}
.frame-box i{inset:1px 6px;border:1.5px solid currentColor;border-radius:5px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 4px)}
.frame-bottom i{inset:2px 8px 8px;border:0;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 4px)}
.frame-bottom b{left:8px;right:8px;bottom:1px;height:4px}
.frame-label i{inset:1px 8px 8px;border:1px solid currentColor;border-radius:3px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 4px)}
.frame-label b{left:12px;right:12px;bottom:1px;height:4px}
.frame-double i{inset:4px 9px;border:1px solid currentColor;outline:1px solid currentColor;outline-offset:3px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 4px)}
.frame-corners i{inset:4px 9px;border:0;border-radius:0;background:linear-gradient(currentColor,currentColor) left top/7px 2px no-repeat,linear-gradient(currentColor,currentColor) left top/2px 7px no-repeat,linear-gradient(currentColor,currentColor) right top/7px 2px no-repeat,linear-gradient(currentColor,currentColor) right top/2px 7px no-repeat,linear-gradient(currentColor,currentColor) left bottom/7px 2px no-repeat,linear-gradient(currentColor,currentColor) left bottom/2px 7px no-repeat,linear-gradient(currentColor,currentColor) right bottom/7px 2px no-repeat,linear-gradient(currentColor,currentColor) right bottom/2px 7px no-repeat,repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 4px);background-size:7px 2px,2px 7px,7px 2px,2px 7px,7px 2px,2px 7px,7px 2px,2px 7px,100% 100%,100% 100%}
.frame-dashed i{inset:1px 6px;border:1.5px dashed currentColor;border-radius:5px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 4px)}
.frame-corner-dots i{inset:4px 9px;border:0;border-radius:0;background:radial-gradient(circle,currentColor 0 2px,transparent 2.5px) left top/6px 6px no-repeat,radial-gradient(circle,currentColor 0 2px,transparent 2.5px) right top/6px 6px no-repeat,radial-gradient(circle,currentColor 0 2px,transparent 2.5px) left bottom/6px 6px no-repeat,radial-gradient(circle,currentColor 0 2px,transparent 2.5px) right bottom/6px 6px no-repeat,repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 4px)}
.frame-rails i{inset:4px 9px;border:0;border-radius:0;background:linear-gradient(currentColor,currentColor) left top/100% 2px no-repeat,linear-gradient(currentColor,currentColor) left bottom/100% 2px no-repeat,repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px),repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 4px)}
@media(max-width:680px){.style-choice{min-height:82px}.style-choice::after{font-size:.55rem}}

/* Keep the editor compact by showing each style family only when requested. */
.style-pickers{grid-template-columns:1fr;gap:10px}
.style-picker-group{min-width:0;border:1px solid var(--qline);border-radius:15px;background:#11171d;overflow:hidden}
.style-picker-group>summary{min-height:54px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style-position:inside;font-weight:760}
.style-picker-group>summary::marker{color:var(--qaccent)}
.style-picker-group>summary small{margin-left:auto;color:var(--qmuted);font-size:.78rem;font-weight:600}
.style-picker-group[open]>summary{border-bottom:1px solid var(--qline)}
.style-picker-group .style-picker{padding:12px 13px 14px}
.style-picker-group .style-choices{grid-template-columns:repeat(5,minmax(0,1fr))}
.style-picker-group .frame-choices{grid-template-columns:repeat(5,minmax(0,1fr))}
.style-picker-group .style-choice{min-height:78px}
@media(max-width:760px){.style-picker-group .style-choices,.style-picker-group .frame-choices{grid-template-columns:repeat(3,minmax(0,1fr))}}

.owner-main{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:58px 0 90px}.owner-heading{max-width:760px;margin-bottom:32px}.owner-heading h1{font-size:clamp(2.5rem,5vw,4.3rem);margin:0 0 14px}.owner-heading>p:last-child{color:var(--muted);max-width:650px}.owner-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 20px}.owner-projects,.owner-qr{margin:0 0 20px}.owner-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.owner-project-card{display:flex;flex-direction:column;gap:13px;min-height:150px;padding:19px;border:1px solid var(--line);border-radius:17px;background:var(--surface)}.owner-project-card h3{margin:0;font-size:1.04rem}.owner-project-card .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto}.owner-project-card a{font-weight:700;color:var(--mint)}.owner-health{font-size:.78rem;color:var(--muted)}.owner-health[data-state=ok]{color:#81e1cb}.owner-health[data-state=error]{color:#ff9292}.owner-code-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line)}.owner-code-row span{font-size:.84rem;color:var(--muted)}.owner-code-row a{font-size:.84rem;color:var(--mint);font-weight:700}.owner-main+.status{margin-top:12px}@media(max-width:760px){.owner-main{width:calc(100% - 28px);padding-top:34px}.owner-stats,.owner-project-grid{grid-template-columns:1fr}.owner-code-row{grid-template-columns:1fr;gap:6px}.owner-code-row a{justify-self:start}}
/* The style groups own their border; avoid a nested fieldset card. */
.style-picker-group .style-picker{border:0;border-radius:0;background:transparent}

/* Keep the save checkbox aligned with its label instead of the generic grid label. */
.editor>label.check-option{display:flex;align-items:flex-start;gap:10px}
.editor>label.check-option input[type=checkbox]{appearance:auto;width:18px;height:18px;min-height:18px;flex:0 0 18px;justify-self:start;margin:2px 0 0;padding:0;border:0;border-radius:3px;background:transparent;box-shadow:none}
/* Compact, nested controls keep the editor scannable while preserving every option. */
.style-more{margin-top:10px;border-top:1px solid var(--qline);padding-top:9px}
.style-more>summary,.preset-more>summary{min-height:38px;padding:7px 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--qline);border-radius:10px;background:#0b1015;color:var(--qink);cursor:pointer;font-size:.78rem;font-weight:720;list-style-position:inside}
.style-more>summary small,.preset-more>summary small{margin-left:auto;color:var(--qmuted);font-size:.72rem;font-weight:600}
.style-more[open]>summary{margin-bottom:10px}
.style-more-choices{margin-top:8px}
.design-presets{gap:7px}
.preset-chip{min-height:34px;padding:5px 9px;font-size:.72rem}
.preset-more{position:relative}
.preset-more-grid{position:absolute;z-index:4;top:calc(100% + 7px);right:0;width:min(390px,80vw);padding:11px;display:flex;flex-wrap:wrap;gap:7px;border:1px solid var(--qline);border-radius:13px;background:#10151b;box-shadow:0 12px 32px #0008}
.preset-more[open]>summary{border-color:var(--qaccent);color:var(--qink)}
@media(max-width:960px){body[data-page="create"] .workspace{grid-template-columns:1fr}body[data-page="create"] .editor{grid-row:1}body[data-page="create"] .preview-panel{position:static;top:auto;grid-row:2;align-self:stretch}}
/* Screen-reader-only group labels must never create a second visible heading. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.style-picker-group .style-choices,.style-picker-group .frame-choices{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Keep the preview and its export actions together on regular desktop widths. */
@media (min-width:761px) and (max-width:960px){
  body[data-page="create"] .workspace{grid-template-columns:minmax(0,1fr) minmax(280px,34vw);align-items:start;gap:14px}
  body[data-page="create"] .editor{padding:18px;gap:14px}
  body[data-page="create"] .preview-panel{position:sticky;top:76px;align-self:start;padding:16px}
  body[data-page="create"] .qr-preview{width:min(100%,230px);max-width:230px}
}
body[data-page="create"] .download-actions{display:flex;flex-wrap:wrap;gap:8px}
body[data-page="create"] .download-actions .button{flex:1 1 120px;min-width:0;white-space:nowrap}
@media (min-width:761px) and (max-width:960px){
  body[data-page="create"] .editor,body[data-page="create"] .preview-panel{grid-row:auto}
}
@media (min-width:761px) and (max-width:1100px){
  body[data-page="create"] .design-presets{gap:5px}
  body[data-page="create"] .design-presets>span{font-size:.7rem;margin-right:0}
  body[data-page="create"] .preset-chip{padding-inline:7px;font-size:.69rem}
}
@media (min-width:761px) and (max-width:960px){
  body[data-page="create"] .preview-panel .panel-head h2{font-size:1.2rem;white-space:nowrap}
}
/* Keep status informative without making the preview header look like another control. */
body[data-page="create"] .preview-state{display:block;max-width:46%;color:var(--qmuted);font-size:.68rem;line-height:1.3;text-align:right;overflow-wrap:anywhere}
body[data-page="create"] .download-actions{align-items:stretch}
body[data-page="create"] .download-actions .button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding-inline:12px}
/* Keep option cards recognizable without turning each one into a paragraph. */
body[data-page="create"] .style-choice{min-height:66px;padding:7px 5px;gap:5px}
body[data-page="create"] .style-choice::after{display:none}

/* Compact creator controls and prevent intrinsic grid widths from pushing the editor off-screen. */
body[data-page="create"] .workspace,
body[data-page="create"] .editor,
body[data-page="create"] .preview-panel{min-width:0}
@media(min-width:761px){
  body[data-page="create"] .workspace{grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:14px}
  body[data-page="create"] .editor{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;padding:18px}
  body[data-page="create"] .editor>.panel-head{grid-column:1/-1;margin-bottom:0}
  body[data-page="create"] .editor>label:nth-of-type(1){grid-column:1;grid-row:2}
  body[data-page="create"] #content-fields{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;min-width:0}
  body[data-page="create"] .content-fields>label,
  body[data-page="create"] .content-fields>.field-row{min-width:0}
  body[data-page="create"] .content-fields>label:has(textarea),
  body[data-page="create"] .content-fields>.hint,
  body[data-page="create"] .content-fields>.check-option{grid-column:1/-1}
  body[data-page="create"] .editor>label:nth-of-type(2){grid-column:2;grid-row:2}
  body[data-page="create"] .editor>.design-presets,
  body[data-page="create"] .editor>.style-pickers,
  body[data-page="create"] .editor>.design-options,
  body[data-page="create"] .editor>details,
  body[data-page="create"] .editor>.check-option,
  body[data-page="create"] .editor>.tracking-choice,
  body[data-page="create"] .editor>.actions,
  body[data-page="create"] .editor>.status{grid-column:1/-1}
  body[data-page="create"] .editor>label:not(.check-option){gap:5px;font-size:.82rem}
  body[data-page="create"] .editor input[type=url],
  body[data-page="create"] .editor input[type=text],
  body[data-page="create"] .editor select,
  body[data-page="create"] .content-fields input,
  body[data-page="create"] .content-fields select{min-height:40px;height:40px;padding:8px 11px;border-radius:10px}
  body[data-page="create"] .content-fields textarea{min-height:76px;padding:9px 11px;border-radius:10px}
  body[data-page="create"] .tracking-choice{padding:10px 12px}
  body[data-page="create"] .qr-stage{min-height:260px;margin:10px 0;padding:14px}
  body[data-page="create"] .qr-preview{width:min(100%,220px);max-width:220px}
}
@media(max-width:960px){
  body[data-page="create"] .workspace{grid-template-columns:minmax(0,1fr)}
  body[data-page="create"] .editor{grid-template-columns:1fr;padding:16px;gap:11px}
  body[data-page="create"] .editor>.panel-head,
  body[data-page="create"] #content-fields,
  body[data-page="create"] .editor>label:nth-of-type(1),
  body[data-page="create"] .editor>label:nth-of-type(2){grid-column:1;grid-row:auto}
}
@media(min-width:621px) and (max-width:960px){
  body[data-page="create"] #content-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}
  body[data-page="create"] .content-fields>label:has(textarea),
  body[data-page="create"] .content-fields>.hint,
  body[data-page="create"] .content-fields>.check-option{grid-column:1/-1}
}
body[data-page="create"] .pattern-sample{width:26px;height:26px}
/* Keep the miniature choices close to the renderer's actual module geometry. */
.sample-dots i{transform:scale(.86)}
.sample-circle i{transform:scale(.96)}
.sample-diamond i{transform:scale(.95) rotate(45deg)}
.sample-inset i{transform:scale(.88)}
.sample-star i{clip-path:polygon(50% 1.5%,63% 37%,98.5% 50%,63% 63%,50% 98.5%,37% 63%,1.5% 50%,37% 37%)}

/* Profile page styles live in the external stylesheet to comply with the strict CSP. */
body[data-page="profile"] main{width:min(760px,calc(100% - 32px));padding:48px 0 72px}
body[data-page="profile"] .profile-card{padding:clamp(22px,5vw,38px);border:1px solid var(--qline);border-radius:24px;background:linear-gradient(145deg,#151c23,#10151a)}
body[data-page="profile"] .profile-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
body[data-page="profile"] .profile-head h1{font-size:clamp(1.8rem,4vw,2.5rem);letter-spacing:-.055em;margin:0}
body[data-page="profile"] .profile-person{display:flex;align-items:center;gap:15px;margin-bottom:26px}
body[data-page="profile"] .profile-avatar{width:62px;height:62px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:1.3rem;font-weight:850;color:#fff;background:#6578e8}
body[data-page="profile"] .profile-person p{color:var(--qmuted);margin:4px 0 0}
body[data-page="profile"] .profile-fields{display:grid;gap:22px}
body[data-page="profile"] .profile-fields label{display:grid;gap:8px;font-size:.88rem;font-weight:740}
body[data-page="profile"] .profile-fields input,body[data-page="profile"] .profile-fields select{width:100%;height:48px;padding:0 14px;border:1px solid var(--qline);border-radius:13px;background:#0b1015;color:var(--qink);font:inherit}
body[data-page="profile"] .profile-colors{display:flex;gap:12px;flex-wrap:wrap;padding:4px}
body[data-page="profile"] .profile-color{width:34px;height:34px;border:2px solid transparent;border-radius:50%;cursor:pointer}
body[data-page="profile"] .profile-color[aria-pressed="true"]{outline:2px solid var(--qink);outline-offset:3px}
body[data-page="profile"] .profile-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
body[data-page="profile"] .profile-status{min-height:24px;margin:14px 0 0;color:var(--qmuted)}
.profile-color[data-color="0"],.account-avatar[data-color="0"],body[data-page="profile"] .profile-avatar[data-color="0"]{background:#6578e8;color:#fff}
.profile-color[data-color="1"],.account-avatar[data-color="1"],body[data-page="profile"] .profile-avatar[data-color="1"]{background:#20aa8a;color:#fff}
.profile-color[data-color="2"],.account-avatar[data-color="2"],body[data-page="profile"] .profile-avatar[data-color="2"]{background:#e28a3c;color:#fff}
.profile-color[data-color="3"],.account-avatar[data-color="3"],body[data-page="profile"] .profile-avatar[data-color="3"]{background:#cf5574;color:#fff}
.profile-color[data-color="4"],.account-avatar[data-color="4"],body[data-page="profile"] .profile-avatar[data-color="4"]{background:#8e5abf;color:#fff}
.profile-color[data-color="5"],.account-avatar[data-color="5"],body[data-page="profile"] .profile-avatar[data-color="5"]{background:#2f91cc;color:#fff}
.profile-color[data-color="6"],.account-avatar[data-color="6"],body[data-page="profile"] .profile-avatar[data-color="6"]{background:#709d3f;color:#fff}
.profile-color[data-color="7"],.account-avatar[data-color="7"],body[data-page="profile"] .profile-avatar[data-color="7"]{background:#53616b;color:#fff}
.account-display-name{max-width:min(28vw,180px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--qink);font-size:.83rem;font-weight:700}
.site-nav .account-identity{display:flex;align-items:center;gap:10px;margin-left:auto}
.account-identity [data-account-avatar]{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#6578e8;color:#fff;text-decoration:none;font-size:.78rem;font-weight:850}
.site-nav:has(.account-identity:not([hidden])) .nav-cta{margin-left:0}
@media(max-width:680px){.account-display-name{max-width:120px;font-size:.75rem}.account-identity [data-account-avatar]{width:33px;height:33px}}
@media(max-width:620px){body[data-page="profile"] main{padding-top:26px}body[data-page="profile"] .profile-card{padding:20px;border-radius:19px}body[data-page="profile"] .profile-head{align-items:flex-start;flex-direction:column}}