@font-face { font-family: 'Inter'; src: url('../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../fonts/sora-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../fonts/sora-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
/* Senhas — temas claro e escuro no estilo do app Senhas da Apple.
 * Animações suaves em tudo: entradas de tela, listas e troca de código.
 * O tema vem de js/theme.js: <html data-theme="dark|light">, com o modo
 * Automático seguindo o prefers-color-scheme do sistema. */
:root, :root[data-theme="dark"] {
  --bg: #0A0614;
  --card: #171029;
  --card2: #1E1230;
  --text: #F4F0FA;
  --muted: #A79FC0;
  --line: #2C1E4A;
  --blue: #B44AE0;
  --brand: #8A05BE;
  --green: #4ADE80;
  --yellow: #ffd60a;
  --sky: #64d2ff;
  --red: #F05252;
  --orange: #ff9f0a;
  --radius: 20px;
  --btn-hover: #2A1B47;
  --card-hover: #1E1230;
  --row-hover: rgba(255,255,255,.04);
  --menu-hover: rgba(255,255,255,.07);
  --search-bg: rgba(30,18,48,.92);
  --search-shadow: none;
  --bar: #1E1230;
  --bar-shadow: none;
  --ring-track: #2C1E4A;
  --chip: #1E1230;
  --shadow: 0 14px 40px rgba(0,0,0,.55);
  --frame: #2C1E4A;
}
:root[data-theme="light"] {
  --bg: #F2ECFB;
  --card: #fff;
  --card2: #EFE8FA;
  --text: #221636;
  --muted: #5A4F78;
  --line: #E3DCF2;
  --blue: #8A05BE;
  --brand: #8A05BE;
  --green: #4ADE80;
  --yellow: #ffd60a;
  --sky: #64d2ff;
  --red: #DC2626;
  --orange: #ff9f0a;
  --btn-hover: #EFE8FA;
  --card-hover: #FAF8FD;
  --row-hover: rgba(0,0,0,.045);
  --menu-hover: rgba(0,0,0,.05);
  --search-bg: rgba(255,255,255,.95);
  --search-shadow: 0 4px 18px rgba(0,0,0,.10);
  --bar: #ffffff;
  --bar-shadow: 0 4px 18px rgba(0,0,0,.10);
  --ring-track: #E3DCF2;
  --chip: #EFE8FA;
  --shadow: 0 14px 40px rgba(0,0,0,.18);
  --frame: #E3DCF2;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* ---------- transições de tela ---------- */
.view { display: none; }
.view.active { display: block; animation: viewIn .26s cubic-bezier(.22,.8,.32,1) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateX(18px) scale(.995); }
  to   { opacity: 1; transform: none; }
}
.view.back.active { animation-name: viewInBack; }
@keyframes viewInBack {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: none; }
}
.fade-in { animation: fadeUp .35s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- estrutura ---------- */
.wrap { max-width: 560px; margin: 0 auto; padding: 18px 16px 110px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
h1.big { font-size: 32px; margin: 10px 0 16px; letter-spacing: -.5px; }
/* Cabecalho da inicial igual ao Android: titulo e "•••" na MESMA linha. */
.home-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 14px; }
.home-head h1.big { margin: 0; }
#btnMenu { background: var(--card); }
.circle-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--card2); color: var(--text); font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .15s ease;
}
.circle-btn:hover { background: var(--btn-hover); }
.circle-btn:active { transform: scale(.93); }
.pill-btn {
  border: 0; border-radius: 999px; background: var(--card2); color: var(--text);
  padding: 10px 18px; font-size: 15px; font-weight: 600;
  transition: transform .15s ease, background .15s ease;
}
.pill-btn:hover { background: var(--btn-hover); }
.pill-btn:active { transform: scale(.96); }
.pill-btn.blue { background: linear-gradient(135deg, #8A05BE, #A855F7); color: #fff; }
.pill-btn.blue:hover { background: #2f97ff; }
.pill-btn.red { background: rgba(255,69,58,.16); color: var(--red); }
.link { color: var(--blue); background: none; border: 0; font-size: 16px; padding: 6px 0; }
.danger-text { color: var(--red); background: none; border: 0; font-size: 16px; padding: 6px 0; }

/* ---------- grade inicial ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile {
  background: var(--card); border-radius: 28px; padding: 12px 14px;
  text-align: left; border: 0; color: var(--text);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .16s ease, background .16s ease;
  animation: fadeUp .4s ease both;
}
.tile:hover { background: var(--card-hover); }
.tile:active { transform: scale(.97); }
.tile .ic {
  width: 36px; height: 36px; border-radius: 50%; font-size: 17px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.tile .row { display: flex; align-items: flex-start; justify-content: space-between; }
.tile .count { color: var(--muted); font-size: 16px; }
.tile .name { font-size: 17px; font-weight: 600; margin-top: 12px; }

.section-title { color: var(--muted); font-size: 17px; font-weight: 600; margin: 26px 4px 10px; }
.card { background: var(--card); border-radius: var(--radius); padding: 6px 16px; }
.card .line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px;
}
.card .line:last-child { border-bottom: 0; }
.card .line .val { color: var(--muted); text-align: right; word-break: break-all; }
.card .line .val.light { color: var(--text); }

/* ---------- busca flutuante ---------- */
.bottombar {
  position: fixed; left: 0; right: 0; bottom: 12px; z-index: 40;
  display: flex; justify-content: center; pointer-events: none;
}
/* Barra UNICA como no Android: um so fundo arredondado (raio 30, respiro
 * de 6px) segurando os tres controles — nada de pecas soltas flutuando. */
.bottombar .inner {
  pointer-events: auto; display: flex; align-items: center; gap: 8px;
  width: min(560px, calc(100% - 28px));
  background: var(--bar); border-radius: 30px; padding: 6px;
  box-shadow: var(--bar-shadow);
}
.search-pill {
  flex: 1; display: flex; align-items: center; gap: 8px; height: 42px;
  background: var(--card2);
  border-radius: 999px; padding: 0 16px;
}
.search-pill input {
  flex: 1; background: none; border: 0; outline: 0; color: var(--text); font-size: 16px;
}
.search-pill input::placeholder { color: var(--muted); }

/* ---------- lista ---------- */
.list-head { text-align: center; }
.list-head .t { font-size: 17px; font-weight: 700; }
.list-head .s { color: var(--muted); font-size: 13px; }
.rows { position: relative; }
.row-item {
  display: flex; align-items: center; gap: 13px; width: 100%;
  background: none; border: 0; color: var(--text); text-align: left;
  padding: 11px 4px; border-bottom: 1px solid var(--line);
  animation: fadeUp .3s ease both; transition: background .15s ease;
}
.row-item:hover { background: var(--row-hover); border-radius: 12px; }
.avatar {
  width: 46px; height: 46px; border-radius: 11px; background: #8e8e93; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600; color: #fff; text-transform: uppercase;
}
.row-item .meta { flex: 1; min-width: 0; }
/* display:block é o que faz nowrap+ellipsis valerem: em span inline o
 * navegador ignora overflow/text-overflow e o texto longo vazava da
 * linha, invadindo o selo de alerta e a seta. Título e usuário ficam em
 * UMA linha cada; o que não cabe vira "…" (o completo está no detalhe). */
.row-item .meta .tt { display: block; font-size: 16.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-item .meta .uu { display: block; color: var(--muted); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
}
.badge.red { background: var(--red); color: #fff; }
.badge.yellow { background: var(--yellow); color: #000; }
.badge.gray { background: var(--chip); color: var(--muted); }
.chev { color: var(--muted); font-size: 18px; flex: none; }
/* Índice alfabético: coluna vertical fina colada na borda direita, como
 * no app da Apple — letras EMPILHADAS (A em cima, Z/# embaixo), clicáveis
 * para pular à seção. (Antes era texto com \n sem white-space: as letras
 * colapsavam numa linha horizontal atravessando a tela.) */
.alpha-index {
  position: fixed; right: 2px; top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; align-items: center;
  width: 20px; z-index: 30; user-select: none;
}
.alpha-index.on { display: flex; }
.alpha-index span {
  color: var(--blue); font-size: 10.5px; font-weight: 600; line-height: 1.5;
  text-align: center; width: 18px; border-radius: 50%; cursor: pointer;
}
.alpha-index span.off { opacity: .32; cursor: default; }
.alpha-index span.act { background: var(--chip); font-weight: 800; }
/* Respiro à direita da lista para a coluna do índice não sobrepor linhas. */
#view-list .wrap { padding-right: 34px; }
.group-letter { color: var(--muted); font-size: 14px; font-weight: 700; margin: 16px 4px 2px; }

/* ---------- seleção múltipla ---------- */
/* Círculo de marcação à esquerda da linha (só no modo de seleção). */
.sel-check {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 2px solid var(--muted); color: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.row-item.selected .sel-check { background: var(--brand); border-color: var(--brand); color: #fff; }
.row-item.selected { background: var(--row-hover); border-radius: 12px; }
/* Selecionando (inclusive arrastando o mouse): nada de selecionar texto. */
#view-list.selecting .row-item { -webkit-user-select: none; user-select: none; }
/* Barra de ações da seleção: fixa embaixo, no lugar da barra de busca. */
.selbar {
  position: fixed; left: 0; right: 0; bottom: 14px; z-index: 50;
  display: none; justify-content: center; pointer-events: none;
}
.selbar .inner {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  width: min(560px, calc(100% - 24px));
  background: var(--search-bg); backdrop-filter: blur(8px);
  border-radius: 24px; padding: 10px 14px; box-shadow: var(--shadow);
}
.selbar .sel-count { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.selbar .sel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.selbar .pill-btn { padding: 9px 14px; font-size: 14px; }
#view-list.selecting .selbar { display: flex; }
#view-list.selecting .bottombar { display: none; }

/* ---------- códigos ---------- */
.code-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--card); border: 0; color: var(--text); text-align: left;
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
  transition: transform .15s ease, background .15s ease; animation: fadeUp .3s ease both;
}
.code-card:hover { background: var(--card-hover); }
.code-card:active { transform: scale(.98); }
/* Colunas da linha do código: avatar fixo | título/usuário flexível que
 * trunca com reticências | código com largura própria | anel fixo.
 * Nada em position absolute: os dígitos NUNCA invadem o texto. */
.code-card .avatar { flex: 0 0 auto; }
.cc-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cc-meta .tt {
  font-weight: 600; font-size: 15px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-meta .uu {
  color: var(--muted); font-size: 13px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-action { flex: 0 0 auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.code-num {
  flex: 0 0 auto; white-space: nowrap;
  font-size: 21px; font-weight: 700; letter-spacing: 1.5px; font-variant-numeric: tabular-nums;
}
.code-num.flip { animation: codeFlip .45s ease; }
@keyframes codeFlip {
  0% { opacity: 0; transform: translateY(9px); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.ring { position: relative; width: 34px; height: 34px; flex: 0 0 auto; }
.ring svg { transform: rotate(-90deg); }
.ring circle.track { stroke: var(--ring-track); }
.ring circle.prog { stroke: var(--blue); }
.ring .n {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* ---------- formulários / bloqueio ---------- */
.center-box { max-width: 400px; margin: 9vh auto 0; text-align: center; padding: 0 20px; }
.key-logo { font-size: 54px; margin-bottom: 8px; }
.field {
  width: 100%; background: var(--card); border: 1px solid var(--line); color: var(--text);
  border-radius: 16px; padding: 13px 15px; font-size: 16px; margin: 7px 0; outline: 0;
}
.field:focus { border-color: var(--blue); }
.field::placeholder { color: var(--muted); }
textarea.field { min-height: 74px; resize: vertical; }
.wide-btn {
  width: 100%; border: 0; border-radius: 999px; padding: 14px; margin-top: 12px;
  background: linear-gradient(135deg, #8A05BE, #A855F7); color: #fff; font-size: 16.5px; font-weight: 700;
  transition: transform .15s ease, background .15s ease;
}
.wide-btn:hover { background: #2f97ff; }
.wide-btn:active { transform: scale(.98); }
.error { color: var(--red); font-size: 14.5px; min-height: 20px; margin-top: 8px; }
.hint { color: var(--muted); font-size: 14px; line-height: 1.45; }
.empty-card {
  background: var(--card); border-radius: 26px; padding: 16px; text-align: left;
  animation: fadeUp .4s ease both;
}
.empty-card .big { font-size: 17px; font-weight: 700; margin-bottom: 6px; }

/* faixa do modo captura */
.capture-banner {
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--yellow); color: #000; text-align: center;
  font-size: 13px; font-weight: 700; padding: 6px 10px;
}
.capture-banner.on { display: block; }

/* menu ••• e diálogos */
.menu-pop {
  position: absolute; top: 52px; right: 12px; z-index: 80; min-width: 240px;
  background: var(--card2); border-radius: 20px; padding: 6px; display: none;
  box-shadow: var(--shadow); animation: fadeUp .18s ease both;
}
.menu-pop.on { display: block; }
.menu-pop button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--text); font-size: 15.5px; padding: 11px 12px; border-radius: 12px;
}
.menu-pop button:hover { background: var(--menu-hover); }
.menu-pop button.destr { color: var(--red); }
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.overlay.on { display: flex; animation: fadeUp .2s ease both; }
.dialog { background: var(--card2); border-radius: 20px; padding: 22px; max-width: 380px; width: 100%; }
.dialog h3 { margin: 0 0 8px; font-size: 18px; }
.dialog .btns { display: flex; gap: 10px; margin-top: 18px; }
.dialog .btns button { flex: 1; }
.toast {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(16px);
  background: var(--card2); color: var(--text); padding: 11px 20px; border-radius: 999px;
  font-size: 14.5px; opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 99;
  box-shadow: var(--shadow);
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.detail-head { text-align: center; padding: 12px 0 6px; }
.detail-head .avatar { width: 64px; height: 64px; border-radius: 15px; font-size: 31px; margin: 0 auto 10px; }
.detail-head .site { font-size: 25px; font-weight: 800; letter-spacing: -.3px; word-break: break-all; }
.secure-note { color: var(--muted); font-size: 13px; text-align: center; margin-top: 14px; line-height: 1.5; }
.hidden-file { display: none; }

/* ===== Brand Owner Experience: títulos Sora, liquid glass, céu ===== */
h1, .dialog h3 { font-family: 'Sora', 'Inter', -apple-system, sans-serif; letter-spacing: -.01em; }
.menu-ver {
  padding: 10px 12px 6px; margin-top: 4px; font-size: 12.5px;
  color: var(--muted); border-top: 1px solid var(--line);
}
:root[data-theme="dark"] .bottombar .inner,
:root[data-theme="dark"] .menu-pop,
:root[data-theme="dark"] .dialog {
  background: linear-gradient(135deg, rgba(51,31,77,.78), rgba(30,18,48,.62));
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  backdrop-filter: blur(18px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 16px 40px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.06);
}
:root[data-theme="light"] .bottombar .inner,
:root[data-theme="light"] .menu-pop,
:root[data-theme="light"] .dialog {
  background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.64));
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  backdrop-filter: blur(18px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 16px 40px rgba(74,26,99,.20), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.30);
}
#view-home.active { min-height: 100dvh; }
:root[data-theme="dark"] #view-home.active {
  background:
    radial-gradient(1.6px 1.6px at 24px 36px, rgba(255,255,255,.95) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 130px 90px, rgba(255,255,255,.70) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 210px 40px, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 70px 150px, rgba(255,255,255,.60) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 170px 185px, rgba(255,255,255,.75) 50%, transparent 52%),
    linear-gradient(180deg, #070310 0%, #120826 45%, #2A1150 78%, #3D1663 100%);
  background-size: 260px 220px, 260px 220px, 260px 220px, 260px 220px, 260px 220px, 100% 100%;
}
:root[data-theme="light"] #view-home.active {
  background:
    radial-gradient(1.6px 1.6px at 24px 36px, rgba(138,5,190,.40) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 130px 90px, rgba(138,5,190,.30) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 210px 40px, rgba(138,5,190,.35) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 70px 150px, rgba(138,5,190,.25) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 170px 185px, rgba(138,5,190,.32) 50%, transparent 52%),
    linear-gradient(180deg, #FDFCFE 0%, #EFE8FA 100%);
  background-size: 260px 220px, 260px 220px, 260px 220px, 260px 220px, 260px 220px, 100% 100%;
}