/* Dedicated Wi-Fi QR page editor. Only loaded on /utility/wifi-qr. */
body[data-utility="wifi-qr"] .ut-main{max-width:1440px;width:calc(100% - 44px)}
body[data-utility="wifi-qr"] .ut-heading{margin-bottom:20px}
body[data-utility="wifi-qr"] .ut-heading h1{font-size:clamp(27px,3vw,37px)}
.wifi-editor{display:grid;grid-template-columns:minmax(350px,0.88fr) minmax(390px,1.12fr);gap:19px;align-items:start}
.wifi-panel,.wifi-preview-panel{background:#fff;border:1px solid #e5e0ef;border-radius:17px;box-shadow:0 10px 35px #34245d09;min-width:0}
.wifi-panel-intro,.wifi-preview-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:23px 23px 18px}
.wifi-panel-intro h2,.wifi-preview-head h2{font-size:20px;letter-spacing:-.03em;color:#2b2549;margin:0 0 5px}
.wifi-panel-intro p,.wifi-preview-head p{margin:0;color:#878097;font-size:12px;line-height:1.5}
.wifi-live{white-space:nowrap;font-size:11px;font-weight:760;background:#f1f0ff;color:#6152ca;border-radius:99px;padding:6px 9px}
.wifi-live span{display:inline-block;background:#6a59dd;border-radius:50%;height:7px;width:7px;margin-right:4px}
.wifi-section{padding:21px 23px 19px;border-top:1px solid #eeebf4}
.wifi-section-head{display:flex;align-items:center;gap:10px;margin-bottom:17px}
.wifi-section-head h3{font-size:15px;font-weight:800;color:#332a4c;margin:0}
.wifi-step{width:27px;height:27px;display:grid;place-items:center;background:#f0ebff;color:#6652bd;border-radius:8px;font-size:11px;font-weight:850}
.wifi-field{display:flex;flex-direction:column;gap:7px;margin-bottom:13px;color:#57516d;font-size:12px;font-weight:730;min-width:0}
.wifi-field input:not([type=color]):not([type=range]),.wifi-field select{width:100%;min-width:0;border:1px solid #dedaeb;border-radius:9px;padding:11px 12px;font:inherit;font-size:13px;color:#33294e;outline-color:#7969e4;background:#fff}
.wifi-field input[type=color]{width:100%;height:41px;padding:3px;border-radius:9px;border:1px solid #dedaeb;background:#fff;cursor:pointer}
.wifi-field input[type=range]{width:100%;accent-color:#7967de}
.wifi-password-row{display:flex;gap:6px}
.wifi-password-row input{flex:1}
.wifi-password-row button{border:1px solid #ddd6ef;border-radius:9px;background:#f8f6ff;color:#5947b1;padding:0 12px;cursor:pointer;font-size:11px;font-weight:780}
.wifi-check{display:flex;align-items:center;gap:8px;font-size:12px;color:#5b5470;font-weight:650;margin:9px 0 13px;cursor:pointer}
.wifi-check input{accent-color:#735ce5;width:17px;height:17px}
.wifi-hint{color:#857d96;font-size:11.5px;line-height:1.65}
.wifi-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wifi-colors .wifi-field{font-size:11px}
.wifi-file{display:flex;flex-direction:column;gap:5px;font-weight:760;color:#56516e;font-size:12px;margin:12px 0 8px}
.wifi-file input{display:block;max-width:100%;width:100%;background:#faf9ff;border:1px dashed #cfc6e9;border-radius:9px;padding:10px;font-size:11px;cursor:pointer;color:#584fb0}
.wifi-file span{color:#9b92ae;font-weight:450;font-size:11px}
.wifi-clear{border:0;background:transparent;color:#6753c3;font-size:11px;cursor:pointer;padding:2px 0 7px}
.wifi-text-panel{border:1px solid #e9e4f3;border-radius:12px;padding:14px 13px;margin-bottom:11px;background:#fdfcff}
.wifi-text-panel-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:12px}
.wifi-text-panel-head strong{font-size:13px;color:#3e3556}
.wifi-reset-position{border:0;background:#efeaff;color:#6250b5;border-radius:8px;font-size:11px;padding:7px 9px;cursor:pointer}
.wifi-text-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(70px,.7fr) minmax(64px,.65fr);gap:10px}
.wifi-text-grid .wifi-field{font-size:10px}
.wifi-text-grid .wifi-field input:not([type=color]){padding:9px 8px}
.wifi-bold{align-self:end;grid-column:1/-1;margin:0 0 3px}
.wifi-print-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:12px}
.wifi-preview-panel{position:sticky;top:24px;overflow:hidden}
.wifi-preview-head{padding-bottom:16px}
#wePreviewFormat{background:#f0edfc;border-radius:8px;padding:7px 9px;color:#6c58b9;font-size:11px;white-space:nowrap;font-weight:750}
.wifi-preview-stage{min-height:390px;background:radial-gradient(#e5e2ed 1px,transparent 1px) 0 0/16px 16px,#f5f3f9;display:grid;place-items:center;padding:28px;overflow:hidden}
#wePreviewCanvas{display:block;max-width:100%;max-height:72vh;width:auto;height:auto;object-fit:contain;background:white;box-shadow:0 12px 42px #1c103a28;cursor:default;touch-action:none}
#wePreviewCanvas[data-dragging=true]{cursor:grabbing}
.wifi-preview-footer{padding:18px 22px 22px}
#weStatus{font-size:12px;color:#706781;margin:0 0 15px;min-height:20px;line-height:1.5}
#weStatus.is-error{color:#a63848}
.wifi-preview-actions{display:flex;flex-wrap:wrap;gap:8px}
.wifi-preview-actions button{border-radius:10px;cursor:pointer;font-size:12px;font-weight:800;padding:12px 16px}
.wifi-export-main{background:#7059e4;color:white;border:1px solid #7059e4}
.wifi-export-secondary{background:white;color:#6652b6;border:1px solid #dcd3f0}
.wifi-preview-actions button:disabled{opacity:.5;cursor:wait}
@media(max-width:950px){.wifi-editor{grid-template-columns:1fr}.wifi-preview-panel{position:static}.wifi-preview-stage{min-height:300px}#wePreviewCanvas{max-height:75vh}}
@media(max-width:600px){body[data-utility="wifi-qr"] .ut-main{width:calc(100% - 24px)}.wifi-panel-intro,.wifi-preview-head{padding:18px 16px}.wifi-section{padding:17px 16px}.wifi-preview-stage{padding:16px}.wifi-preview-actions button{flex:1}.wifi-panel-intro .wifi-live{display:none}}
@media print{body[data-utility="wifi-qr"] .header,body[data-utility="wifi-qr"] .footer,body[data-utility="wifi-qr"] .ut-crumb,body[data-utility="wifi-qr"] .ut-heading,body[data-utility="wifi-qr"] .wifi-panel,body[data-utility="wifi-qr"] .wifi-preview-head,body[data-utility="wifi-qr"] .wifi-preview-footer,body[data-utility="wifi-qr"] .ut-fineprint,body[data-utility="wifi-qr"] .ut-ad-rails{display:none!important}.wifi-editor{display:block}.wifi-preview-panel{position:static;border:0;box-shadow:none}.wifi-preview-stage{padding:0;background:white;min-height:0}#wePreviewCanvas{max-width:100%;max-height:none;box-shadow:none}}


/* Keep the two-column editor clear of the site's 300px ad rails. */
@media(min-width:1700px){
 body[data-utility="wifi-qr"] .ut-main{max-width:calc(100% - 650px)}
 body[data-utility="wifi-qr"] .wifi-editor{grid-template-columns:minmax(340px,.92fr) minmax(390px,1.08fr)}
}

.wifi-data-fields{display:grid;gap:4px;min-width:0}
.wifi-data-fields textarea{min-height:86px;resize:vertical;width:100%;border:1px solid #dedaeb;border-radius:9px;padding:11px 12px;color:#33294e;font:inherit;outline-color:#7969e4}
.wifi-field-checkbox{flex-direction:row!important;align-items:center;gap:10px!important}
.wifi-field-checkbox input{width:17px;height:17px;accent-color:#735ce5}
.wifi-data-reveal{border:1px solid #e2daee;border-radius:8px;background:#f8f6ff;padding:7px 10px;color:#6654bd;cursor:pointer;font-size:11px;align-self:flex-start}
.wifi-editor [hidden],.wifi-editor [hidden] *{display:none!important}
.wifi-preview-actions button[hidden]{display:none!important}

.wifi-export-hint{margin:13px 0 0;color:#88809a;font-size:11px;line-height:1.55;max-width:650px}

/* Locally bundled brand icons for QR logo customization. */
.qr-logo-library{margin:14px 0 16px;border:1px solid #e5dff0;padding:13px;border-radius:13px;background:#fbfaff}
.qr-logo-library-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 11px}
.qr-logo-library-title strong{font-size:12px;color:#38314f}
.qr-logo-library-title span{font-size:10px;font-weight:700;color:#9088a1;white-space:nowrap}
.qr-logo-search{display:block;margin:0 0 12px}
.qr-logo-search input{width:100%;padding:11px 12px;border-radius:9px;background:white;border:1px solid #ded8ec;color:#35294e;outline-color:#7464d9;font-size:12px}
.qr-logo-categories{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 11px}
.qr-logo-tab{border:1px solid #e2dced;background:#fff;color:#625a7b;border-radius:8px;padding:7px 9px;font-size:10.5px;font-weight:750;cursor:pointer}
.qr-logo-tab.active{background:#ede9ff;border-color:#a99ce6;color:#5945c1}
.qr-logo-tab:hover:not(:disabled){border-color:#afa1e7}
.qr-logo-tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-height:292px;overflow-y:auto;overscroll-behavior:contain;padding:3px 5px 3px 1px}
.qr-logo-tile{border:1px solid #e3e0ea;background:#fff;border-radius:10px;aspect-ratio:1;min-width:0;display:grid;place-items:center;cursor:pointer;padding:7px;transition:border-color .12s,background .12s,box-shadow .12s}
.qr-logo-tile img{width:100%;max-width:35px;height:auto;max-height:35px;object-fit:contain}
.qr-logo-tile.selected{border:2px solid #7867e4;background:#f1edff;box-shadow:0 0 0 1px #a89ce862}
.qr-logo-tile:hover:not(:disabled){border-color:#ac9cdd;background:#f6f3ff}
.qr-logo-remove{font-size:27px;font-weight:350;line-height:1;color:#777183}
.qr-logo-help{font-size:11px;color:#675c87;min-height:18px;margin:11px 0 0;line-height:1.5}
.qr-logo-trademark{font-size:10px;color:#9b93a9;margin:9px 0 0;line-height:1.55}
.qr-logo-library button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:550px){.qr-logo-tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.qr-logo-tab{padding:6px 8px}}

/* MIT-licensed frame library (KoloQR) UI. Art never overlaps QR data modules. */
.qr-frame-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.qr-frame-tab{padding:8px 11px;border:1px solid #e5dff0;border-radius:8px;background:#fff;color:#6b6084;font-size:11px;font-weight:720;cursor:pointer}
.qr-frame-tab:hover{border-color:#9f92d8}
.qr-frame-tab.active{background:#eeebff;border-color:#8e7ce1;color:#5c49c4}
.qr-frame-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:330px;overflow-y:auto;padding:3px 4px 4px 1px}
.qr-frame-tile{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-width:0;min-height:99px;border:1px solid #e6e0ef;border-radius:11px;padding:8px 5px;background:#fcfbff;cursor:pointer;color:#534a6e;transition:border-color .12s,background .12s}
.qr-frame-tile img{width:65px;height:65px;object-fit:contain}
.qr-frame-tile-name{font-size:10px;line-height:1.2;text-align:center;min-height:23px;display:flex;align-items:center}
.qr-frame-tile.selected{border:2px solid #7867e4;background:#f1edff}
.qr-frame-tile:hover{border-color:#a797ea;background:#f5f2ff}
.qr-frame-remove{font-size:42px;font-weight:300;color:#9388ab;height:65px;display:grid;place-items:center}
.qr-frame-options{grid-template-columns:minmax(0,.45fr) minmax(0,1fr);margin-top:16px;align-items:center}
.qr-frame-caption-field input{padding:11px 12px}
@media(max-width:530px){.qr-frame-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.qr-frame-tile img{width:60px;height:60px}}


/* Expanded 156-frame gallery: category + search + virtual-free lazy SVG tiles. */
.qr-frame-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.qr-frame-header strong{font-size:12px;color:#3e3557}
.qr-frame-header span{font-size:11px;color:#89809a}
.qr-frame-search{display:block;margin-bottom:10px}
.qr-frame-search input{width:100%;padding:10px 12px;border:1px solid #dfd8ef;border-radius:9px;font:inherit;font-size:12px;background:#fff;outline-color:#7866e5;color:#33284e}
.qr-frame-tiles{max-height:345px}

/* Multi-source QR icon library: 6,287 Tabler glyphs, native emoji and brands.
   Only a paged subset of icon tiles is inserted in the DOM at once. */
.qr-logo-filters{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) minmax(0,.65fr);gap:8px;margin:5px 0 12px}
.qr-logo-filters .wifi-field{margin:0;font-size:10px}
.qr-logo-filters .wifi-field select{font-size:11px;padding:9px 8px}
.qr-logo-filters .wifi-field input[type=color]{height:38px}
.qr-logo-more{display:block;width:100%;padding:10px;margin-top:9px;background:#fff;border:1px solid #ddd4f0;border-radius:9px;color:#6145bd;font-size:11px;font-weight:800;cursor:pointer}
.qr-logo-more:hover{background:#f2eeff;border-color:#b8a5ea}
.qr-emoji-symbol{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:29px;line-height:1}
.qr-icon-upload-button{grid-column:1/-1;border:1px dashed #b9a6e7;border-radius:10px;background:#f7f3ff;padding:18px 9px;font-size:12px;font-weight:750;color:#5c49b4;cursor:pointer}
.qr-logo-tiles{max-height:330px}
.qr-logo-tile{position:relative}
@media(max-width:520px){.qr-logo-filters{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.65fr);gap:6px}.qr-logo-filters .wifi-field{font-size:9.5px}.qr-emoji-symbol{font-size:24px}}