/*

  UNIQR main stylesheet map

  - Foundation, layout, buttons, forms, alerts

  - Public home, marketing hero, and static/public builder

  - Dashboard tables, projects, and QR builder shell

  - QR rendering engine, templates, ornaments, and export surfaces

  - Navigation, support, profile, OPS admin, analytics, and bulk QR polish



  Detailed component ownership and duplicate audit:

  docs/style-map.md



  Duplicate policy for this file:

  - The final QR builder sidebar owner is the bottom "QR builder preview rail" section.

  - Older v6-v15 builder/nav blocks are historical override passes. Keep shared visual refinements,

    but avoid reintroducing layout ownership there.

*/

:root{

  --bg:#edf3f8;

  --card:#ffffff;

  --card-soft:#f6f9fc;

  --text:#102a4c;

  --muted:#64748b;

  --line:#d7e2ee;

  --line-strong:#b9c8da;

  --brand:#3366e8;

  --brand-dark:#214fc7;

  --brand-soft:#eaf1ff;

  --success:#dcfce7;

  --error:#fee2e2;

  --warning:#fff7df;

  --shadow:0 18px 44px rgba(15,42,76,.08);

  --radius:28px;

  --radius-md:20px;

  --radius-sm:14px;

}

*{box-sizing:border-box}

[hidden]{display:none!important}

html{scroll-behavior:smooth;overflow-x:hidden}

body{margin:0;font-family:Inter,Arial,sans-serif;background:linear-gradient(180deg,#f3f7fb 0%,#edf3f8 100%);color:var(--text);overflow-x:hidden}

a{color:var(--brand);text-decoration:none}

a:hover{text-decoration:none}

img{max-width:100%;display:block}

button,input,select,textarea{font:inherit}

code{background:rgba(206, 227, 252, 0.1);padding:4px 8px;border-radius:10px}

.container{width:min(1280px,calc(100% - 36px));margin:0 auto}

.page-shell{padding:28px 0 48px}

.site-header{position:sticky;top:0;z-index:50;padding:18px 0;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(183,198,217,.55)}

.nav,.footer-inner,.card-header,.dashboard-hero,.hero-actions,.filter-actions,.toggle-line,.project-card-top,.project-meta,.asset-meta,.auth-divider,.or-row,.download-row,.download-stack{display:flex;align-items:center;gap:12px; justify-content: space-between;}

.nav{justify-content:space-between}

.brand-wrap{display:flex;align-items:center;gap:12px}

.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#2f64ea,#79a5ff);position:relative;box-shadow:0 10px 24px rgba(51,102,232,.25)}

.brand-mark::before,.brand-mark::after{content:"";position:absolute;inset:9px;border-radius:10px;border:3px solid #fff}

.brand-mark::after{inset:15px;border-width:2px}

.brand{font-size:1.25rem;font-weight:900;color:var(--text);letter-spacing:-.02em}

.nav-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.nav-link{padding:10px 12px;border-radius:12px;color:var(--text);font-weight:700}

.nav-link:hover,.nav-link.active{background:var(--brand-soft);color:var(--brand)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:14px 18px;border-radius:16px;border:1px solid transparent;background:#f3f6fa;color:var(--text);font-weight:800;line-height:1.1;cursor:pointer;transition:.18s ease}

.btn:hover{transform:translateY(-1px)}

.btn:active{transform:translateY(0)}

.btn-sm{min-height:42px;padding:10px 14px;border-radius:13px;font-size:.95rem}

.btn-primary{background:linear-gradient(180deg,#4372f1,#3366e8);color:#fff;box-shadow:0 10px 20px rgba(51,102,232,.22)}

.btn-primary:hover{background:linear-gradient(180deg,#3263e7,#2553ca)}

.btn-outline{background:#fff;border-color:var(--line-strong)}

.btn-outline:hover{background:#f8fbff}

.btn-secondary{background:var(--brand-soft);color:var(--brand)}

.btn-ghost{background:transparent;border-color:var(--line)}

.full{width:100%}

.link-danger{color:#c63b3b}

input,select,textarea{width:100%;padding:14px 16px;border:1px solid var(--line-strong);border-radius:16px;background:#fff;color:var(--text);outline:none;transition:border-color .16s ease, box-shadow .16s ease}

input:focus,select:focus,textarea:focus{border-color:#8aaaff;box-shadow:0 0 0 4px rgba(51,102,232,.12)}

textarea{resize:vertical;min-height:110px}

label{display:grid;gap:8px;font-weight:800;color:var(--text)}

.small-label{font-size:.9rem}

.small-text{font-size:.94rem;color:var(--muted)}

.muted{color:var(--muted)}

h1,h2,h3{margin:0 0 10px;letter-spacing:-.03em}

p{margin:0 0 12px}

main{min-height:calc(100vh - 84px)}

.card,.hero-card,.auth-card,.stat-card,.pricing-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

.card{padding:24px}

.inset{background:#fbfdff}

.hero,.stats-grid,.grid,.dashboard-grid,.project-grid,.asset-grid,.logo-library{display:grid;gap:18px;margin-bottom: 10px;}

.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}

.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}

.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}

.hero{grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);align-items:center;padding:12px 0 10px}

.public-builder-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);gap:22px;align-items:start;padding:8px 0 12px}

.hero-copy{padding:18px 6px 18px 0}

.public-builder-copy{gap:18px; padding:18px 6px 0 0}

.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:#e8f0ff;color:var(--brand);border-radius:999px;font-size:.85rem;font-weight:900;margin-bottom:16px; width:170px}

.hero-copy h1{font-size:clamp(2.3rem,4vw,4.15rem);line-height:1.02;max-width:12ch;margin-bottom:14px}

.public-builder-copy h1{font-size:clamp(2.1rem,4vw,3.55rem);line-height:1.03;max-width:12ch;margin:0}

.hero-copy p{font-size:1.06rem;line-height:1.65;color:var(--muted);max-width:60ch}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

.hero-card{padding:20px;background:linear-gradient(180deg,#fff,#f8fbff)}

.public-builder-card{padding:18px;background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)}

.public-builder-shell{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:18px;align-items:start}

.public-builder-form{display:grid;gap:16px}

.public-builder-form label{font-size:.96rem}

.public-builder-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

.public-builder-colors input[type="color"]{width:44px;height:34px;min-width:44px;border-radius:10px;padding:3px}

.public-color-control{gap:7px;padding:9px;border:1px solid #d8e4f4;border-radius:14px;background:#fbfdff}

.public-color-title{font-size:.86rem;color:#34506f;font-weight:800;line-height:1.2}

.public-color-chip{display:flex;align-items:center;gap:8px;min-height:40px}

.public-color-chip span{font-size:.78rem;color:#607896;font-weight:800}

.public-template-block{display:grid;gap:12px}

.public-logo-control,

.public-3d-control{

  display:grid;

  gap:12px;

  padding:12px;

  border:1px solid #d8e4f4;

  border-radius:14px;

  background:#fbfdff;

}



.public-collapsible-control{

  display:block;

}



.public-collapsible-control summary{

  list-style:none;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  cursor:pointer;

  font-weight:900;

}



.public-collapsible-control summary::-webkit-details-marker{

  display:none;

}



.public-collapsible-control summary i{

  transition:transform .16s ease;

}



.public-collapsible-control[open] summary{

  margin-bottom:12px;

}



.public-collapsible-control[open] summary i{

  transform:rotate(180deg);

}



.public-3d-options,

.qr-3d-options{

  display:grid;

  gap:12px;

}



.public-3d-options[hidden],

.qr-3d-options[hidden]{

  display:none!important;

}



.public-logo-ranges{

  gap:10px;

  margin:0;

}



.public-logo-preview{

  min-height:58px;

  padding:10px;

}



.public-3d-fields{

  gap:10px;

  margin:0;

}



.public-3d-panel-head{

  display:grid;

  gap:3px;

}



.public-3d-panel-head h2{

  margin:0;

  font-size:1.08rem;

}



.public-3d-panel-head p{

  margin:0;

  font-size:.82rem;

}



.public-3d-color-grid{

  margin:0;

}



.public-3d-fields label{

  font-size:.84rem;

}



.public-3d-toggle-grid{

  display:grid;

  grid-template-columns:1fr;

  gap:8px;

}



.public-size-control{display:grid;gap:8px;padding:10px 12px;border:1px solid #d8e4f4;border-radius:14px;background:#fbfdff}

.public-size-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.9rem;font-weight:900;color:#34506f}

.public-size-control .range-value{padding:4px 8px;border-radius:999px;background:#eef4ff;color:#3366e8;font-size:.78rem;line-height:1}

.public-template-head h2{margin:0 0 4px}

.public-template-head p{margin:0}

.public-template-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}

.public-builder-preview{display:grid;gap:12px;padding:8px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#fbfdff 0%,#eef4ff 100%);position:sticky;top:18px;align-self:start}

.public-preview-canvas{min-height:460px !important;margin:0 auto}

.public-download-row{display:flex;gap:10px;flex-wrap:wrap}

.public-builder-note{padding:18px 20px;display:grid;gap:14px;border-radius:24px; margin-top: 10px;margin-bottom: 15px;background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)}

.public-builder-note strong{font-size:1.05rem}

.public-builder-note p{margin:6px 0 0}

.public-home-points{margin-top:18px}

.fake-panel{padding:18px;border-radius:24px;background:#f7faff;border:1px solid var(--line);display:grid;gap:16px}

.panel-top,.template-strip,.hero-example-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.chip{padding:10px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:800;color:var(--text)}

.chip.active{border-color:#9cb6ff;background:#edf3ff;color:var(--brand)}

.input-shell{padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line-strong);color:#7a8798;font-size:1.04rem}

.toggle-row{display:flex;align-items:center;gap:12px;padding-top:4px}

.toggle{width:58px;height:32px;border-radius:999px;background:#d7e4f8;position:relative}

.toggle::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:999px;background:#fff;box-shadow:0 3px 8px rgba(15,42,76,.18)}

.toggle.active{background:#3467eb}.toggle.active::after{left:30px}

.qr-thumb{width:92px;height:92px;border-radius:18px;background:linear-gradient(180deg,#fff,#f9fbff);border:1px solid var(--line);position:relative;overflow:hidden}

.qr-thumb::before,.qr-thumb::after,.example-qr::before,.example-qr::after{content:"";position:absolute;background:#1a2231}

.qr-thumb::before,.example-qr::before{inset:16px;background:repeating-linear-gradient(90deg,#1a2231 0 8px,#fff 8px 12px),repeating-linear-gradient(180deg,#1a2231 0 8px,#fff 8px 12px);background-blend-mode:multiply}

.qr-thumb::after,.example-qr::after{width:18px;height:18px;left:12px;top:12px;border:4px solid #1a2231;background:#fff;box-shadow:48px 0 0 0 #fff, 48px 0 0 4px #1a2231, 0 48px 0 0 #fff, 0 48px 0 4px #1a2231}

.qr-thumb.active{border-color:#8fb0ff;box-shadow:0 0 0 3px rgba(51,102,232,.12)}

.home-example-panel{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:24px;background:#fff;display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}

.example-qr{width:120px;height:120px;border-radius:26px;background:#fff;position:relative;border:8px solid #111827;overflow:hidden}

.example-copy{display:grid;gap:10px}

.hero-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}

.hero-kpi{padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--line)}

.hero-kpi strong{display:block;font-size:1.55rem;margin-bottom:6px}

.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}

.stat-card{padding:22px}

.stat-num{display:block;font-size:2rem;font-weight:900;margin-bottom:8px}

.stat-card-strong{background:linear-gradient(180deg,#fff,#eff5ff)}

.auth-wrap{display:grid;place-items:center;min-height:74vh}

.auth-card{width:min(640px,100%);padding:30px}

.auth-card form,.auth-card-inner{display:grid;gap:16px}

.auth-social{display:flex;justify-content:center;align-items:center;gap:12px}

.social-btn{background:#fff;border-color:var(--line-strong);justify-content:center;padding-inline:16px;min-width:min(100%,280px)}

.social-icon{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-weight:900;background:#eef4ff;color:var(--brand)}

.or-row{justify-content:center;color:var(--muted);font-weight:800;margin:2px 0}

.or-row::before,.or-row::after{content:"";flex:1;height:1px;background:var(--line)}

.alert{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:14px;margin-bottom:16px;border:1px solid transparent}

.alert[hidden]{display:none!important}

.alert-message{min-width:0}

.alert-close{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:999px;background:rgba(255,255,255,.72);color:currentColor;font-size:1.35rem;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0}

.alert-close:hover{background:rgba(255,255,255,.95)}

.alert.success{background:var(--success);color:#175c37;border-color:#b7ebc8}

.alert.error{background:var(--error);color:#9b2929;border-color:#f3b7b7}

.control-hero-asset{grid-column:1 / -1}

.control-hero-preview{width:100%;max-width:none;height:180px;object-fit:cover;border-radius:14px}

.table-wrap{overflow:auto;margin-top:10px;padding:6px 4px 2px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)}

table{width:100%;border-collapse:separate;border-spacing:0}

thead th{padding:18px 18px 16px;border-bottom:1px solid var(--line);font-size:.83rem;letter-spacing:.08em;text-transform:uppercase;color:#64748b;text-align:left;white-space:nowrap}

tbody td{padding:18px;vertical-align:top;border-bottom:1px solid #e7eef8;line-height:1.35}

tbody tr:last-child td{border-bottom:none}

tbody tr:hover td{background:#fbfdff}

tbody td.actions{white-space:nowrap}

tbody td.actions a{display:inline-flex;align-items:center;margin-right:14px}

tbody td code{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:#f2f6fd;color:#0f172a;font-size:.86rem}

th,td{padding:16px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}

th{font-size:.88rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

.actions{display:flex;flex-wrap:wrap;gap:10px}

/* Dashboard, project management, and QR builder base layout */

.dashboard-hero{justify-content:space-between;padding:26px 28px;margin-bottom:18px}

.dashboard-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:20px}

.project-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px}

.project-create-box{padding:16px;border:1px solid var(--line);border-radius:20px;background:#f8fbff;display:grid;gap:10px;align-self:start;max-width:280px}

.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,250px));gap:14px;align-content:start}

.project-card{padding:18px;border:1px solid var(--line);border-radius:20px;background:#fff;display:grid;gap:12px;max-width:250px}

.project-card.active{border-color:#9ab3ff;box-shadow:0 0 0 3px rgba(52,103,235,.1)}

.project-header-compact{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}

.project-count-chip{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;background:#f3f7ff;border:1px solid var(--line);font-size:.88rem;font-weight:800;color:var(--brand)}

.project-accordion{border:1px solid var(--line);border-radius:20px;background:#fbfdff;margin-bottom:16px;overflow:hidden}

.project-accordion summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;cursor:pointer;font-weight:800}

.project-accordion summary::-webkit-details-marker{display:none}

.project-accordion-note{font-size:.9rem;color:var(--muted);font-weight:700}

.project-create-inline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 18px 18px;border-top:1px solid var(--line)}

.project-create-inline label{font-size:.95rem}

.projects-panel{margin-bottom:28px}

.projects-accordion{border:1px solid var(--line);border-radius:24px;background:#fbfdff;overflow:hidden}

.projects-accordion-summary{list-style:none;cursor:pointer;padding:18px 20px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)}

.projects-accordion-summary::-webkit-details-marker{display:none}

.projects-accordion-body{display:grid;gap:18px;padding:0 0 4px}

.project-create-inline-compact{padding:0 20px 18px;border-top:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end}

.project-create-action{display:flex;align-items:end;justify-content:flex-start}

.project-create-btn{min-height:42px !important;padding:10px 16px !important;border-radius:14px !important;width:auto !important;min-width:132px}

.project-grid-compact{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;padding-top:8px;margin:10px;}

.project-card-compact{max-width:none;padding:18px;gap:12px;margin:0}

.project-card-compact h3{font-size:1.05rem;margin-bottom:4px}

.project-card-compact .btn{min-height:42px}

.project-card-top{align-items:flex-start}

.project-meta{justify-content:flex-start;gap:14px;color:#334155}

.project-card .btn.btn-secondary{margin-top:2px}

.project-card-wide{border-radius:24px;background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)}

.project-summary-line{margin-top:4px}

.project-editor{display:grid;gap:14px;padding-top:6px}

.project-editor-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}

.project-editor-actions{justify-content:flex-start;flex-wrap:wrap}

.project-member-picker{display:grid;gap:10px;min-width:0}

.field-label{font-size:.95rem;font-weight:800;color:var(--text)}

.field-label-with-help{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}

.field-help-link{display:inline-grid;place-items:center;width:24px;height:24px;min-width:24px;border:1px solid #bdd0f3;border-radius:999px;background:#eef4ff;color:#3366e8;font-size:.86rem;font-weight:900;line-height:1;text-decoration:none}

.field-help-link:hover,.field-help-link:focus{background:#e4edff;color:#214fc5;text-decoration:none;box-shadow:0 0 0 3px rgba(51,102,232,.12);outline:none}

.ops-home-template-form{display:grid;gap:14px}

.ops-home-template-form input[type="color"]{width:68px;height:44px;min-width:68px;padding:4px;border-radius:12px}

.ops-template-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

.ops-template-pick{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;align-items:start;padding:10px;border:1px solid #d8e4f4;border-radius:16px;background:#fbfdff;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}

.ops-template-pick:hover{transform:translateY(-1px);border-color:#aecaef}

.ops-template-pick input[type="checkbox"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.ops-template-check{display:grid;place-items:center;width:22px;height:22px;border:1.5px solid #a9bad3;border-radius:8px;background:#fff}

.ops-template-check::after{content:"";width:8px;height:5px;border-left:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(-45deg);margin-top:-2px}

.ops-template-pick input[type="checkbox"]:checked + .ops-template-check{border-color:#3366e8;background:#3366e8;box-shadow:0 0 0 3px rgba(51,102,232,.12)}

.ops-template-pick input[type="checkbox"]:checked + .ops-template-check::after{border-color:#fff}

.ops-template-pick:has(input[type="checkbox"]:checked){border-color:#8daeff;box-shadow:0 0 0 3px rgba(52,103,235,.10)}

.ops-template-pick.is-disabled{opacity:.52;cursor:not-allowed}

.ops-template-pick-thumb{grid-column:2;display:grid;place-items:center;min-height:86px;border:1px solid #e0e8f5;border-radius:12px;background:#fff;padding:6px}

.ops-template-pick-thumb .template-exact-thumb,.ops-template-pick-thumb img{width:76px;max-width:100%;aspect-ratio:1 / 1;object-fit:contain;border-radius:10px}

.ops-template-pick-copy{grid-column:1 / -1;display:grid;gap:2px;min-width:0}

.ops-template-pick-copy strong{font-size:.86rem;line-height:1.15}

.ops-template-pick-copy small{font-size:.74rem;color:var(--muted);overflow-wrap:anywhere}

.ops-template-default-row{grid-column:1 / -1;display:flex;align-items:center;gap:7px;font-size:.76rem;color:var(--muted);font-weight:800}

.ops-template-default-row input[type="radio"]{width:16px;height:16px;min-width:16px;margin:0;padding:0;accent-color:#3366e8}

.ops-template-pick-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

.member-checklist{display:grid;gap:10px;max-height:240px;overflow:auto;padding:12px;border:1px solid var(--line);border-radius:18px;background:#fff}

.member-check{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid #d9e4f3;border-radius:16px;background:#f8fbff;font-weight:700;color:var(--text);cursor:pointer}

.member-check input[type="checkbox"]{margin-top:3px;flex:0 0 auto}

.member-check span{display:grid;gap:3px;min-width:0}

.member-check strong{font-size:.96rem;line-height:1.2}

.member-check small{font-size:.84rem;color:var(--muted);line-height:1.25;word-break:break-word}

.project-assignment-list{display:flex;flex-wrap:wrap;gap:8px}

.project-assignee-pill{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:#eef4ff;border:1px solid #d7e3ff;color:#2643a0;font-size:.86rem;font-weight:800}

.empty-panel{padding:22px;border:1px dashed #c7d4e4;border-radius:20px;background:#fbfdff;color:var(--muted)}

.dashboard-filters{display:grid;grid-template-columns:minmax(0,1fr) 240px 120px auto;gap:12px;margin-bottom:18px;align-items:end; width: 96%;}

.filter-actions{align-items:end;justify-content:flex-start; /*flex-wrap:wrap*/}

.pagination-row{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px;flex-wrap:wrap}

.pagination-count{font-weight:800;color:var(--muted)}

.btn.disabled{pointer-events:none;opacity:.55}

details > summary.card-header{
  list-style:none;
  cursor:pointer;
  margin-bottom:14px;
}

details > summary.card-header::-webkit-details-marker{
  display:none;
}

details:not([open]) > summary.card-header{
  margin-bottom:0;
}

.ops-accordion-panel{
  border:1px solid #d8e4f4;
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.66);
}

.ops-ticket-list-shell{
  display:grid;
  gap:12px;
}
.grow{min-width:0}

.design-box{padding:22px;background:#f5f8fd;border:1px solid var(--line);border-radius:24px;display:grid;gap:18px}

.design-section{display:grid;gap:14px}

.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

.control-card,.color-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;display:grid;gap:12px}

.control-card h3,.color-card h3{font-size:1rem;margin:0}

.color-row{display:flex;gap:10px;align-items:center}

.native-color{width:60px;min-width:60px;height:50px;padding:4px;border-radius:14px}

.hex-input{text-transform:uppercase}

.swatch-row{display:flex;gap:8px;flex-wrap:wrap}

.swatch-btn{width:30px;height:30px;border-radius:999px;border:2px solid #d0d9e5;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}

.swatch-btn.saved{outline:2px solid #93b5ff}

.checkbox-row,.inline-check,.toggle-line{font-weight:700;color:var(--text)}

.checkbox-row,.inline-check{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:8px;border:1.5px solid #98abc6;background:#fff;display:grid;place-items:center;cursor:pointer;transition:.16s ease;position:relative;flex:0 0 auto}

input[type="checkbox"]::after{content:"";width:11px;height:6px;border-left:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(-45deg) translateY(-1px);opacity:0}

input[type="checkbox"]:checked{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px rgba(51,102,232,.12)}

input[type="checkbox"]:checked::after{border-color:#fff;opacity:1}

.toggle-line{justify-content:space-between;padding:14px 16px;border-radius:18px;background:#fff;border:1px solid var(--line)}

.gradient-fields{display:none}.gradient-fields.show{display:grid}

.template-thumb-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}

.template-thumb{padding:12px;border:1px solid var(--line);background:#fff;border-radius:20px;display:grid;gap:10px;justify-items:center;cursor:pointer}

.template-thumb.active{border-color:#99b6ff;box-shadow:0 0 0 3px rgba(52,103,235,.1)}

.template-thumb strong{font-size:.82rem;text-align:center}

.template-mock{width:110px;height:110px;border:2px solid #283549;border-radius:24px;display:grid;place-items:center;position:relative;overflow:hidden;background:#fff}

.mock-core{width:54px;height:54px;background:repeating-linear-gradient(90deg,#111 0 6px,#fff 6px 9px),repeating-linear-gradient(180deg,#111 0 6px,#fff 6px 9px);background-blend-mode:multiply}

.mock-circle,.mock-orbit,.mock-dot-ring{border-radius:999px}

.mock-round-badge{border-radius:999px;box-shadow:inset 0 0 0 10px #fff}

.mock-scan-label{height:110px;padding-bottom:30px}.mock-scan-label .mock-label{display:block}

.mock-burst{border-radius:999px;background:repeating-conic-gradient(from 0deg,#111 0 2deg,transparent 2deg 10deg),#fff}

.mock-rounded-card{border-radius:32px}

.mock-orbit{box-shadow:inset 0 0 0 6px #111,inset 0 0 0 14px #fff,inset 0 0 0 16px #111}

.mock-dot-ring::before,.mock-line-frame::before{content:"";position:absolute;inset:12px;border-radius:999px;border:2px dotted #111}

.mock-line-frame::before{border-style:solid;inset:10px}

.mock-label{display:none;position:absolute;bottom:8px;padding:4px 10px;background:#111;color:#fff;border-radius:10px;font-size:.65rem;font-weight:900}

.logo-grid{align-items:start}

.logo-library{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

.logo-library-item{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;text-align:center;align-content:start}

.logo-library-item.active{border-color:#99b6ff;background:#edf3ff}

.logo-library-item img{width:100%;height:56px;object-fit:contain}

.logo-preview-box{display:grid;gap:10px;align-items:start;padding:12px;background:#fff;border:1px solid var(--line);border-radius:16px;min-height:126px}

.logo-thumb{width:92px;height:92px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}

.logo-empty{padding:18px;border:1px dashed #cbd6e4;border-radius:16px;background:#fff;color:var(--muted)}

.qr-view-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:16px}

.qr-canvas{min-height:300px;display:grid;place-items:center;position:relative;overflow:hidden}

.qr-canvas.preview{min-height:420px;background:#fff;border-radius:24px;padding:18px;border:1px solid var(--line)}

.qr-frame{--frame-color:#111827;--frame-fill:#ffffff;--ornament-color:#111827;--frame-border:10px;--ornament-opacity:.18;background:var(--frame-fill);border-radius:24px;padding:20px}

.qr-frame::before,.qr-frame::after{content:"";position:absolute;inset:0;pointer-events:none}

.qr-frame::before{opacity:var(--ornament-opacity)}

.qr-frame.frame-none{padding:6px;background:#fff;border-radius:22px}

.qr-frame.frame-circle{border-radius:999px;border:var(--frame-border) solid var(--frame-color);padding:28px}

.qr-frame.frame-round-badge{border-radius:999px;border:2px solid var(--frame-color);padding:34px;box-shadow:inset 0 0 0 12px #fff}

.qr-frame.frame-burst{border-radius:999px;padding:32px}

.qr-frame.frame-burst::after{inset:8px;border-radius:999px;border:10px solid var(--frame-color)}

.qr-frame.frame-rounded-card{border-radius:36px;border:2px solid var(--frame-color);padding:26px;background:linear-gradient(180deg,#fff,#f8fbff)}

.qr-frame.frame-scan-label{padding:24px 24px 64px;border-radius:30px;border:3px solid var(--frame-color)}

.qr-frame.frame-orbit{border-radius:999px;padding:30px;box-shadow:inset 0 0 0 8px var(--frame-color), inset 0 0 0 16px #fff, inset 0 0 0 18px var(--frame-color)}

.qr-frame.frame-dot-ring{border-radius:999px;padding:32px}

.qr-frame.frame-dot-ring::after{inset:10px;border-radius:999px;border:3px dotted var(--frame-color)}

.qr-frame-label{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;background:var(--frame-color);color:#fff;padding:8px 18px;border-radius:12px;font-weight:900;letter-spacing:.04em;z-index:4}

.frame-none .qr-frame-label,.frame-circle .qr-frame-label,.frame-round-badge .qr-frame-label,.frame-burst .qr-frame-label,.frame-rounded-card .qr-frame-label,.frame-orbit .qr-frame-label,.frame-dot-ring .qr-frame-label{display:none}

.ornament-dots::before{background-image:radial-gradient(circle at center,var(--ornament-color) 1.5px,transparent 1.6px);background-size:16px 16px}

.ornament-lines::before{background-image:repeating-linear-gradient(135deg,var(--ornament-color) 0 2px,transparent 2px 10px)}

.ornament-rings::before{background-image:repeating-radial-gradient(circle at center,var(--ornament-color) 0 2px,transparent 2px 14px)}

.ornament-sunburst::before{background-image:repeating-conic-gradient(from 0deg,var(--ornament-color) 0 2deg,transparent 2deg 9deg)}

.ornament-grid::before{background-image:linear-gradient(var(--ornament-color) 1px,transparent 1px),linear-gradient(90deg,var(--ornament-color) 1px,transparent 1px);background-size:18px 18px}

.preview-toolbar,.download-row,.download-stack{flex-wrap:wrap}

.download-row{margin-top:12px}

.hint-card{padding:14px 16px;margin-bottom: 12px;border-radius:16px;background:var(--warning);border:1px solid #f0dfad;color:#7a5a00}

.short-link-grid{align-items:start}

.short-link-grid label{display:grid;gap:8px}

.short-link-card{display:grid;gap:8px;align-content:start;min-height:100%;background:#f6f9ff;border-color:#d8e4fb;color:var(--text)}

.short-link-card strong{color:var(--text)}

.copy-box input{margin-top:14px}

.wrap-anywhere{overflow-wrap:anywhere}

/* Shared footer, asset cards, pricing, support, and auxiliary screens */

.site-footer{border-top:1px solid var(--line);padding:24px 0;margin-top:32px}

.footer-inner{justify-content:space-between;flex-wrap:wrap}

.footer-socials{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}

.footer-social-link{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--text);box-shadow:0 8px 18px rgba(15,42,76,.06)}

.footer-social-link:hover{background:var(--brand-soft);color:var(--brand);border-color:#9cb6ff}

.footer-social-link i,.footer-social-link span{font-size:1rem}

.footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px 16px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.9rem;
  font-weight:800;
}

.footer-links a{
  color:#34506f;
  text-decoration:none;
}

.footer-links a:hover{
  color:var(--brand);
}

.trust-page{
  display:grid;
  gap:22px;
}

.trust-hero{
  padding:34px;
  border-radius:30px;
  background:linear-gradient(135deg,#ffffff 0%,#f4f8ff 62%,#edf8f6 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.trust-hero h1{
  margin:10px 0 12px;
  color:var(--text);
  font-size:clamp(2.25rem,5vw,4.4rem);
  line-height:1;
  max-width:13ch;
}

.trust-hero p{
  max-width:72ch;
  margin:0;
  color:#34506f;
  line-height:1.7;
  font-size:1.05rem;
}

.trust-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.trust-card{
  padding:24px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,42,76,.07);
}

.trust-card h2{
  margin:0 0 10px;
  color:var(--text);
  font-size:1.25rem;
}

.trust-card p,
.trust-card li{
  color:#45627f;
  line-height:1.65;
}

.trust-card p{
  margin:0;
}

.trust-card ul{
  margin:0;
  padding-left:20px;
}

.trust-full{
  grid-column:1 / -1;
}

.trust-body{
  display:grid;
  gap:14px;
}

.trust-body h2{
  margin:12px 0 0;
  color:var(--text);
  font-size:1.35rem;
}

.trust-body h2:first-child{
  margin-top:0;
}

.trust-body p,
.trust-body ul,
.trust-body ol{
  margin:0;
}

.asset-grid{gap:12px}

.asset-card{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:18px;background:#fff}

.asset-swatch{width:44px;height:44px;border-radius:12px;border:1px solid #ccd8e8}

.asset-logo{width:56px;height:56px;object-fit:contain}

.style-asset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}

.style-asset-card{display:grid;gap:14px;padding:16px;border:1px solid var(--line);border-radius:20px;background:#fff}

.style-asset-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}

.style-asset-logo{width:56px;height:56px;object-fit:contain;border:1px solid var(--line);border-radius:14px;padding:8px;background:#fff}

.style-asset-actions{display:flex;flex-wrap:wrap;gap:10px}

.brand-kit-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}

.brand-add-form{display:grid;gap:14px}

.brand-add-form .small-text{margin-top:-4px}

.saved-swatch-palette{display:flex;gap:10px;flex-wrap:wrap}

.saved-swatch-palette button{width:42px;height:42px;border-radius:14px;border:2px solid #d4dce8;cursor:pointer}

.pricing-wrap{display:grid;place-items:center;padding-top:20px}

.pricing-card{width:min(700px,100%);padding:30px}

.feature-list{padding-left:18px;line-height:1.9}

.paypal-box,.placeholder-paypal{margin-top:18px;padding:16px;background:#f6f8fc;border:1px dashed #bcc8d8;border-radius:18px}

.mt-sm{margin-top:8px}.mt-lg{margin-top:20px}

.preview-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}

.preview-heading > div{min-width:0}

.public-preview-toggle-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.public-preview-3d-toggle{width:min(220px,100%);flex:0 0 220px;padding:10px 12px;border-radius:14px}
.public-3d-loop-toggle{width:max-content;max-width:100%;padding:8px 2px}
.qr-export-stage{width:420px;height:420px;padding:18px;background:#fff;display:grid;place-items:center}

.qr-export-stage .qr-canvas{width:100%;height:100%}

.preview-note{font-size:.9rem;color:var(--muted)}

.testimonial-section,.partner-section{margin-top:18px}

.home-testimonial-showcase{
  margin:36px min(-18px, calc((1280px - 100vw) / 2)) 0;
  padding:58px max(18px, calc((100vw - 1280px) / 2 + 18px)) 64px;
  background:
    radial-gradient(circle at 18% 18%,rgba(57,109,251,.20),transparent 28%),
    linear-gradient(135deg,#e7f5ff 0%,#f2f7ff 45%,#ddf3ff 100%);
  border-block:1px solid #cbe0f6;
  overflow:hidden;
}

.testimonial-section-head{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:16px;
  margin-bottom:34px;
}

.testimonial-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border:1px solid #9fc0ff;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#1858ff;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.testimonial-kicker i{font-size:.42rem}
.testimonial-title-wrap{max-width:780px}

.testimonial-title-markup h2{
  margin:0;
  color:#061b3d;
  font-size:clamp(2.3rem,5vw,4.35rem);
  line-height:1.02;
  letter-spacing:-.03em;
}

.testimonial-title-markup h2 strong,
.testimonial-title-markup h2 em,
.testimonial-title-markup h2 span{
  color:#2f7df7;
  font-style:normal;
}

.testimonial-intro-markup,
.testimonial-intro-markup p{
  margin:14px auto 0;
  max-width:720px;
  color:#3b5574;
  font-size:1.08rem;
  line-height:1.6;
}

.testimonial-marquee{overflow:hidden;position:relative;padding:6px 0}

.testimonial-track{display:flex;gap:24px;width:max-content;animation:testimonial-marquee 38s linear infinite}

.testimonial-marquee:hover .testimonial-track{animation-play-state:paused}

.testimonial-card{width:min(360px,82vw);min-height:250px;padding:28px;border:1px solid rgba(156,182,255,.45);border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 18px 42px rgba(15,42,76,.12);display:grid;gap:18px}

.testimonial-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}

.testimonial-card-top .fa-quote-right{color:#d8e8ff;font-size:2rem}

.testimonial-card p{margin:0;color:#0b2345;line-height:1.65;font-size:1rem}

.testimonial-stars{font-size:1rem;letter-spacing:.08em;color:#ffb000}

.testimonial-author{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding-top:16px;border-top:1px solid #e4edf8}

.testimonial-avatar{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#1858ff,#48a2ff);color:#fff;font-weight:900;font-size:.86rem}

.testimonial-author strong{display:block;color:#071d3b;line-height:1.2}

.testimonial-author small{display:block;margin-top:4px;color:#536b89;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.partner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}

.partner-card{min-height:92px;padding:18px;border:1px solid var(--line);border-radius:20px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(15,42,76,.05)}

.partner-card:hover{border-color:#9cb6ff;background:#fbfdff}

.partner-card img{max-width:100%;max-height:48px;object-fit:contain}

.partner-marquee{overflow:hidden;position:relative;padding:6px 0;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}

.partner-track{display:flex;gap:14px;width:max-content;animation:partner-marquee 30s linear infinite}

.partner-marquee:hover .partner-track{animation-play-state:paused}

.partner-track .partner-card{min-width:168px;padding:14px 18px;text-align:center}

.partner-card-fallback{gap:10px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)}

.partner-placeholder-mark{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#eef4ff;color:var(--brand);font-size:.82rem;font-weight:800;letter-spacing:.06em}

.inline-mini-form{display:flex;justify-content:flex-end;margin:-4px 0 10px}

.ops-inline-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}

.ops-inline-links a{font-size:.9rem;font-weight:700}

.payment-document-shell{padding:20px}

.payment-document-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}

.payment-document{padding:28px;display:grid;gap:20px}

.payment-document-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;flex-wrap:wrap}

.payment-document-meta{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:12px}

.payment-document-stat{padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;display:grid;gap:6px}

.payment-document-stat span{font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700}

.payment-document-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

.payment-document-block{padding:18px;border:1px solid var(--line);border-radius:20px;background:#fff}

.payment-document-block h2{font-size:1rem;margin:0 0 10px}

.payment-document-block p{margin:0 0 8px}

.payment-document-note{background:#fbfdff}

.payment-document-table-wrap{margin-top:0}

.status-pill{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:.82rem;font-weight:800;text-transform:capitalize}

.status-pill.success{background:#dcfce7;color:#17603a}

.status-pill.warning{background:#fff7df;color:#8a6100}

.status-pill.error{background:#fee2e2;color:#a12727}

.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes testimonial-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@keyframes partner-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:1280px){.template-thumb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (max-width:1100px){.hero{grid-template-columns:1fr}.stats-grid,.dashboard-stats,.grid.three,.grid.four,.control-grid,.brand-kit-grid,.payment-document-grid{grid-template-columns:1fr}.project-layout,.qr-view-grid{grid-template-columns:1fr}.dashboard-filters{grid-template-columns:1fr}.template-thumb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.logo-library{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-kpis{grid-template-columns:1fr}.payment-document-meta{grid-template-columns:1fr}}

@media (max-width:760px){.container{width:min(100% - 22px,1280px)}.site-header{padding:14px 0}.nav{align-items:flex-start;gap:14px;flex-direction:column}.nav-links{width:100%}.nav-link,.nav-links .btn{width:100%;justify-content:center}.grid.two,.auth-social{grid-template-columns:1fr}.template-thumb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-grid,.logo-library,.partner-grid{grid-template-columns:1fr}.hero-copy h1{max-width:none}.home-example-panel{grid-template-columns:1fr;justify-items:center;text-align:center}.asset-card{grid-template-columns:1fr}.btn{width:100%}.actions .btn,.filter-actions .btn,.hero-actions .btn,.cta-row .btn{width:auto;min-width:unset}.actions,.filter-actions,.hero-actions,.cta-row,.footer-inner{flex-direction:column;align-items:stretch}.dashboard-hero,.card-header,.payment-document-head,.payment-document-toolbar{align-items:flex-start;flex-direction:column}.qr-export-stage{width:320px;height:320px}.testimonial-card{width:min(280px,84vw)}}

@media (max-width:760px){
  .home-testimonial-showcase{
    margin-inline:-11px;
    padding:42px 14px 48px;
  }

  .testimonial-title-markup h2{
    font-size:2.35rem;
  }

  .testimonial-intro-markup,
  .testimonial-intro-markup p{
    font-size:.98rem;
  }

  .testimonial-card{
    width:min(310px,84vw);
    padding:22px;
  }

  .footer-links{
    justify-content:flex-start;
  }

  .trust-grid{
    grid-template-columns:1fr;
  }

  .trust-hero,
  .trust-card{
    padding:22px;
    border-radius:22px;
  }
}



/* QR rendering and builder iteration history (v6-v9). Keep visual refinements here, not layout ownership. */



/* v6 layout polish */

.tab-row{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}

.tab-btn{appearance:none;border:1px solid var(--line-strong);background:#fff;color:var(--text);padding:10px 14px;border-radius:12px;font-weight:800;cursor:pointer;line-height:1.15}

.tab-btn.active{background:var(--brand-soft);border-color:#9cb6ff;color:var(--brand)}

.type-section{display:none}

.type-section.show{display:grid;gap:16px}

.field-group{padding:18px;border:1px solid var(--line);border-radius:22px;background:#fbfdff}

select{background-image:linear-gradient(45deg,transparent 50%, var(--text) 50%),linear-gradient(135deg, var(--text) 50%, transparent 50%);background-position:calc(100% - 20px) calc(50% - 3px),calc(100% - 14px) calc(50% - 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px;appearance:none}

.checkbox-row input[type="checkbox"], .toggle-line input[type="checkbox"], .inline-check input[type="checkbox"]{margin:0}

.checkbox-row{align-items:flex-start}

.toggle-line{gap:16px;align-items:center}

.toggle-line > span{min-width:0;flex:1}

.btn + .btn{margin-left:10px; margin-right: 10px;}

.actions,.hero-actions,.filter-actions,.download-row,.download-stack,.cta-row{gap:12px}

.actions .btn,.download-row .btn,.hero-actions .btn,.filter-actions .btn{margin:0}

.home-qr-gallery{display:grid;grid-template-columns:repeat(4,92px);gap:14px;margin-bottom:16px}

.home-qr-gallery .qr-thumb{width:92px;height:92px}

.home-example-panel{grid-template-columns:160px 1fr;min-height:220px}

.example-qr{width:160px;height:160px;border:10px solid #0f1a2d;border-radius:38px;background:#fff;position:relative;overflow:hidden;box-shadow:0 16px 34px rgba(15,42,76,.08)}

.example-qr::before{inset:22px;background:radial-gradient(circle at 50% 50%, #f4c542 0 16%, transparent 17%),repeating-linear-gradient(90deg,#111827 0 7px,#fff 7px 10px),repeating-linear-gradient(180deg,#111827 0 7px,#fff 7px 10px);background-blend-mode:normal,multiply,multiply;border-radius:20px}

.example-qr::after{width:22px;height:22px;left:16px;top:16px;border:5px solid #111827;background:#fff;box-shadow:74px 0 0 0 #fff,74px 0 0 5px #111827,0 74px 0 0 #fff,0 74px 0 5px #111827}

.qr-canvas{width:100%;min-width:0}

.qr-canvas.preview{min-height:360px;padding:16px;display:grid;place-items:center;overflow:hidden}

.qr-canvas.preview .qr-frame{width:min(100%,360px);height:min(100%,360px);margin:0 auto}

.qr-frame{width:100%;max-width:360px;aspect-ratio:1/1;margin:0 auto;display:grid;place-items:center;position:relative;overflow:hidden}

.qr-frame.preview-safe{overflow:hidden}

.qr-frame-inner{position:relative;z-index:3;display:grid;place-items:center;width:var(--qr-size, 280px);height:var(--qr-size, 280px);max-width:100%;max-height:100%;margin:0 auto}

.qr-frame-inner svg,.qr-frame-inner canvas{width:100% !important;height:100% !important;max-width:100%;max-height:100%;display:block}

.qr-frame.frame-circle,.qr-frame.frame-round-badge,.qr-frame.frame-burst,.qr-frame.frame-orbit,.qr-frame.frame-dot-ring{border-radius:50%}

.qr-frame.frame-circle{padding:7%;border:var(--outline-thickness,10px) solid var(--frame-color)}

.qr-frame.frame-round-badge{padding:8%;border:var(--outline-thickness,2px) solid var(--frame-color);box-shadow:inset 0 0 0 12px #fff}

.qr-frame.frame-burst{padding:9%}

.qr-frame.frame-burst::before{inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--ornament-color) 0 2deg,transparent 2deg 8deg);opacity:.22}

.qr-frame.frame-burst::after{inset:3%;border-radius:50%;border:var(--outline-thickness,10px) solid var(--frame-color)}

.qr-frame.frame-rounded-card{padding:8%;border:var(--outline-thickness,2px) solid var(--frame-color)}

.qr-frame.frame-scan-label{padding:8% 8% 20%;border:3px solid var(--frame-color)}

.qr-frame.frame-orbit{padding:8%;box-shadow:inset 0 0 0 8px var(--frame-color), inset 0 0 0 18px #fff, inset 0 0 0 20px var(--frame-color)}

.qr-frame.frame-dot-ring{padding:9%}

.qr-frame.frame-dot-ring::after{inset:4%;border-radius:50%;border:3px dotted var(--frame-color)}

.qr-frame.frame-none{padding:3%;border-radius:24px}

.qr-frame.frame-circle::before,.qr-frame.frame-round-badge::before,.qr-frame.frame-burst::before,.qr-frame.frame-orbit::before,.qr-frame.frame-dot-ring::before{border-radius:50%}

.qr-export-stage{width:min(100%,520px);aspect-ratio:1/1;padding:12px;border-radius:28px;border:1px solid var(--line);overflow:hidden}

.qr-export-stage .qr-canvas{width:100%;height:100%;min-height:auto}

.qr-export-stage .qr-frame{max-width:100%;width:100%;height:100%}

.info-list.stack-list{display:grid;gap:10px;min-width:0}

.info-list.stack-list > div{overflow-wrap:anywhere}

.qr-view-grid{grid-template-columns:minmax(0,540px) minmax(0,1fr);align-items:start}

.profile-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px}

.profile-side{padding:24px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,#f9fbff,#eff5ff);display:grid;justify-items:center;align-content:start;gap:16px}

.profile-avatar{width:112px;height:112px;border-radius:999px;background:linear-gradient(135deg,#4372f1,#6ea1ff);color:#fff;display:grid;place-items:center;font-size:2.2rem;font-weight:900;box-shadow:0 12px 28px rgba(51,102,232,.22)}

.profile-side .btn{width:100%}

.profile-card form{display:grid;gap:16px}

.profile-card .actions{margin-top:6px}

.profile-help{padding:14px 16px;border-radius:18px;background:#f8fbff;border:1px solid var(--line);color:var(--muted)}

.preview-note{margin:0;color:var(--muted)}

.home-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

.home-proof .chip{justify-content:center}

@media (max-width:1100px){.qr-view-grid{grid-template-columns:1fr}.profile-shell{grid-template-columns:1fr}.home-qr-gallery{grid-template-columns:repeat(4,1fr)}.home-example-panel{grid-template-columns:1fr;justify-items:center;text-align:center}}

@media (max-width:760px){.tab-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.home-qr-gallery{grid-template-columns:repeat(2,1fr)}.home-qr-gallery .qr-thumb{width:100%;height:auto;aspect-ratio:1/1}.control-grid{grid-template-columns:1fr}.qr-canvas.preview{min-height:300px}.qr-canvas.preview .qr-frame{width:min(100%,280px);height:min(100%,280px)}.qr-export-stage{width:100%;max-width:320px;margin:0 auto}.download-row .btn{flex:1 1 calc(50% - 6px);min-width:0}.profile-side{justify-items:start}.example-qr{width:140px;height:140px}}





/* v6.1 alignment and preview fixes */

.checkbox-row,.inline-check,.toggle-line{display:flex;align-items:center;gap:12px;line-height:1.35;min-height:32px}

.checkbox-row.small-text{font-weight:700}

.checkbox-row input[type="checkbox"],.toggle-line input[type="checkbox"],.inline-check input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:30px;height:30px;min-width:30px;border-radius:10px;border:2px solid #bfd0ea;background:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);cursor:pointer;position:relative;flex:0 0 30px}

.checkbox-row input[type="checkbox"]::after,.toggle-line input[type="checkbox"]::after,.inline-check input[type="checkbox"]::after{content:"";width:8px;height:14px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg) scale(.75);opacity:0;transition:opacity .15s ease,transform .15s ease}

.checkbox-row input[type="checkbox"]:checked,.toggle-line input[type="checkbox"]:checked,.inline-check input[type="checkbox"]:checked{background:linear-gradient(180deg,#5d88ff,#3f6df1);border-color:#3f6df1;box-shadow:0 8px 18px rgba(63,109,241,.18)}

.checkbox-row input[type="checkbox"]:checked::after,.toggle-line input[type="checkbox"]:checked::after,.inline-check input[type="checkbox"]:checked::after{opacity:.4;transform:rotate(45deg) scale(1)}

.toggle-line{justify-content:space-between;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:#fff}

.toggle-line span{flex:1 1 auto;padding-right:10px}

select{min-height:58px;display:block;line-height:1.2}

.template-thumb-grid{align-items:stretch}

.template-thumb{align-content:start;grid-template-rows:auto 1fr;min-height:228px}

.template-mock{width:min(100%,120px);aspect-ratio:1/1;height:auto;margin:0 auto;border:3px solid #344055}

.mock-core{width:52%;height:52%;background:repeating-linear-gradient(90deg,#111 0 6px,#fff 6px 9px),repeating-linear-gradient(180deg,#111 0 6px,#fff 6px 9px)}

.qr-canvas.preview{min-height:420px;padding:22px;display:grid;place-items:center}

.qr-canvas.preview .qr-frame{width:min(100%,380px);height:min(100%,380px);aspect-ratio:1/1;display:grid;place-items:center;position:relative;overflow:hidden;isolation:isolate}

.qr-canvas.preview .qr-frame svg,.qr-canvas.preview .qr-frame canvas,.qr-export-stage .qr-frame svg,.qr-export-stage .qr-frame canvas{width:100% !important;height:100% !important;max-width:100%;max-height:100%;object-fit:contain;border-radius:inherit;position:relative;z-index:3}

.qr-frame{display:grid;place-items:center;position:relative;overflow:hidden;isolation:isolate}

.qr-frame::before,.qr-frame::after{z-index:1}

.qr-frame > *{position:relative;z-index:3}

.qr-frame.frame-none{border:2px solid var(--frame-color);padding:4%;background:var(--frame-fill)}

.qr-frame.frame-circle{border:8px solid var(--frame-color);padding:9%;background:var(--frame-fill)}

.qr-frame.frame-round-badge{border:3px solid var(--frame-color);padding:11%;background:var(--frame-fill);box-shadow:inset 0 0 0 12px #fff}

.qr-frame.frame-burst{padding:10%;background:var(--frame-fill)}

.qr-frame.frame-burst::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--ornament-color) 0 2deg,transparent 2deg 8deg);opacity:.24;z-index:1}

.qr-frame.frame-burst::after{content:"";position:absolute;inset:4%;border-radius:50%;border:8px solid var(--frame-color);z-index:2}

.qr-frame.frame-scan-label{padding:9% 9% 22%;background:var(--frame-fill)}

.qr-frame.frame-scan-label::after{content:"";position:absolute;inset:0;border:4px solid var(--frame-color);border-radius:30px;z-index:2}

.qr-frame.frame-rounded-card{padding:8%;background:linear-gradient(180deg,#fff,#f8fbff);border:3px solid var(--frame-color)}

.qr-frame.frame-orbit{padding:10%;background:var(--frame-fill);box-shadow:inset 0 0 0 8px var(--frame-color), inset 0 0 0 18px #fff, inset 0 0 0 20px var(--frame-color)}

.qr-frame.frame-dot-ring{padding:10%;background:var(--frame-fill);border:3px solid var(--frame-color)}

.qr-frame.frame-dot-ring::after{content:"";position:absolute;inset:4%;border-radius:50%;border:3px dotted var(--frame-color);z-index:2}

.qr-frame.ornament-none::before{opacity:0}

.qr-frame.ornament-dots::before,.qr-frame.ornament-lines::before,.qr-frame.ornament-rings::before,.qr-frame.ornament-sunburst::before,.qr-frame.ornament-grid::before{content:"";position:absolute;inset:8%;border-radius:inherit;opacity:.18;z-index:1}

.qr-frame.frame-circle.ornament-dots::before,.qr-frame.frame-circle.ornament-lines::before,.qr-frame.frame-circle.ornament-rings::before,.qr-frame.frame-circle.ornament-sunburst::before,.qr-frame.frame-circle.ornament-grid::before,.qr-frame.frame-round-badge.ornament-dots::before,.qr-frame.frame-round-badge.ornament-lines::before,.qr-frame.frame-round-badge.ornament-rings::before,.qr-frame.frame-round-badge.ornament-sunburst::before,.qr-frame.frame-round-badge.ornament-grid::before,.qr-frame.frame-burst.ornament-dots::before,.qr-frame.frame-burst.ornament-lines::before,.qr-frame.frame-burst.ornament-rings::before,.qr-frame.frame-burst.ornament-sunburst::before,.qr-frame.frame-burst.ornament-grid::before,.qr-frame.frame-orbit.ornament-dots::before,.qr-frame.frame-orbit.ornament-lines::before,.qr-frame.frame-orbit.ornament-rings::before,.qr-frame.frame-orbit.ornament-sunburst::before,.qr-frame.frame-orbit.ornament-grid::before,.qr-frame.frame-dot-ring.ornament-dots::before,.qr-frame.frame-dot-ring.ornament-lines::before,.qr-frame.frame-dot-ring.ornament-rings::before,.qr-frame.frame-dot-ring.ornament-sunburst::before,.qr-frame.frame-dot-ring.ornament-grid::before{border-radius:50%}

.qr-frame-label{bottom:14px;padding:7px 16px;border-radius:999px;white-space:nowrap}

@media (max-width:760px){.template-thumb{min-height:190px}.template-mock{width:min(100%,100px)}.checkbox-row,.inline-check,.toggle-line{align-items:flex-start}.toggle-line{padding:12px 14px}.qr-canvas.preview .qr-frame{width:min(100%,300px);height:min(100%,300px)}}





/* v6.2 preview cleanup */

.checkbox-row,.inline-check{align-items:center;gap:10px}

.checkbox-row.small-text{font-size:.95rem}

.checkbox-row input[type="checkbox"],.inline-check input[type="checkbox"]{width:24px;height:24px;min-width:24px;flex-basis:24px;border-radius:8px;border:2px solid #b6c9ea;background:linear-gradient(180deg,#ffffff,#eef4ff);box-shadow:none;display:grid;place-items:center}

.checkbox-row input[type="checkbox"]::after,.inline-check input[type="checkbox"]::after{width:7px;height:12px;border-right:3px solid #fff;border-bottom:3px solid #fff;margin-top:-1px}

.checkbox-row input[type="checkbox"]:checked,.inline-check input[type="checkbox"]:checked{background:linear-gradient(180deg,#5a86ff,#3568ee);border-color:#3568ee;box-shadow:0 8px 16px rgba(53,104,238,.20)}

.toggle-line{gap:14px}

.toggle-line input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:54px;height:32px;min-width:54px;border-radius:999px;border:1px solid #bfd0ea;background:#dce7fb;position:relative;cursor:pointer;box-shadow:none;display:block}

.toggle-line input[type="checkbox"]::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:999px;background:#fff;box-shadow:0 2px 6px rgba(16,42,76,.18);border:none;transform:none;opacity:1}

.toggle-line input[type="checkbox"]:checked{background:linear-gradient(180deg,#5a86ff,#3568ee);border-color:#3568ee}

.toggle-line input[type="checkbox"]:checked::after{left:25px}



.pricing-grid-wrap{gap:20px}

.pricing-hero{display:grid;gap:10px;justify-items:center;text-align:center;margin-bottom:8px}
.pricing-billing-toggle{display:inline-flex;gap:6px;padding:6px;border:1px solid #cfe0f5;border-radius:999px;background:#fff;box-shadow:0 10px 24px rgba(16,42,76,.08)}
.pricing-billing-btn{border:0;border-radius:999px;background:transparent;color:#33506f;font-weight:900;padding:10px 18px;cursor:pointer}
.pricing-billing-btn.active{background:linear-gradient(180deg,#5a86ff,#3568ee);color:#fff;box-shadow:0 8px 18px rgba(57,109,251,.22)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:min(1120px,100%)}
.pricing-tier{width:auto;padding:26px;display:grid;gap:18px;align-content:start}

.pricing-tier.active{border-color:#9db8ff;box-shadow:0 0 0 3px rgba(67,114,241,.1),var(--shadow)}

.pricing-tier-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}

.plan-current-chip{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;background:#eef4ff;color:var(--brand);font-size:.86rem;font-weight:900}

.feature-list-tight{display:grid;gap:10px;padding-left:18px;margin:0}

.pricing-inline-form{display:block}
.inline-form{display:inline}
.link-button{border:0;background:transparent;color:var(--brand);font:inherit;font-weight:800;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.support-card{max-width:860px;margin-inline:auto}

.support-subject,.support-message{grid-column:1/-1}

.support-message textarea{min-height:220px}



@media (max-width:1100px){

  .pricing-grid{grid-template-columns:1fr}

}



.template-thumb-grid{align-items:stretch}

.template-thumb{align-items:center;justify-content:flex-start;padding:16px 12px 14px;min-height:168px}

.template-mock{width:108px;height:108px}

.template-thumb strong{display:block;text-align:center;min-height:48px}



.qr-canvas.preview{min-height:460px;padding:18px}

.qr-canvas.preview .qr-frame{width:min(100%,520px);height:auto;aspect-ratio:1/1}

.qr-frame{position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:var(--frame-fill)}

.qr-frame-inner{position:relative;z-index:3;width:100%;height:100%;display:grid;place-items:center}

.qr-frame-inner svg,.qr-frame-inner canvas{width:100% !important;height:100% !important;max-width:100%;max-height:100%;object-fit:contain;border-radius:inherit;display:block}

.qr-frame > canvas,.qr-frame > svg{display:none !important}

.qr-frame::before,.qr-frame::after{content:"";position:absolute;pointer-events:none}

.qr-frame.ornament-none::before{display:none}

.qr-frame.frame-none{border:none;padding:3%;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}

.qr-frame.frame-none::after{display:none}

.qr-frame.frame-circle,.qr-frame.frame-round-badge,.qr-frame.frame-burst,.qr-frame.frame-orbit,.qr-frame.frame-dot-ring{border-radius:50%}

.qr-frame.frame-circle{padding:10%;border:8px solid var(--frame-color)}

.qr-frame.frame-circle::before,.qr-frame.frame-round-badge::before,.qr-frame.frame-burst::before,.qr-frame.frame-orbit::before,.qr-frame.frame-dot-ring::before{inset:8%;border-radius:50%;opacity:.18;background:none}

.qr-frame.frame-round-badge{padding:12%;border:6px solid var(--frame-color);box-shadow:inset 0 0 0 16px #fff}

.qr-frame.frame-burst{padding:11%}

.qr-frame.frame-burst::after{inset:2.5%;border-radius:50%;border:8px solid var(--frame-color);z-index:2}

.qr-frame.frame-rounded-card{padding:10%;border:4px solid var(--frame-color);border-radius:36px;background:linear-gradient(180deg,#fff,#f8fbff)}

.qr-frame.frame-scan-label{padding:10% 10% 22%;border-radius:32px;background:#fff}

.qr-frame.frame-scan-label::after{inset:0;border:4px solid var(--frame-color);border-radius:32px;z-index:2}

.qr-frame.frame-orbit{padding:12%;box-shadow:inset 0 0 0 8px var(--frame-color), inset 0 0 0 18px #fff, inset 0 0 0 20px var(--frame-color)}

.qr-frame.frame-dot-ring{padding:12%;border:4px solid var(--frame-color)}

.qr-frame.frame-dot-ring::after{inset:4%;border-radius:50%;border:4px dotted var(--frame-color);z-index:2}

.qr-frame.frame-circle.ornament-dots::before,.qr-frame.frame-round-badge.ornament-dots::before,.qr-frame.frame-burst.ornament-dots::before,.qr-frame.frame-orbit.ornament-dots::before,.qr-frame.frame-dot-ring.ornament-dots::before{background-image:radial-gradient(circle at center,var(--ornament-color) 1.3px,transparent 1.8px);background-size:18px 18px}

.qr-frame.frame-circle.ornament-lines::before,.qr-frame.frame-round-badge.ornament-lines::before,.qr-frame.frame-burst.ornament-lines::before,.qr-frame.frame-orbit.ornament-lines::before,.qr-frame.frame-dot-ring.ornament-lines::before{background-image:repeating-conic-gradient(from 0deg,var(--ornament-color) 0 1.1deg,transparent 1.1deg 8deg)}

.qr-frame.frame-circle.ornament-rings::before,.qr-frame.frame-round-badge.ornament-rings::before,.qr-frame.frame-burst.ornament-rings::before,.qr-frame.frame-orbit.ornament-rings::before,.qr-frame.frame-dot-ring.ornament-rings::before{background-image:repeating-radial-gradient(circle at center,var(--ornament-color) 0 1.5px,transparent 1.5px 12px)}

.qr-frame.frame-circle.ornament-sunburst::before,.qr-frame.frame-round-badge.ornament-sunburst::before,.qr-frame.frame-burst.ornament-sunburst::before,.qr-frame.frame-orbit.ornament-sunburst::before,.qr-frame.frame-dot-ring.ornament-sunburst::before{background-image:repeating-conic-gradient(from 0deg,var(--ornament-color) 0 2deg,transparent 2deg 8deg)}

.qr-frame.frame-circle.ornament-grid::before,.qr-frame.frame-round-badge.ornament-grid::before,.qr-frame.frame-burst.ornament-grid::before,.qr-frame.frame-orbit.ornament-grid::before,.qr-frame.frame-dot-ring.ornament-grid::before{background-image:linear-gradient(var(--ornament-color) 1px,transparent 1px),linear-gradient(90deg,var(--ornament-color) 1px,transparent 1px);background-size:18px 18px}

.qr-frame.frame-circle.ornament-dots::before,.qr-frame.frame-circle.ornament-lines::before,.qr-frame.frame-circle.ornament-rings::before,.qr-frame.frame-circle.ornament-sunburst::before,.qr-frame.frame-circle.ornament-grid::before,.qr-frame.frame-round-badge.ornament-dots::before,.qr-frame.frame-round-badge.ornament-lines::before,.qr-frame.frame-round-badge.ornament-rings::before,.qr-frame.frame-round-badge.ornament-sunburst::before,.qr-frame.frame-round-badge.ornament-grid::before,.qr-frame.frame-burst.ornament-dots::before,.qr-frame.frame-burst.ornament-lines::before,.qr-frame.frame-burst.ornament-rings::before,.qr-frame.frame-burst.ornament-sunburst::before,.qr-frame.frame-burst.ornament-grid::before,.qr-frame.frame-orbit.ornament-dots::before,.qr-frame.frame-orbit.ornament-lines::before,.qr-frame.frame-orbit.ornament-rings::before,.qr-frame.frame-orbit.ornament-sunburst::before,.qr-frame.frame-orbit.ornament-grid::before,.qr-frame.frame-dot-ring.ornament-dots::before,.qr-frame.frame-dot-ring.ornament-lines::before,.qr-frame.frame-dot-ring.ornament-rings::before,.qr-frame.frame-dot-ring.ornament-sunburst::before,.qr-frame.frame-dot-ring.ornament-grid::before{-webkit-mask:radial-gradient(circle, transparent 0 58%, #000 59% 100%);mask:radial-gradient(circle, transparent 0 58%, #000 59% 100%)}

.qr-frame.frame-rounded-card.ornament-dots::before,.qr-frame.frame-scan-label.ornament-dots::before,.qr-frame.frame-none.ornament-dots::before{inset:4%;background-image:radial-gradient(circle at center,var(--ornament-color) 1.2px,transparent 1.7px);background-size:18px 18px;opacity:.16}

.qr-frame.frame-rounded-card.ornament-lines::before,.qr-frame.frame-scan-label.ornament-lines::before,.qr-frame.frame-none.ornament-lines::before{inset:4%;background-image:repeating-linear-gradient(135deg,var(--ornament-color) 0 2px,transparent 2px 10px);opacity:.12}

.qr-frame.frame-rounded-card.ornament-rings::before,.qr-frame.frame-scan-label.ornament-rings::before,.qr-frame.frame-none.ornament-rings::before{inset:4%;background-image:repeating-radial-gradient(circle at center,var(--ornament-color) 0 1.5px,transparent 1.5px 12px);opacity:.14}

.qr-frame.frame-rounded-card.ornament-sunburst::before,.qr-frame.frame-scan-label.ornament-sunburst::before,.qr-frame.frame-none.ornament-sunburst::before{inset:4%;background-image:repeating-conic-gradient(from 0deg,var(--ornament-color) 0 2deg,transparent 2deg 8deg);opacity:.12}

.qr-frame.frame-rounded-card.ornament-grid::before,.qr-frame.frame-scan-label.ornament-grid::before,.qr-frame.frame-none.ornament-grid::before{inset:4%;background-image:linear-gradient(var(--ornament-color) 1px,transparent 1px),linear-gradient(90deg,var(--ornament-color) 1px,transparent 1px);background-size:18px 18px;opacity:.12}

.qr-frame.frame-rounded-card.ornament-dots::before,.qr-frame.frame-rounded-card.ornament-lines::before,.qr-frame.frame-rounded-card.ornament-rings::before,.qr-frame.frame-rounded-card.ornament-sunburst::before,.qr-frame.frame-rounded-card.ornament-grid::before,.qr-frame.frame-scan-label.ornament-dots::before,.qr-frame.frame-scan-label.ornament-lines::before,.qr-frame.frame-scan-label.ornament-rings::before,.qr-frame.frame-scan-label.ornament-sunburst::before,.qr-frame.frame-scan-label.ornament-grid::before,.qr-frame.frame-none.ornament-dots::before,.qr-frame.frame-none.ornament-lines::before,.qr-frame.frame-none.ornament-rings::before,.qr-frame.frame-none.ornament-sunburst::before,.qr-frame.frame-none.ornament-grid::before{-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:16%;border-radius:inherit}



.home-qr-gallery .qr-thumb,.example-qr{background:#fff}

.home-qr-gallery .qr-thumb::before,.home-qr-gallery .qr-thumb::after,.example-qr::before,.example-qr::after{display:none}

.home-qr-gallery .qr-thumb,.example-qr{background-image:url('hero-qr.svg');background-position:center;background-repeat:no-repeat;background-size:72% 72%}

.home-qr-gallery .qr-thumb{border-radius:18px;border:1px solid var(--line);box-shadow:none}

.home-qr-gallery .qr-thumb.active{border-color:#8fb0ff;box-shadow:0 0 0 3px rgba(51,102,232,.12)}

.example-qr{width:132px;height:132px;border-radius:26px;border:6px solid #111827;background-size:74% 74%}



.qr-view-grid .qr-canvas.preview .qr-frame{width:min(100%,560px)}

@media (max-width:760px){.template-thumb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.template-thumb{min-height:154px}.template-mock{width:88px;height:88px}.qr-canvas.preview{min-height:360px}.qr-canvas.preview .qr-frame{width:min(100%,320px)}}



/* v6.3 frame/rendering cleanup */

.checkbox-row,.inline-check{display:flex;align-items:center;gap:10px}

.checkbox-row input[type="checkbox"],.inline-check input[type="checkbox"]{margin:0}

.template-thumb-grid{grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:16px}

.template-thumb{display:grid;grid-template-rows:1fr auto;align-content:start;justify-items:center;text-align:center;min-height:180px;padding:14px 12px;border-radius:24px}

.template-mock{width:108px;height:108px;aspect-ratio:1/1;margin:6px auto 12px;border:4px solid var(--frame-color,#334155);border-radius:28px;position:relative;background:#fff;display:grid;place-items:center;overflow:hidden}

.template-mock .mock-core{width:44px;height:44px;background:repeating-linear-gradient(90deg,#111827 0 7px,#fff 7px 10px),repeating-linear-gradient(180deg,#111827 0 7px,#fff 7px 10px);background-blend-mode:multiply}

.mock-circle,.mock-round-badge,.mock-burst,.mock-orbit,.mock-dot-ring{border-radius:50%}

.mock-none{border-radius:18px}.mock-scan-label{padding-bottom:22px}.mock-scan-label .mock-label{display:block;position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px}.template-mock .mock-label{display:none}



.qr-export-stage,.qr-canvas.preview{overflow:hidden}

.qr-canvas.preview{display:grid;place-items:center;align-content:center;justify-items:center;min-height:430px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:28px}

.qr-export-stage{width:min(100%,520px);aspect-ratio:1/1;display:grid;place-items:center;align-content:center;justify-items:center;margin:0 auto;padding:16px;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden}

.qr-frame{position:relative;display:grid;place-items:center;width:var(--frame-box-size,360px);height:var(--frame-box-size,360px);max-width:100%;max-height:100%;aspect-ratio:1/1;margin:auto;overflow:hidden;isolation:isolate;background:var(--frame-fill,#fff);--outline-thickness:8px;--frame-inner-pad:7%;--qr-inner-scale:.76}

.qr-frame-inner{position:relative;z-index:3;width:calc(100% * var(--qr-inner-scale));height:calc(100% * var(--qr-inner-scale));display:grid;place-items:center}

.qr-frame-inner svg,.qr-frame-inner canvas{width:100% !important;height:100% !important;max-width:100%;max-height:100%;object-fit:contain;display:block}

.qr-frame > canvas,.qr-frame > svg{display:none !important}

.qr-frame::before,.qr-frame::after{content:"";position:absolute;pointer-events:none;z-index:1}

.qr-frame::after{z-index:2}

.qr-frame.frame-none{border-radius:24px;box-shadow:inset 0 0 0 1px var(--line)}

.qr-frame.frame-none.outline-hidden{box-shadow:none}

.qr-frame.frame-circle,.qr-frame.frame-round-badge,.qr-frame.frame-burst,.qr-frame.frame-orbit,.qr-frame.frame-dot-ring{border-radius:50%}

.qr-frame.frame-circle::after,.qr-frame.frame-round-badge::after,.qr-frame.frame-burst::after,.qr-frame.frame-orbit::after,.qr-frame.frame-dot-ring::after{inset:0;border-radius:50%;box-shadow:inset 0 0 0 var(--outline-thickness) var(--frame-color)}

.qr-frame.outline-hidden::after{display:none}

.qr-frame.frame-round-badge{--qr-inner-scale:.68}

.qr-frame.frame-rounded-card{border-radius:36px;box-shadow:inset 0 0 0 var(--outline-thickness) var(--frame-color)}

.qr-frame.frame-rounded-card.outline-hidden{box-shadow:none}

.qr-frame.frame-scan-label{border-radius:32px;box-shadow:inset 0 0 0 var(--outline-thickness) var(--frame-color);padding-bottom:44px;--qr-inner-scale:.70}

.qr-frame.frame-scan-label.outline-hidden{box-shadow:none}

.qr-frame.frame-orbit::after{inset:0;border-radius:50%;box-shadow:inset 0 0 0 var(--outline-thickness) var(--frame-color), inset 0 0 0 calc(var(--outline-thickness) + 12px) #fff, inset 0 0 0 calc(var(--outline-thickness) + 15px) var(--frame-color)}

.qr-frame.frame-dot-ring::after{inset:0;border-radius:50%;box-shadow:inset 0 0 0 var(--outline-thickness) var(--frame-color)}

.qr-frame.frame-dot-ring:not(.outline-hidden)::before{inset:calc(var(--outline-thickness) + 10px);border-radius:50%;border:4px dotted color-mix(in srgb, var(--frame-color) 70%, white)}

.qr-frame.frame-burst:not(.outline-hidden)::before{inset:2%;border-radius:50%;background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--frame-color) 22%, transparent) 0 2deg, transparent 2deg 8deg);-webkit-mask:radial-gradient(circle, transparent 0 67%, #000 68% 100%);mask:radial-gradient(circle, transparent 0 67%, #000 68% 100%)}

.qr-frame.ornament-none::before{display:none}

.qr-frame.frame-circle.ornament-dots::before,.qr-frame.frame-round-badge.ornament-dots::before,.qr-frame.frame-burst.ornament-dots::before,.qr-frame.frame-orbit.ornament-dots::before,.qr-frame.frame-dot-ring.ornament-dots::before{inset:0;background-image:radial-gradient(circle at center,var(--ornament-color) 1.6px,transparent 2px);background-size:28px 28px;opacity:.20;-webkit-mask:radial-gradient(circle, transparent 0 62%, #000 63% calc(100% - var(--outline-thickness) - 2px), transparent calc(100% - var(--outline-thickness) + 2px));mask:radial-gradient(circle, transparent 0 62%, #000 63% calc(100% - var(--outline-thickness) - 2px), transparent calc(100% - var(--outline-thickness) + 2px))}

.qr-frame.frame-circle.ornament-lines::before,.qr-frame.frame-round-badge.ornament-lines::before,.qr-frame.frame-burst.ornament-lines::before,.qr-frame.frame-orbit.ornament-lines::before,.qr-frame.frame-dot-ring.ornament-lines::before{inset:0;background-image:repeating-conic-gradient(from 0deg,var(--ornament-color) 0 1.8deg,transparent 1.8deg 8deg);opacity:.16;-webkit-mask:radial-gradient(circle, transparent 0 62%, #000 63% calc(100% - var(--outline-thickness) - 2px), transparent calc(100% - var(--outline-thickness) + 2px));mask:radial-gradient(circle, transparent 0 62%, #000 63% calc(100% - var(--outline-thickness) - 2px), transparent calc(100% - var(--outline-thickness) + 2px))}

.qr-frame.frame-circle.ornament-rings::before,.qr-frame.frame-round-badge.ornament-rings::before,.qr-frame.frame-burst.ornament-rings::before,.qr-frame.frame-orbit.ornament-rings::before,.qr-frame.frame-dot-ring.ornament-rings::before{inset:0;background-image:repeating-radial-gradient(circle at center,var(--ornament-color) 0 1.5px,transparent 1.5px 12px);opacity:.18;-webkit-mask:radial-gradient(circle, transparent 0 62%, #000 63% calc(100% - var(--outline-thickness) - 2px), transparent calc(100% - var(--outline-thickness) + 2px));mask:radial-gradient(circle, transparent 0 62%, #000 63% calc(100% - var(--outline-thickness) - 2px), transparent calc(100% - var(--outline-thickness) + 2px))}

.qr-frame.frame-circle.ornament-sunburst::before,.qr-frame.frame-round-badge.ornament-sunburst::before,.qr-frame.frame-burst.ornament-sunburst::before,.qr-frame.frame-orbit.ornament-sunburst::before,.qr-frame.frame-dot-ring.ornament-sunburst::before{inset:0;background-image:repeating-conic-gradient(from 0deg,var(--ornament-color) 0 2deg,transparent 2deg 10deg);opacity:.12;-webkit-mask:radial-gradient(circle, transparent 0 62%, #000 63% calc(100% - var(--outline-thickness) - 2px), transparent calc(100% - var(--outline-thickness) + 2px));mask:radial-gradient(circle, transparent 0 62%, #000 63% calc(100% - var(--outline-thickness) - 2px), transparent calc(100% - var(--outline-thickness) + 2px))}

.qr-frame.frame-circle.ornament-grid::before,.qr-frame.frame-round-badge.ornament-grid::before,.qr-frame.frame-burst.ornament-grid::before,.qr-frame.frame-orbit.ornament-grid::before,.qr-frame.frame-dot-ring.ornament-grid::before{inset:0;background-image:linear-gradient(var(--ornament-color) 1px,transparent 1px),linear-gradient(90deg,var(--ornament-color) 1px,transparent 1px);background-size:20px 20px;opacity:.12;-webkit-mask:radial-gradient(circle, transparent 0 62%, #000 63% calc(100% - var(--outline-thickness) - 2px), transparent calc(100% - var(--outline-thickness) + 2px));mask:radial-gradient(circle, transparent 0 62%, #000 63% calc(100% - var(--outline-thickness) - 2px), transparent calc(100% - var(--outline-thickness) + 2px))}

.qr-frame.frame-none.ornament-dots::before,.qr-frame.frame-rounded-card.ornament-dots::before,.qr-frame.frame-scan-label.ornament-dots::before{inset:0;background-image:radial-gradient(circle at center,var(--ornament-color) 1.5px,transparent 2px);background-size:24px 24px;opacity:.18;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:12%;border-radius:inherit}

.qr-frame.frame-none.ornament-lines::before,.qr-frame.frame-rounded-card.ornament-lines::before,.qr-frame.frame-scan-label.ornament-lines::before{inset:0;background-image:repeating-linear-gradient(135deg,var(--ornament-color) 0 2px,transparent 2px 10px);opacity:.12;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:12%;border-radius:inherit}

.qr-frame.frame-none.ornament-grid::before,.qr-frame.frame-rounded-card.ornament-grid::before,.qr-frame.frame-scan-label.ornament-grid::before{inset:0;background-image:linear-gradient(var(--ornament-color) 1px,transparent 1px),linear-gradient(90deg,var(--ornament-color) 1px,transparent 1px);background-size:18px 18px;opacity:.10;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:12%;border-radius:inherit}

.qr-frame-label{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:4;background:#111827;color:#fff;font-weight:800;font-size:13px;line-height:1;padding:8px 14px;border-radius:999px;display:none}

.qr-frame.frame-scan-label .qr-frame-label{display:block}

.qr-view-grid .card.inset:first-child{min-width:0}

@media (max-width:760px){.qr-canvas.preview{min-height:320px;padding:14px}.qr-export-stage{max-width:100%;width:100%}.template-thumb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}



.qr-frame.outline-hidden.frame-circle,.qr-frame.outline-hidden.frame-round-badge,.qr-frame.outline-hidden.frame-rounded-card{border-color:transparent !important;}

.qr-frame.outline-hidden.frame-burst::after,.qr-frame.outline-hidden.frame-dot-ring::after{border-color:transparent !important;}

.qr-frame.outline-hidden.frame-orbit{box-shadow:none !important;}





/* v6.6 render fit fixes */

.qr-export-stage{width:min(100%,760px);aspect-ratio:1/1;padding:16px;border-radius:28px;border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;background:#fdfefe}

.qr-export-stage .qr-canvas,.qr-export-stage .qr-frame{width:100%;height:100%;max-width:100%;max-height:100%;display:grid;place-items:center;overflow:hidden}

.qr-canvas.preview{min-height:520px;padding:18px;display:grid;place-items:center;overflow:hidden}

.qr-canvas.preview .qr-frame{width:min(100%,520px)!important;height:min(100%,520px)!important;max-width:520px;max-height:520px;aspect-ratio:1/1;margin:0 auto;overflow:hidden}

.qr-frame{background:var(--frame-fill);box-sizing:border-box}

.qr-frame-inner{display:grid;place-items:center;overflow:visible}

.qr-frame-inner svg,.qr-frame-inner canvas{background:transparent!important;border-radius:0!important;display:block;margin:0 auto}

.qr-frame.frame-none{padding:8%;border-radius:28px;border:var(--outline-thickness,6px) solid var(--frame-color)}

.qr-frame.frame-circle{padding:12%;border:var(--outline-thickness,6px) solid var(--frame-color);border-radius:50%}

.qr-frame.frame-round-badge{padding:13%;border:var(--outline-thickness,4px) solid var(--frame-color);border-radius:50%;box-shadow:inset 0 0 0 10px #fff}

.qr-frame.frame-burst{padding:13%;border-radius:50%}

.qr-frame.frame-burst::after{inset:4%;border:var(--outline-thickness,6px) solid var(--frame-color)}

.qr-frame.frame-orbit{padding:13%;border-radius:50%;box-shadow:inset 0 0 0 var(--outline-thickness,6px) var(--frame-color), inset 0 0 0 calc(var(--outline-thickness,6px) + 10px) #fff, inset 0 0 0 calc(var(--outline-thickness,6px) + 12px) var(--frame-color)}

.qr-frame.frame-dot-ring{padding:13%;border-radius:50%;border:var(--outline-thickness,4px) solid var(--frame-color)}

.qr-frame.frame-dot-ring::after{inset:6%;border-width:max(2px, calc(var(--outline-thickness,4px) / 2))}

.qr-frame.frame-rounded-card{padding:11%;border:var(--outline-thickness,4px) solid var(--frame-color);border-radius:36px}

.qr-frame.frame-scan-label{padding:11% 11% 24%;border-radius:34px}

.qr-frame.frame-scan-label::after{border-width:var(--outline-thickness,4px)}

.qr-frame.outline-hidden{border-color:transparent!important;box-shadow:none!important}

.qr-frame.outline-hidden::after{border-color:transparent!important}

.qr-frame.outline-hidden.frame-scan-label::after{border-color:transparent!important}

.template-thumb .template-mock{width:min(100%,126px);height:auto;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}

.template-thumb .mock-core{width:44%;height:44%}

@media (max-width:760px){.qr-canvas.preview{min-height:360px}.qr-canvas.preview .qr-frame{width:min(100%,320px)!important;height:min(100%,320px)!important}.qr-export-stage{max-width:100%;width:100%}}



/* v6.7 preview/export fit cleanup */

.qr-canvas.preview{min-height:560px;display:grid;place-items:center;overflow:hidden;padding:24px;}

.qr-export-stage{width:min(100%,720px);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;padding:20px;}

.qr-canvas.preview .qr-frame,.qr-export-stage .qr-frame{margin:auto !important;max-width:100% !important;max-height:100% !important;place-self:center !important;}

.qr-frame{--qr-inner-scale:.78;--frame-inner-pad:10%;background:var(--frame-fill,#fff);contain:layout paint size;overflow:hidden;}

.qr-frame.frame-circle,.qr-frame.frame-round-badge,.qr-frame.frame-burst,.qr-frame.frame-orbit,.qr-frame.frame-dot-ring{--qr-inner-scale:.72;}

.qr-frame.frame-rounded-card{--qr-inner-scale:.76;}

.qr-frame.frame-scan-label{--qr-inner-scale:.72;}

.qr-frame-inner{width:calc(100% * var(--qr-inner-scale)) !important;height:calc(100% * var(--qr-inner-scale)) !important;max-width:calc(100% * var(--qr-inner-scale)) !important;max-height:calc(100% * var(--qr-inner-scale)) !important;place-self:center;}

.qr-frame::before{inset:10% !important;}

.qr-frame.frame-circle::after,.qr-frame.frame-round-badge::after,.qr-frame.frame-burst::after,.qr-frame.frame-orbit::after,.qr-frame.frame-dot-ring::after{inset:2.5% !important;}

.qr-frame.frame-rounded-card::after,.qr-frame.frame-scan-label::after{inset:2.5% !important;}

.template-mock .mock-core{width:56px;height:56px;}

@media (max-width:760px){.qr-canvas.preview{min-height:420px;padding:16px;}.qr-export-stage{padding:14px;}}



/* --- v6.8 preview and frame fixes --- */

.template-thumb-grid{

  grid-template-columns:repeat(auto-fit,minmax(155px,1fr)) !important;

  gap:16px !important;

}

.template-thumb{

  min-height:204px !important;

  display:grid !important;

  grid-template-rows:1fr auto !important;

  align-content:start !important;

  justify-items:center !important;

  text-align:center !important;

}

.template-thumb .template-mock{

  width:min(100%,128px) !important;

  aspect-ratio:1/1 !important;

  margin:4px auto 8px !important;

  display:grid !important;

  place-items:center !important;

  overflow:hidden !important;

}

.template-thumb .mock-core{

  width:48% !important;

  height:48% !important;

  margin:auto !important;

}

.template-thumb strong{

  align-self:end;

}



.qr-canvas.preview,

.qr-export-stage{

  display:grid !important;

  place-items:center !important;

  overflow:hidden !important;

}

.qr-canvas.preview{

  min-height:560px !important;

  padding:24px !important;

}

.qr-export-stage{

  width:min(100%,720px) !important;

  aspect-ratio:1/1 !important;

  margin:0 auto !important;

  padding:20px !important;

}



.qr-frame{

  position:relative !important;

  display:grid !important;

  place-items:center !important;

  overflow:hidden !important;

  isolation:isolate !important;

  background:var(--frame-fill, #fff) !important;

  box-sizing:border-box !important;

}

.qr-frame::before,

.qr-frame::after{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

}

.qr-frame > *{

  position:relative;

  z-index:3;

}

.qr-frame .qr-frame-inner{

  display:grid;

  place-items:center;

}

.qr-frame svg,

.qr-frame canvas,

.qr-frame img{

  display:block;

  width:100% !important;

  height:100% !important;

  max-width:100% !important;

  max-height:100% !important;

}



.qr-frame.frame-none,

.qr-frame.frame-rounded-card,

.qr-frame.frame-scan-label{

  border-radius:28px !important;

}

.qr-frame.frame-circle,

.qr-frame.frame-round-badge,

.qr-frame.frame-burst,

.qr-frame.frame-orbit,

.qr-frame.frame-dot-ring{

  border-radius:50% !important;

}

.qr-frame.frame-scan-label{

  padding-bottom:64px !important;

}

.qr-frame .qr-frame-label{

  position:absolute;

  left:0;

  right:0;

  bottom:18px;

  z-index:4;

  text-align:center;

  font-size:14px;

  letter-spacing:.16em;

  font-weight:800;

  color:var(--frame-color, #111827);

}

.qr-frame.frame-none::after,

.qr-frame.frame-circle::after,

.qr-frame.frame-round-badge::after,

.qr-frame.frame-burst::after,

.qr-frame.frame-rounded-card::after,

.qr-frame.frame-orbit::after,

.qr-frame.frame-dot-ring::after,

.qr-frame.frame-scan-label::after{

  inset:0 !important;

  border-radius:inherit !important;

  box-shadow:inset 0 0 0 var(--outline-thickness, 8px) var(--frame-color, #111827) !important;

  background:none !important;

}

.qr-frame.outline-hidden::after{

  box-shadow:none !important;

}

/* remove older extra ring effects */

.qr-frame.frame-round-badge,

.qr-frame.frame-orbit,

.qr-frame.frame-dot-ring,

.qr-frame.frame-burst{

  box-shadow:none !important;

  border:none !important;

}



/* filler patterns with custom color and density */

.qr-frame.ornament-none::before{display:none !important;}

.qr-frame.ornament-dots::before,

.qr-frame.ornament-lines::before,

.qr-frame.ornament-grid::before,

.qr-frame.ornament-rings::before,

.qr-frame.ornament-sunburst::before{

  opacity:.22;

  z-index:1;

}

.qr-frame.frame-circle.ornament-dots::before,

.qr-frame.frame-round-badge.ornament-dots::before,

.qr-frame.frame-burst.ornament-dots::before,

.qr-frame.frame-orbit.ornament-dots::before,

.qr-frame.frame-dot-ring.ornament-dots::before{

  background-image:radial-gradient(circle at center, var(--ornament-color, #cbd5e1) 1.5px, transparent 2px) !important;

  background-size:var(--ornament-size, 24px) var(--ornament-size, 24px) !important;

  -webkit-mask:radial-gradient(circle, transparent 0 62%, #000 62.5% calc(100% - var(--outline-thickness) - 3px), transparent calc(100% - var(--outline-thickness) + 3px)) !important;

  mask:radial-gradient(circle, transparent 0 62%, #000 62.5% calc(100% - var(--outline-thickness) - 3px), transparent calc(100% - var(--outline-thickness) + 3px)) !important;

}

.qr-frame.frame-circle.ornament-lines::before,

.qr-frame.frame-round-badge.ornament-lines::before,

.qr-frame.frame-burst.ornament-lines::before,

.qr-frame.frame-orbit.ornament-lines::before,

.qr-frame.frame-dot-ring.ornament-lines::before{

  background-image:repeating-conic-gradient(from 0deg, var(--ornament-color, #cbd5e1) 0 1.7deg, transparent 1.7deg 8deg) !important;

  -webkit-mask:radial-gradient(circle, transparent 0 62%, #000 62.5% calc(100% - var(--outline-thickness) - 3px), transparent calc(100% - var(--outline-thickness) + 3px)) !important;

  mask:radial-gradient(circle, transparent 0 62%, #000 62.5% calc(100% - var(--outline-thickness) - 3px), transparent calc(100% - var(--outline-thickness) + 3px)) !important;

}

.qr-frame.frame-circle.ornament-rings::before,

.qr-frame.frame-round-badge.ornament-rings::before,

.qr-frame.frame-burst.ornament-rings::before,

.qr-frame.frame-orbit.ornament-rings::before,

.qr-frame.frame-dot-ring.ornament-rings::before{

  background-image:repeating-radial-gradient(circle at center, var(--ornament-color, #cbd5e1) 0 1.5px, transparent 1.5px var(--ornament-size, 24px)) !important;

  -webkit-mask:radial-gradient(circle, transparent 0 62%, #000 62.5% calc(100% - var(--outline-thickness) - 3px), transparent calc(100% - var(--outline-thickness) + 3px)) !important;

  mask:radial-gradient(circle, transparent 0 62%, #000 62.5% calc(100% - var(--outline-thickness) - 3px), transparent calc(100% - var(--outline-thickness) + 3px)) !important;

}

.qr-frame.frame-circle.ornament-sunburst::before,

.qr-frame.frame-round-badge.ornament-sunburst::before,

.qr-frame.frame-burst.ornament-sunburst::before,

.qr-frame.frame-orbit.ornament-sunburst::before,

.qr-frame.frame-dot-ring.ornament-sunburst::before{

  background-image:repeating-conic-gradient(from 0deg, var(--ornament-color, #cbd5e1) 0 2deg, transparent 2deg 10deg) !important;

  -webkit-mask:radial-gradient(circle, transparent 0 62%, #000 62.5% calc(100% - var(--outline-thickness) - 3px), transparent calc(100% - var(--outline-thickness) + 3px)) !important;

  mask:radial-gradient(circle, transparent 0 62%, #000 62.5% calc(100% - var(--outline-thickness) - 3px), transparent calc(100% - var(--outline-thickness) + 3px)) !important;

}

.qr-frame.frame-circle.ornament-grid::before,

.qr-frame.frame-round-badge.ornament-grid::before,

.qr-frame.frame-burst.ornament-grid::before,

.qr-frame.frame-orbit.ornament-grid::before,

.qr-frame.frame-dot-ring.ornament-grid::before{

  background-image:linear-gradient(var(--ornament-color, #cbd5e1) 1px, transparent 1px), linear-gradient(90deg, var(--ornament-color, #cbd5e1) 1px, transparent 1px) !important;

  background-size:var(--ornament-size, 24px) var(--ornament-size, 24px) !important;

  -webkit-mask:radial-gradient(circle, transparent 0 62%, #000 62.5% calc(100% - var(--outline-thickness) - 3px), transparent calc(100% - var(--outline-thickness) + 3px)) !important;

  mask:radial-gradient(circle, transparent 0 62%, #000 62.5% calc(100% - var(--outline-thickness) - 3px), transparent calc(100% - var(--outline-thickness) + 3px)) !important;

}



.qr-frame.frame-none.ornament-dots::before,

.qr-frame.frame-rounded-card.ornament-dots::before,

.qr-frame.frame-scan-label.ornament-dots::before{

  background-image:radial-gradient(circle at center, var(--ornament-color, #cbd5e1) 1.5px, transparent 2px) !important;

  background-size:var(--ornament-size, 24px) var(--ornament-size, 24px) !important;

  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;

  -webkit-mask-composite:xor !important;

  mask-composite:exclude !important;

  padding:12% !important;

  border-radius:inherit !important;

}

.qr-frame.frame-none.ornament-lines::before,

.qr-frame.frame-rounded-card.ornament-lines::before,

.qr-frame.frame-scan-label.ornament-lines::before{

  background-image:repeating-linear-gradient(135deg, var(--ornament-color, #cbd5e1) 0 2px, transparent 2px calc(var(--ornament-size, 24px) / 1.7)) !important;

  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;

  -webkit-mask-composite:xor !important;

  mask-composite:exclude !important;

  padding:12% !important;

  border-radius:inherit !important;

}

.qr-frame.frame-none.ornament-grid::before,

.qr-frame.frame-rounded-card.ornament-grid::before,

.qr-frame.frame-scan-label.ornament-grid::before{

  background-image:linear-gradient(var(--ornament-color, #cbd5e1) 1px, transparent 1px), linear-gradient(90deg, var(--ornament-color, #cbd5e1) 1px, transparent 1px) !important;

  background-size:var(--ornament-size, 24px) var(--ornament-size, 24px) !important;

  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;

  -webkit-mask-composite:xor !important;

  mask-composite:exclude !important;

  padding:12% !important;

  border-radius:inherit !important;

}

.qr-frame.frame-none.ornament-rings::before,

.qr-frame.frame-rounded-card.ornament-rings::before,

.qr-frame.frame-scan-label.ornament-rings::before{

  background-image:repeating-radial-gradient(circle at center, var(--ornament-color, #cbd5e1) 0 1.5px, transparent 1.5px var(--ornament-size, 24px)) !important;

  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;

  -webkit-mask-composite:xor !important;

  mask-composite:exclude !important;

  padding:12% !important;

  border-radius:inherit !important;

}

.qr-frame.frame-none.ornament-sunburst::before,

.qr-frame.frame-rounded-card.ornament-sunburst::before,

.qr-frame.frame-scan-label.ornament-sunburst::before{

  background-image:repeating-conic-gradient(from 0deg, var(--ornament-color, #cbd5e1) 0 2deg, transparent 2deg 10deg) !important;

  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;

  -webkit-mask-composite:xor !important;

  mask-composite:exclude !important;

  padding:12% !important;

  border-radius:inherit !important;

}



@media (max-width: 760px){
  .qr-canvas.preview{min-height:400px !important;padding:16px !important;}

  .qr-export-stage{width:100% !important;padding:14px !important;}

  .template-thumb{min-height:174px !important;}

}

/* Pricing comparison refresh */
.pricing-hero-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.pricing-currency-chip{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid #cfe0f5;
  border-radius:999px;
  background:#fff;
  color:#102a4c;
  font-weight:900;
  box-shadow:0 10px 24px rgba(16,42,76,.08);
}

.pricing-grid{
  align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

.pricing-tier{
  overflow:hidden;
  gap:16px;
  padding:0;
  border-radius:24px;
  background:#fff;
}

.pricing-tier::before{
  display:none;
}

.pricing-tier.best-selling{
  border-color:#396DFB;
  transform:translateY(-8px);
}

.pricing-tier.best-selling .pricing-tier-top{
  background:linear-gradient(135deg,#eef7ff,#dff4ff 52%,#f3fbf7);
}

.pricing-recommended-ribbon{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  background:#102a4c;
  color:#fff;
  font-weight:900;
}

.pricing-tier-top{
  min-height:156px;
  padding:24px 24px 18px;
  background:#f8fbff;
  border-bottom:1px solid #e1eaf7;
}

.pricing-card-badges{
  justify-content:flex-start;
}

.pricing-card-badges .badge{
  background:#eaf1ff;
  color:#315fd8;
}

.pricing-tier-top p{
  margin-top:14px;
  min-height:46px;
}

.pricing-price-block{
  padding:20px 24px 4px;
}

.pricing-price-block h2{
  margin:0;
  color:#0f2240;
  font-size:2.1rem;
  line-height:1.05;
}

.pricing-price-block p{
  margin:8px 0 0;
  color:#5c7393;
  font-size:.9rem;
}

.pricing-action-zone{
  padding:0 24px;
  min-width:0;
}

.pricing-action-zone .btn,
.pricing-action-zone .pricing-inline-form .btn{
  width:100%;
  min-height:48px;
}

.pricing-summary-panel{
  display:grid;
  gap:8px;
  margin:4px 24px 2px;
  padding:14px;
  border-radius:18px;
  background:#f3f6fb;
}

.pricing-summary-row{
  display:grid;
  grid-template-columns:minmax(82px,auto) 1fr auto;
  align-items:center;
  gap:10px;
  min-height:34px;
  color:#102a4c;
  font-size:.92rem;
}

.pricing-summary-row.muted{
  color:#7890ad;
}

.pricing-summary-value{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:6px;
  background:#fff;
  color:#102a4c;
  font-weight:900;
  text-align:center;
}

.pricing-summary-row.muted .pricing-summary-value{
  color:#7890ad;
}

.pricing-summary-row i{
  color:#8ea1ba;
  font-size:.82rem;
}

.pricing-feature-section{
  margin:0 24px;
  padding-top:16px;
  border-top:1px solid #e1eaf7;
}

.pricing-feature-section:last-child{
  margin-bottom:24px;
}

.pricing-feature-section h3{
  margin:0 0 10px;
  color:#102a4c;
  font-size:1rem;
}

.pricing-feature-list{
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}

.pricing-feature-list li{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:10px;
  align-items:start;
  color:#102a4c;
  font-size:.92rem;
  line-height:1.35;
}

.pricing-feature-icon{
  color:#1f9d61;
  font-weight:900;
}

.pricing-feature-off{
  color:#8ea1ba !important;
}

.pricing-feature-off .pricing-feature-icon{
  color:#b7c2cf;
}

.pricing-tier .placeholder-paypal,
.pricing-tier .paypal-box{
  margin-top:0;
  border-style:solid;
  background:#f8fbff;
}

.pricing-tier .paypal-box{
  width:100%;
  max-width:100%;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.pricing-tier .paypal-box > div{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0 auto;
}

.pricing-tier .paypal-box iframe,
.pricing-tier .paypal-box div[id^="paypal-button-"] iframe{
  display:block;
  max-width:100% !important;
  margin:0 auto !important;
}

.pricing-tier .paypal-box [id^="zoid-paypal-buttons"],
.pricing-tier .paypal-box [id^="paypal-buttons"]{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

@media (max-width:1280px){
  .pricing-tier.best-selling{
    transform:none;
  }
}

@media (max-width:960px){
  .pricing-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .pricing-grid{
    grid-template-columns:1fr;
  }

  .pricing-tier-top{
    min-height:auto;
  }

  .pricing-summary-row{
    grid-template-columns:72px 1fr auto;
  }

  .pricing-price-block h2{
    font-size:1.8rem;
  }
}


/* --- v7 layout + filler pattern controls --- */

/* Legacy builder layout ownership removed; the final preview rail owns sidebar layout. */

.qr-canvas.preview{min-height:520px !important;}

.qr-frame.ornament-dots::before{background-image:radial-gradient(circle at center,var(--ornament-color,#cbd5e1) calc(var(--ornament-weight,2px) * .85),transparent calc(var(--ornament-weight,2px) + 1px)) !important;}

.qr-frame.ornament-grid::before{background-image:linear-gradient(var(--ornament-color,#cbd5e1) var(--ornament-weight,2px),transparent var(--ornament-weight,2px)),linear-gradient(90deg,var(--ornament-color,#cbd5e1) var(--ornament-weight,2px),transparent var(--ornament-weight,2px)) !important;}

.qr-frame.ornament-lines::before{background-image:repeating-linear-gradient(135deg,var(--ornament-color,#cbd5e1) 0 var(--ornament-weight,2px),transparent var(--ornament-weight,2px) calc(var(--ornament-size,24px) / 1.5)) !important;}

.qr-frame.frame-circle.ornament-lines::before,.qr-frame.frame-round-badge.ornament-lines::before,.qr-frame.frame-burst.ornament-lines::before,.qr-frame.frame-orbit.ornament-lines::before,.qr-frame.frame-dot-ring.ornament-lines::before{background-image:repeating-conic-gradient(from 0deg,var(--ornament-color,#cbd5e1) 0 calc(var(--ornament-weight,2px) * .55),transparent calc(var(--ornament-weight,2px) * .55) 8deg) !important;}

.qr-frame.ornament-rings::before{background-image:repeating-radial-gradient(circle at center,var(--ornament-color,#cbd5e1) 0 var(--ornament-weight,2px),transparent var(--ornament-weight,2px) var(--ornament-size,24px)) !important;}

.profile-avatar-img{width:110px;height:110px;border-radius:30px;object-fit:cover;border:4px solid #fff;box-shadow:0 16px 30px rgba(15,42,76,.14)}

.user-edit-form{display:grid;gap:10px;min-width:min(680px,100%)}

.mb-lg{margin-bottom:22px}.mt-lg{margin-top:22px}



/* v7.1 editor sidebar + filler alignment */

.builder-main{min-width:0}

.body-shape-grid{

  margin-top:2px;

  align-items:end;

}



.qr-canvas.preview{

  min-height:clamp(360px,52vh,620px) !important;

  padding:20px !important;

}



.qr-canvas.preview .qr-frame{

  width:min(100%,400px) !important;

  height:min(100%,400px) !important;

}



.qr-frame{

  --frame-gap-inset:12px;

  --frame-pattern-spacing:var(--ornament-size,24px);

  --frame-pattern-weight:var(--ornament-weight,2px);

}



.qr-frame.ornament-none::before{display:none !important;}



.qr-frame.ornament-dots::before,

.qr-frame.ornament-lines::before,

.qr-frame.ornament-grid::before,

.qr-frame.ornament-rings::before,

.qr-frame.ornament-sunburst::before{

  inset:0 !important;

  border-radius:inherit !important;

  opacity:.24 !important;

  background-position:center center !important;

  background-size:var(--frame-pattern-spacing) var(--frame-pattern-spacing) !important;

}



.qr-frame.ornament-dots::before{

  background-image:radial-gradient(circle at center,var(--ornament-color,#cbd5e1) 0 calc(var(--frame-pattern-weight) * .72),transparent calc(var(--frame-pattern-weight) * .72 + 1px)) !important;

}



.qr-frame.ornament-lines::before{

  background-image:repeating-linear-gradient(135deg,var(--ornament-color,#cbd5e1) 0 var(--frame-pattern-weight),transparent var(--frame-pattern-weight) calc(var(--frame-pattern-spacing) * .7)) !important;

}



.qr-frame.ornament-grid::before{

  background-image:

    linear-gradient(var(--ornament-color,#cbd5e1) 0 var(--frame-pattern-weight),transparent var(--frame-pattern-weight)),

    linear-gradient(90deg,var(--ornament-color,#cbd5e1) 0 var(--frame-pattern-weight),transparent var(--frame-pattern-weight)) !important;

}



.qr-frame.ornament-rings::before{

  background-image:repeating-radial-gradient(circle at center,var(--ornament-color,#cbd5e1) 0 var(--frame-pattern-weight),transparent var(--frame-pattern-weight) calc(var(--frame-pattern-spacing) * .9)) !important;

}



.qr-frame.ornament-sunburst::before{

  background-image:repeating-conic-gradient(from 0deg,var(--ornament-color,#cbd5e1) 0 max(1px, calc(var(--frame-pattern-weight) * .55)),transparent max(1px, calc(var(--frame-pattern-weight) * .55)) 10deg) !important;

}



.qr-frame.frame-none.ornament-dots::before,

.qr-frame.frame-none.ornament-lines::before,

.qr-frame.frame-none.ornament-grid::before,

.qr-frame.frame-none.ornament-rings::before,

.qr-frame.frame-none.ornament-sunburst::before,

.qr-frame.frame-rounded-card.ornament-dots::before,

.qr-frame.frame-rounded-card.ornament-lines::before,

.qr-frame.frame-rounded-card.ornament-grid::before,

.qr-frame.frame-rounded-card.ornament-rings::before,

.qr-frame.frame-rounded-card.ornament-sunburst::before{

  padding:calc(var(--outline-thickness) + var(--frame-gap-inset)) !important;

  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;

  -webkit-mask-composite:xor !important;

  mask-composite:exclude !important;

}



.qr-frame.frame-scan-label.ornament-dots::before,

.qr-frame.frame-scan-label.ornament-lines::before,

.qr-frame.frame-scan-label.ornament-grid::before,

.qr-frame.frame-scan-label.ornament-rings::before,

.qr-frame.frame-scan-label.ornament-sunburst::before{

  padding:calc(var(--outline-thickness) + var(--frame-gap-inset)) calc(var(--outline-thickness) + var(--frame-gap-inset)) calc(var(--outline-thickness) + 58px) !important;

  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;

  -webkit-mask-composite:xor !important;

  mask-composite:exclude !important;

}



.qr-frame.frame-circle.ornament-dots::before,

.qr-frame.frame-circle.ornament-lines::before,

.qr-frame.frame-circle.ornament-grid::before,

.qr-frame.frame-circle.ornament-rings::before,

.qr-frame.frame-circle.ornament-sunburst::before,

.qr-frame.frame-round-badge.ornament-dots::before,

.qr-frame.frame-round-badge.ornament-lines::before,

.qr-frame.frame-round-badge.ornament-grid::before,

.qr-frame.frame-round-badge.ornament-rings::before,

.qr-frame.frame-round-badge.ornament-sunburst::before,

.qr-frame.frame-burst.ornament-dots::before,

.qr-frame.frame-burst.ornament-lines::before,

.qr-frame.frame-burst.ornament-grid::before,

.qr-frame.frame-burst.ornament-rings::before,

.qr-frame.frame-burst.ornament-sunburst::before,

.qr-frame.frame-orbit.ornament-dots::before,

.qr-frame.frame-orbit.ornament-lines::before,

.qr-frame.frame-orbit.ornament-grid::before,

.qr-frame.frame-orbit.ornament-rings::before,

.qr-frame.frame-orbit.ornament-sunburst::before,

.qr-frame.frame-dot-ring.ornament-dots::before,

.qr-frame.frame-dot-ring.ornament-lines::before,

.qr-frame.frame-dot-ring.ornament-grid::before,

.qr-frame.frame-dot-ring.ornament-rings::before,

.qr-frame.frame-dot-ring.ornament-sunburst::before{

  padding:calc(var(--outline-thickness) + var(--frame-gap-inset) + 2px) !important;

  border-radius:50% !important;

  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;

  -webkit-mask-composite:xor !important;

  mask-composite:exclude !important;

}



.qr-frame.frame-circle::after,

.qr-frame.frame-round-badge::after,

.qr-frame.frame-burst::after,

.qr-frame.frame-rounded-card::after,

.qr-frame.frame-orbit::after,

.qr-frame.frame-dot-ring::after,

.qr-frame.frame-scan-label::after,

.qr-frame.frame-none::after{

  inset:0 !important;

}



/* v7.2 floating preview actions */

.preview-actions{

  display:flex;

  justify-content:flex-start;

  align-items:center;

}



.preview-submit{

  min-width:0;

  width:96% !important;

  padding:14px 18px !important;

  border-radius:16px !important;

  box-shadow:0 14px 28px rgba(51,102,232,.26);

}



.preview-heading{

  padding:2px 2px 0;

}



.preview-heading h2{

  margin: 6px 6px 6px;

}



.preview-note{

  margin:0;

}



.logo-grid{

  align-items:start;

}



.logo-section-box{

  margin-top:18px;

}



.logo-grid .control-card{

  align-content:start;

}



.logo-control-grid{

  align-items:end;

}



.logo-control-grid label{

  min-width:0;

}



.logo-control-grid .range-value{

  justify-self:start;

  padding:4px 9px;

  border-radius:999px;

  background:#eef4ff;

  color:#3366e8;

}



.qr-canvas.preview{

  min-height:360px !important;

  padding:20px !important;

  border-radius:22px !important;

  background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%) !important;

  overflow:hidden !important;

}



/* v8 template restart */

.template-thumb-grid{

  grid-template-columns:repeat(auto-fit,minmax(110px,1fr)) !important;

  gap:10px !important;

}



.template-thumb{

  min-height:132px !important;

  padding:10px 8px !important;

  border-radius:16px !important;

}



.template-thumb strong{

  font-size:.82rem;

  min-height:auto !important;

}



.template-mock{

  width:84px !important;

  height:84px !important;

  border:2px solid #111827;

  border-radius:12px;

  background:#fff;

}



.template-mock .mock-core{

  width:44px !important;

  height:44px !important;

  background:

    linear-gradient(90deg,#111827 0 5px,transparent 5px 7px) 0 0/14px 14px,

    linear-gradient(#111827 0 5px,transparent 5px 7px) 0 0/14px 14px,

    #fff;

  box-shadow:

    -18px -18px 0 -10px #111827,

    18px -18px 0 -10px #111827,

    -18px 18px 0 -10px #111827;

}



.mock-blank{

  border:none;

  background:#fff;

}



.mock-square-outline{

  border-radius:8px;

}



.mock-round-outline{

  border-radius:999px;

}



.mock-pattern-outline{

  border-radius:999px;

  box-shadow:inset 0 0 0 2px #111827;

}



.mock-pattern-outline::before{

  content:"";

  position:absolute;

  inset:10px;

  border-radius:999px;

  background-image:radial-gradient(circle,#94a3b8 1px,transparent 1.5px);

  background-size:8px 8px;

}



.mock-scan-band{

  border-radius:14px;

  padding-bottom:18px;

}



.mock-scan-band::after{

  content:"SCAN";

  position:absolute;

  left:8px;

  right:8px;

  bottom:7px;

  border-radius:999px;

  background:#111827;

  color:#fff;

  font-size:8px;

  font-weight:800;

  letter-spacing:.08em;

  padding:3px 0;

  text-align:center;

}



.mock-dashed-round{

  border-radius:999px;

  border-style:dashed;

}



.mock-lens-round{

  border-radius:999px;

  border:2px solid #111827;

}



.mock-lens-round::before,

.mock-lens-round::after{

  content:"";

  position:absolute;

  inset:8px;

  border-radius:999px;

  border:2px solid #111827;

}



.mock-lens-round::after{

  inset:14px 6px 14px 22px;

  border-left:none;

  border-bottom:none;

  opacity:.8;

}



.template-settings-grid{

  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:12px;

}



.qr-frame{

  --frame-gap:24px;

  --frame-roundness:20px;

}



.qr-frame.frame-blank{

  border:none !important;

  box-shadow:none !important;

  background:transparent !important;

}



.qr-frame.frame-blank::before,

.qr-frame.frame-blank::after{

  display:none !important;

}



.qr-frame.frame-square-outline,

.qr-frame.frame-round-outline,

.qr-frame.frame-pattern-outline,

.qr-frame.frame-scan-band,

.qr-frame.frame-dashed-round,

.qr-frame.frame-lens-round{

  background:#fff !important;

  padding:calc(var(--frame-gap) + var(--outline-thickness) + 4px) !important;

  border-radius:var(--frame-roundness) !important;

}



.qr-frame.frame-round-outline,

.qr-frame.frame-pattern-outline,

.qr-frame.frame-dashed-round,

.qr-frame.frame-lens-round{

  border-radius:999px !important;

}



.qr-frame.frame-scan-band{

  padding-bottom:calc(var(--frame-gap) + var(--outline-thickness) + 42px) !important;

}



.qr-frame.frame-square-outline::after,

.qr-frame.frame-round-outline::after,

.qr-frame.frame-pattern-outline::after,

.qr-frame.frame-scan-band::after,

.qr-frame.frame-dashed-round::after,

.qr-frame.frame-lens-round::after{

  inset:0 !important;

  border-radius:inherit !important;

  box-shadow:inset 0 0 0 var(--outline-thickness) var(--frame-color) !important;

  background:none !important;

}



.qr-frame.frame-dashed-round::after{

  box-shadow:none !important;

  border:var(--outline-thickness) dashed var(--frame-color);

}



.qr-frame.frame-pattern-outline::before{

  content:"";

  position:absolute;

  inset:0;

  padding:calc(var(--frame-gap) * .52) !important;

  border-radius:inherit;

  opacity:.88 !important;

  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;

  -webkit-mask-composite:xor !important;

  mask-composite:exclude !important;

}



.qr-frame.frame-pattern-outline.ornament-dots::before{background-image:radial-gradient(circle,var(--ornament-color) 2px,transparent 2.6px);background-size:18px 18px;}

.qr-frame.frame-pattern-outline.ornament-lines::before{background-image:repeating-linear-gradient(135deg,var(--ornament-color) 0 4px,transparent 4px 18px);}

.qr-frame.frame-pattern-outline.ornament-sunburst::before{background-image:repeating-conic-gradient(var(--ornament-color) 0 3deg,transparent 3deg 11deg);}

.qr-frame.frame-pattern-outline.ornament-grid::before{background-image:linear-gradient(var(--ornament-color) 2px,transparent 2px),linear-gradient(90deg,var(--ornament-color) 2px,transparent 2px);background-size:18px 18px;}

.qr-frame.frame-pattern-outline.ornament-rings::before{background-image:repeating-radial-gradient(circle,var(--ornament-color) 0 2px,transparent 2px 16px);}



.qr-frame.frame-scan-band .qr-frame-label{

  display:block;

  left:16px;

  right:16px;

  bottom:12px;

  transform:none;

  text-align:center;

  background:#111827;

  color:#fff;

  border-radius:999px;

  letter-spacing:.08em;

}



.qr-frame.frame-lens-round::before{

  content:"";

  position:absolute;

  inset:20px;

  border-radius:inherit;

  border:calc(max(2px, var(--outline-thickness) / 2)) solid var(--frame-color);

  opacity:.8;

}



.qr-frame.frame-lens-round .qr-frame-inner{

  z-index:3;

}



.qr-frame.frame-dashed-round::before{

  content:"";

  position:absolute;

  inset:14px;

  border-radius:inherit;

  border:calc(max(2px, var(--outline-thickness) / 2)) dashed var(--frame-color);

  opacity:.9;

}



@media (max-width: 1100px){

  .template-settings-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }

}

.dynamic-locked-control{
  position:relative;
  border-color:#dbe7f5 !important;
  background:linear-gradient(180deg,#f8fbff,#eef5fc) !important;
  color:#7890ac !important;
  opacity:1 !important;
}

.dynamic-locked-control::after{
  content:"Locked";
  position:absolute;
  right:12px;
  top:10px;
  padding:4px 9px;
  border-radius:999px;
  background:#e9f1fb;
  color:#6d86a4;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  pointer-events:none;
}

.dynamic-locked-control input:disabled,
.dynamic-locked-control select:disabled,
.dynamic-locked-control textarea:disabled,
.dynamic-locked-control button:disabled,
.builder-progress-step:disabled{
  cursor:not-allowed;
  opacity:.72;
  filter:saturate(.75);
}

.builder-section.is-locked{
  opacity:.68;
}

.builder-section.is-locked .builder-section-summary{
  cursor:not-allowed;
}

.qr-utm-card{
  border-color:#bfdbfe !important;
  background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%) !important;
  color:#102a4c;
}

.qr-advanced-panel{
  display:block;
  padding:0 !important;
  overflow:hidden;
}

.qr-advanced-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  cursor:pointer;
  list-style:none;
}

.qr-advanced-summary::-webkit-details-marker{
  display:none;
}

.qr-advanced-summary .small-text{
  margin:4px 0 0;
}

.qr-advanced-chevron{
  flex:0 0 auto;
  min-width:64px;
  padding:8px 12px;
  border:1px solid #c8d9f0;
  border-radius:999px;
  background:#fff;
  color:#396dfb;
  font-size:.8rem;
  font-weight:800;
  text-align:center;
}

.qr-advanced-panel[open] .qr-advanced-chevron{
  color:#102a4c;
}

.qr-advanced-panel[open] .qr-advanced-chevron::before{
  content:"Close";
}

.qr-advanced-panel[open] .qr-advanced-chevron{
  font-size:0;
}

.qr-advanced-panel[open] .qr-advanced-chevron::before{
  font-size:.8rem;
}

.qr-advanced-body{
  padding:0 20px 20px;
}

.card-head-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.toggle-line.compact{
  min-width:150px;
  margin:0;
}

.utm-url-preview{
  margin-top:12px;
  padding:12px 14px;
  border:1px dashed #9fb7d7;
  border-radius:12px;
  background:#fff;
  color:#34506f;
  font-size:13px;
  overflow-wrap:anywhere;
}

.utm-workbench{
  border-color:#b9cff0;
  background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%);
}

.utm-workbench-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.utm-workbench h2{
  margin:4px 0 6px;
}

.utm-builder-layout{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:18px;
  align-items:stretch;
}

.utm-builder-panel,
.utm-result-panel{
  padding:18px;
  border:1px solid #d5e3f5;
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,42,76,.06);
}

.utm-builder-panel{
  display:grid;
  gap:14px;
}

.utm-param-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.utm-result-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.utm-result-panel textarea{
  min-height:160px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9rem;
  resize:vertical;
}

.utm-builder-form{
  display:grid;
  gap:18px;
}

.utm-link-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.utm-link-actions .btn{
  min-height:42px;
}

.utm-saved-link-card{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.utm-saved-url{
  display:grid;
  gap:10px;
  margin:12px 0 16px;
  padding:14px;
  border:1px solid #d5e3f5;
  border-radius:14px;
  background:#f8fbff;
}

.utm-saved-url textarea{
  min-height:90px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.85rem;
  resize:vertical;
}

.inline-delete-form{
  display:inline-flex;
  margin:0;
}

.compact-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:18px;
}

/* Step 5 3D builder isolation: keep global form/grid rules from collapsing the 3D controls. */
#builder-section-3d .qr-3d-builder-box{
  display:grid;
  gap:18px;
  padding:18px;
  overflow:hidden;
}

#builder-section-3d .qr-3d-options{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
  width:100% !important;
  min-width:0 !important;
}

#builder-section-3d .grid.two,
#builder-section-3d .grid.three,
#builder-section-3d .template-adjust-grid,
#builder-section-3d .control-grid{
  display:grid !important;
  width:100% !important;
  min-width:0 !important;
  gap:14px !important;
  align-items:start !important;
}

#builder-section-3d .grid.two{
  grid-template-columns:repeat(2,minmax(220px,1fr)) !important;
}

#builder-section-3d .grid.three{
  grid-template-columns:repeat(3,minmax(170px,1fr)) !important;
}

#builder-section-3d .template-adjust-grid{
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important;
}

#builder-section-3d .control-grid,
#builder-section-3d .qr-3d-color-grid{
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;
}

#builder-section-3d label,
#builder-section-3d .color-card,
#builder-section-3d .control-card,
#builder-section-3d .stacked-checks{
  min-width:0 !important;
  max-width:100% !important;
}

#builder-section-3d label:not(.toggle-line):not(.checkbox-row){
  display:grid !important;
  gap:8px !important;
  align-content:start !important;
}

#builder-section-3d input:not([type="checkbox"]):not([type="color"]):not([type="hidden"]),
#builder-section-3d select,
#builder-section-3d textarea{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

#builder-section-3d input[type="range"]{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:6px 0 !important;
}

#builder-section-3d .range-value{
  display:inline-flex !important;
  width:max-content !important;
  min-width:0 !important;
  padding:4px 8px;
  border-radius:999px;
  background:#eef4ff;
  color:#3366e8;
  font-size:.82rem;
  font-weight:900;
}

#builder-section-3d .checkbox-row{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:auto !important;
}

#builder-section-3d .checkbox-row input[type="checkbox"],
#builder-section-3d .toggle-line input[type="checkbox"]{
  flex:0 0 auto !important;
}

#builder-section-3d .stacked-checks{
  display:grid !important;
  gap:10px !important;
  align-content:start !important;
  padding:8px 0;
}

#builder-section-3d .color-card{
  display:grid !important;
  gap:12px !important;
}

#builder-section-3d .color-row{
  display:grid !important;
  grid-template-columns:64px minmax(0,1fr) !important;
  gap:10px !important;
  align-items:center !important;
}

#builder-section-3d .native-color{
  width:60px !important;
  min-width:60px !important;
  height:50px !important;
}

#builder-section-3d .swatch-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}

#builder-section-3d .swatch-btn{
  flex:0 0 30px !important;
}

@media (max-width:900px){
  #builder-section-3d .grid.two,
  #builder-section-3d .grid.three,
  #builder-section-3d .template-adjust-grid,
  #builder-section-3d .control-grid,
  #builder-section-3d .qr-3d-color-grid{
    grid-template-columns:1fr !important;
  }
}

.utm-help-card{
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
}

@media (max-width:900px){
  .utm-workbench-head,
  .utm-builder-layout{
    grid-template-columns:1fr;
  }

  .utm-workbench-head{
    display:grid;
  }
}

@media (max-width:640px){
  .utm-param-grid{
    grid-template-columns:1fr;
  }
}

.dynamic-save-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(11,31,55,.42);
  backdrop-filter:blur(10px);
}

.dynamic-save-modal.is-open{
  display:flex;
}

.dynamic-save-card{
  width:min(560px,100%);
  border:1px solid #cfe0f5;
  border-radius:28px;
  background:#ffffff;
  box-shadow:0 28px 80px rgba(15,42,76,.24);
  padding:28px;
}

.dynamic-save-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#eef4ff;
  color:#396dfb;
  font-size:22px;
  margin-bottom:18px;
}

.dynamic-save-kicker{
  margin:0 0 6px;
  color:#396dfb;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.dynamic-save-copy h2{
  margin:0 0 10px;
  color:#102a4c;
  font-size:28px;
  line-height:1.05;
}

.dynamic-save-copy p,
.dynamic-save-copy li{
  color:#45627f;
  font-size:14px;
  line-height:1.55;
}

.dynamic-save-copy ul{
  margin:14px 0 0;
  padding-left:18px;
}

.dynamic-save-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:24px;
}

@media (max-width: 620px){
  .dynamic-save-card{ padding:22px; border-radius:22px; }
  .dynamic-save-actions{ flex-direction:column-reverse; }
  .dynamic-save-actions .btn{ width:100%; }
}



/* v9 image-based templates restart */

.template-gallery{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));

  gap:14px;

}



.template-image-btn{

  display:grid;

  gap:10px;

  align-content:start;

  padding:10px;

  border:1px solid var(--line);

  border-radius:18px;

  background:#fff;

  cursor:pointer;

  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;

}



.template-image-btn:hover{

  transform:translateY(-1px);

}



.template-image-btn.active{

  border-color:#8daeff;

  box-shadow:0 0 0 3px rgba(52,103,235,.12);

}



.template-image-btn img,

.template-exact-thumb{

  width:100%;

  aspect-ratio:1 / 1;

  object-fit:contain;

  border-radius:14px;

  background:#f8fbff;

}



.template-blank-thumb{

  position:relative;

  border:1px solid var(--line);

  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);

}



.template-blank-thumb::after{

  content:"";

  position:absolute;

  inset:10px;

  border-radius:12px;

  border:4px solid #222222;

  background:#fff;

}



.template-image-btn[data-frame-style="group-08"] .template-blank-thumb{

  background:#fff;

}



.template-image-btn strong{

  font-size:.82rem;

  text-align:center;

}



.template-adjust-grid{

  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:14px;

}



.template-color-grid{

  margin:16px 0 14px;

}



.range-input{

  width:100%;

  padding:0;

}



.range-value{

  font-size:.92rem;

  color:var(--muted);

  font-weight:800;

}



.template-preview{

  position:relative !important;

  display:block !important;

  min-height:350px !important;

  padding:0 !important;

  background:transparent !important;

  border:none !important;

}



.template-preview .qr-template-artwork{

  position:absolute;

  inset:0;

  pointer-events:none;

  z-index:1;

}



.template-preview .qr-template-artwork svg{

  display:block;

  width:100%;

  height:100%;

}



.template-preview .qr-frame-inner{

  position:absolute;

  z-index:10;

  display:block;

}



.template-preview .qr-frame-inner svg,

.template-preview .qr-frame-inner canvas,

.template-preview .qr-frame-inner img{

  width:100% !important;

  height:100% !important;

  display:block;

}



@media (max-width: 819px){

  .template-gallery{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }



  .template-adjust-grid{

    grid-template-columns:1fr;

  }



  .project-create-inline{

    grid-template-columns:1fr;

  }



  .project-create-inline-compact{

    grid-template-columns:1fr;

  }



  .project-editor-grid{

    grid-template-columns:1fr;

  }

}

.api-page{
  display:grid;
  gap:24px;
}

.api-hero{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:28px;
  align-items:stretch;
  padding:34px;
  border:1px solid var(--line);
  border-radius:28px;
  background:rgba(255,255,255,.88);
  box-shadow:0 24px 70px rgba(15,42,76,.12);
}

.api-hero-copy h1{
  max-width:760px;
  margin:14px 0 12px;
  font-size:clamp(2.2rem,5vw,4.9rem);
  line-height:.94;
  letter-spacing:0;
}

.api-hero-copy p,
.api-section-head p{
  max-width:740px;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.65;
}

.api-hero-card,
.api-code-card,
.api-table-card,
.api-steps-card,
.api-faq,
.api-feature-card{
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.94);
  box-shadow:0 16px 38px rgba(15,42,76,.08);
}

.api-hero-card{
  align-self:stretch;
  padding:18px;
  display:grid;
  align-content:center;
  min-height:340px;
}

.api-code-head{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}

.api-code-head span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  background:#eaf0ff;
  color:var(--primary);
  font-weight:800;
  font-size:.78rem;
}

.api-code-head code{
  color:var(--ink);
  white-space:normal;
}

.api-hero-card pre,
.api-code-card pre{
  overflow:auto;
  margin:0;
  padding:18px;
  border-radius:18px;
  background:#0f2238;
  color:#eaf2ff;
  line-height:1.55;
}

.api-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.9);
}

.api-tabs a{
  text-align:center;
  text-decoration:none;
  padding:12px 14px;
  border-radius:14px;
  color:var(--ink);
  font-weight:800;
}

.api-tabs a:hover{
  background:#edf4ff;
  color:var(--primary);
}

.api-preview-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

.api-qr-swatch{
  display:grid;
  place-items:center;
  gap:10px;
  min-height:168px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.92);
}

.api-mini-qr{
  width:82px;
  aspect-ratio:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  padding:8px;
  border:4px solid var(--api-accent);
  border-radius:10px;
  background:#fff;
}

.api-mini-qr span{
  border-radius:4px;
  background:var(--api-accent);
}

.api-mini-qr span:nth-child(2n){
  opacity:.25;
}

.api-feature-grid,
.api-doc-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.api-feature-card{
  padding:22px;
}

.api-feature-card i{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  border-radius:14px;
  background:linear-gradient(135deg,#396dfb,#7c8cff);
  color:#fff;
}

.api-feature-card h2,
.api-table-card h2,
.api-steps-card h2,
.api-faq h2{
  margin:0 0 10px;
}

.api-feature-card p,
.api-faq p{
  color:var(--muted);
  line-height:1.6;
}

.api-doc-section{
  display:grid;
  gap:16px;
}

.api-doc-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.api-code-card{
  min-width:0;
  padding:18px;
}

.api-table-card,
.api-steps-card,
.api-faq{
  padding:24px;
}

.api-param-table{
  display:grid;
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}

.api-param-table > div{
  display:grid;
  grid-template-columns:160px 120px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border-top:1px solid var(--line);
}

.api-param-table > div:first-child{
  border-top:0;
  background:#f3f7fc;
}

.api-param-table code{
  color:var(--primary);
  font-weight:800;
}

.api-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:18px 0;
}

.api-steps div{
  display:flex;
  gap:12px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#f8fbff;
}

.api-steps span{
  flex:0 0 34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#396dfb;
  color:#fff;
  font-weight:900;
}

.api-steps p{
  margin:0;
  line-height:1.5;
}

.api-faq details{
  border-top:1px solid var(--line);
  padding:16px 0;
}

.api-faq summary{
  cursor:pointer;
  font-weight:900;
  color:var(--ink);
}

@media (max-width: 980px){
  .api-hero,
  .api-tabs,
  .api-preview-strip,
  .api-feature-grid,
  .api-doc-grid,
  .api-steps{
    grid-template-columns:1fr;
  }

  .api-param-table > div{
    grid-template-columns:1fr;
    gap:6px;
  }
}

.api-doc-snippet{
  overflow:auto;
  padding:16px;
  border-radius:16px;
  background:#102a4c;
  color:#eaf2ff;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
}

.api-doc-snippet code{
  color:inherit;
}

.developer-api-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:18px 0 22px;
}

.developer-api-steps div{
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#f8fbff;
}

.developer-api-steps span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
  border-radius:999px;
  background:#396DFB;
  color:#fff;
  font-weight:900;
}

.developer-api-steps strong{
  display:block;
  color:#102a4c;
  font-size:.98rem;
}

.developer-api-steps p{
  margin:6px 0 0;
  color:#607896;
  font-size:.9rem;
  line-height:1.45;
}

@media (max-width: 960px){
  .developer-api-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 620px){
  .developer-api-steps{
    grid-template-columns:1fr;
  }
}

/* Pricing comparison refresh */
.pricing-hero-controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.pricing-currency-chip{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid #cfe0f5;border-radius:999px;background:#fff;color:#102a4c;font-weight:900;box-shadow:0 10px 24px rgba(16,42,76,.08)}
.pricing-grid{width:100%!important;align-items:stretch;grid-template-columns:repeat(4,minmax(0,1fr))!important}
.pricing-card.pricing-tier{width:auto!important;max-width:none!important;min-width:0}
.pricing-tier{overflow:hidden;gap:16px;padding:0;border-radius:24px;background:#fff}
.pricing-tier::before{display:none}
.pricing-tier.best-selling{border-color:#396DFB;transform:translateY(-8px)}
.pricing-tier.best-selling .pricing-tier-top{background:linear-gradient(135deg,#eef7ff,#dff4ff 52%,#f3fbf7)}
.pricing-recommended-ribbon{display:flex;align-items:center;gap:8px;padding:12px 22px;background:#102a4c;color:#fff;font-weight:900}
.pricing-tier-top{min-height:156px;padding:24px 24px 18px;background:#f8fbff;border-bottom:1px solid #e1eaf7}
.pricing-card-badges{justify-content:flex-start}
.pricing-card-badges .badge{background:#eaf1ff;color:#315fd8}
.pricing-tier-top p{margin-top:14px;min-height:46px}
.pricing-price-block{padding:20px 24px 4px}
.pricing-price-block h2{margin:0;color:#0f2240;font-size:clamp(1.28rem,1.8vw,1.75rem);line-height:1.08;white-space:nowrap}
.pricing-price-block p{margin:8px 0 0;color:#5c7393;font-size:.9rem}
.pricing-action-zone{padding:0 24px}
.pricing-action-zone .btn,.pricing-action-zone .pricing-inline-form .btn{width:100%;min-height:48px}
.pricing-summary-panel{display:grid;gap:8px;margin:4px 24px 2px;padding:14px;border-radius:18px;background:#f3f6fb}
.pricing-summary-row{display:grid;grid-template-columns:minmax(82px,auto) 1fr auto;align-items:center;gap:10px;min-height:34px;color:#102a4c;font-size:.92rem}
.pricing-summary-row.muted{color:#7890ad}
.pricing-summary-value{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:4px 10px;border-radius:6px;background:#fff;color:#102a4c;font-weight:900;text-align:center}
.pricing-summary-row.muted .pricing-summary-value{color:#7890ad}
.pricing-summary-row i{color:#8ea1ba;font-size:.82rem}
.pricing-feature-section{margin:0 24px;padding-top:16px;border-top:1px solid #e1eaf7}
.pricing-feature-section:last-child{margin-bottom:24px}
.pricing-feature-section h3{margin:0 0 10px;color:#102a4c;font-size:1rem}
.pricing-feature-list{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.pricing-feature-list li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;color:#102a4c;font-size:.92rem;line-height:1.35}
.pricing-feature-icon{color:#1f9d61;font-weight:900}
.pricing-feature-off{color:#8ea1ba!important}
.pricing-feature-off .pricing-feature-icon{color:#b7c2cf}
.pricing-tier .placeholder-paypal,.pricing-tier .paypal-box{margin-top:0;border-style:solid;background:#f8fbff}

@media (max-width:1280px){.pricing-tier.best-selling{transform:none}}
@media (max-width:1100px){.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:760px){.pricing-grid{grid-template-columns:1fr!important}.pricing-tier-top{min-height:auto}.pricing-summary-row{grid-template-columns:72px 1fr auto}.pricing-price-block h2{font-size:1.8rem}}


input[type="checkbox"]{

  appearance:none;

  -webkit-appearance:none;

  width:54px;

  height:30px;

  border-radius:999px;

  border:1px solid #9db4d2;

  background:#dbe7f6;

  position:relative;

  cursor:pointer;

  padding:0;

  flex:0 0 auto;

  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;

}



input[type="checkbox"]::after{

  content:"";

  position:absolute;

  top:3px;

  left:3px;

  width:22px;

  height:22px;

  border-radius:999px;

  background:#ffffff;

  box-shadow:0 3px 8px rgba(15,42,76,.0);

  transition:left .18s ease,transform .18s ease;

}



input[type="checkbox"]:checked{

  background:linear-gradient(180deg,#4372f1,#3366e8);

  border-color:#3366e8;

  box-shadow:0 0 0 4px rgba(51,102,232,.12);

}



input[type="checkbox"]:checked::after{

  left:27px;

}



@media (max-width: 1100px){

  .public-builder-hero{

    grid-template-columns:1fr;

  }



  .public-builder-shell{

    grid-template-columns:1fr;

  }

}



@media (max-width: 700px){

  .public-builder-colors,

  .public-template-gallery{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }



  .public-download-row{

    flex-direction:column;

  }



  .public-download-row .btn{

    width:100%;

  }

}



@media (max-width: 700px){

  .public-builder-hero{

    gap:14px;

    padding:2px 0 10px;

  }



  .public-builder-copy{

    gap:12px;

    padding:6px 0 0;

  }



  .eyebrow{

    margin-bottom:6px;

    padding:7px 11px;

    font-size:.72rem;

  }



  .public-builder-copy h1{

    font-size:2rem;

    line-height:1.02;

    max-width:9ch;

  }



  .public-builder-copy p{

    font-size:.88rem;

    line-height:1.45;

  }



  .public-builder-note{

    padding:14px 14px 12px;

    gap:10px;

    border-radius:18px;

  }



  .public-builder-note strong{

    font-size:.95rem;

  }



  .public-builder-card{

    padding:12px;

    border-radius:20px;

  }



  .public-builder-shell{

    gap:12px;

  }



  .public-builder-form{

    gap:12px;

  }



  .public-builder-form label{

    font-size:.84rem;

    gap:6px;

  }



  .public-builder-form input[type="url"],

  .public-builder-form input[type="text"],

  .public-builder-form input[type="email"],

  .public-builder-form select,

  .public-builder-form textarea{

    min-height:44px;

    padding:10px 12px;

    border-radius:14px;

    font-size:.92rem;

  }



  .public-builder-colors{

    gap:10px;

  }



  .public-builder-colors input[type="color"]{

    height:42px;

    border-radius:12px;

    padding:4px;

  }



  .public-template-block{

    gap:10px;

  }



  .public-template-head h2{

    font-size:1.45rem;

  }



  .public-template-head p{

    font-size:.84rem;

  }



  .template-gallery.public-template-gallery{

    gap:10px;

  }



  .template-gallery.public-template-gallery .template-image-btn{

    padding:8px;

    gap:8px;

    border-radius:16px;

  }



  .template-gallery.public-template-gallery .template-exact-thumb,

  .template-gallery.public-template-gallery .template-image-btn img{

    aspect-ratio:1 / 1;

    border-radius:12px;

  }



  .template-gallery.public-template-gallery .template-image-btn strong{

    font-size:.72rem;

    line-height:1.2;

  }



  .public-builder-preview{

    padding:10px;

    gap:8px;

    border-radius:18px;

  }



  .public-preview-canvas{

    min-height:240px !important;

    max-width:100%;

  }



  .preview-heading h2{

    font-size:1.3rem;

  }



  .preview-note{

    font-size:.8rem;

    line-height:1.38;

  }



  .public-home-points{

    margin-top:14px;

    gap:10px;

  }



  .public-home-points .stat-card{

    padding:14px;

    border-radius:18px;

  }



  .public-home-points .stat-card h3{

    font-size:1rem;

    margin-bottom:4px;

  }



  .public-home-points .stat-card p{

    font-size:.84rem;

    line-height:1.42;

  }

}



@media (max-width: 430px){

  .public-builder-copy h1{

    font-size:1.78rem;

    max-width:10ch;

  }



  .template-gallery.public-template-gallery{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }



  .template-gallery.public-template-gallery .template-image-btn{

    padding:7px;

  }



  .template-gallery.public-template-gallery .template-image-btn strong{

    font-size:.68rem;

  }



  .public-preview-canvas{

    min-height:220px !important;

  }

}



/* v10 nav + builder cleanup */

.site-header{

  position:sticky;

  top:0;

  z-index:50;

  backdrop-filter:blur(18px);

}



.nav{

  position:relative;

  gap:18px;

}



.nav-toggle{

  display:none;

  width:48px;

  height:48px;

  margin-left:auto;

  border:1px solid var(--line);

  border-radius:16px;

  background:#fff;

  align-items:center;

  justify-content:center;

  gap:4px;

  cursor:pointer;

  box-shadow:0 10px 24px rgba(19,45,94,.08);

}



.nav-toggle-line{

  display:block;

  width:18px;

  height:2px;

  border-radius:999px;

  background:#17315e;

  transition:transform .18s ease, opacity .18s ease;

}



.nav-panel{

  display:flex;

  flex:1 1 auto;

  min-width:0;

}



.nav-links{

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:10px;

  width:100%;

}



.nav-more{

  position:relative;

}



.nav-more summary{

  list-style:none;

}



.nav-more summary::-webkit-details-marker{

  display:none;

}



.nav-more-trigger{

  display:flex;

  align-items:center;

  gap:8px;

  cursor:pointer;

}



.nav-more-caret{

  width:10px;

  height:10px;

  border-right:2px solid currentColor;

  border-bottom:2px solid currentColor;

  transform:rotate(45deg) translateY(-1px);

  transition:transform .18s ease;

}



.nav-more[open] .nav-more-caret{

  transform:rotate(-135deg) translateY(-1px);

}



.nav-more-menu{

  position:absolute;

  top:calc(100% + 12px);

  right:0;

  min-width:220px;

  padding:12px;

  display:grid;

  gap:8px;

  background:rgba(255,255,255,.98);

  border:1px solid #d7e3f7;

  border-radius:20px;

  box-shadow:0 24px 48px rgba(19,45,94,.14);

}



.nav-more-link{

  display:flex;

  align-items:center;

  gap:10px;

  padding:10px 12px;

  border-radius:14px;

  color:var(--text);

  font-weight:700;

}



.nav-more-link:hover,

.nav-more-link.active{

  background:#eef4ff;

  color:#3366e8;

}



.nav-item-icon{

  width:24px;

  height:24px;

  border-radius:8px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  background:#eef4ff;

  color:#2f5ef0;

  font-size:.88rem;

  flex:0 0 auto;

}



.nav-item-icon i{

  line-height:1;

}



.nav-logout-btn{

  margin-left:2px;

}



.nav-icon-btn,

.nav-profile-link{

  min-height:44px;

  border:1px solid #d7e3f7;

  border-radius:16px;

  background:#fff;

  color:var(--text);

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:0 14px;

  font-weight:700;

}



.nav-icon-btn{

  justify-content:center;

  min-width:44px;

  padding:0 12px;

  position:relative;

}



.nav-profile-link{

  max-width:220px;

  overflow:hidden;

  white-space:nowrap;

  text-overflow:ellipsis;

}



.nav-profile-link:hover,

.nav-icon-btn:hover{

  background:#eef4ff;

  color:#3366e8;

}



.nav-notify{

  position:relative;

}



.nav-notify summary{

  list-style:none;

  cursor:pointer;

}



.nav-notify summary::-webkit-details-marker{

  display:none;

}



.nav-notify-badge{

  position:absolute;

  top:-6px;

  right:-4px;

  min-width:18px;

  height:18px;

  padding:0 5px;

  border-radius:999px;

  background:#ff5c74;

  color:#fff;

  font-size:.68rem;

  font-weight:800;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  box-shadow:0 8px 16px rgba(255,92,116,.28);

}



.nav-notify-menu{

  position:absolute;

  top:calc(100% + 12px);

  right:0;

  width:min(360px,88vw);

  padding:12px;

  display:grid;

  gap:8px;

  background:rgba(255,255,255,.98);

  border:1px solid #d7e3f7;

  border-radius:20px;

  box-shadow:0 24px 48px rgba(19,45,94,.14);

  z-index:30;

}



.nav-notify-head{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  padding:2px 4px 8px;

  color:var(--muted);

  font-size:.82rem;

}



.nav-notify-link{

  display:grid;

  grid-template-columns:24px minmax(0,1fr);

  gap:10px;

  padding:10px 12px;

  border-radius:14px;

  color:var(--text);

}



.nav-notify-link:hover{

  background:#eef4ff;

  color:#3366e8;

}



.nav-notify-copy{

  display:grid;

  gap:2px;

  min-width:0;

}



.nav-notify-copy strong,

.nav-notify-copy small,

.nav-notify-copy em{

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}



.nav-notify-copy small{

  color:var(--muted);

  font-size:.78rem;

}



.nav-notify-copy em{

  color:#5d79b7;

  font-size:.74rem;

  font-style:normal;

}



.nav-notify-empty{

  padding:12px;

  border-radius:14px;

  background:#f7faff;

  color:var(--muted);

  font-size:.84rem;

}



.builder-progress-card{

  margin-bottom:20px;

  padding:18px 20px;

  border:1px solid #d6e3f6;

  border-radius:24px;

  background:linear-gradient(180deg,#fbfdff 0%,#f4f8ff 100%);

}



.builder-progress-head{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:12px;

  margin-bottom:14px;

}



.builder-progress-head strong{

  display:block;

  font-size:1rem;

  color:var(--text);

}



.builder-progress-chip{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:34px;

  padding:0 12px;

  border-radius:999px;

  background:#fff;

  border:1px solid #cfe0fb;

  color:#3366e8;

  font-weight:800;

  white-space:nowrap;

}



.builder-progress-rail{

  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:12px;

}



.builder-progress-step{

  display:flex;

  align-items:center;

  gap:10px;

  min-height:54px;

  padding:10px 14px;

  border:1px solid #d6e3f6;

  border-radius:18px;

  background:#fff;

  color:#6b7d9b;

  cursor:pointer;

  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;

}



.builder-progress-step span{

  width:28px;

  height:28px;

  border-radius:999px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  background:#eef3ff;

  color:#3366e8;

  font-size:.82rem;

  font-weight:800;

  flex:0 0 auto;

}



.builder-progress-step strong{

  font-size:.92rem;

}



.builder-progress-step:hover{

  transform:translateY(-1px);

  border-color:#b9d0f7;

}



.builder-progress-step.is-current{

  border-color:#7ea4ff;

  box-shadow:0 0 0 3px rgba(52,103,235,.10);

  color:var(--text);

}



.builder-section{

  margin:0 0 18px;

  border:1px solid #d6e3f6;

  border-radius:28px;

  background:linear-gradient(180deg,#f8fbff 0%,#f1f6fe 100%);

  overflow:hidden;

  box-shadow:0 14px 34px rgba(19,45,94,.05);

}



.builder-section[open]{

  border-color:#bfd3f6;

}



.builder-section-summary{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

  padding:22px 24px;

  cursor:pointer;

  list-style:none;

}



.builder-section-summary::-webkit-details-marker{

  display:none;

}



.builder-section-copy{

  display:grid;

  gap:5px;

}



.builder-section-kicker{

  font-size:.78rem;

  font-weight:800;

  letter-spacing:.08em;

  text-transform:uppercase;

  color:#5978b7;

}



.builder-section-copy h2{

  margin:0;

  font-size:1.45rem;

}



.builder-section-copy p{

  margin:0;

  color:var(--muted);

}



.builder-section-meter{

  position:relative;

  width:120px;

  height:10px;

  border-radius:999px;

  background:#e3ebfb;

  overflow:hidden;

  flex:0 0 auto;

}



.builder-section-meter span{

  position:absolute;

  inset:0 auto 0 0;

  width:22%;

  border-radius:inherit;

  background:linear-gradient(90deg,#4a74f2,#84a6ff);

  transition:width .18s ease;

}



.builder-section[data-step="1"] .builder-section-meter span{width:25%}

.builder-section[data-step="2"] .builder-section-meter span{width:50%}

.builder-section[data-step="3"] .builder-section-meter span{width:75%}

.builder-section[data-step="4"] .builder-section-meter span{width:100%}

.builder-section[data-step="5"] .builder-section-meter span{width:100%}



.builder-section-body{

  padding:0 24px 24px;

}



.builder-section .design-box{

  margin:0;

  background:#fff;

  border-radius:22px;

  border:1px solid #dfe9f9;

  box-shadow:none;

}



.builder-section .design-section + .design-section{

  margin-top:14px;

}



.builder-section .field-group,

.builder-section .hint-card{

  background:#fff;

  border-radius:18px;

  border:1px solid #dfe9f9;

}



.builder-section .field-group{

  padding:14px 16px;

}



.builder-section .hint-card{

  margin-top:12px;

}



.builder-section .toggle-line{

  background:#fff;

  border:1px solid #dfe9f9;

  border-radius:18px;

  min-height:58px;

  padding:12px 16px;

}



.builder-section .template-image-btn{

  border-radius:20px;

}



.builder-section .control-card{

  border-radius:22px;

}



.builder-section .logo-grid{

  align-items:start;

}



.builder-style-box{

  gap:14px;

}



.builder-style-head,

.builder-style-toolbar,

.builder-style-actions,

.style-library-topline,

.style-chip-row,

.style-library-meta{

  display:flex;

  align-items:center;

  gap:12px;

}



.builder-style-head,

.builder-style-toolbar{

  justify-content:space-between;

}



.builder-style-head{

  align-items:flex-start;

}



.builder-style-head h2{

  margin:0 0 4px;

}



.builder-style-head p{

  margin:0;

  color:var(--muted);

}



.builder-style-toolbar{

  flex-wrap:wrap;

}



.builder-style-name{

  flex:1 1 320px;

  display:grid;

  gap:8px;

}



.builder-style-actions{

  flex-wrap:wrap;

  justify-content:flex-end;

}



.builder-style-alert{

  padding:12px 14px;

  border-radius:14px;

  border:1px solid #c7d4e4;

  background:#f8fbff;

  color:var(--ink);

  font-size:.94rem;

}



.builder-style-alert[data-state="error"]{

  background:#fff1f2;

  border-color:#fecdd3;

  color:#9f1239;

}



.builder-style-alert[data-state="success"]{

  background:#ecfdf3;

  border-color:#b7efc8;

  color:#166534;

}



.style-library-grid{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));

  gap:12px;

}



.style-library-card{

  display:grid;

  gap:12px;

  padding:14px;

  border:1px solid var(--line);

  border-radius:18px;

  background:#fff;

  text-align:left;

  cursor:pointer;

  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;

}



.style-library-card:hover{

  border-color:#99b6ff;

  box-shadow:0 10px 24px rgba(45,91,255,.08);

  transform:translateY(-1px);

}



.style-library-card.active{

  border-color:#7ea4ff;

  background:#f5f8ff;

  box-shadow:0 12px 28px rgba(45,91,255,.12);

}



.style-library-topline{

  align-items:flex-start;

  justify-content:space-between;

}



.style-library-topline strong{

  font-size:.98rem;

  line-height:1.2;

}



.style-library-topline span,

.style-library-meta{

  font-size:.85rem;

  color:var(--muted);

}



.style-chip-row{

  gap:8px;

}



.style-chip{

  width:22px;

  height:22px;

  border-radius:999px;

  border:1px solid rgba(15,35,64,.08);

  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);

}



.style-chip-light{

  border-color:#d5deea;

}



.style-library-meta{

  flex-wrap:wrap;

  gap:8px;

}



.style-library-meta span{

  padding:5px 9px;

  border:1px solid #dbe5f0;

  border-radius:999px;

  background:#f8fbff;

}



@media (max-width: 1180px){

  .builder-progress-rail{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }



  .builder-style-head,

  .builder-style-toolbar{

    flex-direction:column;

    align-items:stretch;

  }



  .builder-style-actions{

    justify-content:flex-start;

  }

}



@media (max-width: 980px){

  .nav-toggle{

    display:inline-flex;

  }



  .nav-panel{

    position:absolute;

    top:calc(100% + 12px);

    left:0;

    right:0;

    display:none;

    padding:14px;

    border:1px solid #d7e3f7;

    border-radius:24px;

    background:rgba(255,255,255,.99);

    box-shadow:0 26px 48px rgba(19,45,94,.16);

  }



  .site-header.nav-open .nav-panel{

    display:block;

  }



  .site-header.nav-open .nav-toggle-line:nth-child(1){

    transform:translateY(6px) rotate(45deg);

  }



  .site-header.nav-open .nav-toggle-line:nth-child(2){

    opacity:0;

  }



  .site-header.nav-open .nav-toggle-line:nth-child(3){

    transform:translateY(-6px) rotate(-45deg);

  }



  .nav-links{

    align-items:stretch;

    justify-content:stretch;

    flex-direction:column;

    gap:8px;

  }



  .nav-link,

  .nav-more-trigger,

  .nav-logout-btn,

  .nav-profile-link,

  .nav-icon-btn{

    width:100%;

    justify-content:flex-start;

  }



  .nav-more{

    width:100%;

  }



  .nav-notify{

    width:100%;

  }



  .nav-more-menu{

    position:static;

    min-width:0;

    margin-top:8px;

    box-shadow:none;

    border-radius:18px;

    background:#f7faff;

  }



  .nav-notify-menu{

    position:static;

    width:100%;

    margin-top:8px;

    box-shadow:none;

    border-radius:18px;

    background:#f7faff;

  }

}



@media (max-width: 819px){

  .builder-progress-card{

    padding:16px;

  }



  .builder-progress-head{

    flex-direction:column;

  }



  .builder-progress-chip{

    align-self:flex-start;

  }



  .builder-progress-rail{

    grid-template-columns:1fr;

  }



  .builder-section-summary{

    padding:18px 18px 16px;

    align-items:flex-start;

    flex-direction:column;

  }



  .builder-section-meter{

    width:100%;

  }



  .builder-section-body{

    padding:0 18px 18px;

  }



  .builder-section .design-box{

    border-radius:18px;

  }

}



/* v11 builder proportions + quieter typography */

html{

  font-size:14px;

}



body{

  font-size:1rem;

  font-weight:400;

  line-height:1.48;

}



body,

p,

li,

label,

input,

select,

textarea,

button,

.btn,

.nav-link,

.nav-more-link,

.tab-btn,

.small-text,

.muted,

th,

td{

  font-weight:400;

}



h1,

h2,

h3,

.card-header h1,

.builder-section-copy h2,

.preview-heading h2{

  font-weight:800;

}



strong,

b{

  font-weight:600;

}



input,

select,

textarea,

button{

  font-size:.96rem;

}



.nav-link,

.nav-more-link,

.btn,

.tab-btn{

  font-size:.95rem;

}



.builder-progress-step strong,

.template-image-btn strong,

.logo-library-item span,

.preview-submit{

  font-weight:600;

}



.page-shell > .card{

  max-width:1280px;

  margin-left:auto;

  margin-right:auto;

}



.builder-section-body .grid,

.builder-section-body .control-grid,

.builder-section-body .template-adjust-grid,

.builder-section-body .logo-grid{

  row-gap:16px;

}



.builder-section label,

.builder-section .control-card label,

.builder-section .field-group label{

  display:grid;

  gap:8px;

  margin:8px 0 10px;

}



.builder-section input:not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="hidden"]),

.builder-section select,

.builder-section textarea{

  margin-top:2px;

  margin-bottom:2px;

}



.builder-section .tab-row{

  margin:10px 0 14px;

  gap:8px;

  flex-wrap:wrap;

}



.builder-section .field-group{

  margin:8px 0;

}



.builder-section .hint-card{

  margin-top:4px;

  padding:14px 16px;

}



.qr-limit-card{

  display:grid;

  gap:14px;

}



.qr-limit-head{

  display:flex;

  justify-content:space-between;

  gap:12px;

  align-items:flex-start;

}



.qr-limit-head p{

  margin:4px 0 0;

}



.builder-section .toggle-line{

  margin:8px 0;

}



.builder-progress-card p,

.builder-section-copy p,

.preview-note,

.small-text,

.muted{

  font-size:.82rem;

   line-height: 1.25;

}



.preview-heading h2{

  margin-bottom:4px;

}



/* v12 control center + site settings */

.brand-logo-img{

  width:42px;

  height:42px;

  object-fit:contain;

  border-radius:14px;

  background:#fff;

  box-shadow:0 12px 30px rgba(79, 70, 229, 0.14);

}



.site-notice{

  border-bottom:1px solid var(--line);

  background:#f8fbff;

}



.site-notice p{

  margin:0;

  padding:10px 0;

  color:var(--muted);

  font-size:13px;

}



.site-markup p:first-child,

.site-markup h1:first-child,

.site-markup h2:first-child,

.site-markup h3:first-child,

.site-markup h4:first-child{

  margin-top:0;

}



.site-markup p:last-child{

  margin-bottom:0;

}



.site-markup code,

.site-markup pre{

  font-family:Consolas,"Courier New",monospace;

}



.site-markup pre{

  white-space:pre-wrap;

  background:#f4f8ff;

  border:1px solid var(--line);

  border-radius:12px;

  padding:12px;

}



.site-notice-markup{

  padding:10px 0;

  color:var(--muted);

  font-size:13px;

}



.footer-markup{

  flex:1 1 280px;

}



.math-captcha-field{

  display:flex;

  flex-direction:column;

  gap:8px;

}



.math-captcha-prompt{

  font-size:13px;

  color:var(--muted);

}



.control-center-form{

  display:grid;

  gap:18px;

}



.control-section{

  overflow:hidden;

}



.control-section-summary{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:16px;

  cursor:pointer;

  list-style:none;

}



.control-section-summary::-webkit-details-marker{

  display:none;

}



.control-section-summary h2{

  margin:0 0 4px;

}



.control-section-body{

  margin-top:18px;

  padding-top:18px;

  border-top:1px solid var(--line);

}



.control-grid{

  align-items:start;

}



.control-grid label,

.control-asset-card{

  display:flex;

  flex-direction:column;

  gap:8px;

}



.control-markup-field textarea{

  min-height:220px;

  font-family:Consolas,"Courier New",monospace;

  line-height:1.5;

}



.control-asset-card{

  padding:16px;

  border:1px solid var(--line);

  border-radius:18px;

  background:#fbfdff;

}



.control-asset-label{

  font-size:13px;

  color:var(--muted);

}



.control-asset-preview{

  border:1px solid var(--line);

  border-radius:16px;

  background:#fff;

  object-fit:contain;

}



.control-logo-preview{

  width:100%;

  max-width:220px;

  height:72px;

  padding:10px;

}



.control-favicon-preview{

  width:72px;

  height:72px;

  padding:10px;

}



.control-asset-empty{

  display:grid;

  place-items:center;

  min-height:72px;

  border:1px dashed var(--line);

  border-radius:16px;

  color:var(--muted);

  font-size:13px;

  background:#fff;

}



.control-actions-bar{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:16px;

}



.control-ops-grid{

  margin-top:18px;

}



.control-export-list{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

}



.support-captcha-wrap{

  display:flex;

  align-items:flex-end;

}



.ops-body{

  background:linear-gradient(180deg,#f6f9fd 0%,#edf3fb 100%);

}



.ops-shell{

  padding-top:28px;

  padding-bottom:44px;

}



.ops-topbar{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:18px;

  margin-bottom:16px;

}



.ops-nav{

  display:grid;

  grid-template-columns:repeat(6,minmax(0,1fr));

  gap:10px;

  margin-bottom:18px;

  padding:12px;

}



.ops-nav a{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  min-height:46px;

  padding:10px 12px;

  border-radius:14px;

  border:1px solid var(--line);

  background:#f8fbff;

  color:var(--text);

  text-decoration:none;

  font-size:.95rem;

  font-weight:600;

}



.ops-nav a.active{

  border-color:#b5cbff;

  background:#eaf1ff;

  color:var(--brand);

}



.ops-grid{

  align-items:start;

}



.ops-login-card{

  max-width:760px;

  margin:0 auto;

}



.ops-table-form{

  display:grid;

  gap:10px;

  min-width:360px;

}



.ops-users-head{

  align-items:flex-start;

  justify-content:space-between;

}



.ops-users-kpis{

  display:flex;

  align-items:center;

  gap:8px;

  flex-wrap:wrap;

}



.ops-users-kpis span{

  display:inline-flex;

  align-items:baseline;

  gap:6px;

  padding:8px 11px;

  border:1px solid #dbe7f5;

  border-radius:999px;

  background:#f8fbff;

  color:var(--muted);

  font-size:.86rem;

  font-weight:800;

}



.ops-users-kpis strong{

  color:var(--text);

}



.ops-users-filter{

  grid-template-columns:minmax(0,1fr) auto;

}



.ops-user-list{

  display:grid;

  gap:10px;

}



.ops-user-card{

  border:1px solid #dce7f3;

  border-radius:16px;

  background:#fff;

  overflow:hidden;

  box-shadow:0 10px 26px rgba(15,42,76,.05);

}



.ops-user-card[open]{

  border-color:#bfd1eb;

  background:#fbfdff;

}



.ops-user-card.is-child{

  border-radius:14px;

  box-shadow:none;

}



.ops-user-summary{

  list-style:none;

  display:grid;

  grid-template-columns:minmax(230px,1fr) minmax(260px,.9fr) auto;

  gap:12px;

  align-items:center;

  padding:12px 14px;

  cursor:pointer;

}



.ops-user-summary::-webkit-details-marker{

  display:none;

}



.ops-user-card.is-child>.ops-user-summary{

  grid-template-columns:minmax(190px,1fr) minmax(220px,.85fr) auto;

  padding:10px 12px;

}



.ops-user-primary{

  display:flex;

  align-items:center;

  gap:10px;

  min-width:0;

}



.ops-user-avatar{

  width:34px;

  height:34px;

  border-radius:12px;

  display:grid;

  place-items:center;

  flex:0 0 auto;

  background:#eaf1ff;

  color:#244fb8;

  font-size:.78rem;

  font-weight:900;

}



.ops-user-card.is-child .ops-user-avatar{

  width:30px;

  height:30px;

  border-radius:10px;

  background:#eef7f2;

  color:#247048;

}



.ops-user-title{

  display:grid;

  gap:2px;

  min-width:0;

}



.ops-user-title strong,

.ops-user-title span{

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}



.ops-user-title strong{

  font-size:.98rem;

}



.ops-user-title span{

  color:var(--muted);

  font-size:.84rem;

}



.ops-user-meta,

.ops-user-counts{

  display:flex;

  align-items:center;

  gap:7px;

  flex-wrap:wrap;

}



.ops-user-counts{

  justify-content:flex-end;

  color:var(--muted);

  font-size:.86rem;

  font-weight:800;

  white-space:nowrap;

}



.ops-user-counts strong{

  color:var(--text);

}



.ops-user-chevron{

  color:#8aa0bd;

  transition:transform .16s ease;

}



.ops-user-card[open]>.ops-user-summary .ops-user-chevron{

  transform:rotate(90deg);

}



.ops-pill{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:26px;

  padding:5px 9px;

  border-radius:999px;

  background:#f3f7fb;

  border:1px solid #dbe6f2;

  color:#40546d;

  font-size:.78rem;

  font-weight:900;

  line-height:1;

}



.ops-pill.success{

  background:#e8f8ee;

  border-color:#c8ead5;

  color:#237143;

}



.ops-pill.muted{

  background:#f2f4f7;

  border-color:#d8e0ea;

  color:#7b8795;

}



.ops-pill.brand{

  background:#edf3ff;

  border-color:#ccdcff;

  color:#2955c8;

}



.ops-pill.child{

  background:#fff7e8;

  border-color:#f5dfaf;

  color:#906318;

}



.ops-pill.warning{

  background:#fff7e8;

  border-color:#f5dfaf;

  color:#906318;

}



.ops-pill.error{

  background:#fee8e8;

  border-color:#f5c6c6;

  color:#9b2525;

}



.ops-user-body{

  display:grid;

  gap:11px;

  padding:12px 14px 14px;

  border-top:1px solid #e2ebf6;

  background:linear-gradient(180deg,#fbfdff 0%,#f6f9fd 100%);

}



.ops-user-edit{

  display:grid;

  gap:9px;

}



.ops-user-fields{

  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:9px;

}



.ops-user-fields-secondary{

  grid-template-columns:minmax(180px,1.2fr) repeat(4,minmax(120px,1fr));

}



.ops-user-card input,

.ops-user-card select{

  min-height:40px;

  padding:9px 11px;

  border-radius:12px;

  font-size:.9rem;

}



.ops-user-actions,

.ops-user-delete{

  display:flex;

  align-items:center;

  gap:10px;

  flex-wrap:wrap;

}



.ops-child-users{

  display:grid;

  gap:8px;

  margin-top:2px;

  margin-left:18px;

  padding-left:14px;

  border-left:2px solid #dbe6f3;

}



.account-create-card{

  padding:20px;

}



.account-create-form{

  display:grid;

  gap:10px;

}



.account-create-form label,

.account-user-card label{

  font-size:.88rem;

}



.account-create-form input,

.account-create-form select,

.account-user-card input,

.account-user-card select{

  min-height:24px;

  padding:9px 11px;

  border-radius:12px;

  font-size:.9rem;

}



.account-create-secondary{

  grid-template-columns:minmax(180px,1.2fr) repeat(4,minmax(120px,1fr));

}



.account-user-fields-secondary{

  grid-template-columns:minmax(180px,1.2fr) repeat(4,minmax(120px,1fr));

}



.account-permission-grid{

  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:8px;

}



.account-permission-grid .toggle-line{

  min-height:40px;

  padding:9px 11px;

  border-radius:13px;

  font-size:.86rem;

}



.account-user-list{

  margin-top:2px;

}



.project-card-modern{

  display:block;

  padding:0;

  max-width:none;

  border-radius:16px;

  overflow:hidden;

  box-shadow:0 10px 26px rgba(15,42,76,.05);

}



.project-card-modern[open]{

  border-color:#bfd1eb;

}



.project-card-summary{

  list-style:none;

  display:grid;

  grid-template-columns:minmax(220px,1fr) auto 18px;

  gap:12px;

  align-items:center;

  padding:12px 14px;

  cursor:pointer;

}



.project-card-summary::-webkit-details-marker{

  display:none;

}



.project-card-modern[open]>.project-card-summary .ops-user-chevron{

  transform:rotate(90deg);

}



.project-card-title{

  display:grid;

  gap:2px;

  min-width:0;

}



.project-card-title strong,

.project-card-title span{

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}



.project-card-title strong{

  font-size:.98rem;

}



.project-card-title span{

  color:var(--muted);

  font-size:.84rem;

}



.project-card-pills{

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:7px;

  flex-wrap:wrap;

}



.project-card-body{

  display:grid;

  gap:11px;

  padding:12px 14px 14px;

  border-top:1px solid #e2ebf6;

  background:linear-gradient(180deg,#fbfdff 0%,#f6f9fd 100%);

}



.project-create-polished,

.project-create-inline-compact{

  border:1px solid #dce7f3;

  border-radius:16px;

  padding:14px;

  background:#fff;

  box-shadow:0 10px 26px rgba(15,42,76,.04);

  margin: 10px;

}



.project-create-topline{

  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

}



.project-create-topline .project-create-field select,

.project-create-topline .project-create-field input,

.project-create-inline-compact input,

.project-create-inline-compact select{

  min-height:30px;

  padding:9px 11px;

  border-radius:12px;

  font-size:.9rem;

}



.member-checklist-compact,

.member-checklist{

  border-radius:14px;

}



.member-check-compact,

.member-check{

  border-radius:12px;

  padding:8px 10px;

  font-size:.88rem;

}



.ops-note-box{

  padding:12px 14px;

  border:1px solid var(--line);

  border-radius:14px;

  background:#fbfdff;

  white-space:normal;

}



@media (max-width: 920px){

  .control-actions-bar,

  .control-section-summary,

  .ops-topbar{

    flex-direction:column;

    align-items:flex-start;

  }



  .control-export-list{

    flex-direction:column;

  }



  .control-export-list .btn{

    width:100%;

  }



  .ops-nav{

    grid-template-columns:repeat(3,minmax(0,1fr));

  }



  .ops-user-summary,

  .ops-user-card.is-child>.ops-user-summary{

    grid-template-columns:1fr;

  }



  .ops-user-counts{

    justify-content:flex-start;

  }



  .ops-user-fields,

  .ops-user-fields-secondary,

  .account-create-secondary,

  .account-user-fields-secondary,

  .account-permission-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }



  .project-card-summary{

    grid-template-columns:1fr;

  }



  .project-card-pills{

    justify-content:flex-start;

  }

}



@media (max-width: 760px){

  .ops-nav{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }



  .ops-table-form{

    min-width:0;

  }



  .ops-users-filter,

  .ops-user-fields,

  .ops-user-fields-secondary,

  .account-create-secondary,

  .account-user-fields-secondary,

  .account-permission-grid{

    grid-template-columns:1fr;

  }



  .ops-user-card .btn{

    width:auto;

  }



  .ops-child-users{

    margin-left:8px;

    padding-left:10px;

  }

}



/* v7 dashboard/nav polish */

.dashboard-hero{justify-content:space-between;padding:24px 26px 22px;margin-bottom:18px;align-items:flex-start}

.dashboard-hero>div:first-child{display:grid;gap:12px;max-width:780px}

.dashboard-plan-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);max-width:780px}

.dashboard-plan-strip strong{display:block;font-size:1rem;margin:2px 0 4px}

.dashboard-plan-strip p{margin:0;font-size:.82rem;line-height:1.45}

.dashboard-plan-actions{justify-content:flex-end;flex-wrap:wrap}

.dashboard-plan-actions .btn{min-height:40px;padding:10px 14px;font-size:.9rem}

.nav-more-menu{opacity:0;transform:translateY(10px) scale(.985);transform-origin:top right;pointer-events:none;transition:opacity .26s ease,transform .26s cubic-bezier(.22,1,.36,1)}

.nav-more[open] .nav-more-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.nav-item-icon{width:18px;height:18px;min-width:18px;border-radius:6px;font-size:.62rem}

.nav-item-icon i{font-size:.62rem;line-height:1}

.not-found-shell{display:grid;place-items:center;padding:36px 0 10px}

.not-found-card{width:min(720px,100%);text-align:center;padding:34px 30px;background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)}

.not-found-code{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;background:#eef4ff;color:#3366e8;font-size:.86rem;font-weight:800;margin-bottom:14px}

.not-found-card h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:10px}

.not-found-card p{max-width:54ch;margin:0 auto 12px;line-height:1.65}

@media (max-width:760px){

  .dashboard-plan-strip{flex-direction:column;align-items:flex-start}

  .dashboard-plan-actions{width:100%;flex-direction:column;align-items:stretch}

  .dashboard-plan-actions .btn{width:100%}

}



/* v13 layout validation polish */

.public-builder-copy{

  align-content:start;

}



.partner-section-inline{

  margin-top:0;

}



.partner-section-inline .card-header{

  padding-bottom:4px;

}



.partner-section-inline .partner-marquee{

  padding-top:0;

}



.dashboard-hero{

  display:grid;

  grid-template-columns:minmax(0,1fr) auto;

  gap:18px;

  padding:20px 22px;

  align-items:start;

  background-color: #fff;

}



.dashboard-hero>div:first-child{

  max-width:none;

  gap:10px;

}



.dashboard-hero h1{

  margin-bottom:2px;

}



.dashboard-plan-strip{

  width:100%;

  max-width:none;

  padding:10px 12px;

  border-radius:16px;

}



.dashboard-plan-strip strong{

  font-size:.96rem;

}



.dashboard-plan-strip p{

  font-size:.78rem;

}



.support-card{

  max-width:1080px;

  padding:22px;

}



.support-layout{

  display:grid;

  grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);

  gap:18px;

  align-items:start;

}



.support-form-grid{

  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:16px;

}



.support-form-grid label{

  display:flex;

  flex-direction:column;

  gap:8px;

}



.support-subject,

.support-message,

.support-form-footer{

  grid-column:1/-1;

}



.support-message textarea{

  min-height:220px;

}



.support-form-footer{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:16px;

  padding-top:4px;

}



.support-side-card{

  display:grid;

  gap:14px;

  padding:18px;

  border:1px solid var(--line);

  border-radius:22px;

  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);

}



.support-side-card h2{

  margin:0;

  font-size:1.15rem;

}



.support-side-card p{

  margin:0;

}



.builder-validation-alert{

  margin:4px 0 12px;

}



.nav-more-trigger span:first-child{

  white-space:nowrap;

}



@media (max-width: 920px){

  .support-layout{

    grid-template-columns:1fr;

  }

}



@media (max-width: 760px){

  .dashboard-hero{

    grid-template-columns:1fr;

    padding:18px;

  }



  .support-card{

    padding:18px;

  }



  .support-form-grid{

    grid-template-columns:1fr;

  }



  .support-form-footer{

    flex-direction:column;

    align-items:stretch;

  }



  .support-actions .btn{

    width:100%;

  }

}



/* v14 public home mobile repair */

.public-builder-hero,

.public-builder-copy,

.public-builder-card,

.public-builder-shell,

.public-builder-form,

.public-builder-preview,

.public-template-block,

.partner-section-inline,

.partner-marquee,

.partner-track,

.public-home-points{

  min-width:0;

}



@media (min-width: 1101px){

  .public-builder-hero{

    align-items:stretch;

  }



  .public-builder-card{

    height:100%;

    display:grid;

  }



  .public-builder-shell{

    height:100%;

    align-items:stretch;

  }



  .public-builder-form,

  .public-builder-preview{

    min-height:0;

    align-content:start;

  }

}



.template-gallery.public-template-gallery .template-image-btn,

.partner-track .partner-card{

  min-width:0;

}



.template-gallery.public-template-gallery{

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:8px;

}



.template-gallery.public-template-gallery .template-image-btn{

  padding:6px;

  gap:6px;

  border-radius:12px;

}



.template-gallery.public-template-gallery .template-exact-thumb,

.template-gallery.public-template-gallery .template-image-btn img{

  width:100%;

  max-width:72px;

  margin:0 auto;

  aspect-ratio:1 / 1;

  border-radius:10px;

}



.template-gallery.public-template-gallery .template-image-btn strong{

  font-size:.65rem;

  line-height:1.12;

}



.partner-card strong{

  overflow-wrap:anywhere;

}



@media (max-width: 760px){

  body{

    overflow-x:hidden;

  }



  .public-builder-copy,

  .public-builder-copy > *,

  .public-builder-card,

  .public-builder-preview{

    max-width:100%;

  }



  .public-builder-copy h1,

  .public-builder-copy .site-markup,

  .public-builder-copy .site-markup p{

    max-width:100%;

    overflow-wrap:anywhere;

  }



  .public-builder-colors{

    grid-template-columns:1fr;

  }



  .template-gallery.public-template-gallery .template-image-btn{

    width:100%;

  }



  .template-gallery.public-template-gallery .template-image-btn strong{

    overflow-wrap:anywhere;

  }



  .public-preview-canvas{

    width:100% !important;

    min-width:0 !important;

    justify-self:center;

  }



  .public-preview-canvas .qr-template-artwork,

  .public-preview-canvas .qr-frame-inner{

    max-width:100%;

  }



  .partner-marquee{

    overflow-x:auto;

    overflow-y:hidden;

    padding-bottom:4px;

    mask-image:none;

    -webkit-mask-image:none;

    scrollbar-width:thin;

  }



  .partner-track{

    width:max-content;

    min-width:100%;

    animation:none;

  }



  .partner-track .partner-card{

    min-width:140px;

    max-width:180px;

  }

}



/* v15 compact mobile header + fries menu */

@media (max-width: 980px){

  .site-header{

    padding:8px 0 !important;

  }



  .nav{

    flex-direction:row !important;

    align-items:center !important;

    justify-content:space-between;

    gap:10px !important;

    min-height:52px;

  }



  .brand-wrap{

    min-width:0;

    gap:10px;

    flex:1 1 auto;

  }



  .brand{

    font-size:1rem;

    line-height:1.05;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

  }



  .brand-mark,

  .brand-logo-img{

    width:32px;

    height:32px;

    min-width:32px;

    border-radius:11px;

  }



  .nav-toggle{

    width:40px;

    height:40px;

    min-width:40px;

    border-radius:14px;

    padding:0;

    gap:3px;

    box-shadow:none;

  }



  .nav-toggle-line{

    width:16px;

    height:2px;

    border-radius:999px;

    background:#4d68e8;

  }



  .nav-panel{

    top:calc(100% + 8px);

    padding:12px;

    border-radius:20px;

  }

}



@media (max-width: 760px){

  .container{

    width:min(100% - 18px,1280px);

  }



  .site-header{

    padding:6px 0 !important;

  }



  .nav{

    min-height:46px;

    gap:8px !important;

  }



  .brand-wrap{

    gap:8px;

  }



  .brand{

    font-size:.92rem;

    letter-spacing:-.01em;

  }



  .brand-mark,

  .brand-logo-img{

    width:28px;

    height:28px;

    min-width:28px;

    border-radius:10px;

  }



  .nav-toggle{

    width:36px;

    height:36px;

    min-width:36px;

    border-radius:12px;

  }



  .nav-toggle-line{

    width:14px;

  }



  .nav-panel{

    top:calc(100% + 6px);

  }

}

.analytics-stat-grid {

  margin-bottom: 18px;

}



.analytics-trend-card {

  margin-bottom: 18px;

}



.analytics-bars {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));

  gap: 12px;

  align-items: end;

  min-height: 220px;

}



.analytics-bar-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

}



.analytics-bar-value {

  font-size: 12px;

  color: var(--ink-muted, #60708f);

}



.analytics-bar-track {

  width: 100%;

  min-height: 140px;

  border-radius: 20px;

  background: linear-gradient(180deg, rgba(79, 107, 255, 0.08), rgba(79, 107, 255, 0.18));

  border: 1px solid rgba(99, 123, 255, 0.16);

  display: flex;

  align-items: flex-end;

  padding: 8px;

}



.analytics-bar-fill {

  display: block;

  width: 100%;

  border-radius: 14px;

  background: linear-gradient(180deg, #7f96ff 0%, #4f6bff 100%);

  box-shadow: 0 14px 30px rgba(79, 107, 255, 0.24);

}



.analytics-bar-label {

  font-size: 11px;

  color: var(--ink-muted, #60708f);

  text-align: center;

}



.analytics-data-grid {

  margin-bottom: 18px;

}



.qr-list-wrap {

  width: 100%;

  margin-top: 12px;

  overflow-x: auto;

}



.qr-list-wrap table {

  width: 100%;

  min-width: 100%;

  table-layout: auto;

}



.qr-list-wrap td,

.qr-list-wrap th {

  white-space: normal;

  vertical-align: top;

}



.qr-lock-status {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  white-space: nowrap;

}



.qr-lock-status.is-locked {

  padding: 5px 9px;

  border: 1px solid #f0dfad;

  border-radius: 999px;

  background: #fff8e6;

  color: #8a6100;

  font-size: .82rem;

  font-weight: 800;

}



.qr-lock-status i,

.qr-edit-btn i {

  font-size: .78rem;

}



.qr-edit-btn {

  display: inline-flex;

  align-items: center;

  gap: 7px;

}



.qr-edit-btn.is-locked i {

  color: #8a6100;

}



.qr-lock-notice strong {

  display: flex;

  align-items: center;

  gap: 10px;

}



.qr-lock-notice-icon {

  width: 26px;

  height: 26px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #f0dfad;

  border-radius: 10px;

  background: #fff8e6;

  color: #8a6100;

  font-size: .82rem;

  flex: 0 0 26px;

}



.qr-selection-toolbar {

  display: grid;

  gap: 12px;

}



.qr-selection-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  padding: 14px 16px;

  border: 1px solid var(--line);

  border-radius: 20px;

  background: linear-gradient(180deg,#fbfdff 0%,#f5f9ff 100%);

}



.qr-selection-copy {

  display: grid;

  gap: 4px;

}



.qr-selection-copy strong {

  font-size: .95rem;

}



.qr-selection-actions {

  justify-content: flex-end;

  align-items: center;

  flex-wrap: nowrap;

}



.qr-selection-actions .btn {

  min-height: 42px;

  padding: 0 16px;

  border-radius: 14px;

  font-size: 0.88rem;

}



.qr-select-toggle,

.qr-select-row {

  appearance: none;

  -webkit-appearance: none;

  width: 22px !important;

  height: 22px !important;

  min-width: 22px;

  border-radius: 8px !important;

  border: 1.5px solid #98abc6 !important;

  background: #fff !important;

  display: grid;

  place-items: center;

  cursor: pointer;

  padding: 0 !important;

  position: relative;

  box-shadow: none !important;

}



.qr-select-toggle::after,

.qr-select-row::after {

  content: "";

  width: 11px;

  height: 6px;

  border-left: 2px solid transparent;

  border-bottom: 2px solid transparent;

  transform: rotate(-45deg) translateY(-1px);

  opacity: 0;

  position: static;

  background: transparent;

  box-shadow: none;

}



.qr-select-toggle:checked,

.qr-select-row:checked {

  background: var(--brand) !important;

  border-color: var(--brand) !important;

  box-shadow: 0 0 0 4px rgba(51,102,232,.12) !important;

}



.qr-select-toggle:checked::after,

.qr-select-row:checked::after {

  border-color: #fff;

  opacity: 1;

  left: auto;

}



.qr-selection-actions .btn[disabled] {

  pointer-events: none;

  opacity: .55;

}



.project-create-polished {

  grid-template-columns: 1fr;

  gap: 12px;

  align-items: start;

}



.project-create-topline {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 12px;

  width: 100%;

}



.project-create-topline .project-create-field {

  display: grid;

  gap: 6px;

  font-size: 0.84rem;

}



.project-create-topline .project-create-field select,

.project-create-topline .project-create-field input {

  min-height: 46px;

  border-radius: 16px;

  padding: 10px 14px;

}



.project-member-picker-compact {

  gap: 8px;

}



.member-checklist-compact {

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: 8px;

  max-height: none;

  padding: 10px;

  border-radius: 16px;

  background: linear-gradient(180deg, #fcfdff 0%, #f6f9ff 100%);

}



.member-check-compact {

  min-height: 50px;

  padding: 10px 12px;

  border-radius: 14px;

  gap: 10px;

}



.member-check-compact strong {

  font-size: 0.88rem;

}



.member-check-compact small {

  font-size: 0.72rem;

  line-height: 1.3;

}



.project-create-action-row {

  justify-content: flex-start;

}



.project-create-action-row .btn {

  min-height: 44px;

  padding: 0 18px;

  border-radius: 14px;

}



/* QR builder preview rail: current source of truth for sidebar width, breakpoint, and sticky behavior. */

.qr-builder {

  display: block;

  overflow: visible !important;

}



.qr-builder-card {

  overflow: visible !important;

}



.qr-builder-header {

  justify-content: space-between;

  align-items: flex-start;

}



.qr-builder-header .btn {

  margin-left: auto;

}



.qr-builder .builder-layout {

  display: block;

  overflow: visible !important;

}



.qr-builder .builder-main {

  display: grid;

  gap: 10px;

  min-width: 0;

  overflow: visible !important;

}



.qr-builder .preview-rail {

  position: relative;

  min-width: 0;

  overflow: visible !important;

}



.qr-builder .preview-card {

  display: grid;

  gap: 12px;

  min-width: 0;

  background: #f8fbff;

  border: 1px solid var(--line);

  border-radius: 26px;

  padding: 20px;

  box-shadow: var(--shadow);

  margin-bottom: 18px;

  box-sizing: border-box;

}



.preview-mode-toggle {

  justify-content: center;

  width: 100%;

  min-height: 55px;

  border-radius: 14px;

}



.preview-mode-toggle.is-active {

  background: #eef4ff;

  border-color: #8fb0ff;

  color: #2d5bff;

}



.preview-mode-toggle:disabled {

  opacity: .62;

  cursor: not-allowed;

}



.qr-builder .preview-card .preview-heading,

.qr-builder .preview-card .preview-actions {

  position: relative;

  z-index: 2;

}



.qr-builder .preview-heading {

  align-items: flex-start;

}



.preview-expand-toggle {

  display: none;

  flex: 0 0 auto;

  width: 42px;

  height: 42px;

  place-items: center;

  border: 1px solid #cad8e8;

  border-radius: 12px;

  background: rgba(255,255,255,.9);

  color: #102a4c;

  cursor: pointer;

  box-shadow: 0 12px 28px rgba(16,42,76,.10);

}



.preview-expand-toggle:hover {

  border-color: #7fa3ff;

  color: #2d5bff;

}



.qr-builder .preview-card.is-3d-active .preview-expand-toggle {

  display: grid;

}



.qr-builder .preview-card.is-3d-active .preview-heading {

  display:flex;

}



.qr-builder .preview-card.is-3d-active {

  box-shadow: 0 24px 70px rgba(15,42,76,.18);

}



.qr-builder .preview-card.is-3d-active #qrcodePreview {

  display:none !important;

}



.qr-builder .builder-section .qr-3d-color-grid {

  grid-template-columns: repeat(3, minmax(0, 1fr));

}



.qr-builder .preview-card .template-preview {

  min-height: 300px !important;

  padding: 14px !important;

  overflow: hidden !important;

}



@media (min-width: 900px) {

  .qr-builder .builder-layout {

    display: grid !important;

    grid-template-columns: 340px minmax(0, 1fr) !important;

    gap: 18px !important;

    align-items: start !important;

  }



  .qr-builder .builder-layout.is-preview-expanded {

    grid-template-columns: minmax(520px, 620px) minmax(0, 1fr) !important;

  }



  .qr-builder .builder-main {

    min-width: 0 !important;

    grid-column: 2 !important;

  }



  .qr-builder .preview-rail {

    grid-column: 1 !important;

    align-self: stretch !important;

    min-height: var(--preview-rail-min-height, 0px);

  }



  .qr-builder .preview-card {

    position: sticky !important;

    top: 112px !important;

    align-self: flex-start !important;

    width: 340px !important;

    min-width: 340px !important;

    max-width: 340px !important;

    height: fit-content !important;

    max-height: none !important;

    overflow: visible !important;

    margin-bottom: 0 !important;

  }



  .qr-builder .builder-layout.is-preview-expanded .preview-card:not(.is-fixed) {

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

  }



  .qr-builder .preview-card.is-fixed {

    position: fixed !important;

    top: var(--preview-pin-top, 112px) !important;

    left: var(--preview-pin-left, auto) !important;

    width: var(--preview-pin-width, 340px) !important;

    min-width: 0 !important;

    max-width: none !important;

    z-index: 35 !important;

  }



  .qr-builder .preview-card.is-fixed.is-3d-active {

    z-index: 70 !important;

  }



  .qr-builder .preview-card.is-preview-expanded,

  .qr-builder .preview-card.is-fixed.is-preview-expanded {

    max-height: calc(100vh - var(--preview-pin-top, 112px) - 18px) !important;

    overflow: auto !important;

    z-index: 90 !important;

  }



  .qr-builder .preview-card.is-preview-expanded .qr3d-builder-embed {

    height: min(62vh, 620px);

  }



  .qr-builder .preview-card.is-preview-expanded .qr3d-2d-thumb {

    width: 136px;

  }



  .qr-builder .preview-card.is-parked {

    position: absolute !important;

    top: var(--preview-park-top, 0px) !important;

    left: 0 !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    z-index: 2 !important;

  }

}



@media (max-width: 899px) {

  .qr-builder .builder-layout {

    display: block !important;

  }



  .qr-builder .preview-rail {

    min-height: 0 !important;

  }



  .qr-builder .preview-card {

    flex: none !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    position: static !important;

    left: auto !important;

    top: auto !important;

    max-height: none !important;

    overflow: visible !important;

    margin: 18px 0 0;

  }



  .qr-builder .preview-actions {

    justify-content: stretch;

  }



  .qr-builder .preview-submit {

    width: 100% !important;

    min-width: 0;

  }

}



@media (max-width: 768px) {

  .analytics-bars {

    grid-template-columns: repeat(7, minmax(28px, 1fr));

    overflow-x: auto;

    padding-bottom: 8px;

  }



  .analytics-bar-track {

    min-height: 110px;

  }



  .qr-selection-bar,

  .project-create-topline {

    grid-template-columns: 1fr;

  }



  .qr-selection-bar {

    display: grid;

    justify-content: stretch;

  }



  .qr-selection-actions {

    justify-content: stretch;

  }



  .qr-selection-actions .btn {

    width: 100%;

  }

}



/* Support ticket threads */

.status-pill.info{

  background:#eaf1ff;

  color:#2457d6;

}



.password-field{

  display:grid;

  grid-template-columns:minmax(0,1fr) 42px;

  align-items:stretch;

  border:1px solid var(--line);

  border-radius:16px;

  background:#fff;

  overflow:hidden;

}



.password-field input{

  border:0 !important;

  border-radius:0 !important;

  min-width:0;

  box-shadow:none !important;

}



.password-toggle{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  border:0;

  border-left:1px solid var(--line);

  background:#f8fbff;

  color:#45607f;

  cursor:pointer;

  font-size:.95rem;

}



.password-toggle:hover{

  color:#3366e8;

  background:#eef4ff;

}



.dashboard-billing-pill{

  width:max-content;

  margin:6px 0 4px;

}



.support-page-card,

.support-ticket-section,

.ops-support-hero,

.ops-support-panel{

  border-radius:24px;

}



.support-page-head{

  align-items:flex-start;

  gap:14px;

}



.support-count-chip,

.support-unread-pill,

.ops-nav-badge{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  border-radius:999px;

  font-size:.72rem;

  font-weight:800;

  line-height:1;

}



.support-count-chip{

  padding:8px 10px;

  color:#2457d6;

  background:#edf4ff;

}



.support-layout-modern{

  grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);

}



.support-compose-card{

  padding:16px;

  border:1px solid #d8e4f4;

  border-radius:20px;

  background:#fbfdff;

}



.support-side-card-modern{

  border-radius:20px;

}



.support-ticket-section{

  margin-top:18px;

}



.support-empty-state{

  display:grid;

  gap:4px;

  padding:18px;

  border:1px dashed #bcd0ef;

  border-radius:18px;

  background:#f7fbff;

  color:var(--muted);

}



.support-empty-state strong{

  color:var(--text);

}



.support-ticket-list,

.ops-ticket-list{

  display:grid;

  gap:12px;

}



.support-ticket-card,

.ops-ticket-card{

  border:1px solid #d8e4f4;

  border-radius:18px;

  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);

  overflow:hidden;

}



.support-ticket-card[open],

.ops-ticket-card[open]{

  box-shadow:0 18px 36px rgba(19,45,94,.08);

}



.support-ticket-summary,

.ops-ticket-summary{

  list-style:none;

  cursor:pointer;

  display:grid;

  gap:12px;

  align-items:center;

  padding:14px 16px;

}



.support-ticket-summary{

  grid-template-columns:minmax(0,1fr) auto;

}



.ops-ticket-summary{

  grid-template-columns:auto minmax(0,1fr) auto;

}



.support-ticket-summary::-webkit-details-marker,

.ops-ticket-summary::-webkit-details-marker{

  display:none;

}



.support-ticket-main,

.ops-ticket-title{

  display:grid;

  gap:4px;

  min-width:0;

}



.support-ticket-main strong,

.ops-ticket-title strong{

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  color:var(--text);

}



.support-ticket-main small,

.ops-ticket-title small{

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  color:var(--muted);

  font-size:.8rem;

}



.support-ticket-meta,

.ops-ticket-pills{

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:8px;

  color:var(--muted);

  font-size:.78rem;

}



.support-ticket-meta em,

.ops-ticket-pills em{

  font-style:normal;

  padding:6px 9px;

  border-radius:999px;

  background:#f1f5fb;

  color:#536d91;

  font-weight:800;

}



.support-ticket-card[open] .support-ticket-meta .fa-chevron-down,

.ops-ticket-card[open] .ops-ticket-pills .fa-chevron-down{

  transform:rotate(180deg);

}



.support-thread{

  display:grid;

  gap:10px;

  padding:14px 16px;

  border-top:1px solid #e3ebf8;

}



.support-message-row{

  display:flex;

}



.support-message-row.is-user{

  justify-content:flex-start;

}



.support-message-row.is-ops{

  justify-content:flex-end;

}



.support-message-bubble{

  width:min(680px,88%);

  padding:12px 14px;

  border:1px solid #dbe6f5;

  border-radius:16px;

  background:#ffffff;

}



.support-message-row.is-ops .support-message-bubble{

  background:#eef4ff;

  border-color:#c9daf8;

}



.support-message-head{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  margin-bottom:6px;

  font-size:.78rem;

}



.support-message-head span{

  color:var(--muted);

  white-space:nowrap;

}



.support-message-bubble p{

  margin:0;

  color:#233d5d;

  line-height:1.55;

}



.support-reply-form,

.ops-ticket-reply-form{

  display:grid;

  gap:10px;

  margin:0 16px 16px;

  padding:14px;

  border:1px solid #d8e4f4;

  border-radius:16px;

  background:#fff;

}



.support-reply-form label,

.ops-ticket-reply-form label{

  display:grid;

  gap:7px;

}



.support-reply-form textarea,

.ops-ticket-reply-form textarea{

  min-height:96px;

}



.support-reply-actions,

.ops-ticket-actions{

  display:flex;

  justify-content:flex-end;

  gap:8px;

}



.support-delete-form,

.ops-ticket-delete-form{

  display:flex;

  justify-content:flex-end;

  padding:0 16px 16px;

}



.ops-nav a{

  position:relative;

}



.ops-nav-badge{

  min-width:18px;

  height:18px;

  padding:0 6px;

  margin-left:auto;

  background:#ff5c74;

  color:#fff;

  box-shadow:0 8px 16px rgba(255,92,116,.24);

}



.ops-support-stats{

  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:10px;

}



.ops-support-stats span{

  display:grid;

  gap:3px;

  padding:12px;

  border:1px solid #d8e4f4;

  border-radius:16px;

  background:#fbfdff;

  color:var(--muted);

  font-size:.8rem;

}



.ops-support-stats strong{

  color:var(--text);

  font-size:1.15rem;

}



.ops-support-panel{

  margin-top:16px;

}



.ops-support-create-card{

  margin-top:16px;

  padding:0;

  overflow:hidden;

  border-radius:22px;

}



.ops-create-ticket-details summary{

  list-style:none;

  cursor:pointer;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

  padding:16px 18px;

}



.ops-create-ticket-details summary::-webkit-details-marker{

  display:none;

}



.ops-create-ticket-details summary span{

  display:grid;

  gap:4px;

}



.ops-create-ticket-details summary strong{

  color:var(--text);

  font-size:1rem;

}



.ops-create-ticket-details summary small{

  color:var(--muted);

  font-size:.82rem;

}



.ops-create-ticket-details[open] summary .fa-chevron-down{

  transform:rotate(180deg);

}



.ops-create-ticket-form{

  display:grid;

  grid-template-columns:minmax(240px,1.3fr) minmax(150px,.7fr);

  gap:12px;

  padding:0 18px 18px;

}



.ops-create-ticket-form label{

  display:grid;

  gap:7px;

}



.ops-create-ticket-subject,

.ops-create-ticket-message,

.ops-create-ticket-actions{

  grid-column:1/-1;

}



.ops-create-ticket-message textarea{

  min-height:110px;

}



.ops-create-ticket-actions{

  display:flex;

  justify-content:flex-end;

}



.ops-support-filters{

  grid-template-columns:minmax(150px,.7fr) minmax(170px,.8fr) minmax(220px,1.4fr) auto;

}



.ops-support-bulk{

  display:flex;

  justify-content:flex-end;

  margin:0 0 12px;

}



.ops-ticket-card.is-unread{

  border-color:#9dbbff;

  box-shadow:inset 4px 0 0 #396DFB;

}



.ops-ticket-check{

  display:flex;

  align-items:center;

}



.ops-ticket-check input{

  width:18px;

  height:18px;

}



.support-unread-pill{

  padding:6px 9px;

  background:#396DFB !important;

  color:#fff !important;

}



.ops-ticket-body{

  display:grid;

  gap:14px;

  padding-bottom:14px;

}



.ops-ticket-info{

  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:8px;

  padding:0 16px;

}



.ops-ticket-info span{

  display:grid;

  gap:3px;

  padding:10px 12px;

  border:1px solid #e1eaf7;

  border-radius:14px;

  background:#fff;

  color:var(--muted);

  font-size:.78rem;

  min-width:0;

}



.ops-ticket-info strong{

  color:var(--text);

  font-size:.72rem;

  text-transform:uppercase;

  letter-spacing:.04em;

}



.ops-support-thread{

  margin:0 16px;

  border:1px solid #e1eaf7;

  border-radius:16px;

  background:#f8fbff;

}



.ops-ticket-reply-form{

  grid-template-columns:180px minmax(0,1fr) auto;

  align-items:end;

}



.ops-ticket-reply-message{

  min-width:0;

}



@media (max-width: 920px){

  .support-layout-modern,

  .ops-support-filters,

  .ops-create-ticket-form,

  .ops-ticket-reply-form{

    grid-template-columns:1fr;

  }



  .ops-support-stats,

  .ops-ticket-info{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }



  .support-ticket-summary,

  .ops-ticket-summary{

    grid-template-columns:1fr;

  }



  .support-ticket-meta,

  .ops-ticket-pills{

    justify-content:flex-start;

    flex-wrap:wrap;

  }

}



@media (max-width: 620px){

  .ops-support-stats,

  .ops-ticket-info{

    grid-template-columns:1fr;

  }



  .support-message-bubble{

    width:100%;

  }



  .support-reply-actions,

  .ops-ticket-actions,

  .support-delete-form,

  .ops-ticket-delete-form{

    justify-content:stretch;

  }



  .support-reply-actions .btn,

  .ops-ticket-actions .btn,

  .support-delete-form .btn,

  .ops-ticket-delete-form .btn{

    width:100%;

  }

}



/* Pricing page final layout: four compact plan cards with the best seller emphasized. */

.pricing-wrap.pricing-grid-wrap{

  width:min(1480px,calc(100% - 40px));

  margin:0 auto;

  padding:42px 0 60px;

  gap:24px;

  place-items:stretch;

}



.pricing-hero{

  max-width:900px;

  margin:0 auto 4px;

  gap:12px;

}



.pricing-hero > .badge,

.pricing-card-badges .badge,

.pricing-best-pill{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  width:max-content;

  min-height:28px;

  padding:7px 11px;

  border-radius:999px;

  font-size:.78rem;

  font-weight:900;

  line-height:1;

}



.pricing-hero > .badge{

  background:#eaf1ff;

  color:#315fd8;

}



.pricing-title-markup h1{

  font-size:clamp(2rem,3vw,2.85rem);

  line-height:1.08;

  margin:0;

}



.pricing-intro-markup{

  max-width:760px;

  font-size:.95rem;

  line-height:1.55;

}



.pricing-grid{

  width:100%;

  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:18px;

  align-items:stretch;

}



.pricing-tier{

  position:relative;

  width:auto;

  min-width:0;

  min-height:100%;

  display:flex;

  flex-direction:column;

  gap:16px;

  padding:22px;

  overflow:hidden;

  background:linear-gradient(180deg,#ffffff 0%,#f9fcff 100%);

  border:1px solid #d7e4f3;

  box-shadow:0 18px 42px rgba(16,42,76,.07);

}



.pricing-tier.best-selling{

  border-color:#396DFB;

  box-shadow:0 22px 54px rgba(57,109,251,.20);

  transform:translateY(-10px);

}



.pricing-tier.best-selling::before{

  content:"";

  position:absolute;

  inset:0 0 auto;

  height:5px;

  background:linear-gradient(90deg,#396DFB 0%,#22b8cf 100%);

}



.pricing-tier.active{

  border-color:#9db8ff;

  box-shadow:0 0 0 3px rgba(67,114,241,.10),0 18px 42px rgba(16,42,76,.07);

}



.pricing-tier-top{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:10px;

}



.pricing-tier-top > div{

  min-width:0;

}



.pricing-card-badges{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:8px;

  flex-wrap:wrap;

}



.pricing-card-badges .badge{

  background:#eef4ff;

  color:#102a4c;

}



.pricing-best-pill{

  background:#396DFB;

  color:#fff;

  box-shadow:0 8px 18px rgba(57,109,251,.20);

}



.pricing-tier h2{

  margin:10px 0 8px;

  font-size:1.72rem;

  line-height:1.1;

}



.pricing-tier p{

  margin:0;

  color:#264160;

  font-size:.94rem;

  line-height:1.5;

}



.pricing-tier .feature-list-tight{

  flex:1 1 auto;

  display:grid;

  gap:10px;

  margin:4px 0 2px;

  padding:0;

  list-style:none;

}



.pricing-tier .feature-list-tight li{

  position:relative;

  padding-left:24px;

  font-size:.92rem;

  line-height:1.5;

  color:#102a4c;

}



.pricing-tier .feature-list-tight li::before{

  content:"";

  position:absolute;

  top:.42em;

  left:2px;

  width:7px;

  height:12px;

  border-right:2px solid #396DFB;

  border-bottom:2px solid #396DFB;

  transform:rotate(45deg);

}



.pricing-tier .btn,

.pricing-tier .pricing-inline-form,

.pricing-tier .paypal-box,

.pricing-tier .placeholder-paypal{

  margin-top:auto;

}



.pricing-tier .btn,

.pricing-tier .pricing-inline-form .btn{

  width:100%;

  min-height:46px;

}



.pricing-tier .placeholder-paypal,

.pricing-tier .paypal-box{

  padding:14px;

  border-radius:16px;

}



@media (max-width: 1280px){

  .pricing-wrap.pricing-grid-wrap{

    width:min(1120px,calc(100% - 36px));

  }



  .pricing-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }



  .pricing-tier.best-selling{

    transform:none;

  }

}



@media (max-width: 760px){

  .pricing-wrap.pricing-grid-wrap{

    width:min(100% - 22px,1280px);

    padding-top:26px;

  }



  .pricing-grid{

    grid-template-columns:1fr;

  }



  .pricing-tier{

    padding:20px;

  }

}