/* ---------- qr code ---------- */

.qr-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:0;align-items:start;
}
@media (max-width:880px){ .qr-layout{grid-template-columns:1fr;} }

.qr-inputs{padding:22px 20px;}
.qr-out{
  padding:22px 20px;border-left:1px solid var(--rule);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
@media (max-width:880px){
  .qr-out{border-left:none;border-top:1px solid var(--rule);}
}

.qf{margin-bottom:13px;}
.qf label{display:block;font-size:.8rem;color:var(--ink-3);margin-bottom:5px;}
.qf input[type="text"],.qf textarea,.qf select{
  width:100%;padding:10px 12px;
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--ink);
  font-family:var(--f-ui);font-size:.94rem;resize:vertical;
}
.qf input:focus,.qf textarea:focus,.qf select:focus{outline:none;border-color:var(--accent);}
.qf-check{
  display:flex;align-items:center;gap:8px;margin-bottom:13px;
  font-size:.86rem;color:var(--ink-2);cursor:pointer;
}
.qf-check input{accent-color:var(--accent);width:15px;height:15px;}

.qr-canvas-wrap{
  background:var(--surface-2);border:1px solid var(--rule);
  border-radius:var(--radius-sm);padding:14px;
  display:flex;align-items:center;justify-content:center;
  width:100%;
}
.qr-canvas-wrap canvas{
  max-width:100%;height:auto;display:block;
  image-rendering:pixelated;
}
.qr-info{
  display:flex;flex-direction:column;gap:3px;width:100%;
  font-family:var(--f-mono);font-size:.74rem;color:var(--ink-3);text-align:center;
}
.qr-saves{display:flex;gap:9px;width:100%;}
.qr-saves .btn{flex:1;justify-content:center;}

.color-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.color-cell{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--ink-3);}
.color-cell input[type="color"]{
  width:36px;height:30px;padding:0;cursor:pointer;
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);background:none;
}