.wq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.wq-field{display:grid;gap:6px;}
.wq-field>span{font:600 14px var(--display);color:var(--sub);}
.wq-field input,.wq-field select{width:100%;box-sizing:border-box;}
.wq-pass{display:flex;gap:8px;}
.wq-pass input{flex:1;min-width:0;}
.wq-pass .btn{padding:8px 12px;font-size:14px;}
.wq-out{justify-items:center;}
.wq-theme{display:inline-flex;gap:14px;flex-wrap:wrap;}
.wq-actions{justify-content:center;}
@media (max-width:640px){.wq-grid{grid-template-columns:minmax(0,1fr);}}

/* Шаблоны. Размеры в мм — те же, что в wifi-qr.js (лист A4 210×297):
   табличка A5 148×210, на листе left 31 / top 43.5;
   визитка 90×50, поле 8 мм, сетка с (11, 36.5);
   стикер 58×70, left 76 / top 113.5;
   комната A6 105×148, left 52.5 / top 74.5. */
.wq-tplblock{display:grid;gap:8px;}
.wq-tplcap{font:600 14px var(--display);color:var(--sub);}
.wq-tpls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.wq-tpl{position:relative;display:grid;align-content:start;gap:3px;margin:0;padding:10px 12px;border:1px solid var(--brd2);border-radius:12px;cursor:pointer;background:transparent;}
.wq-tpl input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;}
.wq-tpl span{font:600 14px/1.25 var(--display);color:var(--t);}
.wq-tpl small{font-size:12px;line-height:1.35;color:var(--sub);}
.wq-tpl:has(input:checked){border-color:var(--violet2);background:rgba(139,108,246,.14);}
.wq-tpl:has(input:focus-visible){outline:2px solid var(--violet2);outline-offset:2px;}
.wq-tplnote{margin:0;font-size:14px;color:var(--sub);}
@media (max-width:720px){.wq-tpls{grid-template-columns:repeat(2,minmax(0,1fr));}}

.wq-screen{width:min(100%,440px);}
.wq-piece{position:relative;}
.wq-piece.tpl-wall{width:100%;aspect-ratio:148/210;}
.wq-piece.tpl-room{width:min(100%,380px);margin-inline:auto;aspect-ratio:105/148;}
.wq-piece.tpl-sticker{width:min(100%,260px);margin-inline:auto;aspect-ratio:58/70;}
.wq-piece.tpl-cards{width:100%;aspect-ratio:210/297;}

/* Карточка. Код всегда на белой плашке — камере нужен контраст.
   Цвет: фиолетовая, светлая, и чёрная в тёмном виде сайта (класс ставит wifi-qr.js). */
.wq-card{position:relative;overflow:hidden;box-sizing:border-box;text-align:left;color:#eceaff;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;}
.wq-card.wq-dark{color:#eceaff;background:radial-gradient(120% 70% at 90% -10%,rgba(139,108,246,.45),transparent 55%),linear-gradient(160deg,#1d2050,#2c2478);border:1.5px solid #5b56c9;}
.wq-card.wq-light{color:#1b1d3f;background:radial-gradient(120% 70% at 90% -10%,rgba(139,108,246,.18),transparent 55%),linear-gradient(160deg,#fff,#f1eefc);border:1.5px solid #c9bff7;}
.wq-card.wq-black{color:#ececf1;background:radial-gradient(120% 70% at 90% -10%,rgba(169,196,232,.20),transparent 55%),linear-gradient(160deg,#14141a,#050507);border:1.5px solid #3a3d47;}
.wq-piece>.wq-card{position:absolute;inset:0;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.35);}
.wq-card .eyes-logo.sm{box-shadow:none;}
html.zv-black .wq-card .eyes-logo.sm{box-shadow:none;}

.wq-brand{display:flex;align-items:center;gap:2cqw;flex:none;}
.wq-brandname{font:700 4.6cqw/1 var(--display);color:inherit;}
.wq-chip{margin-left:auto;font:600 2.8cqw/1 var(--display);padding:.7cqw 1.6cqw;border-radius:1.4cqw;background:#a78bfa;color:#131533;}
.wq-light .wq-chip{background:#8b6cf6;color:#fff;}
.wq-black .wq-chip{background:#dcbb74;color:#0b0b0e;}
.wq-card p{margin:0;color:inherit;}
.tool-ui .wq-card p{margin:0;color:inherit;}
.wq-title{font:700 5.6cqw/1.15 var(--display);color:inherit;overflow-wrap:anywhere;}
.wq-hint{font:400 3.1cqw/1.3 var(--sans);text-align:center;color:#a9a6d8;}
.wq-kicker{font:600 7cqw/1.2 var(--display);color:inherit;overflow-wrap:anywhere;}
.wq-ssid small{display:block;font:400 2.8cqw/1.2 var(--sans);color:#a9a6d8;}
.wq-ssid b{display:block;font:700 4.8cqw/1.15 var(--display);color:inherit;overflow-wrap:anywhere;}
.wq-mono{font-family:var(--mono)!important;font-weight:600!important;letter-spacing:0;}
.wq-light .wq-hint,.wq-light .wq-ssid small{color:#5d5a8a;}
.wq-black .wq-hint,.wq-black .wq-ssid small{color:#a3a6b1;}
.tool-ui .wq-card .wq-hint,.tool-ui .wq-card .wq-ssid small{color:#a9a6d8;}
.tool-ui .wq-light .wq-hint,.tool-ui .wq-light .wq-ssid small{color:#5d5a8a;}
.tool-ui .wq-black .wq-hint,.tool-ui .wq-black .wq-ssid small{color:#a3a6b1;}

.wq-qrbox{background:#fff;border-radius:3cqw;position:relative;min-height:0;}
.wq-qr{display:block;width:100%;height:100%;position:absolute;inset:0;}
.wq-lines{min-width:0;}

/* Табличка A5 */
.wq-tpl-wall,.wq-tpl-room,.wq-tpl-sticker{container-type:inline-size;display:flex;flex-direction:column;}
.wq-tpl-wall{padding:5cqw 6cqw 4.5cqw;gap:2cqw;}
.wq-tpl-wall .wq-qrbox{flex:1 1 auto;}
.wq-tpl-wall .wq-lines{display:grid;gap:1.6cqw;flex:none;}

/* Гостевая комната A6 — ИнКа снизу. Рамка картинки по файлу v2-hello.webp 565×760;
   чёрная black-hello.webp 560×972 выше, поэтому object-fit: cover от макушки. */
.wq-tpl-room{padding:4.5cqw 4.5cqw 0;gap:1.6cqw;}
.wq-tpl-room .wq-title{font-size:5cqw;}
.wq-tpl-room .wq-qrbox{flex:1 1 auto;}
.wq-tpl-room .wq-bottom{display:flex;align-items:flex-end;gap:1cqw;flex:none;min-height:34cqw;}
.wq-tpl-room .wq-lines{flex:1;padding-bottom:3.2cqw;display:grid;gap:1.2cqw;}
.wq-tpl-room .wq-ssid b{font-size:4.2cqw;}
.wq-card img.wq-inka{border:0;border-radius:0;box-shadow:none;background:none;padding:0;margin:0;max-width:none;
  height:42cqw;width:calc(42cqw * 565 / 760);object-fit:cover;object-position:50% 0;flex:none;align-self:flex-end;}
.tool-ui .wq-card img.wq-inka{border:0;border-radius:0;box-shadow:none;background:none;margin:0;max-width:none;}

/* Стикер: только код и имя сети */
.wq-tpl-sticker{padding:5cqw 5cqw 4cqw;gap:2.4cqw;align-items:center;justify-content:center;}
.wq-tpl-sticker .wq-qrbox{width:88cqw;aspect-ratio:1;flex:none;}
.wq-stick-name{font:700 7.2cqw/1.15 var(--display);text-align:center;overflow-wrap:anywhere;max-width:100%;}

/* Визитки на листе */
.wq-sheet{position:relative;background:#fff;}
.wq-piece.tpl-cards .wq-sheet{position:absolute;inset:0;}
.wq-mini{container-type:inline-size;position:absolute;width:42.8571%;height:16.835%;display:flex;align-items:center;gap:2.2cqw;padding:4.2cqw;border-radius:2cqw;box-shadow:none;overflow:hidden;}
.wq-mini .wq-qrbox{width:42cqw;aspect-ratio:1;flex:none;border-radius:1.6cqw;}
.wq-mini .wq-lines{flex:1;display:grid;align-content:center;gap:.5cqw;min-width:0;}
.wq-mini .wq-kicker{font-size:4.4cqw;line-height:1.15;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.wq-mini .wq-ssid small{font-size:4.4cqw;}
.wq-mini .wq-ssid b{font-size:5.6cqw;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.wq-mini .wq-mono{font-size:4.8cqw!important;}
.wq-at-0{left:5.2381%;top:12.2896%;}
.wq-at-1{left:51.9048%;top:12.2896%;}
.wq-at-2{left:5.2381%;top:31.8182%;}
.wq-at-3{left:51.9048%;top:31.8182%;}
.wq-at-4{left:5.2381%;top:51.3468%;}
.wq-at-5{left:51.9048%;top:51.3468%;}
.wq-at-6{left:5.2381%;top:70.8754%;}
.wq-at-7{left:51.9048%;top:70.8754%;}
.wq-marks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;}
.wq-marks path{fill:none;stroke:#222;stroke-width:.45;stroke-linecap:square;}

/* Печать: на листе только шаблон. Монтаж — прямой ребёнок body, его наполняет wifi-qr.js.
   Пока он пуст, страница печатается как есть. */
.wq-print-mount{display:none;}
@page wqcard{size:A4 portrait;margin:0;}
@media print{
  body:has(.wq-print-mount:not(:empty)){page:wqcard;margin:0!important;padding:0!important;background:#fff!important;height:297mm;overflow:hidden;}
  body:has(.wq-print-mount:not(:empty))>*{display:none!important;}
  body:has(.wq-print-mount:not(:empty))>.wq-print-mount{
    display:block!important;position:relative;width:210mm;height:297mm;overflow:hidden;margin:0;padding:0;background:#fff!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .wq-print-mount .wq-sheet{width:210mm;height:297mm;}
  .wq-print-mount .wq-tpl-wall{position:absolute;left:31mm;top:43.5mm;width:148mm;height:210mm;border-radius:0;box-shadow:none;}
  .wq-print-mount .wq-tpl-room{position:absolute;left:52.5mm;top:74.5mm;width:105mm;height:148mm;border-radius:0;box-shadow:none;}
  .wq-print-mount .wq-tpl-sticker{position:absolute;left:76mm;top:113.5mm;width:58mm;height:70mm;border-radius:0;box-shadow:none;}
  .wq-print-mount .wq-mini{border-radius:0;box-shadow:none;}
}