/* ==========================================================
   Gestão Costura — estilos
   Cores principais: azul-marinho + dourado (identidade do app antigo)
   ========================================================== */

:root {
  --navy: #be185d;
  --navy-2: #db2777;
  --gold: #ec4899;
  --gold-soft: #f9a8d4;
  --gold-bg: #fce7f3;

  --bg: #f5f5f6;
  --surface: #ffffff;
  --surface-2: #f1f1f3;
  --border: #e6e6ea;
  --text: #27272a;
  --text-2: #6b6b75;
  --text-3: #a1a1aa;
  --primary: var(--navy);
  --primary-text: #ffffff;
  --accent: var(--gold);
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --ok: #059669;
  --ok-bg: #ecfdf5;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --info: #52525b;
  --info-bg: #f4f4f5;
  --shadow: 0 8px 28px -12px rgba(24, 24, 27, 0.10);
  --shadow-lg: 0 24px 60px -20px rgba(24, 24, 27, 0.45);
  --radius: 22px;
  --radius-s: 14px;
  --tabbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #121214;
    --surface: #1c1c20;
    --surface-2: #26262b;
    --border: #36363d;
    --text: #f4f4f5;
    --text-2: #b4b4bc;
    --text-3: #7a7a84;
    --primary: #ec4899;
    --gold-bg: #3a1c2b;
    --danger-bg: #3a1414;
    --ok-bg: #0c2f24;
    --warn-bg: #36270b;
    --info-bg: #27272a;
    --info: #d4d4d8;
    --shadow: 0 8px 28px -14px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #121214;
  --surface: #1c1c20;
  --surface-2: #26262b;
  --border: #36363d;
  --text: #f4f4f5;
  --text-2: #b4b4bc;
  --text-3: #7a7a84;
  --primary: #ec4899;
  --gold-bg: #3a1c2b;
  --danger-bg: #3a1414;
  --ok-bg: #0c2f24;
  --warn-bg: #36270b;
  --info-bg: #27272a;
  --info: #d4d4d8;
  --shadow: 0 8px 28px -14px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  overscroll-behavior-y: none;
}
body.locked { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
.icon { flex-shrink: 0; display: block; }

/* ---------- utilidades ---------- */
.row { display: flex; align-items: center; }
.gap { gap: 10px; }
.gap-s { gap: 6px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.center { text-align: center; }
.mb { margin-bottom: 16px; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }
.pos { color: var(--ok) !important; }
.neg { color: var(--danger) !important; }
.accent-text { color: var(--accent); }
.w40 { width: 40px; flex-shrink: 0; }
.btn-reset { background: none; border: 0; padding: 0; text-align: left; width: 100%; }
.link { background: none; border: 0; padding: 4px 0; color: var(--primary); font-weight: 700; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme='dark'] .link { color: var(--gold-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .link { color: var(--gold-soft); } }

/* ---------- estrutura ---------- */
.shell { min-height: 100vh; min-height: 100dvh; }
.content { max-width: 720px; margin: 0 auto; padding: calc(8px + var(--safe-t)) 16px calc(var(--tabbar-h) + var(--safe-b) + 24px); }
.page { display: flex; flex-direction: column; gap: 14px; animation: fade 0.25s ease; }
.page-head { padding: 12px 2px 0; }
.page-head h1 { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center;
  height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}
.tab {
  flex: 1; max-width: 160px; background: none; border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-3); font-size: 11px; font-weight: 700;
}
.tab.on { color: var(--primary); }
:root[data-theme='dark'] .tab.on { color: var(--gold-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .tab.on { color: var(--gold-soft); } }
.tab.on .icon { transform: translateY(-1px); }

.top-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 2px; }
.brand img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid var(--surface); box-shadow: var(--shadow); }

/* ---------- botões ---------- */
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform 0.15s;
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn:disabled { opacity: 0.35; }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn.solid { background: var(--primary); border-color: var(--primary); color: #fff; }
.icon-btn.ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.icon-btn.danger { background: var(--danger-bg); border-color: transparent; color: var(--danger); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: var(--radius-s); border: 1px solid transparent;
  font-weight: 800; font-size: 14px; letter-spacing: 0.01em;
  transition: transform 0.15s, opacity 0.15s, background 0.15s;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 12px; }
.btn.big { width: 100%; min-height: 54px; font-size: 16px; border-radius: 18px; }
.btn.primary { background: var(--primary); color: var(--primary-text); box-shadow: 0 10px 24px -12px var(--navy); }
.btn.accent { background: var(--gold); color: #fff; box-shadow: 0 10px 24px -12px var(--gold); }
.btn.ghost { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.btn.soft { background: var(--surface); border-color: var(--border); color: var(--text); flex: 1; font-size: 13px; padding: 0 10px; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.accent-soft { background: var(--gold-bg); color: var(--warn); }
.btn.danger-soft { background: var(--danger-bg); color: var(--danger); }
.btn.new-lote {
  width: 100%; min-height: 58px; border-radius: 22px; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--navy); color: #fff; box-shadow: 0 14px 30px -14px var(--navy);
}
.btn.new-lote .icon { color: var(--gold-soft); }

/* ---------- cartões ---------- */
.card, .block {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px;
}
.block { display: flex; flex-direction: column; gap: 12px; }
.block h2 { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eyebrow, .section-title { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); }
.section-title { text-align: center; margin-bottom: 10px; }

.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 800; background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.pill.accent { color: var(--accent); }
.pill.solid { background: var(--navy); border-color: var(--navy); color: #fff; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--primary); }
.dot.prod { background: repeating-linear-gradient(45deg, var(--gold-soft) 0 3px, var(--gold) 3px 6px); }
.dot.open { background: var(--gold-soft); }
.dot.a { background: var(--primary); }
.dot.b { background: var(--gold-soft); }

/* ---------- meta ---------- */
.meta-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.meta-top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.meta-values { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
.meta-values strong { font-size: 38px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.meta-values span { font-size: 17px; font-weight: 700; color: var(--text-3); }
.progress { width: 100%; height: 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; display: flex; }
.progress .fill { height: 100%; background: linear-gradient(90deg, var(--navy), #e0458b 60%, var(--gold)); border-radius: 999px; transition: width 0.8s cubic-bezier(.2,.8,.2,1); }
.progress .fill.prod { background: repeating-linear-gradient(45deg, var(--gold-soft) 0 5px, color-mix(in srgb, var(--gold-soft) 55%, transparent) 5px 10px); border-radius: 0 999px 999px 0; }
.meta-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.meta-note { font-size: 12.5px; font-weight: 600; color: var(--text-2); }

/* ---------- alertas ---------- */
.alerts { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.alerts::-webkit-scrollbar { display: none; }
.alert {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; border: 1px solid transparent;
}
.alert.danger { background: var(--danger-bg); color: var(--danger); }
.alert.warn { background: var(--warn-bg); color: var(--warn); }
.alert.info { background: var(--info-bg); color: var(--info); }
.alert.muted { background: var(--surface); border-color: var(--border); color: var(--text-2); }
:root[data-theme='dark'] .alert.info { color: #d4d4d8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .alert.info { color: #d4d4d8; } }

/* ---------- semanas ---------- */
.weeks { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 8px; }
.week { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.week-badge {
  width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center;
  font-size: 13px; font-weight: 900; background: var(--surface); border: 2px solid var(--border); color: var(--text-3);
}
.week b { font-size: 12px; font-weight: 800; }
.week small { font-size: 10.5px; color: var(--text-3); font-weight: 600; }
.week.hit .week-badge { border-color: var(--gold-soft); color: var(--gold); box-shadow: 0 6px 16px -8px var(--gold); }
.week.current .week-badge { background: var(--navy); border-color: var(--navy); color: #fff; transform: scale(1.06); }
.week.future { opacity: 0.4; }
.week.future .week-badge { border-style: dashed; }

/* ---------- filtros ---------- */
.filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chip {
  padding: 9px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  transition: background 0.15s, color 0.15s;
}
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- lista de lotes ---------- */
.lote-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .lote-list { grid-template-columns: 1fr 1fr; } }
.swipe-wrap { position: relative; border-radius: var(--radius); overflow: hidden; }
.swipe-del {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  padding-right: 26px; gap: 2px; border: 0; background: var(--danger); color: #fff; font-weight: 800;
  opacity: 0; transition: opacity 0.15s;
}
.swipe-wrap.open .swipe-del { opacity: 1; }
.swipe-del small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.lote-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 14px 12px 18px; cursor: pointer; transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
  touch-action: pan-y; user-select: none;
}
.lote-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--gold-soft); }
.lote-card.fin::before { background: var(--navy); }
.lote-card.late::before { background: var(--danger); }
.lote-main { display: flex; align-items: center; gap: 12px; }
.lote-thumb {
  width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center; background: var(--gold-bg); color: var(--navy); border: 1px solid var(--border);
}
:root[data-theme='dark'] .lote-thumb { color: var(--gold-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .lote-thumb { color: var(--gold-soft); } }
.lote-card.fin .lote-thumb { background: var(--surface-2); }
.lote-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lote-info { flex: 1; min-width: 0; }
.lote-info h4 { font-size: 24px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; }
.hash { color: var(--gold); font-size: 15px; vertical-align: top; margin-right: 1px; }
.lote-sub { font-size: 11.5px; font-weight: 700; color: var(--text-2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lote-value { text-align: right; display: flex; flex-direction: column; }
.lote-value b { font-size: 16px; font-weight: 900; letter-spacing: -0.02em; }
.lote-value small { font-size: 12px; color: var(--text-2); font-weight: 700; }
.lote-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.lote-date { font-size: 12px; font-weight: 700; color: var(--text-2); }
.badge { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.badge.atrasado { background: var(--danger-bg); color: var(--danger); }
.badge.hoje, .badge.proximo { background: var(--warn-bg); color: var(--warn); }
.badge-btn { font-size: 11.5px; font-weight: 800; padding: 6px 11px; border-radius: 10px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 4px; }
.badge-btn.paid { background: var(--ok-bg); color: var(--ok); }
.badge-btn.due { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.finish-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 11px; border: 0;
  background: var(--gold-soft); color: #27272a; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em;
  box-shadow: 0 8px 18px -10px var(--gold);
}

/* ---------- vazio ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 20px; border: 2px dashed var(--border); border-radius: var(--radius); color: var(--text-2); }
.empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); margin-bottom: 6px; }
.empty b { color: var(--text); }
.empty p { font-size: 13px; }

/* ---------- janelas ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(24, 24, 27, 0.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center; animation: fade 0.2s ease;
}
.overlay.center { align-items: center; padding: 20px; z-index: 90; }
.sheet {
  width: 100%; max-width: 620px; max-height: 94vh; max-height: 94dvh; background: var(--bg);
  border-radius: 26px 26px 0 0; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); overflow: hidden;
}
.sheet.wide { max-width: 900px; }
@media (min-width: 700px) {
  .overlay:not(.center) { align-items: center; padding: 24px; }
  .sheet { border-radius: 26px; max-height: 92vh; }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px; background: var(--surface); border-bottom: 1px solid var(--border); }
.sheet-head h2 { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; text-align: center; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-body { overflow-y: auto; padding: 16px; flex: 1; overscroll-behavior: contain; }
.sheet-foot { padding: 12px 16px calc(12px + var(--safe-b)); background: var(--surface); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }

.dialog { width: 100%; max-width: 360px; background: var(--surface); border-radius: 28px; padding: 26px 22px 20px; box-shadow: var(--shadow-lg); text-align: center; display: flex; flex-direction: column; gap: 12px; }
.dialog h3 { font-size: 19px; font-weight: 900; letter-spacing: -0.02em; }
.dialog p { font-size: 14px; color: var(--text-2); }
.dialog-icon { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: var(--info-bg); color: var(--info); }
.dialog-icon.danger { background: var(--danger-bg); color: var(--danger); }

.toast {
  position: fixed; left: 50%; top: calc(var(--safe-t) + 14px); transform: translateX(-50%); z-index: 120;
  background: #27272a; color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 700;
  box-shadow: var(--shadow-lg); animation: toastIn 0.25s ease; max-width: calc(100% - 32px); text-align: center;
}
.toast-error { background: var(--danger); }

/* ---------- formulários ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); }
.field-hint { font-size: 12px; color: var(--text-3); }
.input {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-s);
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-size: 16px; font-weight: 700; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
.input::placeholder { color: var(--text-3); font-weight: 600; }
.input.bad { border-color: var(--danger); color: var(--danger); }
.input.money, .input.num { text-align: center; font-size: 18px; font-weight: 800; }
.input.big-input { font-size: 28px; font-weight: 900; min-height: 64px; }
textarea.input { resize: vertical; min-height: 70px; font-weight: 600; }
.input.select { min-height: 38px; width: auto; padding: 6px 12px; font-size: 13px; border-radius: 999px; }
.input.search { margin-bottom: 12px; }
input[type='date'].input { font-size: 15px; }

.form-error { font-size: 13px; color: var(--danger); font-weight: 700; display: flex; gap: 6px; align-items: center; justify-content: center; }
.note { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: var(--radius-s); background: var(--info-bg); color: var(--info); font-size: 13px; font-weight: 700; }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.note.ok { background: var(--ok-bg); color: var(--ok); }

.ref-input { display: flex; align-items: center; gap: 8px; }
.ref-zero { font-size: 32px; font-weight: 900; color: var(--text-3); width: 26px; text-align: right; }
.ref-num { font-size: 30px !important; font-weight: 900 !important; text-align: center; letter-spacing: 0.15em; flex: 3; min-height: 60px; }
.ref-char { font-size: 30px !important; font-weight: 900 !important; text-align: center; flex: 1; min-height: 60px; text-transform: uppercase; }
.ref-display { text-align: center; font-size: 38px; font-weight: 900; letter-spacing: -0.04em; display: flex; flex-direction: column; align-items: center; }
.ref-display .ref-hash { color: var(--gold); font-size: 22px; vertical-align: top; margin-right: 2px; }
.ref-display small { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }

.suggest {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-s);
  background: var(--gold-bg); border: 1px dashed var(--gold); color: var(--warn); font-size: 13px; font-weight: 600; text-align: left;
}
.suggest b { font-weight: 900; }

.sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.size-btn {
  width: 52px; height: 52px; border-radius: 16px; border: 2px solid var(--border); background: var(--surface);
  font-size: 18px; font-weight: 900; color: var(--text); transition: all 0.15s;
}
.size-btn.sm { width: 44px; height: 44px; font-size: 15px; border-radius: 13px; }
.size-btn.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.size-btn:disabled { opacity: 0.85; }

.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 12px 14px; border-radius: var(--radius-s); border: 1px solid var(--border); background: var(--surface); text-align: left;
}
.toggle-text { display: flex; flex-direction: column; }
.toggle-text b { font-size: 14px; font-weight: 800; }
.toggle-text small { font-size: 12px; color: var(--text-2); }
.switch { width: 50px; height: 30px; border-radius: 999px; background: var(--border); position: relative; flex-shrink: 0; transition: background 0.2s; }
.knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform 0.2s; }
.toggle-row.on .switch { background: var(--ok); }
.toggle-row.on .knob { transform: translateX(20px); }

.parts { display: grid; gap: 12px; }
.parts.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 380px) { .parts.two { grid-template-columns: 1fr; } }
.part-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.part-card.conf { border-color: var(--gold-soft); }
.part-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.real-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.real-cell { display: flex; flex-direction: column; gap: 4px; text-align: center; font-size: 11px; font-weight: 800; color: var(--text-2); }
.real-cell .input { min-height: 44px; padding: 6px; }
.part-sub { display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 13px; font-weight: 700; color: var(--text-2); }
.part-sub b { color: var(--text); font-size: 15px; }

.compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px; text-align: center; }
.compare small { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); }
.compare b { display: block; font-size: 18px; font-weight: 900; }
.compare span { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.diff { padding: 6px 10px; border-radius: 10px; font-weight: 900; font-size: 14px; }
.diff.pos { background: var(--ok-bg); color: var(--ok); }
.diff.neg { background: var(--danger-bg); color: var(--danger); }

.total-box {
  border-radius: 22px; padding: 18px; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--navy), #db2777 60%, #ec4899);
  display: flex; flex-direction: column; gap: 2px; box-shadow: 0 16px 34px -18px var(--navy);
}
.total-box.conf { background: linear-gradient(135deg, #be185d, var(--gold) 55%, var(--gold-soft)); }
.total-box small { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.total-box strong { font-size: 34px; font-weight: 900; letter-spacing: -0.03em; }
.total-box span { font-size: 12px; opacity: 0.85; font-weight: 600; }

.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.more-toggle { background: none; border: 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-2); font-weight: 800; font-size: 13px; padding: 6px; }
.rot { transform: rotate(180deg); }
.photo { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); }
.photo img { width: 100%; max-height: 260px; object-fit: cover; }
.photo .icon-btn { position: absolute; top: 10px; right: 10px; }
.photo-add { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 90px; border-radius: 18px; border: 2px dashed var(--border); background: var(--surface); color: var(--text-2); font-weight: 800; }
.secondary-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

.tipo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tipo-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 140px;
  border-radius: 24px; border: 2px solid var(--border); background: var(--surface); font-size: 16px; font-weight: 900;
  transition: transform 0.15s, border-color 0.15s;
}
.tipo-card:active { transform: scale(0.97); border-color: var(--gold); }
.tipo-card.conjunto { grid-column: 1 / -1; min-height: 110px; flex-direction: row; flex-wrap: wrap; }
.tipo-card small { width: 100%; text-align: center; font-size: 12px; color: var(--text-2); font-weight: 700; margin-top: -6px; }
.tipo-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--gold-bg); color: var(--navy); }
:root[data-theme='dark'] .tipo-ico { color: var(--gold-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .tipo-ico { color: var(--gold-soft); } }

/* ---------- busca ---------- */
.search-list { display: flex; flex-direction: column; gap: 8px; }
.search-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); text-align: left; }
.search-item b { font-weight: 900; }
.search-item small { display: block; font-size: 12px; color: var(--text-2); font-weight: 600; }
.search-item .right { text-align: right; }

/* ---------- finanças ---------- */
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px; }
.month-nav b { font-size: 15px; font-weight: 900; }
.month-nav.compact { max-width: 360px; margin: 0 auto 10px; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.kpi small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); }
.kpi b { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }
.kpi span { font-size: 12px; color: var(--text-2); font-weight: 600; }
.kpi.main { grid-column: 1 / -1; background: var(--navy); border-color: var(--navy); color: #fff; }
.kpi.main small, .kpi.main span { color: rgba(255,255,255,.7); }
.kpi.main b { font-size: 30px; color: var(--gold-soft); }
.quick-actions { display: flex; gap: 8px; }
.group { display: flex; flex-direction: column; gap: 6px; }
.group-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 13px; color: var(--text-2); padding-top: 4px; }
.line-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: none; border: 0; padding: 0; text-align: left; }
.line-main b { font-weight: 800; font-size: 14px; }
.line-main small { font-size: 12px; color: var(--text-2); font-weight: 600; }
.line-main em { font-size: 12px; color: var(--danger); font-style: normal; font-weight: 700; }
.line-val { font-weight: 900; font-size: 14px; white-space: nowrap; }
.emoji { font-size: 22px; }
.cat-summary { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 700; text-align: left; }
.cat span { font-size: 18px; }
.cat.on { border-color: var(--navy); background: var(--info-bg); }

/* ---------- números ---------- */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.stat small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); }
.stat b { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.stat span { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.delta.pos, .delta.neg { font-weight: 800; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 3px; }
.seg button { border: 0; background: none; padding: 7px 12px; border-radius: 9px; font-weight: 800; font-size: 13px; color: var(--text-2); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px -4px rgba(0,0,0,.3); }
.seg.full { display: flex; }
.seg.full button { flex: 1; }

.chart { margin: 0; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .goal { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 6 4; }
.chart .bar.a { fill: var(--primary); }
.chart .bar.b { fill: var(--gold-soft); }
.chart g:not(.hl) .bar.a { opacity: 0.75; }
.chart .val { font-size: 9px; font-weight: 800; fill: var(--text-2); }
.chart .lbl { font-size: 10px; font-weight: 700; fill: var(--text-3); }
.chart .hl .lbl { fill: var(--text); font-weight: 900; }
.legend { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.legend .dash { display: inline-block; width: 16px; border-top: 2px dashed var(--gold); vertical-align: middle; margin-right: 6px; }

.hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hbars li { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.hb-label { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hb-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.hb-fill.open { background: var(--gold-soft); }
.hb-val { font-weight: 800; color: var(--text-2); font-size: 12.5px; }

/* ---------- anual ---------- */
.year-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; scrollbar-width: none; }
.annual-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--navy); border-radius: 30px; padding: 6px; margin-bottom: 14px; }
.annual-summary > div { padding: 22px 10px; text-align: center; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.annual-summary .light { background: var(--surface); border-radius: 24px; color: var(--text); }
.annual-summary small { font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }
.annual-summary b { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }
.annual-summary .light b { color: var(--gold); }
.annual-summary span { font-size: 11px; font-weight: 700; opacity: 0.7; }
.decl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.decl { display: flex; flex-direction: column; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 10px; }
.decl > span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); }
.decl small { font-size: 11px; color: var(--text-3); font-weight: 600; }
.decl em { font-size: 11px; color: var(--danger); font-weight: 800; font-style: normal; }
.decl.bad { border-color: var(--danger); background: var(--danger-bg); }
.decl .input { min-height: 42px; font-size: 15px; }

/* ---------- ajustes ---------- */
.logo-row { display: flex; gap: 14px; align-items: flex-start; }
.logo-pick { position: relative; width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: var(--shadow); padding: 0; background: #fff; flex-shrink: 0; }
.logo-pick img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.logo-pick span { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; border: 2px solid var(--surface); }
.backup-status { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border-radius: 14px; padding: 12px; }
.backup-status span { display: flex; gap: 8px; align-items: center; }
.list-btn { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); font-weight: 800; text-align: left; }
.list-btn .end { margin-left: auto; color: var(--text-3); }
.list-btn.danger { color: var(--danger); }
.version { text-align: center; font-size: 12px; color: var(--text-3); font-weight: 600; padding: 8px; }
.check-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.check-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.check-item.bad { border-color: var(--warn); background: var(--warn-bg); }

/* ---------- relatório (sempre claro, é papel) ---------- */
.report-controls { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; }
.paper-stage { position: relative; width: 100%; overflow: hidden; display: flex; justify-content: center; }
.paper-scale { transform-origin: top center; position: absolute; top: 0; left: 50%; margin-left: -397px; }
.report {
  background: #ffffff; color: #27272a; padding: 56px 52px 48px; font-family: 'Inter', system-ui, sans-serif;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 28px;
  -webkit-font-smoothing: antialiased; font-variant-ligatures: none;
}
.r-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid #be185d; padding-bottom: 18px; }
.r-head h1 { font-size: 34px; font-weight: 900; letter-spacing: -0.03em; color: #be185d; }
.r-head p { margin-top: 6px; font-size: 14px; font-weight: 700; color: #6b6b75; }
.r-tag { background: #f9a8d4; color: #be185d; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; margin-right: 6px; }
.r-meta { text-align: right; }
.r-meta small { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: #a1a1aa; }
.r-meta b { font-size: 16px; color: #be185d; }
.r-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.r-kpi { border-radius: 22px; padding: 22px; border: 2px solid #e6e6ea; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.r-kpi.dark { background: #be185d; border-color: #be185d; color: #fff; }
.r-kpi small { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.7; }
.r-kpi strong { font-size: 34px; font-weight: 900; letter-spacing: -0.03em; }
.r-kpi.dark strong { color: #f9a8d4; }
.r-kpi strong em { font-size: 14px; font-style: normal; font-weight: 800; opacity: 0.6; }
.r-break { display: flex; justify-content: center; gap: 18px; font-size: 12px; font-weight: 700; opacity: 0.85; border-top: 1px solid rgba(148,163,184,.35); padding-top: 10px; }
.r-break b { margin-left: 4px; }
.r-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.r-table th { background: #f4f4f5; color: #be185d; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; text-align: left; padding: 10px 8px; }
.r-table th:first-child { border-radius: 10px 0 0 10px; }
.r-table th:last-child { border-radius: 0 10px 10px 0; }
.r-table td { padding: 10px 8px; border-bottom: 1px solid #e6e6ea; vertical-align: middle; font-weight: 600; }
.r-table tr { page-break-inside: avoid; }
.r-table td small { display: block; font-size: 10px; color: #71717a; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.r-table td b { font-weight: 900; }
.r-table .num { text-align: right; white-space: nowrap; }
.r-table tfoot td { border-bottom: 0; border-top: 2px solid #be185d; font-size: 13.5px; color: #be185d; }
.r-sizes { display: inline-flex; gap: 3px; }
.r-sizes i { font-style: normal; font-size: 10px; font-weight: 900; background: #f4f4f5; border-radius: 5px; padding: 2px 5px; }
.r-split { display: flex; flex-direction: column; font-size: 11.5px; }
.r-note { font-size: 13px; color: #b45309; font-weight: 700; }
.r-foot { margin-top: auto; text-align: center; padding-top: 22px; border-top: 1px solid #e6e6ea; }
.r-foot p { font-size: 13px; font-style: italic; color: #6b6b75; max-width: 520px; margin: 0 auto; }
.r-foot cite { display: block; margin-top: 8px; font-size: 11px; font-weight: 900; font-style: normal; letter-spacing: 0.2em; text-transform: uppercase; color: #ec4899; }

/* ---------- abertura, erro, atualização ---------- */
.splash { position: fixed; inset: 0; background: #be185d; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.splash img { width: 84px; height: 84px; border-radius: 50%; background: #fff; padding: 4px; animation: pulse 1.6s ease-in-out infinite; }
.splash-bar { width: 160px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; }
.splash-bar span { display: block; height: 100%; width: 40%; background: #ec4899; border-radius: 999px; animation: load 1s ease-in-out infinite; }
.fatal { max-width: 420px; margin: 20vh auto; padding: 24px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.update-bar { position: fixed; top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 130; border: 0; background: var(--gold); color: #fff; font-weight: 800; padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow-lg); font-size: 13px; white-space: nowrap; }

/* ---------- animações ---------- */
.slide-up { animation: slideUp 0.28s cubic-bezier(.2,.8,.2,1); }
.pop { animation: pop 0.2s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastIn { from { transform: translate(-50%, -12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes load { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* Desktop: um pouco mais de respiro */
@media (min-width: 760px) {
  .content { padding-top: 24px; }
  .kpis { grid-template-columns: 2fr 1fr 1fr; }
  .kpi.main { grid-column: auto; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- formulário de lote (compacto) ---------- */
.form.lf { gap: 10px; }
.lf-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.lf-card.conf { border-color: var(--gold-soft); }
.lf-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-2); }
.lf-label em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-3); }
.lf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lf .input { min-height: 44px; padding: 8px 10px; }
.lf .input.money, .lf .input.num { font-size: 17px; }

.lf-id { display: flex; gap: 12px; align-items: stretch; }
.lf-photo-wrap { position: relative; flex-shrink: 0; }
.lf-photo {
  width: 72px; height: 100%; min-height: 72px; border-radius: 16px; border: 2px dashed var(--border); background: var(--surface-2);
  color: var(--text-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; overflow: hidden;
}
.lf-photo small { font-size: 10px; font-weight: 800; }
.lf-photo.has { border-style: solid; }
.lf-photo img { width: 100%; height: 100%; object-fit: cover; }
.lf-photo-del {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface);
  background: var(--danger); color: #fff; display: grid; place-items: center; padding: 0;
}
.lf-ref { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lf .ref-zero { font-size: 26px; width: 18px; }
.lf .ref-num, .lf .ref-char { min-height: 52px; font-size: 26px !important; }
.lf .ref-num { letter-spacing: 0.12em; }
.lf-ref-show { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.lf-ref-show b { font-size: 32px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.lf-ref-show small { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); margin-top: 4px; }

.lf-sizes { display: flex; flex-direction: column; gap: 6px; }
.lf .sizes { gap: 6px; }
.lf .size-btn.sm { width: 46px; height: 42px; }

.lf-extra {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 8px 10px 8px 12px; border-radius: 12px; border: 1px dashed var(--border); background: var(--surface-2);
  font-size: 13px; font-weight: 600; color: var(--text-2); text-align: left;
}
.lf-extra b { color: var(--text); font-weight: 800; }
.lf-extra .switch { width: 42px; height: 24px; }
.lf-extra .knob { width: 18px; height: 18px; }
.lf-extra.on { border-style: solid; border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.lf-extra.on .switch { background: var(--ok); }
.lf-extra.on .knob { transform: translateX(18px); }

.lf-parts { display: grid; gap: 10px; }
@media (min-width: 560px) { .lf-parts.two { grid-template-columns: 1fr 1fr; } }
.lf-part-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.lf-part-head span { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12.5px; }
.lf-part-head b { color: var(--text); }
.lf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lf .real-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.lf .real-cell .input { min-height: 42px; }

.lf-compare {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; color: var(--text-2);
}
.lf-compare b { color: var(--text); }
.lf-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lf-dates .input { font-size: 14px; }
.lf-obs { min-height: 64px; font-size: 14px !important; }
.lf .more-toggle { padding: 4px; }
.lf .toggle-row { padding: 10px 12px; }

.lf-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.lf-actions .btn { min-height: 42px; padding: 0 8px; font-size: 12.5px; gap: 5px; }
.lf-actions .btn.wide { grid-column: 1 / -1; }

.lf-foot { display: flex; align-items: center; gap: 12px; }
.lf-total { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.lf-total small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); }
.lf-total strong { font-size: 24px; font-weight: 900; letter-spacing: -0.03em; color: var(--text); }
.lf-total.conf strong { color: var(--gold); }
.lf-total span { font-size: 11.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.lf-save { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 16px; flex-shrink: 0; }

/* ---------- tela inicial (remodelada) ---------- */
.home { gap: 12px; }
.home-head { display: flex; align-items: center; gap: 10px; padding: 6px 0 0; }
.home-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid var(--surface); box-shadow: var(--shadow); flex-shrink: 0; }
.home-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.home-title small { font-size: 12px; font-weight: 600; color: var(--text-2); }
.home-title b { font-size: 18px; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hero {
  position: relative; overflow: hidden; border-radius: 26px; padding: 16px 16px 12px; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, #ec4899 0%, transparent 55%), linear-gradient(160deg, #be185d, #831843);
  box-shadow: 0 18px 40px -20px rgba(190, 24, 93, 0.8); display: flex; flex-direction: column; gap: 12px;
}
.hero-top { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.hero-btn { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; }
.hero-btn:active { background: rgba(255,255,255,.26); }
.hero-main { display: flex; align-items: center; gap: 16px; }
.ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.ring-bg { stroke: rgba(255,255,255,.14); }
.ring-fill { stroke: var(--gold-soft); transition: stroke-dasharray 0.8s cubic-bezier(.2,.8,.2,1); }
.ring-prod { stroke: rgba(249,168,212,.35); stroke-linecap: butt !important; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; font-weight: 900; letter-spacing: -0.03em; }
.hero-values { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-values strong { font-size: 36px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.hero-values span { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-stats span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.1); }
.hero-stats .dot { margin: 0; }
.hero-weeks { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.hw { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hw small { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.7); white-space: nowrap; }
.hw-track { position: relative; width: 100%; max-width: 38px; height: 44px; border-radius: 8px; background: rgba(255,255,255,.08); overflow: hidden; }
.hw-bar { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.55); border-radius: 8px 8px 0 0; transition: height 0.6s ease; }
.hw-goal { position: absolute; left: 3px; right: 3px; height: 0; border-top: 1.5px dashed rgba(249,168,212,.7); }
.hw b { font-size: 11px; font-weight: 900; color: rgba(255,255,255,.6); }
.hw.hit .hw-bar { background: var(--gold-soft); }
.hw.current .hw-track { box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.hw.current b { color: #fff; }
.hw.future { opacity: 0.45; }

.home .alerts { gap: 6px; }
.home .alert { padding: 7px 12px; font-size: 12.5px; }

.filter-seg { display: flex; width: 100%; border-radius: 14px; padding: 4px; }
.filter-seg button { flex: 1; padding: 9px 2px; font-size: 12.5px; border-radius: 10px; white-space: nowrap; }
.filter-seg button.on { background: var(--navy); color: #fff; box-shadow: 0 6px 14px -8px var(--navy); }

.lgroup { display: flex; flex-direction: column; gap: 8px; }
.lgroup-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 4px 0; }
.lgroup-head h3 { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); }
.lgroup-head h3 small { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11px; letter-spacing: 0; color: var(--text); }
.lgroup-head span { font-size: 13px; font-weight: 800; color: var(--text-2); }
.home .lote-list { gap: 8px; }
.home .swipe-wrap { border-radius: 18px; }

.lrow {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); cursor: pointer; touch-action: pan-y; user-select: none;
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
}
.lrow::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--gold-soft); }
.lrow.fin::before { background: var(--navy); }
.lrow.late::before { background: var(--danger); }
.lrow:active { transform: scale(0.99); }
.lrow-thumb { width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; background: var(--gold-bg); color: var(--navy); }
.lrow.fin .lrow-thumb { background: var(--surface-2); }
:root[data-theme='dark'] .lrow-thumb { color: var(--gold-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .lrow-thumb { color: var(--gold-soft); } }
.lrow-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lrow-info { flex: 1; min-width: 0; }
.lrow-info h4 { font-size: 20px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.lrow-info .hash { font-size: 13px; }
.lrow-sub { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-sub em { font-style: normal; font-weight: 800; }
.lrow-sub em.atrasado { color: var(--danger); }
.lrow-sub em.hoje, .lrow-sub em.proximo { color: var(--warn); }
.lrow-end { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.lrow-end b { font-size: 15px; font-weight: 900; letter-spacing: -0.02em; }
.tag-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 8px; border: 0; font-size: 11px; font-weight: 800; }
.tag-btn.paid { background: var(--ok-bg); color: var(--ok); }
.tag-btn.due { background: var(--info-bg); color: var(--info); }
.tag-btn.finish { background: var(--gold-soft); color: #27272a; text-transform: uppercase; letter-spacing: 0.04em; }

.fab {
  position: fixed; z-index: 45; right: max(16px, calc(50% - 344px)); bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px);
  display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 20px 0 16px; border: 0; border-radius: 18px;
  background: var(--navy); color: #fff; font-size: 15px; font-weight: 900; letter-spacing: 0.01em;
  box-shadow: 0 14px 30px -10px rgba(190, 24, 93, 0.7), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.fab .icon { color: var(--gold-soft); }
.fab:active { transform: scale(0.96); }
.home { padding-bottom: 64px; }
.lrow-when { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-when em { font-style: normal; font-weight: 800; }
.lrow-when em.atrasado { color: var(--danger); }
.lrow-when em.hoje, .lrow-when em.proximo { color: var(--warn); }
.update-bar { top: auto; bottom: calc(var(--tabbar-h) + var(--safe-b) + 80px); }
.tab-new { flex: 1; max-width: 160px; background: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; padding-bottom: 7px; color: var(--text-2); font-size: 11px; font-weight: 800; }
.tab-new span {
  width: 52px; height: 52px; margin-top: -26px; border-radius: 18px; display: grid; place-items: center;
  background: var(--navy); color: var(--gold-soft); border: 4px solid var(--bg);
  box-shadow: 0 10px 22px -8px rgba(190, 24, 93, 0.8); transition: transform 0.15s;
}
.tab-new:active span { transform: scale(0.92); }
.tab-new small { font-size: 11px; }
.home { padding-bottom: 0; }
.update-bar { bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); }

/* Referência: um campo único com 3 partes (0 | número | letra) */
.ref-input {
  display: flex; align-items: stretch; gap: 0; height: 56px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ref-input:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent); }
.ref-input .ref-zero, .lf .ref-input .ref-zero {
  width: auto; padding: 0 12px 0 16px; display: grid; place-items: center;
  font-size: 26px; font-weight: 900; color: var(--text-3); background: var(--surface-2); border-right: 1.5px solid var(--border);
}
.ref-input .input, .lf .ref-input .input {
  min-height: 0; height: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none !important;
  font-size: 26px !important; font-weight: 900 !important; text-align: center; padding: 0 6px;
}
.ref-input .ref-num { flex: 1; min-width: 0; letter-spacing: 0.2em; }
.ref-input .ref-char { flex: 0 0 64px; border-left: 1.5px dashed var(--border); text-transform: uppercase; }
.ref-input .input:focus { background: color-mix(in srgb, var(--gold) 7%, transparent); }

/* Referência v2: números e letra colados, lendo como um código só (0454D) */
.ref-input, .lf .ref-input { justify-content: center; align-items: center; gap: 0; cursor: text; }
.ref-input .ref-zero, .lf .ref-input .ref-zero {
  background: none; border: 0; padding: 0; width: auto; display: inline-block; line-height: 1;
  font-size: 30px; font-weight: 900; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.ref-input .input, .lf .ref-input .input {
  flex: none; padding: 0; height: 100%; font-size: 30px !important; line-height: 1; font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em; caret-color: var(--gold);
}
.ref-input .ref-num, .lf .ref-input .ref-num { width: 3.1ch; text-align: left; letter-spacing: 0.04em; }
.ref-input .ref-char, .lf .ref-input .ref-char { width: 1.2em; flex: none; border-left: 0; text-align: left; color: var(--gold); }
.ref-input .input:focus { background: none; }
.ref-input .ref-num::placeholder, .ref-input .ref-char::placeholder { color: var(--text-3); opacity: 0.45; }
.ref-input .ref-num, .lf .ref-input .ref-num { width: 3ch; letter-spacing: 0; }
.ref-input .ref-char, .lf .ref-input .ref-char { width: 1.05em; letter-spacing: 0; padding-left: 1px; }
.ref-input .ref-zero, .lf .ref-input .ref-zero { letter-spacing: 0; }
.ref-input .ref-num, .lf .ref-input .ref-num { width: calc(3ch - 3px); }
.ref-input .ref-char, .lf .ref-input .ref-char { padding-left: 0; margin-left: -1px; }

/* ---------- Finanças (remodelada) ---------- */
.fin-page { gap: 12px; }
.fin-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px 0; }
.fin-head h1 { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; }
.fin-month { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.fin-month b { font-size: 13.5px; font-weight: 900; min-width: 74px; text-align: center; }
.fin-month .icon-btn { border: 0; background: var(--surface-2); }

.fin-hero { gap: 10px; }
.fin-delta { font-size: 11px; letter-spacing: 0.02em; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.12); }
.fin-delta.up { color: #86efac; }
.fin-delta.down { color: #fca5a5; }
.fin-lucro { font-size: 40px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--gold-soft); }
.fin-lucro.neg { color: #fca5a5; }
.fin-bar { height: 8px; border-radius: 999px; background: rgba(134, 239, 172, .55); overflow: hidden; }
.fin-bar span { display: block; height: 100%; background: #f87171; border-radius: 999px; transition: width 0.6s ease; }
.fin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.fin-stats div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fin-stats small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,.6); }
.fin-stats b { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; }
.fin-stats b.red { color: #fca5a5; }
.fin-stats span { font-size: 10.5px; color: rgba(255,255,255,.55); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fin-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fin-actions button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 800; color: var(--text); }
.fin-actions button span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--primary); }
:root[data-theme='dark'] .fin-actions button span { color: var(--gold-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .fin-actions button span { color: var(--gold-soft); } }
.fin-actions button span.add { background: var(--navy); color: var(--gold-soft); }
.fin-actions button:active { transform: scale(0.96); }

.fin-pend { color: var(--accent) !important; font-size: 16px !important; font-weight: 900 !important; }
.fin-all { width: 100%; }
.lrow-when em:not([class]) , .lrow-when em[class=''] { color: var(--text-2); }

.fin-cats { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.fin-cat { display: grid; grid-template-columns: 22px 74px 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; }
.fin-cat-emoji { font-size: 16px; }
.fin-cat-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-cat-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fin-cat-track i { display: block; height: 100%; border-radius: 999px; background: #f87171; }
.fin-cat b { font-weight: 900; }
.lrow.desp::before { background: #f87171; }
.lrow-thumb.emoji { background: var(--surface-2); font-size: 22px; }
.desp-title { font-size: 15px !important; letter-spacing: -0.01em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-end b.red { color: var(--danger); }

/* formulário de despesa */
.dz-value { min-height: 76px !important; font-size: 34px !important; border-radius: 20px; }
.dz-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dz-cat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface); }
.dz-cat span { font-size: 24px; line-height: 1; }
.dz-cat small { font-size: 11px; font-weight: 800; color: var(--text-2); }
.dz-cat.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.dz-cat.on small { color: var(--text); }

/* Interruptores na cor da marca */
.toggle-row.on .switch, .lf-extra.on .switch { background: var(--navy); }
.lf-extra.on { border-color: color-mix(in srgb, var(--navy) 40%, transparent); }

/* Janela flutuante (escolha do tipo do lote): abre mais para cima, longe do rodapé */
.overlay.float, .overlay.float:not(.center) { align-items: flex-start; padding: calc(var(--safe-t) + 12vh) 16px 16px; }
.sheet.float { max-width: 460px; border-radius: 28px; animation: floatIn 0.28s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 700px) { .overlay.float:not(.center) { padding-top: 14vh; } }
@keyframes floatIn { from { transform: translateY(-16px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Cartão principal: rosa mais sofisticado ---------- */
.hero {
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(244, 114, 182, 0.55) 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(255, 255, 255, 0.10) 0%, transparent 60%),
    linear-gradient(155deg, #db2777 0%, #be185d 45%, #9d174d 100%);
  box-shadow: 0 20px 44px -22px rgba(219, 39, 119, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(60% 40% at 30% 0%, rgba(255, 255, 255, 0.10), transparent 70%);
}
.hero > * { position: relative; z-index: 1; }
.ring-fill { stroke: #fbcfe8; }
.ring-prod { stroke: rgba(251, 207, 232, 0.35); }

/* ---------- Gráfico do mês ---------- */
.mchart { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); }
.mchart svg { width: 100%; height: auto; display: block; overflow: visible; }
.mc-sep { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.mc-now { fill: rgba(255,255,255,.07); }
.mc-ideal { stroke: rgba(251, 207, 232, 0.75); stroke-width: 1.5; stroke-dasharray: 4 4; }
.mc-meta { font-size: 9px; font-weight: 800; fill: rgba(251, 207, 232, 0.9); letter-spacing: 0.08em; text-transform: uppercase; }
.mc-area { fill: url(#mcFill); }
.mc-line { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mc-dot { fill: #f9a8d4; stroke: #fff; stroke-width: 2.5; }
.mc-dot.ok { fill: #86efac; }
.mc-bubble rect { fill: #fff; }
.mc-bubble text { font-size: 10.5px; font-weight: 900; fill: #be185d; }
.mc-weeks { display: grid; gap: 0; }
.mc-week { display: flex; flex-direction: column; align-items: center; line-height: 1.2; min-width: 0; }
.mc-week b { font-size: 11px; font-weight: 900; color: rgba(255,255,255,.65); }
.mc-week small { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mc-week.current b { color: #fff; }
.mc-week.current small { color: #fbcfe8; }
.mc-week.future { opacity: 0.5; }
.mc-pace { font-size: 12px; font-weight: 700; text-align: center; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.1); }
.mc-pace.ok { color: #bbf7d0; }
.mc-pace.low { color: #fbcfe8; }

/* Soma no cartão: entregue + em produção = total */
.hero-sum { display: grid; grid-template-columns: 1fr auto 1fr auto 1.15fr; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.1); }
.hero-sum > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.hero-sum small { display: flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,.65); white-space: nowrap; }
.hero-sum small .dot { margin: 0; width: 7px; height: 7px; }
.hero-sum b { font-size: 16px; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; }
.hero-sum > i { font-style: normal; font-size: 16px; font-weight: 900; color: rgba(255,255,255,.45); }
.hero-sum .total { padding: 6px 10px; margin: -6px -6px -6px 0; border-radius: 12px; background: rgba(255,255,255,.95); }
.hero-sum .total small { color: #db2777; }
.hero-sum .total b { color: #9d174d; font-size: 17px; }
.hero-sum .total span { font-size: 10px; font-weight: 800; color: #db2777; }

/* Foto do lote em tela cheia */
.lrow-thumb.has-photo { cursor: zoom-in; box-shadow: 0 0 0 2px var(--gold-soft); }
.photo-view { background: rgba(12, 12, 14, 0.92); flex-direction: column; }
.photo-view figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
.photo-view img { max-width: min(92vw, 720px); max-height: 78vh; object-fit: contain; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); animation: pop 0.2s ease-out; }
.photo-view figcaption { color: #fff; font-size: 15px; font-weight: 600; }
.photo-view figcaption b { font-weight: 900; }
.photo-close { position: fixed; top: calc(var(--safe-t) + 14px); right: 14px; background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }

/* Ações do lote sem o Duplicar: botões dividem a linha */
.lf-actions { display: flex; flex-wrap: wrap; }
.lf-actions .btn { flex: 1 1 0; }
.lf-actions .btn.wide { flex-basis: 100%; }

/* Botão de datas recolhidas */
.lf-dates-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 13.5px; font-weight: 600; text-align: left;
}
.lf-dates-toggle span { flex: 1; }
.lf-dates-toggle b { color: var(--text); font-weight: 800; }
.lf-dates-toggle .icon:first-child { color: var(--gold); }
.lf-dates-toggle.open { border-color: var(--gold-soft); }

/* ---------- Paleta final: rosa + branco + cinza ---------- */
:root { --navy: #db2777; --navy-2: #ec4899; --gold: #ec4899; --gold-soft: #f9a8d4; --gold-bg: #fce7f3; }
.hero {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
    linear-gradient(150deg, #f05a9d 0%, #db2777 50%, #be185d 100%);
  box-shadow: 0 18px 40px -22px rgba(219, 39, 119, 0.7);
}
.ring-fill { stroke: #fff; }
.ring-prod { stroke: rgba(255, 255, 255, 0.35); }
.mc-dot { fill: #fff; stroke: #fbcfe8; }
.mc-ideal { stroke: rgba(255, 255, 255, 0.6); }
.mc-meta { fill: rgba(255, 255, 255, 0.85); }
.tag-btn.finish { background: #fce7f3; color: #be185d; }
:root[data-theme='dark'] .tag-btn.finish { background: #3a1c2b; color: #f9a8d4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .tag-btn.finish { background: #3a1c2b; color: #f9a8d4; } }
.lrow::before { background: #f9a8d4; }
.lrow.fin::before { background: #a1a1aa; }
.lrow-thumb { background: #fce7f3; color: #db2777; }
.lrow.fin .lrow-thumb { background: var(--surface-2); color: var(--text-2); }
:root[data-theme='dark'] .lrow-thumb { background: #3a1c2b; color: #f9a8d4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .lrow-thumb { background: #3a1c2b; color: #f9a8d4; } }
:root[data-theme='dark'] .lrow.fin .lrow-thumb { background: var(--surface-2); color: var(--text-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .lrow.fin .lrow-thumb { background: var(--surface-2); color: var(--text-2); } }
.total-box { background: linear-gradient(150deg, #f05a9d, #db2777 55%, #be185d); box-shadow: 0 16px 34px -18px #db2777; }
.total-box.conf { background: linear-gradient(150deg, #52525b, #3f3f46); }
.btn.accent { background: #db2777; box-shadow: 0 10px 24px -12px #db2777; }
.btn.accent-soft { background: #fce7f3; color: #be185d; }
:root[data-theme='dark'] .btn.accent-soft { background: #3a1c2b; color: #f9a8d4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .btn.accent-soft { background: #3a1c2b; color: #f9a8d4; } }
.lf-total.conf strong { color: #db2777; }
.ref-input .ref-char, .lf .ref-input .ref-char { color: #db2777; }
:root[data-theme='dark'] .ref-input .ref-char { color: #f472b6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ref-input .ref-char { color: #f472b6; } }
.hash { color: #ec4899; }
.r-tag { background: #fce7f3; color: #be185d; }
.r-foot cite { color: #db2777; }
.splash-bar span { background: #fff; }

/* Lixeira ao lado do Salvar */
.lf-del { width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; background: var(--danger-bg); border-color: transparent; color: var(--danger); }
.lf-actions .btn.ghost, .lf-actions .btn.accent-soft { flex-basis: 100%; }

/* Logo da tela inicial abre os Ajustes */
.home-logo-btn { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; flex-shrink: 0; }
.home-logo-btn:active { transform: scale(0.94); }
.home-logo-gear {
  position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy); color: #fff; border: 2px solid var(--bg);
}
.settings-head { display: flex; align-items: center; gap: 10px; }
.tabbar .tab, .tabbar .tab-new { max-width: 140px; }

/* Relatório: só o ícone do WhatsApp */
.rep-foot { display: flex; justify-content: center; }
.wa-btn {
  width: 64px; height: 64px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: 0 12px 26px -10px rgba(37, 211, 102, 0.8); transition: transform 0.15s;
}
.wa-btn:active:not(:disabled) { transform: scale(0.92); }
.wa-btn:disabled { opacity: 0.45; box-shadow: none; }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Ajustes compactos (lista agrupada) ---------- */
.set-page { gap: 8px; }
.set-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); padding: 8px 4px 0; }
.set-group { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 52px; padding: 8px 14px; background: none; border: 0; text-align: left; color: var(--text);
}
.set-row + .set-row { border-top: 1px solid var(--border); }
button.set-row:active { background: var(--surface-2); }
.set-label { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; min-width: 0; }
.set-label small { font-size: 11.5px; font-weight: 500; color: var(--text-3); margin-top: 1px; }
.set-row.danger .set-label, .set-row.danger .set-chev { color: var(--danger); }
.set-chev { color: var(--text-3); flex-shrink: 0; }
.set-input {
  width: 150px; min-height: 36px !important; padding: 6px 10px !important; border-radius: 10px !important;
  font-size: 14px !important; font-weight: 700 !important; text-align: right !important; flex-shrink: 0;
  background: var(--surface-2) !important; border: 1px solid transparent !important; color: var(--text);
}
.set-input.sm { width: 92px; }
.set-input:focus { border-color: var(--navy) !important; outline: none; box-shadow: none !important; }
.set-seg { padding: 2px; border-radius: 10px; }
.set-seg button { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.set-seg button.on { background: var(--navy); color: #fff; }
.set-row .switch { width: 44px; height: 26px; flex-shrink: 0; }
.set-row .switch .knob { width: 20px; height: 20px; }
.set-row .switch.on { background: var(--navy); }
.set-row .switch.on .knob { transform: translateX(18px); }
.set-row .btn.sm { min-height: 32px; padding: 0 10px; font-size: 12px; gap: 4px; }

.set-id { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.set-logo { position: relative; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: #fff; flex-shrink: 0; }
.set-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.set-logo span { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; border: 2px solid var(--surface); }
.set-id-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-name { width: 100%; border: 0; border-bottom: 1px dashed var(--border); background: none; color: var(--text); font: inherit; font-size: 17px; font-weight: 900; padding: 2px 0; outline: none; }
.set-name:focus { border-bottom-color: var(--navy); }
.set-id-text small { font-size: 11.5px; color: var(--text-3); }
.set-id-text .link { font-size: 11.5px; padding: 0; }

.set-sizes { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
.set-size { width: 40px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: 14px; font-weight: 800; }
.set-size.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.set-note { font-size: 11.5px; color: var(--text-3); padding: 0 4px; }
.set-page .version { padding: 4px; }

/* Adicional 6/8: só ícone + chave, ao lado dos tamanhos */
.lf-sizes-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lf-extra.mini { width: auto; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 12px; margin-left: auto; color: var(--text-3); }
.lf-extra.mini.on { color: var(--navy); }
:root[data-theme='dark'] .lf-extra.mini.on { color: #f472b6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .lf-extra.mini.on { color: #f472b6; } }
.lf-sizes-row { flex-wrap: nowrap; }
.lf-sizes-row .sizes { gap: 5px; flex-wrap: wrap; min-width: 0; }
.lf .lf-sizes-row .size-btn.sm { width: 40px; height: 40px; font-size: 15px; }
.lf-extra.mini { gap: 6px; padding: 5px 6px 5px 8px; flex-shrink: 0; }
.lf-extra.mini .switch { width: 38px; height: 22px; }
.lf-extra.mini .knob { width: 16px; height: 16px; }
.lf-extra.mini.on .knob { transform: translateX(16px); }

/* Versículo editável */
.set-verse { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 0 !important; border-top: 0 !important; }
.set-verse .set-input { width: 100%; text-align: left !important; }
.set-textarea { resize: vertical; min-height: 64px; font-weight: 500 !important; font-style: italic; line-height: 1.4; font-family: inherit; }
.set-verse-ref { font-size: 12.5px !important; }

/* Ícones de superior/inferior no relatório */
.r-split span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.r-ico { color: #db2777; flex-shrink: 0; }