@import url('/assets/tools/aurora-ui.css');

/* ── Gerador de QR Code ────────────────────────────────── */

/* Palco do código, dentro do painel escuro */
#qr .qr-palco {
  margin-top:16px; display:flex; align-items:center; justify-content:center;
  min-height:280px; padding:20px; border-radius:16px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
}
#qr .qr-palco svg { display:block; width:100%; max-width:260px; height:auto; border-radius:8px; }

/* Seletor de cor */
#qr .qr-cor { display:flex; gap:8px; align-items:center; }
#qr .qr-cor input[type="color"] {
  -webkit-appearance:none; appearance:none; width:44px; height:42px; flex-shrink:0; padding:0;
  border:1px solid var(--ft-line-s); border-radius:12px; background:none; cursor:pointer;
}
#qr .qr-cor input[type="color"]::-webkit-color-swatch-wrapper { padding:4px; }
#qr .qr-cor input[type="color"]::-webkit-color-swatch { border:0; border-radius:8px; }
#qr .qr-cor input[type="color"]::-moz-color-swatch { border:0; border-radius:8px; }
#qr .qr-cor .ft-input { text-transform:uppercase; }

/* Régua de margem */
#qr input[type="range"] {
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px;
  background:rgba(37,99,235,.12); outline:none; cursor:pointer; margin:8px 0 2px;
}
#qr input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(180deg,#3B77F0,#2058D8); border:2px solid #fff; cursor:pointer;
  box-shadow:0 2px 8px rgba(37,99,235,.45);
}
#qr input[type="range"]::-moz-range-thumb {
  width:16px; height:16px; border-radius:50%; border:2px solid #fff;
  background:linear-gradient(180deg,#3B77F0,#2058D8); cursor:pointer;
  box-shadow:0 2px 8px rgba(37,99,235,.45);
}

/* Logo */
#qr .qr-logo { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#qr .qr-logo img {
  width:42px; height:42px; object-fit:contain; border-radius:10px;
  border:1px solid var(--ft-line); background:var(--paper-warm); padding:4px;
}

/* Conteúdo codificado */
#qr .qr-payload {
  font-family:var(--font-mono); font-size:12px; line-height:1.6; color:var(--ink-soft);
  background:var(--paper-warm); border:1px solid var(--ft-line); border-radius:12px;
  padding:12px 14px; margin:0; white-space:pre-wrap; word-break:break-all;
  max-height:190px; overflow:auto;
}

/* Aviso de conteúdo grande demais */
#qr .qr-erro {
  text-align:center; color:#FF9E9E; font-size:13.5px; line-height:1.55; max-width:34ch;
}