/* ==========================================================
   Easy Market · Gerador de QR Code
   Tokens do design system Easy Market (tokens.json)
   ========================================================== */

:root {
  /* cor — tema claro */
  --surface:        #F4F5F1;
  --surface-raised: #FFFFFF;
  --surface-mint:   #DDF5EC;
  --line:           #DCE0D8;
  --line-strong:    #8A9587;
  --ink:            #1E1E1E;
  --ink-muted:      #5C6659;
  --accent-ink:     #17684D;
  --action:         #566951;
  --on-action:      #FFFFFF;
  --brand-mint:     #12A27F;
  --focus-ring:     #17684D;
  --danger:         #B42318;
  --warning-bg:     #FDF3E7;
  --warning-ink:    #8A4B0F;

  /* tipografia */
  --font-display: "transducer-condensed", "Archivo", "Arial Narrow", sans-serif;
  --font-heading: "transducer", "Archivo", Arial, sans-serif;
  --font-sans:    Axiforma, "Outfit", system-ui, sans-serif;

  /* espaço (escala de 4px) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* forma */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(30,30,30,.06);
  --shadow-md: 0 8px 24px rgba(30,30,30,.08);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);       /* entradas e respostas: começa rápido */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);   /* algo que se move na tela */
  color-scheme: light;
}

/* Tema escuro (verde profundo). O atributo data-theme é definido no <head>
   a partir da escolha salva ou, sem escolha, do tema do sistema. */
:root[data-theme="dark"] {
  --surface:        #1A241C;
  --surface-raised: #243026;
  --surface-mint:   #1F3D31;
  --line:           #3A4A3D;
  --line-strong:    #6F7D71;
  --ink:            #F4F5F1;
  --ink-muted:      #A7B1A4;
  --accent-ink:     #12A27F;
  --action:         #12A27F;
  --on-action:      #1E1E1E;
  --focus-ring:     #12A27F;
  --danger:         #F97066;
  --warning-bg:     #3A2E1C;
  --warning-ink:    #F5C77E;
  color-scheme: dark;
}

/* ── base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  background: var(--surface);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
svg { flex: none; }
button, input { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── topo ─────────────────────────────────────────────── */
.topbar {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.topbar__logo { display: block; height: 48px; width: auto; }
.topbar__logo--dark { display: none; }
[data-theme="dark"] .topbar__logo--light { display: none; }
[data-theme="dark"] .topbar__logo--dark { display: block; }
.topbar__right { display: flex; align-items: center; gap: var(--space-2); }

/* Interruptor de tema: sol à esquerda, lua à direita, bolinha desliza até o ativo */
.theme-toggle {
  --spring: cubic-bezier(.34, 1.45, .5, 1);
  position: relative;
  flex: none;
  width: 72px; height: 38px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.theme-toggle:hover { border-color: var(--ink-muted); }
.theme-toggle:active .theme-toggle__thumb { width: 36px; }

.theme-toggle__thumb {
  position: absolute;
  top: 4px; left: 4px;
  width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  background: var(--action);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: transform .45s var(--spring), width .2s var(--ease), background-color .3s var(--ease);
}
[data-theme="dark"] .theme-toggle__thumb { transform: translateX(34px); }
[data-theme="dark"] .theme-toggle:active .theme-toggle__thumb { transform: translateX(26px); }

.theme-toggle__icon {
  position: absolute;
  top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  transition: color .3s var(--ease), transform .55s var(--spring), opacity .3s var(--ease);
}
.theme-toggle__icon--sun  { left: 9px;  color: var(--on-action); }
.theme-toggle__icon--moon { right: 9px; color: var(--ink-muted); transform: rotate(-30deg) scale(.85); }

[data-theme="dark"] .theme-toggle__icon--sun  { color: var(--ink-muted); transform: rotate(-90deg) scale(.85); }
[data-theme="dark"] .theme-toggle__icon--moon { color: var(--on-action); transform: none; }

/* Revelação circular da página ao trocar o tema (View Transitions) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.tag--line { border: 1px solid var(--line-strong); color: var(--ink-muted); }

/* ── layout ───────────────────────────────────────────── */
.app {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-7);
}

.intro { max-width: 560px; margin-bottom: var(--space-6); }

.display {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 600;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.lead {
  margin: var(--space-3) 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  grid-template-rows: auto 1fr;
  grid-template-areas: "input preview" "look preview";
  gap: var(--space-5);
  align-items: start;
}
.panel--input   { grid-area: input; }
.panel--look    { grid-area: look; }
.panel--preview { grid-area: preview; }

.panel {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.panel--preview { position: sticky; top: var(--space-5); gap: var(--space-4); }

/* ── campo ────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .group legend, .switch-row__title {
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
}

.input-wrap { position: relative; display: flex; align-items: center; }

.input-wrap__icon {
  position: absolute;
  left: 14px;
  width: 20px; height: 20px;
  fill: none; stroke: var(--ink-muted);
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
  transition: stroke .15s var(--ease), transform .4s cubic-bezier(.34, 1.4, .64, 1);
}
/* Ao focar o campo, o ícone de link fica verde e dá uma leve inclinada */
.input-wrap:focus-within .input-wrap__icon { stroke: var(--accent-ink); transform: rotate(-20deg) scale(1.08); }

.input {
  width: 100%;
  height: 52px;
  padding: 0 48px 0 44px;
  font-size: 16px; /* 16px evita zoom automático no iPhone */
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  text-overflow: ellipsis;
  transition: border-color .15s var(--ease);
}
.input::placeholder { color: var(--ink-muted); opacity: .7; }
.input:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--focus-ring); }
.input[aria-invalid="true"] { border-color: var(--danger); }

.icon-btn {
  position: absolute;
  right: 8px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease), opacity .15s var(--ease);
}
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; transition: transform .3s var(--ease-out); }
.icon-btn:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { background: var(--surface); color: var(--ink); }
  .icon-btn:hover svg { transform: rotate(90deg); } /* o X gira ao passar o mouse */
}
.icon-btn[hidden] { display: none; }

.help {
  margin: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--ink-muted);
}
.help--error { color: var(--danger); }
.help--warn {
  color: var(--warning-ink);
  background: var(--warning-bg);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}
.help b { font-weight: 600; color: var(--ink); }
.help--warn b { color: inherit; }

/* ── grupos ───────────────────────────────────────────── */
.group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.group legend { padding: 0; margin-bottom: var(--space-3); }

/* cores */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 14px 0 6px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 14px;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), transform .16s var(--ease-out);
}
.swatch:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .swatch:hover { border-color: var(--line-strong); }
}
.swatch input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.swatch > span {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.swatch em { font-style: normal; font-weight: 500; }
.swatch:has(input[type="radio"]:checked) { border-color: var(--accent-ink); background: var(--surface-mint); }

/* Ao escolher: a bolinha gira e um anel se desenha girando em volta dela */
@property --sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.swatch::before {
  content: "";
  position: absolute;
  left: 2px; top: 50%; /* centrado na bolinha (padding de 6px + 14px de raio − 18px) */
  width: 36px; height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  background: conic-gradient(var(--c, var(--accent-ink)) var(--sweep), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.swatch:has(input[type="radio"]:checked)::before {
  --sweep: 360deg;
  opacity: 1;
  animation: ring-draw .6s var(--ease-out);
}
@keyframes ring-draw {
  from { --sweep: 0deg; transform: rotate(-90deg); }
  to   { --sweep: 360deg; transform: rotate(270deg); }
}

.swatch:has(input[type="radio"]:checked) > span {
  animation: swatch-spin .6s cubic-bezier(.34, 1.3, .64, 1);
}
/* Brilho que aparece só durante o giro, para o movimento ficar visível */
.swatch > span::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 45%);
  opacity: 0;
  pointer-events: none;
}
.swatch:has(input[type="radio"]:checked) > span::before { animation: sheen .6s ease-out; }
@keyframes swatch-spin {
  from { transform: rotate(-270deg) scale(.85); }
  to   { transform: none; }
}
@keyframes sheen {
  0%, 15% { opacity: .9; }
  100%    { opacity: 0; }
}

/* "Outra": o arco-íris gira devagar quando o mouse passa */
@media (hover: hover) and (pointer: fine) {
  .swatch--custom:not(.is-set):hover .swatch__picker { animation: hue-turn 1.6s linear infinite; }
}
@keyframes hue-turn { to { transform: rotate(360deg); } }
.swatch:has(input[type="radio"]:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.swatch__picker {
  position: relative;
  overflow: hidden;
  background: conic-gradient(#e5484d, #f5d90a, #30a46c, #0091ff, #8e4ec6, #e5484d) !important;
}
.swatch__picker input[type="color"] {
  position: absolute; inset: -8px;
  width: calc(100% + 16px); height: calc(100% + 16px);
  border: 0; padding: 0;
  opacity: 0;
  cursor: pointer;
}
.swatch--custom.is-set .swatch__picker { background: var(--c) !important; }

/* estilo dos pontos */
.segmented {
  --n: 2;
  --i: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.segmented--3 { --n: 3; }
.segmented span { white-space: nowrap; }

/* Coluna estreita: no seletor de 3 opções, ícone em cima e texto embaixo */
.panel--look { container-type: inline-size; }
@container (max-width: 400px) {
  .segmented--3 span { flex-direction: column; gap: 2px; height: 56px; font-size: 13px; }
}

/* Indicador que desliza até a opção escolhida */
.segmented::before {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px - (var(--n) - 1) * 4px) / var(--n));
  border-radius: 9px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
  transform: translateX(calc(var(--i) * (100% + 4px)));
  transition: transform .28s var(--ease-in-out);
}
.segmented:has(label:nth-child(2) input:checked) { --i: 1; }
.segmented:has(label:nth-child(3) input:checked) { --i: 2; }
.segmented .logo-mini { width: 18px; height: 18px; }
.segmented label { position: relative; z-index: 1; cursor: pointer; min-width: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color .2s ease, transform .16s var(--ease-out);
}
.segmented svg { width: 16px; height: 16px; fill: currentColor; }
.segmented label:active span { transform: scale(.97); }
.segmented input:checked + span { color: var(--ink); }
/* Ícone da opção escolhida dá um "pulinho" girando */
.segmented input:checked + span svg { animation: icon-pop .5s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes icon-pop {
  from { transform: scale(.6) rotate(-25deg); }
  to   { transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .segmented label:hover span { color: var(--ink); }
}
.segmented input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* switch */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.switch-row__title { cursor: pointer; display: block; }

.switch {
  appearance: none;
  flex: none;
  position: relative;
  width: 48px; height: 28px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s var(--ease);
}
.switch:checked { background: var(--action); }
.switch:checked::after { transform: translateX(20px); }

/* ── prévia ───────────────────────────────────────────── */
.stage {
  position: relative;
  aspect-ratio: 1;
  background: #FFFFFF; /* o QR é sempre impresso em fundo branco */
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.stage__qr { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .2s var(--ease); }
.stage__qr svg { display: block; width: 100%; height: 100%; }
.stage.is-empty .stage__qr { opacity: 0; }

/* Logo no centro: anima a partir do próprio centro */
#qr-preview .qr-logo { transform-box: fill-box; transform-origin: center; }

/* Inclinação 3D: sombra e reflexo leves acompanham o mouse */
.stage {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow .3s var(--ease-out);
}
.stage.is-tilting { box-shadow: 0 18px 40px -18px rgba(30, 30, 30, .28); }
.stage::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, .35), transparent 55%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.stage.is-tilting::after { opacity: 1; }

.stage__empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
  color: #8A9587;
  font-size: 14px;
}
.stage__empty svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }


/* ── botões ───────────────────────────────────────────── */
.actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.actions__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.btn {
  height: 48px;
  padding: 0 var(--space-4);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, background-color .15s ease, transform .16s var(--ease-out), opacity .2s ease;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
/* A seta de download "aponta" para baixo e o ícone de copiar dá um passinho */
@media (hover: hover) and (pointer: fine) {
  #btn-png:hover:not(:disabled) svg, #btn-svg:hover:not(:disabled) svg { transform: translateY(2px); }
  #btn-copy:hover:not(:disabled) svg { transform: translate(-1px, -1px) rotate(-8deg); }
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.is-done { pointer-events: none; }

.btn--primary { background: var(--action); color: var(--on-action); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover:not(:disabled) { filter: brightness(.92); }
  .btn--secondary:hover:not(:disabled) { background: var(--surface); }
}

/* Ícone de confirmação: o traço do "check" se desenha */
.btn .check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw-check .35s var(--ease-out) .05s forwards; }
@keyframes draw-check { to { stroke-dashoffset: 0; } }
.btn--block { width: 100%; }

.footnote { margin: var(--space-6) 0 0; font-size: 13px; color: var(--ink-muted); text-align: center; }

/* ── toast ────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%; bottom: var(--space-5);
  transform: translate(-50%, 16px);
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: #1E1E1E;
  color: #F4F5F1;
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  /* saída rápida */
  transition: opacity .15s ease, transform .15s ease;
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  /* entrada um pouco mais longa, desacelerando */
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}

/* ── entrada da página (só ao abrir) ──────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.topbar, .intro, .panel--input, .panel--preview, .panel--look, .footnote {
  animation: rise .45s var(--ease-out) both;
}
.intro          { animation-delay: .04s; }
.panel--input   { animation-delay: .1s; }
.panel--preview { animation-delay: .16s; }
.panel--look    { animation-delay: .22s; }
.footnote       { animation-delay: .28s; }
/* Depois de trocar de aba, a entrada não se repete */
body.no-intro .panel--input, body.no-intro .panel--preview, body.no-intro .panel--look { animation: none; }

/* ── abas ─────────────────────────────────────────────── */
.tabs {
  --i: 0;
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: calc(var(--space-6) * -1 + var(--space-4)) 0 var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  animation: rise .45s var(--ease-out) .07s both;
}
.tabs[data-active="1"] { --i: 1; }
.tabs::before {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 12px) / 2);
  border-radius: var(--radius-pill);
  background: var(--action);
  transform: translateX(calc(var(--i) * (100% + 4px)));
  transition: transform .3s var(--ease-in-out);
}
.tabs__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease, transform .16s var(--ease-out);
}
.tabs__tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tabs__tab[aria-selected="true"] { color: var(--on-action); }
.tabs__tab:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .tabs__tab[aria-selected="false"]:hover { color: var(--ink); }
}

/* ── faixa "Personalizando o QR dinâmico…" ────────────── */
.edit-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--accent-ink);
  border-radius: var(--radius-md);
  background: var(--surface-mint);
}
.edit-banner__icon {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--accent-ink);
}
.edit-banner__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.edit-banner__text { flex: 1 1 220px; margin: 0; font-size: 14px; line-height: 1.45; }
.edit-banner__text b { font-weight: 600; color: var(--accent-ink); }
.edit-banner__actions { display: flex; gap: var(--space-2); margin-left: auto; }

/* ── como funciona (3 passos) ─────────────────────────── */
.how {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

/* Botão "Como funciona?" ao lado das abas */
.how-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: top;
  height: 50px;
  margin: calc(var(--space-6) * -1 + var(--space-4)) 0 0 var(--space-3);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, transform .16s var(--ease-out);
}
.how-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.how-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .how-btn:hover { background: var(--surface-mint); }
}

/* Pop-up */
.modal {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .35);
  overflow-y: auto;
}
.modal[open] { display: flex; flex-direction: column; gap: var(--space-4); }
.modal > * { flex-shrink: 0; } /* com rolagem, nada deve ser espremido */
.modal::backdrop { background: rgba(26, 36, 28, .45); }
.modal[open] { animation: modal-in .32s var(--ease-out); }
.modal[open]::backdrop { animation: backdrop-in .25s ease; }
.modal.is-closing { animation: modal-out .16s ease-in forwards; }
.modal.is-closing::backdrop { animation: backdrop-out .16s ease-in forwards; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes modal-out { to { opacity: 0; transform: scale(.98); } }
@keyframes backdrop-in { from { opacity: 0; } }
@keyframes backdrop-out { to { opacity: 0; } }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.modal__title { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; }
.modal__subtitle { margin: var(--space-2) 0 0; font-size: 15px; font-weight: 600; }
.fields-help { margin: 0; display: grid; gap: var(--space-1) 0; }
.fields-help dt { font-size: 14px; font-weight: 600; margin-top: var(--space-2); }
.fields-help dd { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.fields-help dd b { color: var(--ink); font-weight: 600; }
.how__step { display: flex; gap: var(--space-3); align-items: flex-start; position: relative; }
.how__icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-mint);
  color: var(--accent-ink);
}
.how__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.how__text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.how__text b { font-size: 14px; font-weight: 600; color: var(--ink); }

/* Miniatura do QR no cartão */
.link-card > :not(.link-card__thumb) { grid-column: 2; }
.link-card__thumb {
  grid-column: 1;
  grid-row: 1 / span 6;
  align-self: start;
  width: 88px; height: 88px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
}
.link-card__thumb svg { display: block; width: 100%; height: 100%; }

/* ── painel de links ──────────────────────────────────── */
.panel__head { display: flex; gap: var(--space-4); align-items: flex-start; }
.panel__icon {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-mint);
  color: var(--accent-ink);
}
.panel__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.panel__title { margin: 0 0 var(--space-1); font-size: 18px; line-height: 1.3; font-weight: 600; }
.panel--login { max-width: 460px; margin: 0 auto; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

.input--plain { padding: 0 var(--space-4); }
.input--with-btn { padding-right: 52px; }
.input-wrap > .icon-btn.eye-btn { position: absolute; } /* só o olho de dentro do campo de senha */
.input--search { height: 44px; padding-right: var(--space-4); }

.prefix-input {
  display: flex;
  align-items: stretch;
  height: 52px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  overflow: hidden;
  cursor: text; /* a caixa inteira é clicável, não só a parte depois da "/" */
}
.prefix-input__prefix { cursor: text; }
.prefix-input:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--focus-ring); }
.prefix-input__prefix {
  display: flex;
  align-items: center;
  padding: 0 2px 0 var(--space-4);
  font-size: 15px;
  color: var(--ink-muted);
  white-space: nowrap;
  user-select: none;
}
.prefix-input__field {
  flex: 1;
  min-width: 72px;
  border: 0;
  padding: 0 var(--space-4) 0 0;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  outline: none;
}
.prefix-input__field::placeholder { font-weight: 400; color: var(--ink-muted); opacity: .6; }

.help--note {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-mint);
}

.links-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.list-head .panel__title { margin: 0; }
.list-head__actions { display: flex; align-items: center; gap: var(--space-1); }
.count { font-weight: 400; color: var(--ink-muted); }
.icon-btn--static { position: static; }

/* Olhinho: mostra/oculta a lista (útil ao compartilhar a tela) */
.eye-btn { position: relative; }
.eye-btn svg {
  position: absolute;
  inset: 0; margin: auto;
  transition: opacity .2s ease, transform .35s cubic-bezier(.34, 1.4, .64, 1);
}
.eye-btn__closed { opacity: 0; transform: scale(.6) rotate(-20deg); }
.eye-btn[aria-pressed="true"] .eye-btn__open { opacity: 0; transform: scale(.6) rotate(20deg); }
.eye-btn[aria-pressed="true"] .eye-btn__closed { opacity: 1; transform: none; }
.eye-btn[aria-pressed="true"] { color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .eye-btn:hover svg { transform: none; }
  .eye-btn:hover .eye-btn__closed { transform: scale(.6) rotate(-20deg); }
  .eye-btn[aria-pressed="true"]:hover .eye-btn__open { transform: scale(.6) rotate(20deg); }
}

.links-body { display: flex; flex-direction: column; gap: var(--space-5); }
.links-hidden {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font-size: 14px;
}
.links-hidden svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.btn--sm { height: 36px; padding: 0 var(--space-3); font-size: 13px; gap: 6px; }
.btn--sm svg { width: 16px; height: 16px; }
.btn--ghost { background: transparent; color: var(--ink-muted); border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
}

.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.link-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-content: start;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.link-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.link-card__short { color: var(--ink); text-decoration: none; font-size: 15px; word-break: break-all; }
.link-card__short b { font-weight: 600; color: var(--accent-ink); }
.link-card__base { color: var(--ink-muted); }
@media (hover: hover) and (pointer: fine) {
  .link-card__short:hover b { text-decoration: underline; text-underline-offset: 3px; }
}
.link-card__stats {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-mint);
  font-variant-numeric: tabular-nums;
}
.link-card__stats em { font-style: normal; font-weight: 400; color: var(--ink-muted); }
.link-card__dest { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: 14px; }
.link-card__dest svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-muted); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.link-card__dest span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-card__meta { margin: 0; font-size: 12px; color: var(--ink-muted); }
.link-card__desc { margin: 0; font-size: 14px; line-height: 1.45; }
.link-card__field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.optional { font-weight: 400; color: var(--ink-muted); font-size: 12px; margin-left: 4px; }
.link-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.link-card__edit { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-1); }
.link-card__edit .input { height: 44px; }
.link-card__edit-row { display: flex; gap: var(--space-2); }

.link-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font-size: 14px;
  text-align: center;
}
.link-empty svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.link-none { font-size: 14px; color: var(--ink-muted); padding: var(--space-3) 0; }

/* ── responsivo ───────────────────────────────────────── */
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "input" "preview" "look"; gap: var(--space-4); }
  .panel--preview { position: static; }
  .app { padding-top: var(--space-6); }
  .links-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

@media (max-width: 480px) {
  .topbar { padding: var(--space-4) var(--space-4) 0; }
  .topbar__logo { height: 40px; }
  .app { padding: var(--space-5) var(--space-4) var(--space-6); }
  .panel { padding: var(--space-4); border-radius: var(--radius-md); }
  .actions__row { grid-template-columns: 1fr; }
  .tabs { display: grid; width: 100%; }
  .how-btn { margin: calc(var(--space-5) * -1 + var(--space-2)) 0 var(--space-3); height: 40px; padding: 0 var(--space-2); }
  .tabs__tab { padding: 0 var(--space-2); }
  .prefix-input__prefix { font-size: 13px; padding-left: var(--space-3); }
  .link-card { grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--space-3); }
  .link-card__thumb { width: 64px; height: 64px; }
  .link-card__actions { grid-column: 1 / -1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn .check path { stroke-dashoffset: 0; }
}