:root {
  --topbar-bg: #0c2b4d;
  --topbar-ink: #eef3fa;
  --sidebar-bg: #08203c;
  --sidebar-active: #163a63;
  --page-dot: #1f6fd6;
  --ink: #22252b;
  --seq-bg: #0c2b4d;
  --seq-border: #1f6fd6;
  --accent-green: #4ade80;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #fff;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
}

.text-field {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.page-dot.add {
  background: #f472b6;
  color: #fff;
}

.profiles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  background: #fff;
}

.profile-row.active {
  border-color: #c96a2e;
  background: #fff7ef;
}

.profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1eee0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.profile-name { font-weight: 600; font-size: 14px; }
.profile-tag { font-size: 11px; color: #999; }

.backup-email-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e5e7eb; }

.modal-note {
  font-size: 11px;
  color: #888;
  margin: 4px 0 0;
  line-height: 1.5;
}

.lock-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 25, 0.92);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.lock-overlay.open { display: flex; }
.lock-box {
  background: #fff;
  border-radius: 18px;
  padding: 32px 28px;
  max-width: 380px;
  text-align: center;
}
.lock-icon { font-size: 40px; margin-bottom: 10px; }
.lock-box h2 { margin: 0 0 10px; font-size: 18px; }
.lock-box p { font-size: 13px; color: #666; margin: 0 0 18px; line-height: 1.5; }

.offline-badge {
  display: none;
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #2b3245;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  z-index: 150;
}
.offline-badge.show { display: block; }

.action-panel {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  background: #fafafa;
}
.action-panel:empty { display: none; padding: 0; margin: 0; border: none; }
.action-panel .ap-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.action-panel .ap-btn {
  border: none; border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.action-panel .ap-btn.record { background: #ef4444; color: #fff; }
.action-panel .ap-btn.stop { background: #444; color: #fff; }
.action-panel .ap-btn.confirm { background: #22c55e; color: #fff; }
.action-panel .ap-btn.secondary { background: #e5e7eb; color: #333; }
.action-panel audio { width: 100%; margin-top: 8px; }
.action-panel img.ap-preview { max-width: 100%; max-height: 140px; border-radius: 8px; margin-top: 8px; display: block; }
.action-panel .ap-note { font-size: 11px; color: #888; margin-top: 6px; line-height: 1.5; }
.action-panel .ap-status { font-size: 12px; color: #555; }
.action-panel .rec-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#ef4444; margin-right:6px; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

/* ---------- Brand ---------- */
.brand-mini {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  grid-column: 1;
  justify-self: start;
}
.brand-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Edit mode (gear on cards) ---------- */
.card-gear {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

/* ---------- Modals ---------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 25, 0.45);
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-overlay.open { display: flex; }

.modal {
  background: #fff;
  border-radius: 18px;
  width: min(460px, 90vw);
  padding: 18px 20px;
  max-height: 86vh;
  overflow-y: auto;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.modal-head h3 { margin: 0 0 4px; font-size: 16px; }
.modal-sub { margin: 0; font-size: 12px; color: #777; max-width: 340px; }

.modal-close {
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
  color: #777;
}

.edit-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.edit-option {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 12px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #444;
}
.edit-option.wide { width: 100%; flex-direction: row; justify-content: center; }
.edit-option.danger { border-color: #f87171; color: #b91c1c; margin-top: 6px; }
.edit-option.danger:hover { background: #fef2f2; }

.pic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; max-height: 320px; overflow-y: auto; }
.pic-item { display: flex; flex-direction: column; align-items: center; background: #fff; border: 2px solid #e2e2e2; border-radius: 10px; padding: 6px; cursor: pointer; }
.pic-item:active, .pic-item:hover { border-color: #6aa9ff; }
.pic-item img { width: 100%; height: 60px; object-fit: contain; }
.pic-item span { font-size: 11px; margin-top: 4px; text-align: center; color: #333; }
.edit-option .eo-icon { font-size: 18px; }
.edit-option:hover { background: #fafafa; }

.numbers-display {
  background: #0c2b4d;
  color: #fff;
  font-size: 40px;
  font-weight: 800;
  text-align: center;
  border-radius: 12px;
  padding: 18px;
  margin: 14px 0;
  letter-spacing: 2px;
  min-height: 1.2em;
}

.numbers-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.letters-pad {
  grid-template-columns: repeat(6, 1fr) !important;
}
.letters-pad .num-btn {
  font-size: 18px;
  padding: 12px 0;
  width: 100%;
}
.letters-pad .num-btn.wide { grid-column: span 6; font-size: 14px; }
.letters-pad .num-btn.half { grid-column: span 3; font-size: 14px; }

.num-btn {
  border: 2px solid #d9dee6;
  background: #fff;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 700;
  padding: 16px 0;
  cursor: pointer;
  color: #22252b;
}

.num-btn:active { background: #eef2f7; }
.num-btn.wide { grid-column: span 2; }
.num-btn.action { background: #fca5a5; color: #7f1d1d; border-color: #f87171; }

.numbers-actions {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.numbers-actions .seq-btn.play {
  width: auto;
  height: auto;
  border-radius: 12px;
  padding: 12px 30px;
  font-size: 18px;
}
.numbers-actions .seq-btn.secondary {
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 15px;
  background: #e5e7eb;
  color: #22252b;
  border: none;
  cursor: pointer;
  font-weight: 700;
}

.joystick-status {
  background: #f4f4f4;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
}

.joystick-map { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.js-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid #f0f0f0;
}

.js-row-label { display: flex; align-items: center; gap: 8px; }
.js-dot { width: 8px; height: 8px; border-radius: 50%; }

.js-key {
  background: #f3f3f3;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #444;
}

.joystick-speed {
  background: #fdf6da;
  border: 1px solid #e8d98a;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}
.js-speed-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.js-speed-scale { display: flex; justify-content: space-between; font-size: 11px; color: #777; margin-top: 4px; }
.js-speed-note { font-size: 11px; color: #888; margin: 6px 0 0; }

.joystick-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--topbar-bg);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: calc(6px + env(safe-area-inset-top, 24px)) 10px 6px;
  flex-shrink: 0;
  gap: 8px;
}

.page-and-count {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
  grid-column: 2;
}

.page-dots {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.page-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: #333;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-dot.active {
  background: var(--page-dot);
  color: #fff;
}

.page-dot:disabled {
  opacity: 0.35;
  cursor: default;
}

.page-nav-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: #333;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.page-nav-arrow:disabled { opacity: 0.35; cursor: not-allowed; }

.page-nav-label {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  padding: 0 4px;
}

.toolbar {
  justify-self: end;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  grid-column: 3;
}

.tool-btn {
  border: none;
  background: rgba(255,255,255,0.92);
  border-radius: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
}

.tool-btn.wide {
  width: auto;
  padding: 0 8px;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
}

.tool-btn.active {
  background: #22c55e;
  color: #fff;
}

.tool-btn.small {
  width: 18px;
  height: 26px;
  font-size: 9px;
  margin-left: -4px;
}

/* ---------- Body layout ---------- */
.body-row {
  flex: 1;
  display: flex;
  min-height: 0;
}

.sidebar {
  width: 64px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  gap: 4px;
  flex-shrink: 0;
  overflow-y: auto;
}

.sidebar-item {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #fff;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: #333;
  gap: 2px;
  position: relative;
}

.sidebar-item div img.sidebar-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
}

.sidebar-gear {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

/* Prévia de áudio no hover (modo edição) */
.grid-edit .card:hover:not(.placeholder) .icon,
.grid-edit .card:hover:not(.placeholder) .label {
  visibility: hidden;
}
.grid-edit .card:hover:not(.placeholder)::after {
  content: '▶';
  position: absolute;
  inset: 0;
  background: rgba(40, 42, 48, 0.72);
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-item span.sidebar-label {
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.sidebar-item.active {
  outline: 3px solid var(--page-dot);
}

.sidebar-add {
  width: 56px;
  height: 44px;
  border-radius: 12px;
  background: #f472b6;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* ---------- Category header ---------- */
.category-header {
  background: #1e2433;
  color: #fff;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  flex-shrink: 0;
}

.voltar-btn {
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 4px 12px;
  cursor: pointer;
  font-weight: 600;
}

/* ---------- Sequencer bar ---------- */
.sequencer-bar {
  background: var(--seq-bg);
  border-bottom: 2px solid var(--seq-border);
  padding: 10px 16px;
  flex-shrink: 0;
}

.sequencer-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--topbar-ink);
}

.sequencer-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.seq-btn {
  border: none;
  border-radius: 10px;
  padding: 6px 14px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
}

.seq-btn.play { background: #22c55e; color: #fff; }
.seq-btn.play:disabled { background: #a7e3bb; cursor: not-allowed; }

#play-btn {
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seq-btn.share {
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3b82f6;
  color: #fff;
}
.seq-btn.share:disabled { background: #93c5fd; cursor: not-allowed; }

.seq-btn.copy {
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f59e0b;
  color: #fff;
}
.seq-btn.copy:disabled { background: #fcd34d; cursor: not-allowed; }

.seq-btn.audio {
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #10b981;
  color: #fff;
}
.seq-btn.audio:disabled { background: #a7f3d0; cursor: not-allowed; }
.seq-btn.clear { background: #fca5a5; color: #7f1d1d; }

#sequencer-count {
  flex-shrink: 0;
  white-space: nowrap;
  background: rgba(255,255,255,0.15);
  color: #fff;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0 6px;
}

.sequencer-track {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  border: 2px dashed rgba(255,255,255,0.35);
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  overflow-x: auto;
}

.sequencer-track.empty::before {
  content: 'Toque nos blocos...';
  color: rgba(255,255,255,0.55);
  font-style: italic;
  font-size: 12px;
  white-space: nowrap;
}

.seq-chip {
  background: #fff;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  padding: 3px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.seq-chip .seq-chip-label { display: none; }
.seq-chip-icon {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.seq-chip-icon::before {
  content: '';
  position: absolute;
  inset: -10%;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(6px) saturate(1.15);
  z-index: 0;
}
.seq-chip-icon .seq-chip-img { position: relative; z-index: 1; width: 26px; height: 26px; object-fit: contain; }

/* ---------- Grid ---------- */
.grid-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;
  padding: 4px;
  background: #eef2f7;
  width: 100%;
}

.card {
  border: 3px solid transparent;
  background: #fff;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 2px;
  gap: 0;
  position: relative;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(20, 20, 30, 0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  overflow: hidden;
}

.card:hover {
  filter: brightness(0.99);
  box-shadow: 0 4px 10px rgba(20, 20, 30, 0.12);
  transform: translateY(-2px);
}
.card:active { transform: scale(0.96); }

.card.selected {
  outline: 3px solid #111;
  outline-offset: -3px;
  z-index: 1;
}

.card .icon { font-size: 34px; line-height: 1; flex-shrink: 0; width: 100%; height: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; background-size: cover; background-position: center; }
.card.has-image { padding: 0; }

/* Quando o pictograma não é quadrado, object-fit: contain deixa uma faixa vazia
   nas bordas. Preenchemos essa faixa com a própria imagem (desfocada) em vez de
   deixar aparecer o fundo branco do cartão. */
.card .icon::before {
  content: '';
  position: absolute;
  inset: -10%;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(14px) saturate(1.15);
  z-index: 0;
}
.card .icon img.card-img { position: relative; z-index: 1; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; transform: scale(1.0); }
.card .label {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
  word-break: break-word;
  width: 100%;
}
/* Quando o cartão tem imagem (pictograma já traz a legenda embutida), esconde o texto abaixo */
.card:has(.icon img.card-img) .label { display: none; }

.card.big .icon { font-size: 30px; }
.card.big .label { font-size: 15px; font-weight: 800; -webkit-line-clamp: 2; }

.card.wide { grid-column: span 1; }

.card.placeholder .label {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  -webkit-line-clamp: 1;
}

.card.speaking {
  animation: pulse 0.5s ease;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  100% { box-shadow: 0 0 0 14px rgba(34,197,94,0); }
}

/* ---------- Layout responsivo ---------- */
/* Padrão: celular, retrato — 7 colunas, cartões sempre quadrados (aspect-ratio) */
.grid { grid-template-columns: repeat(7, 1fr); }

/* Celular em paisagem: cartões um pouco menores, mais compactos, mais visíveis sem rolar */
@media (max-width: 900px) and (orientation: landscape) {
  .grid { grid-template-columns: repeat(8, 1fr); gap: 3px; padding: 3px; }
  .card .icon { font-size: 24px; }
  .card .icon img.card-img { width: 360px; height: 360px; }
  .card .label { font-size: 10px; }
}

/* Tablets (retrato) — mais colunas, aproveitando a largura extra */
@media (min-width: 700px) and (max-width: 1200px) and (orientation: portrait) {
  .grid { grid-template-columns: repeat(8, 1fr); }
  .card .icon { font-size: 42px; }
  .card .icon img.card-img { width: 612px; height: 612px; }
  .card .label { font-size: 14px; }
}

/* Tablets (paisagem) e telas grandes — ainda mais colunas */
@media (min-width: 900px) and (orientation: landscape) {
  .grid { grid-template-columns: repeat(10, 1fr); gap: 3px; padding: 3px; }
  .card .icon { font-size: 30px; }
  .card .icon img.card-img { width: 432px; height: 432px; }
  .card .label { font-size: 11px; }
}

@media (min-width: 1400px) {
  .grid { grid-template-columns: repeat(12, 1fr); }
}

/* Só na versão desktop (Electron): a tela tem mais espaço sobrando, então em
   vez de 4 linhas de cartões (10 colunas) mostra 5 linhas (8 colunas) —
   os mesmos 40 blocos por página, só organizados diferente. A classe
   .is-desktop só é aplicada pelo próprio app quando detecta que está rodando
   dentro do Electron (ver app.js) — no Android/tablet/celular nada muda. */
.is-desktop .grid { grid-template-columns: repeat(8, 1fr); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

button:focus-visible, .card:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}