.wp-block-otto-qr-studio.otto-qr-studio{position:relative} .otto-qr-studio .section-headline{max-width:860px;margin-bottom:clamp(26px,5vw,58px)} .otto-qr-studio .section-headline p{color:var(--muted,#a3a3bc);font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.7} .otto-qr-layout{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr);align-items:start;gap:clamp(18px,3vw,30px)} .otto-qr-panel{border:1px solid rgba(255,255,255,.11);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)),rgba(9,14,24,.78);box-shadow:0 28px 90px rgba(0,0,0,.42);backdrop-filter:blur(22px);overflow:hidden} .otto-qr-section{padding:clamp(16px,2.5vw,22px);border-top:1px solid rgba(255,255,255,.1)} .otto-qr-section:first-child{border-top:0} .otto-qr-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px} .otto-qr-section-head h3{margin:0;display:inline-flex;align-items:center;gap:10px;font-size:1rem} .otto-qr-section-head h3::before{content:"";width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,#005bff,#00a3ff);box-shadow:0 0 22px rgba(0,163,255,.55)} .otto-qr-section-head span,.otto-qr-field,.otto-qr-logo-row span,.otto-qr-tiny,.otto-qr-details p{color:var(--muted,#a3a3bc)} .otto-qr-section-head span{max-width:340px;font-size:.88rem;line-height:1.45;text-align:right} .otto-qr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .otto-qr-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))} .otto-qr-field,.otto-qr-switch{display:grid;gap:8px;font-size:.88rem} .otto-qr-field--full{grid-column:1 / -1} .otto-qr-field input:not([type="range"]):not([type="color"]),.otto-qr-field select,.otto-qr-field textarea{width:100%;color:var(--text,#fff);background:rgba(2,5,10,.72);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:13px 14px;outline:none;transition:border .16s ease,box-shadow .16s ease,background .16s ease} .otto-qr-field textarea{min-height:118px;resize:vertical} .otto-qr-field input:focus,.otto-qr-field select:focus,.otto-qr-field textarea:focus{border-color:rgba(0,163,255,.72);box-shadow:0 0 0 4px rgba(0,163,255,.14);background:rgba(3,8,16,.92)} .otto-qr-field input[type="color"]{width:100%;height:48px;border:1px solid rgba(255,255,255,.12);background:transparent;border-radius:16px;padding:4px;cursor:pointer} .otto-qr-field input[type="range"]{width:100%;accent-color:#00a3ff} .otto-qr-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);padding:13px 14px;border-radius:16px;color:var(--text,#fff)} .otto-qr-switch input{accent-color:#00a3ff;transform:scale(1.08)} .otto-qr-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .otto-qr-buttons button,.otto-qr-import span{border:1px solid rgba(255,255,255,.12);border-radius:16px;min-height:44px;padding:11px 14px;color:var(--text,#fff);background:rgba(255,255,255,.06);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .14s ease,background .14s ease,border .14s ease,box-shadow .14s ease} .otto-qr-buttons button:hover,.otto-qr-import span:hover{transform:translateY(-1px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)} .otto-qr-buttons .is-primary{border-color:transparent;background:linear-gradient(135deg,#7c66ff,#a794ff);color:#fff;font-weight:850;box-shadow:0 16px 42px rgba(124,102,255,.32)} .otto-qr-buttons .is-danger{color:#ffd8d8;border-color:rgba(255,107,107,.36)} .otto-qr-dropzone{display:grid;gap:12px;border:1px dashed rgba(255,255,255,.30);background:rgba(255,255,255,.045);border-radius:20px;padding:16px} .otto-qr-dropzone.is-dragover{border-color:#00a3ff;background:rgba(0,163,255,.09)} .otto-qr-logo-row{display:flex;align-items:center;gap:12px} .otto-qr-logo-row strong{display:block;color:var(--text,#fff)} .otto-qr-logo-preview{width:76px;height:76px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background-image:linear-gradient(45deg,rgba(255,255,255,.14) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.14) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.14) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.14) 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0;display:grid;place-items:center;overflow:hidden;flex:0 0 auto} .otto-qr-logo-preview img{max-width:88%;max-height:88%;display:block} .otto-qr-import{display:inline-flex;margin:0;cursor:pointer} .otto-qr-preview-panel{position:sticky;top:92px} .otto-qr-preview-wrap{padding:clamp(16px,2.5vw,24px);background:rgba(12,18,30,.96);border-radius:28px} .otto-qr-stage{min-height:440px;display:grid;place-items:center;border-radius:24px;border:1px solid rgba(255,255,255,.12);overflow:hidden} .otto-qr-stage.is-checker{background-color:#fff;background-image:linear-gradient(45deg,#d6d9e0 25%,transparent 25%),linear-gradient(-45deg,#d6d9e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d6d9e0 75%),linear-gradient(-45deg,transparent 75%,#d6d9e0 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0} .otto-qr-stage.is-white{background:#fff} .otto-qr-stage.is-black{background:#070a10} .otto-qr-stage.is-brand{background:linear-gradient(135deg,#050505 0%,#0b1530 45%,#005bff 100%)} .otto-qr-output{display:grid;place-items:center;max-width:100%;max-height:100%;transform-origin:center} .otto-qr-output canvas,.otto-qr-output svg{display:block;max-width:min(100%,540px);height:auto !important} .otto-qr-meta{margin-top:14px;display:grid;gap:8px;color:var(--muted,#a3a3bc);font-size:.88rem} .otto-qr-meta>div:not(.otto-qr-status){display:flex;justify-content:space-between;gap:16px} .otto-qr-meta strong{color:var(--text,#fff);font-weight:650;text-align:right} .otto-qr-status{border-radius:16px;padding:13px 14px;background:rgba(0,163,255,.10);border:1px solid rgba(0,163,255,.24);color:#dff7ff} .otto-qr-status.is-warn{background:rgba(255,186,73,.10);border-color:rgba(255,186,73,.28);color:#ffe8ba} .otto-qr-details{margin-top:14px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.035);overflow:hidden} .otto-qr-details summary{cursor:pointer;padding:13px 14px;color:var(--text,#fff);font-weight:700} .otto-qr-details p{margin:0;padding:0 14px 14px;line-height:1.65} @media(max-width:1120px){.otto-qr-layout{grid-template-columns:1fr} .otto-qr-preview-panel{position:relative;top:auto}} @media(max-width:720px){.otto-qr-section-head{display:grid} .otto-qr-section-head span{text-align:left;max-width:none} .otto-qr-grid,.otto-qr-grid--three{grid-template-columns:1fr} .otto-qr-buttons{align-items:stretch} .otto-qr-buttons button,.otto-qr-import,.otto-qr-import span{width:100%} .otto-qr-stage{min-height:330px} .otto-qr-meta>div:not(.otto-qr-status){display:grid;gap:3px} .otto-qr-meta strong{text-align:left}} .otto-qr-panel,.otto-qr-section,.otto-qr-stage{contain:content} @supports(content-visibility:auto){.otto-qr-section{content-visibility:auto;contain-intrinsic-size:1px 360px}} @media(max-width:768px){.otto-qr-panel,.otto-qr-preview-wrap{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}}