:root {
      color-scheme: light dark;
      --page: #e9e6dd;
      --surface: #f8f7f2;
      --surface-2: #ffffff;
      --surface-3: #eeece5;
      --ink: #152220;
      --muted: #5f6b67;
      --line: #d8d8d0;
      --accent: #f2c94c;
      --accent-strong: #8a6500;
      --accent-soft: #fff1b8;
      --green: #8a6500;
      --green-soft: #fff0ad;
      --blue: #5e6570;
      --danger: #a54b3f;
      --success: #26734d;
      --success-soft: #e1f2e7;
      --attention: #a83e34;
      --attention-soft: #fae2dd;
      --shadow: 0 24px 70px rgba(34, 46, 42, .16);
      --nav-h: 76px;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --page: #0d0d0a;
        --surface: #151511;
        --surface-2: #1d1d18;
        --surface-3: #28271f;
        --ink: #fff9df;
        --muted: #b8b39e;
        --line: #403e31;
        --accent: #ffd84d;
        --accent-strong: #ffe58d;
        --accent-soft: #3b3316;
        --green: #ffd84d;
        --green-soft: #3b3316;
        --blue: #aeb4bf;
        --danger: #ed9488;
        --success: #8fd7ac;
        --success-soft: #193426;
        --attention: #ff9f91;
        --attention-soft: #3b211f;
        --shadow: 0 24px 70px rgba(0, 0, 0, .48);
      }
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; }
    body {
      background: var(--page);
      color: var(--ink);
      font-family: "DM Sans", sans-serif;
      -webkit-font-smoothing: antialiased;
    }
    button, input, select, textarea { font: inherit; }
    button { color: inherit; }
    .stage {
      min-height: 100svh;
      display: grid;
      place-items: center;
      padding: 28px;
    }
    .phone {
      position: relative;
      width: min(100%, 430px);
      height: min(860px, calc(100svh - 56px));
      min-height: 640px;
      overflow: hidden;
      background: var(--surface);
      border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
      border-radius: 34px;
      box-shadow: var(--shadow);
    }
    .screen {
      position: absolute;
      inset: 0;
      display: none;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 28px 22px calc(var(--nav-h) + 24px);
      background: var(--surface);
      scrollbar-width: none;
    }
    .screen::-webkit-scrollbar { display: none; }
    .screen.active { display: block; }
    .screen.flow-screen { padding-bottom: 32px; }
    .top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 24px;
    }
    .greeting { margin: 0; }
    .greeting small {
      display: block;
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
    }
    .greeting h1,
    .section-title,
    .review-title {
      margin: 0;
      font-family: "Newsreader", serif;
      font-weight: 600;
      letter-spacing: -.025em;
    }
    .greeting h1 { font-size: 34px; line-height: 1; }
    .avatar {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border: 0;
      border-radius: 50%;
      background: var(--green-soft);
      color: var(--green);
      font-weight: 800;
      font-size: 15px;
    }
    .demo-note {
      display: flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      margin: -8px 0 18px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }
    .demo-note::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
    }
    .hero-action {
      position: relative;
      overflow: hidden;
      width: 100%;
      min-height: 120px;
      padding: 16px 18px;
      border: 0;
      border-radius: 20px;
      background: var(--ink);
      color: var(--surface);
      text-align: left;
      cursor: pointer;
    }
    @media (prefers-color-scheme: dark) {
      .hero-action { background: #f4f1df; color: #1c1b15; }
    }
    .hero-action .camera-mark {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      margin-bottom: 10px;
      border-radius: 12px;
      background: var(--accent);
      color: #1c1b15;
    }
    .hero-action strong {
      display: block;
      max-width: 250px;
      font-family: "Newsreader", serif;
      font-size: 22px;
      font-weight: 600;
      line-height: 1.08;
      letter-spacing: -.02em;
    }
    .hero-action span {
      display: block;
      max-width: 225px;
      margin-top: 8px;
      font-size: 13px;
      opacity: .72;
    }
    .receipt-lines {
      position: absolute;
      right: -8px;
      bottom: -16px;
      width: 116px;
      height: 150px;
      padding: 21px 18px;
      transform: rotate(8deg);
      background: var(--surface-2);
      color: var(--ink);
      border-radius: 8px;
      box-shadow: 0 10px 28px rgba(0,0,0,.22);
    }
    .receipt-lines i { display: block; height: 5px; margin-bottom: 8px; border-radius: 3px; background: var(--line); }
    .receipt-lines i:nth-child(2) { width: 72%; }
    .receipt-lines i:nth-child(4) { width: 58%; }
    .receipt-lines b { display: block; margin-top: 22px; font-size: 13px; }
    .source-options { display: grid; gap: 10px; }
    .source-option {
      display: grid;
      grid-template-columns: 50px 1fr auto;
      gap: 14px;
      align-items: center;
      width: 100%;
      min-height: 78px;
      padding: 13px 15px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--surface-2);
      text-align: left;
      cursor: pointer;
    }
    .source-option:first-child { background: var(--accent-soft); border-color: transparent; }
    .source-option.no-receipt-option {
      border-color: color-mix(in srgb, var(--accent-strong) 42%, var(--line));
      background: var(--accent-soft);
    }
    .source-option.no-receipt-option .source-icon {
      background: var(--accent);
      color: #1c1b15;
    }
    .source-icon {
      position: relative;
      display: grid;
      place-items: center;
      width: 50px;
      height: 50px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
      border-radius: 15px;
      background: var(--surface-3);
      color: var(--green);
    }
    .source-option:first-child .source-icon { background: var(--accent); color: #1c1b15; }
    .source-option.tint-yellow { background: #fdf6e3; border-color: #e8d9a8; }
    .source-option.tint-green { background: #eef7ee; border-color: #bfe0bf; }
    .source-option.tint-blue { background: #eef3fb; border-color: #bcd0ee; }
    .source-option.tint-pink { background: #fdeeee; border-color: #f0c4c4; }
    .source-note {
      margin: 14px 0 8px;
      padding: 14px 15px;
      border-radius: 16px;
      background: var(--surface-2);
    }
    .source-note strong { display: block; font-size: 14px; margin-bottom: 4px; }
    .source-note span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
    .source-logo {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .source-emoji {
      position: relative;
      z-index: 1;
      font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
      font-size: 38px;
      line-height: 1;
      filter: saturate(1.08);
      transform: translateY(-1px);
    }
    .source-symbol {
      position: relative;
      z-index: 1;
      display: block;
      width: 39px;
      height: 39px;
    }
    .source-brand-logo {
      position: relative;
      z-index: 1;
      display: block;
      width: 34px;
      height: 34px;
      object-fit: contain;
    }
    .source-whatsapp .source-brand-logo { width: 38px; height: 38px; }
    #source-screen .source-option,
    #pending-entry-screen .source-option {
      grid-template-columns: 52px 1fr auto;
      transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
    }
    #source-screen .source-option { min-height: 80px; }
    #source-screen .source-icon,
    #pending-entry-screen .source-icon {
      width: 52px;
      height: 52px;
      border-radius: 15px;
      box-shadow: 0 4px 12px color-mix(in srgb, currentColor 14%, transparent);
    }
    #source-screen .source-symbol,
    #pending-entry-screen .source-symbol { width: 48px; height: 48px; }
    #source-screen .source-brand-logo,
    #pending-entry-screen .source-brand-logo { width: 46px; height: 42px; }
    #source-screen .source-whatsapp .source-brand-logo,
    #pending-entry-screen .source-whatsapp .source-brand-logo { width: 52px; height: 52px; }
    #source-screen .source-option:active { transform: translateY(1px); }
    #source-screen .source-option:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--accent) 58%, transparent);
      outline-offset: 2px;
    }
    #source-screen .source-option.source-photo {
      background: color-mix(in srgb, #f2c94c 24%, var(--surface-2));
      border-color: color-mix(in srgb, #b58500 34%, var(--line));
    }
    #source-screen .source-photo .source-icon {
      background: #ffd34f;
      color: #5a4200;
      box-shadow: inset 0 -4px 0 rgba(138, 101, 0, .12);
    }
    #source-screen .source-option.source-whatsapp {
      background: color-mix(in srgb, #25d366 9%, var(--surface-2));
      border-color: color-mix(in srgb, #168c43 32%, var(--line));
    }
    #source-screen .source-whatsapp .source-icon {
      background: color-mix(in srgb, #25d366 25%, var(--surface-2));
      color: #117a38;
    }
    #source-screen .source-option.source-email {
      background: color-mix(in srgb, #4f86d9 9%, var(--surface-2));
      border-color: color-mix(in srgb, #3569b8 30%, var(--line));
    }
    #source-screen .source-email .source-icon {
      background: color-mix(in srgb, #4f86d9 23%, var(--surface-2));
      color: #285aa6;
    }
    #source-screen .source-option.source-none {
      background: color-mix(in srgb, #d56558 10%, var(--surface-2));
      border-color: color-mix(in srgb, #b3483d 35%, var(--line));
    }
    #source-screen .source-none .source-icon {
      background: #f2b8b8;
      color: #9f352c;
    }
    /* Ícones de origem: fundo combina com a cor do card (nunca fundo escuro) */
    #source-screen .source-option.tint-yellow .source-icon,
    #pending-entry-screen .source-option.tint-yellow .source-icon {
      background: #ffd34f;
      color: #5a4200;
      box-shadow: inset 0 -4px 0 rgba(138, 101, 0, .12);
    }
    #source-screen .source-option.tint-green .source-icon,
    #pending-entry-screen .source-option.tint-green .source-icon {
      background: #a9e5c0;
      color: #117a38;
    }
    #source-screen .source-option.tint-blue .source-icon,
    #pending-entry-screen .source-option.tint-blue .source-icon {
      background: #b3d4f0;
      color: #285aa6;
    }
    #source-screen .source-option.tint-pink .source-icon,
    #pending-entry-screen .source-option.tint-pink .source-icon {
      background: #f2b8b8;
      color: #9f352c;
    }
    .source-option strong { display: block; font-size: 14px; }
    .source-option span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
    .source-arrow { color: var(--muted); }
    .source-intro { margin: 2px 0 22px; }
    .source-intro h1 { margin: 0; font-family: "Newsreader", serif; font-size: 32px; line-height: 1.05; }
    .source-intro p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
    .source-badge { display: inline-flex!important; width: fit-content; margin-top: 5px!important; padding: 3px 7px; border-radius: 999px; background: var(--surface-3); color: var(--green)!important; font-size: 9px!important; font-weight: 800; }
    .summary-grid {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 10px;
      margin: 12px 0 26px;
    }
    .summary-card {
      padding: 17px;
      border-radius: 8px 20px 20px 20px;
      background: var(--surface-2);
      border: 1px solid var(--line);
    }
    .summary-card.alert { background: var(--attention-soft); border-color: color-mix(in srgb, var(--attention) 24%, transparent); }
    .summary-card.done { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 24%, transparent); }
    .summary-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
    .summary-card strong { display: block; margin-top: 5px; font-size: 21px; }
    .summary-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.3; }
    .summary-card.alert strong { color: var(--attention); }
    .summary-card .pend-count { display: block; margin-top: 4px; font-size: 26px; font-weight: 800; color: #d43d2a; }
    .summary-card .launch-count { display: block; margin-top: 4px; font-size: 26px; font-weight: 800; color: var(--success); }
    .summary-card .pend-total { display: block; margin-top: 2px; font-size: 15px !important; font-weight: 700; }
    .days-num { font-size: 30px; font-weight: 800; color: #d43d2a; }
    .days-ball { font-size: 34px; line-height: 1; }
    .summary-card.done strong { color: var(--success); }
    .summary-card .oldest-date { color: var(--ink); font-weight: 800; }
    .last-entry {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin: -14px 0 22px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface-2);
    }
    .last-entry span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
    .last-entry strong { display: block; margin-top: 3px; font-size: 16px; }
    .last-entry b { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-strong); font-size: 13px; text-align: right; }
    .oldest-purchase-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px;
      border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line));
      border-radius: 14px;
      background: color-mix(in srgb, var(--blue) 7%, var(--surface-2));
    }
    .oldest-purchase-card span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
    .oldest-purchase-card strong { display: block; margin-top: 3px; color: var(--ink); font-size: 16px; line-height: 1.25; }
    .oldest-purchase-card b { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; text-align: right; white-space: nowrap; }
    .delay-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent); }
    .delay-dot.ok { background: #4f9a68; color: #4f9a68; }
    .delay-dot.warning { background: #e7a72f; color: #e7a72f; }
    .delay-dot.critical { background: #c94f43; color: #c94f43; }
    .section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
    }
    .section-title { font-size: 23px; }
    .text-button {
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--green);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .steps { display: grid; gap: 10px; }
    .step {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      align-items: center;
      padding: 11px 0;
      border-bottom: 1px solid var(--line);
    }
    .step:last-child { border-bottom: 0; }
    .step-num {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--surface-3);
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }
    .step strong { display: block; font-size: 14px; }
    .step span { color: var(--muted); font-size: 12px; }
    .bottom-nav {
      position: absolute;
      z-index: 20;
      left: 0;
      right: 0;
      bottom: 0;
      height: calc(var(--nav-h) + env(safe-area-inset-bottom));
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 9px 8px max(10px, env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
      background: color-mix(in srgb, var(--surface) 95%, transparent);
    }
    .nav-btn {
      display: grid;
      place-items: center;
      align-content: center;
      gap: 4px;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }
    .nav-btn.active { color: var(--green); }
    .nav-btn svg { width: 23px; height: 23px; }
    .nav-btn.capture-shortcut {
      transform: translateY(-17px);
      color: #1c1b15;
    }
    .nav-btn.capture-shortcut .nav-icon {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border-radius: 18px;
      background: var(--accent);
      box-shadow: 0 7px 16px rgba(138, 101, 0, .24);
    }
    .nav-btn.capture-shortcut span:last-child { color: var(--muted); }

    .camera-screen {
      background: #0d1211;
      color: #fff;
      padding: max(24px, env(safe-area-inset-top)) 20px 24px;
    }
    .camera-toolbar { display: flex; align-items: center; justify-content: space-between; }
    .icon-btn {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: rgba(255,255,255,.12);
      color: inherit;
      cursor: pointer;
    }
    .camera-toolbar strong { font-size: 14px; }
    .camera-frame {
      position: relative;
      display: grid;
      place-items: center;
      height: calc(100% - 150px);
      min-height: 410px;
      margin-top: 18px;
      overflow: hidden;
      border-radius: 26px;
      background:
        radial-gradient(circle at 70% 25%, rgba(255,255,255,.1), transparent 34%),
        linear-gradient(145deg, #292820, #11110e);
    }
    .capture-receipt {
      width: 68%;
      max-width: 250px;
      min-height: 330px;
      padding: 30px 23px;
      transform: rotate(-2deg);
      border-radius: 5px;
      background: #f8f5eb;
      color: #333;
      box-shadow: 0 20px 50px rgba(0,0,0,.35);
    }
    .capture-receipt .brand { text-align: center; font-weight: 800; letter-spacing: .08em; font-size: 12px; }
    .capture-receipt .stub { height: 5px; margin-top: 14px; background: #cac6ba; border-radius: 3px; }
    .capture-receipt .stub.short { width: 58%; }
    .capture-receipt .total { display: flex; justify-content: space-between; margin-top: 34px; border-top: 1px dashed #8c8c84; padding-top: 12px; font-weight: 800; }
    .corner { position: absolute; width: 44px; height: 44px; border-color: var(--accent); border-style: solid; }
    .corner.tl { top: 22px; left: 22px; border-width: 3px 0 0 3px; border-radius: 12px 0 0 0; }
    .corner.tr { top: 22px; right: 22px; border-width: 3px 3px 0 0; border-radius: 0 12px 0 0; }
    .corner.bl { bottom: 22px; left: 22px; border-width: 0 0 3px 3px; border-radius: 0 0 0 12px; }
    .corner.br { bottom: 22px; right: 22px; border-width: 0 3px 3px 0; border-radius: 0 0 12px 0; }
    .camera-hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.76); font-size: 13px; }
    .pdf-badge {
      position: absolute;
      top: 18px;
      left: 50%;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 999px;
      transform: translateX(-50%);
      background: rgba(13,18,17,.78);
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
    }
    .pdf-badge[hidden] { display: none; }
    .camera-overlay[hidden] { display: none; }
    .camera-verdict[hidden] { display: none; }
    #camera-hint[hidden] { display: none; }
    .pdf-badge::before {
      content: "PDF";
      padding: 3px 5px;
      border-radius: 4px;
      background: var(--accent);
      color: #1c1b15;
      font-size: 8px;
      letter-spacing: .04em;
    }
    .capture-actions { padding-top: 18px; text-align: center; }
    .primary-btn {
      width: 100%;
      min-height: 54px;
      border: 0;
      border-radius: 17px;
      background: var(--ink);
      color: var(--surface);
      font-weight: 800;
      cursor: pointer;
    }
    .camera-screen .primary-btn { background: var(--accent); color: #1c1b15; }
    .primary-btn:disabled { opacity: .36; cursor: not-allowed; }
    .microcopy { margin: 8px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
    .camera-screen .microcopy { color: rgba(255,255,255,.58); }

    /* Camera is always dark (viewfinder), regardless of color scheme */
    .screen[data-screen="camera"] {
      background: #0d1211;
      color: #fff;
    }
    .screen[data-screen="camera"] .camera-toolbar h1 { color: #fff; }
    .screen[data-screen="camera"] .camera-back {
      background: rgba(255,255,255,.12);
      color: #fff;
      border: 0;
    }

    .back-title { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; margin-bottom: 20px; }
    .back-title .icon-btn { background: var(--surface-3); }
    .back-title h1 { margin: 0; text-align: center; font-size: 16px; }
    .review-heading { margin-bottom: 18px; }
    .review-title { font-size: 31px; }
    .review-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
    .status-check {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
      border-radius: 15px;
      background: var(--accent);
      color: #1c1b15;
      font-size: 22px;
      box-shadow: 0 4px 12px color-mix(in srgb, currentColor 14%, transparent);
    }
    .status-check img,
    .status-check svg {
      display: block;
      width: 48px;
      height: 48px;
      object-fit: contain;
    }
    .status-check.source-photo { background: #ffd34f; color: #5a4200; }
    .status-check.source-whatsapp { background: color-mix(in srgb, #25d366 25%, var(--surface-2)); color: #117a38; }
    .status-check.source-email { background: color-mix(in srgb, #4f86d9 23%, var(--surface-2)); color: #285aa6; }
    .status-check.source-none { background: color-mix(in srgb, #d56558 23%, var(--surface-2)); color: #9f352c; }
    .scan-status {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      min-height: 48px;
      padding: 7px 9px;
      border-radius: 12px;
      background: var(--surface-3);
      color: var(--muted);
    }
    .scan-status .source-copy { display: block; min-width: 0; }
    .scan-status .source-copy strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.15; }
    .scan-status .source-copy > span { display: block; margin-top: 2px; font-size: 9px; line-height: 1.2; }
    /* Cabeçalho do scan na conferência usa .scan-text (título e detalhe em blocos) */
    .scan-status .scan-text { display: block; min-width: 0; }
    .scan-status .scan-text strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.15; }
    .scan-status .scan-text > span { display: block; margin-top: 2px; font-size: 9px; line-height: 1.2; }
    .scan-status .confidence {
      padding: 3px 6px;
      border-radius: 6px;
      background: var(--accent-soft);
      color: var(--accent-strong);
      font-size: 9px;
      font-weight: 800;
      white-space: nowrap;
    }
    #review-screen.no-note-mode .scan-status { background: var(--accent-soft); }
    #review-screen.no-note-mode .scan-status .source-copy strong { color: var(--accent-strong); letter-spacing: .04em; }
    #review-screen.no-note-mode .scan-status .confidence { display: none; }
    #review-screen.no-note-mode .status-check { background: color-mix(in srgb, #d56558 23%, var(--surface-2)); color: #9f352c; }
    .field-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; }
    .field { display: block; margin-bottom: 12px; }
    .field > span { display: block; margin: 0 0 6px 3px; color: var(--muted); font-size: 11px; font-weight: 700; }
    .field input {
      width: 100%;
      min-height: 51px;
      padding: 0 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      outline: none;
      background: var(--surface-2);
      color: var(--ink);
      font-weight: 600;
    }
    .field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
    .suggestion-block { margin: 9px 0 22px; }
    .block-label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 11px; font-weight: 700; }
    .suggestion {
      display: grid;
      grid-template-columns: 27px 1fr auto;
      gap: 10px;
      align-items: center;
      min-height: 48px;
      padding: 8px 11px;
      margin-bottom: 7px;
      border-radius: 13px;
      background: var(--green-soft);
      color: var(--green);
      font-size: 13px;
      font-weight: 700;
    }
    .suggestion .key { color: var(--muted); font-size: 10px; font-weight: 700; }
    .check-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: var(--surface); }
    .card-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
    .card-option {
      min-height: 66px;
      padding: 9px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: var(--surface-2);
      text-align: left;
      cursor: pointer;
    }
    .card-option i { display: block; width: 25px; height: 16px; margin-bottom: 8px; border-radius: 4px; background: var(--blue); }
    .card-option strong { display: block; font-size: 13px; line-height: 1.15; }
    .card-option span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.25; }
    .card-option.selected { border: 2px solid var(--green); background: var(--green-soft); padding: 8px; }
    .sticky-action { position: sticky; bottom: -10px; padding: 10px 0 4px; background: linear-gradient(transparent, var(--surface) 18%); }
    /* Tela de lançamento: botão de confirmar fixo ao final, acima da navegação */
    #preview-screen .sticky-action {
      position: fixed;
      left: 0; right: 0;
      bottom: var(--nav-h);
      z-index: 30;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      background: var(--surface);
      border-top: 1px solid var(--border);
    }
    #preview-screen { padding-bottom: 90px; }

    .pending-header { margin-bottom: 20px; }
    .pending-header h1 { margin: 0; font-family: "Newsreader", serif; font-size: 32px; }
    .pending-header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
    .filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
    #pending-screen > .filter-row {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) minmax(0, .62fr) minmax(0, .82fr) minmax(0, 1fr);
      gap: 3px;
      align-items: stretch;
    }
    #pending-screen > .filter-row .filter-drawer-toggle { width: 28px; height: 32px; }
    #pending-screen > .filter-row .filter {
      min-width: 0;
      min-height: 32px;
      padding: 5px 1px;
      overflow: hidden;
      font-size: 13px;
      line-height: 1;
      letter-spacing: -.035em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .filter-drawer-toggle {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      padding: 0;
      border: 1px solid color-mix(in srgb, var(--accent-strong) 34%, var(--line));
      border-radius: 50%;
      background: var(--accent-soft);
      color: var(--accent-strong);
      cursor: pointer;
    }
    .filter-drawer-toggle svg { width: 18px; height: 18px; }
    .filter-drawer-toggle[aria-expanded="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
    .filters-panel {
      margin: -3px 0 14px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: var(--surface-3);
      transform-origin: top left;
    }
    .filters-panel:not([hidden]) { animation: filterReveal .18s ease-out; }
    .filters-panel[hidden] { display: none; }
    .filters-panel .filter-row,
    .filters-panel .flow-filter-row { margin-bottom: 9px; }
    .filters-panel .delay-legend { margin-bottom: 10px; }
    .filters-panel .filter-tools { margin-bottom: 0; }
    @keyframes filterReveal {
      from { opacity: 0; transform: translateX(-10px); }
      to { opacity: 1; transform: none; }
    }
    .filter {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 12px;
      background: var(--surface-2);
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }
    .filter.active { border-color: var(--ink); background: var(--ink); color: var(--surface); }
    .filter-tools {
      display: grid;
      gap: 9px;
      margin-bottom: 18px;
    }
    .pending-search {
      width: 100%;
      min-height: 44px;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: 13px;
      outline: 0;
      background: var(--surface-2);
      color: var(--ink);
      font-size: 13px;
      font-weight: 600;
    }
    .pending-search::placeholder { color: var(--muted); }
    .pending-search:focus,
    .filter-select:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
    .filter-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .filter-control { min-width: 0; }
    .filter-control span {
      display: block;
      margin: 0 0 4px 2px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 800;
    }
    .filter-select {
      width: 100%;
      min-width: 0;
      height: 39px;
      padding: 0 27px 0 9px;
      border: 1px solid var(--line);
      border-radius: 11px;
      outline: 0;
      background: var(--surface-2);
      color: var(--ink);
      font-size: 10px;
      font-weight: 700;
    }
    .pending-list { display: grid; gap: 10px; }
    .pending-empty {
      display: none;
      padding: 22px 16px;
      border: 1px dashed var(--line);
      border-radius: 16px;
      color: var(--muted);
      text-align: center;
      font-size: 12px;
    }
    .pending-item {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      width: 100%;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--surface-2);
      text-align: left;
    }
    .delay-legend { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
    .delay-key { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 800; }
    .delay-key::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--delay-color); }
    .delay-key.normal { --delay-color: #5d9b72; }
    .delay-key.late { --delay-color: #d28a24; }
    .delay-key.very-late { --delay-color: #bd4f43; }
    .pending-item.delay-normal { border-color: color-mix(in srgb, #5d9b72 44%, var(--line)); }
    .pending-item.delay-late { border-color: color-mix(in srgb, #d28a24 56%, var(--line)); background: color-mix(in srgb, #d28a24 8%, var(--surface-2)); }
    .pending-item.delay-very-late { border-color: color-mix(in srgb, #bd4f43 60%, var(--line)); background: color-mix(in srgb, #bd4f43 9%, var(--surface-2)); }
    .pending-icon {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border: 4px solid color-mix(in srgb, currentColor 22%, var(--surface-2));
      border-radius: 50%;
      font-size: 22px;
      font-weight: 900;
      line-height: 1;
      box-shadow: 0 4px 12px color-mix(in srgb, currentColor 22%, transparent);
    }
    .pending-icon::before { content: "✓"; transform: translateY(-1px); }
    .delay-normal .pending-icon { background: #4f9a68; color: #fff; }
    .delay-late .pending-icon { background: #e7a72f; color: #4b3300; }
    .delay-late .pending-icon::before { content: "!"; }
    .delay-very-late .pending-icon { background: #c94f43; color: #fff; }
    .delay-very-late .pending-icon::before { content: "!!"; font-size: 16px; letter-spacing: -2px; }
    .delay-status { display: inline-flex!important; width: fit-content; margin-top: 4px!important; color: var(--ink)!important; font-size: 9px!important; font-weight: 800; }
    .delay-late .delay-status { color: #9a5a08!important; }
    .delay-very-late .delay-status { color: #96372e!important; }
    .pending-item strong { display: block; font-size: 14px; }
    .pending-item span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
    .pending-item b { font-size: 14px; white-space: nowrap; }
    .pending-item .pending-side { display: grid; justify-items: end; gap: 8px; }
    .filter-pills { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0; }
    .filter-pill {
      border: 0;
      background: none;
      padding: 4px 2px;
      font-size: 14px;
      font-weight: 500;
      color: var(--ink);
      cursor: pointer;
      border-bottom: 2px solid transparent;
    }
    .filter-pill.active {
      font-weight: 700;
      border-bottom-color: var(--accent);
    }
    .delay-legend { display: flex; gap: 12px; margin: 8px 0 12px; font-size: 12px; color: var(--muted); }
    .delay-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .delay-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
    .delay-dot.ok { background: #2e7d32; }
    .delay-dot.warn { background: #f9a825; }
    .delay-dot.bad { background: #c62828; }
    .pending-card {
      display: block;
      width: 100%;
      margin: 0 0 10px;
      padding: 13px 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--surface);
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }
    .pending-card .pending-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    .pending-card .pending-top strong { font-size: 17px; font-weight: 800; }
    .pending-card .pending-date { color: var(--muted); font-size: 12px; font-weight: 600; }
    .pending-card .pending-ben { margin-top: 3px; font-size: 14px; font-weight: 700; }
    .pending-card .pending-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 7px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }
    .pending-card .pending-meta span { display: inline-flex; align-items: center; gap: 5px; }
    .pending-card .pending-meta .days-num { font-size: 20px; font-weight: 800; }
    .pending-card img { width: 17px; height: 17px; object-fit: contain; border-radius: 4px; }
    .pending-launch {
      min-height: 34px;
      padding: 0 11px;
      border: 0;
      border-radius: 10px;
      background: var(--accent);
      color: #1c1b15;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer;
    }
    .prefill-note { margin: -7px 0 16px; color: var(--green); font-size: 12px; font-weight: 700; }
    .pending-tip { margin-top: 22px; padding: 17px; border-radius: 8px 20px 20px 20px; background: var(--surface-3); }
    .pending-tip strong { display: block; font-size: 13px; }
    .pending-tip p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

    .preview-total {
      padding: 24px;
      margin: 8px 0 18px;
      border-radius: 24px 24px 8px 24px;
      background: var(--ink);
      color: var(--surface);
    }
    @media (prefers-color-scheme: dark) {
      .preview-total { background: #f4f1df; color: #1c1b15; }
    }
    .preview-total span { display: block; font-size: 12px; opacity: .65; }
    .preview-total strong { display: block; margin-top: 5px; font-family: "Newsreader", serif; font-size: 38px; }
    .flow-table { margin-bottom: 22px; border-top: 1px solid var(--line); }
    .flow-row { display: grid; grid-template-columns: 96px 1fr; gap: 15px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
    .flow-row span { color: var(--muted); font-size: 12px; }
    .flow-row strong { font-size: 13px; text-align: right; overflow-wrap: anywhere; }
    .success-mark { display: grid; place-items: center; width: 48px; height: 48px; margin: 8px auto 14px; border-radius: 50%; background: var(--green-soft); color: var(--green); }
    .center-copy { text-align: center; margin-bottom: 22px; }
    .center-copy h1 { margin: 0; font-family: "Newsreader", serif; font-size: 31px; }
    .center-copy p { margin: 6px auto 0; max-width: 300px; color: var(--muted); font-size: 13px; line-height: 1.45; }
    /* Prévia compacta: cabeçalho em uma linha, sem rolagem */
    .preview-compact {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px; margin: 4px 0 12px;
      background: var(--green-soft); border-radius: 12px;
      font-size: 14px; font-weight: 600;
    }
    .preview-compact strong { font-family: "Newsreader", serif; font-size: 22px; }
    /* Prévia editável: linhas compactas, tudo cabe sem rolagem */
    .edit-rows { display: grid; gap: 6px; margin-bottom: 8px; }
    .edit-row {
      display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: center;
      padding: 6px 10px; background: var(--surface-2); border-radius: 10px;
    }
    .edit-row > span { font-size: 12px; color: var(--muted); font-weight: 600; }
    .edit-row input, .edit-row select {
      width: 100%; min-height: 34px; padding: 6px 8px;
      font-size: 14px; color: var(--text);
      background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    }
    .edit-row input:focus, .edit-row select:focus { outline: none; border-color: var(--accent); }
    /* Arquivo compacto no topo da conferência */
    .file-compact {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px; margin: 8px 0 12px;
      background: var(--surface-2); border-radius: 10px;
      font-size: 13px; cursor: pointer; position: relative;
    }
    .file-compact-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .file-compact-change { color: var(--accent); font-size: 12px; font-weight: 600; }
    .file-change-opts { display: flex; gap: 6px; margin-top: 6px; }
    .file-change-opts button {
      flex: 1; padding: 8px 4px; font-size: 12px;
      background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
    }
    .back-title .ocr-confidence { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
    .flow-filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
    #flow-screen .flow-filter-row {
      display: grid;
      grid-template-columns: 28px minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1.25fr);
      gap: 3px;
      align-items: stretch;
    }
    #flow-screen .filter-drawer-toggle { width: 28px; height: 32px; }
    #flow-screen .filter-drawer-toggle svg { width: 15px; height: 15px; }
    #flow-screen .flow-filter {
      min-width: 0;
      min-height: 32px;
      padding: 5px 1px;
      overflow: hidden;
      font-size: 13px;
      line-height: 1;
      letter-spacing: -.035em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .flow-filter {
      min-height: 36px;
      padding: 7px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface-2);
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }
    .flow-filter.active { border-color: var(--ink); background: var(--ink); color: var(--surface); }
    .flow-list { display: grid; gap: 10px; }
    .flow-item {
      display: grid;
      grid-template-columns: 12px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 15px 14px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: var(--surface-2);
    }
    .flow-item::before { content: ""; width: 8px; height: 44px; border-radius: 8px; background: var(--green); }
    .flow-item strong { display: block; font-size: 14px; }
    .flow-item span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
    .flow-item .flow-side { display: grid; justify-items: end; gap: 7px; }
    .flow-side b { font-size: 14px; white-space: nowrap; }
    .edit-entry {
      min-height: 34px;
      padding: 0 11px;
      border: 0;
      border-radius: 10px;
      background: var(--accent);
      color: #1c1b15;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer;
    }
    .flow-item.new { background: var(--green-soft); border-color: transparent; }
    .flow-empty { display: none; padding: 22px 16px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); text-align: center; font-size: 12px; }
    .session-empty { display: none; margin-top: 18px; padding: 24px; border: 1px dashed var(--line); border-radius: 18px; text-align: center; color: var(--muted); font-size: 13px; }

    /* A tela inicial é deliberadamente fixa: ações e alertas cabem sem rolagem. */
    #home-screen {
      overflow-y: auto;
      padding: max(14px, env(safe-area-inset-top)) 18px calc(var(--nav-h) + 18px);
    }
    #home-screen.active {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #home-screen .top-row { margin-bottom: 0; }
    #home-screen .app-title {
      margin-bottom: 6px;
      color: var(--accent-strong);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .01em;
    }
    .app-ver {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--accent);
      opacity: 1;
      border: 0;
      border-radius: 0;
      padding: 0;
      margin: 0;
      white-space: nowrap;
    }
    .app-ver b { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
    .app-ver i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
    #home-screen .greeting small { margin-bottom: 1px; font-size: 11px; }
    #home-screen .greeting h1 { font-size: 31px; }
    #home-screen .avatar { width: 40px; height: 40px; font-size: 13px; }
    #home-screen .demo-note { margin: 0; font-size: 10px; }
    #home-screen .hero-action {
      height: 100%;
      min-height: 0;
      padding: clamp(15px, 2.3vh, 22px) 18px;
      border-radius: 21px 21px 7px 21px;
    }
    #home-screen .hero-action .camera-mark { width: 52px; height: 52px; margin-bottom: clamp(6px, 1vh, 10px); border-radius: 15px; }
    #home-screen .hero-action .camera-mark svg { width: 30px; height: 30px; }
    #home-screen .hero-action strong { max-width: 230px; font-size: 21px; }
    #home-screen .hero-action > span:not(.camera-mark) { margin-top: 4px; max-width: 260px; font-size: 10px; }
    #home-screen .receipt-lines { right: -5px; bottom: -12px; width: 78px; height: 96px; padding: 13px 12px; }
    #home-screen .receipt-lines i { height: 3px; margin-bottom: 5px; }
    #home-screen .receipt-lines b { margin-top: 10px; font-size: 9px; }
    #home-screen .summary-grid { gap: 8px; margin: 0; }
    #home-screen .summary-card { min-height: 91px; padding: 11px 12px; border-radius: 7px 15px 15px 15px; }
    #home-screen .summary-card span { font-size: 10px; }
    #home-screen .summary-card strong { margin-top: 2px; font-size: 18px; }
    #home-screen .summary-card small { margin-top: 3px; font-size: 9px; line-height: 1.25; }
    #home-screen .summary-card .oldest-date {
      margin-top: 5px;
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.15;
    }
    #home-screen .summary-card .oldest-age {
      margin-top: 4px;
      color: var(--muted);
      font-size: 9.5px;
      font-weight: 500;
      line-height: 1.3;
    }
    #home-screen .last-entry,
    #home-screen .oldest-purchase-card {
      min-height: 78px;
      margin: 0;
      padding: 14px 16px;
    }
    #home-screen .last-entry { border-color: color-mix(in srgb, var(--blue) 30%, var(--line)); background: color-mix(in srgb, var(--blue) 7%, var(--surface-2)); }
    #home-screen .last-entry span,
    #home-screen .oldest-purchase-card span { font-size: 13px; }
    #home-screen .last-entry strong,
    #home-screen .oldest-purchase-card strong { margin-top: 3px; font-size: 18px; }
    #home-screen .last-entry b { font-size: 15px; }
    #home-screen .oldest-purchase-card b {
      max-width: 200px;
      font-size: 15px;
      line-height: 1.25;
      white-space: normal;
    }
    #home-screen .days-ball { font-size: 34px; }
    #home-screen .days-num { font-size: 34px; }
    .home-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      min-height: 96px;
    }
    .home-action-card {
      display: flex;
      min-width: 0;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 10px;
      border: 0;
      border-radius: 16px;
      background: var(--ink);
      color: var(--surface);
      text-align: left;
      cursor: pointer;
    }
    .home-action-card .action-icon {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      margin-bottom: 4px;
      overflow: hidden;
      border-radius: 12px;
      background: var(--accent);
      color: #5a4200;
      box-shadow: 0 4px 12px rgba(0,0,0,.16);
    }
    .home-action-card .action-icon svg { width: 36px; height: 36px; }
    .home-action-card strong { display: block; font-family: "Newsreader", serif; font-size: 15px; line-height: 1; }
    .home-action-card > span:last-child { display: block; margin-top: 3px; color: color-mix(in srgb, var(--surface) 74%, transparent); font-size: 9px; line-height: 1.25; }
    @media (prefers-color-scheme: dark) {
      .home-action-card { background: #f4f1df; color: #1c1b15; }
      .home-action-card > span:last-child { color: rgba(28,27,21,.68); }
    }

    /* Conferência compacta: todos os dados e decisões cabem numa única tela. */
    #review-screen,
    #pending-entry-screen,
    #preview-screen { overflow-y: auto; padding: 18px 18px 22px; }
    #review-screen { overflow-y: auto; padding: 14px 18px 12px; }
    #review-screen .back-title,
    #pending-entry-screen .back-title,
    #preview-screen .back-title { margin-bottom: 10px; }
    #review-screen .back-title { margin-bottom: 5px; }
    #review-screen .review-heading,
    #pending-entry-screen .review-heading { margin-bottom: 10px; }
    #review-screen .review-heading { margin: 0; }
    #review-screen .review-title,
    #pending-entry-screen .review-title { font-size: 25px; line-height: 1; }
    #review-screen .review-title { font-size: 21px; }
    #review-screen .review-subtitle,
    #pending-entry-screen .review-subtitle { margin-top: 3px; font-size: 11px; }
    #review-screen .review-subtitle { max-width: 310px; font-size: 9px; line-height: 1.3; }
    #review-screen .review-intro { margin-bottom: 8px; }
    #review-screen .scan-status { margin-bottom: 6px; }
    .data-group-label {
      display: block;
      margin: 0 0 4px 2px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 800;
    }
    #review-screen.no-note-mode [data-note-only="true"] { display: none; }
    .locked-data {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      margin-bottom: 9px;
    }
    .tap-edit { cursor: pointer; }
    .tap-edit:active { opacity: .7; }
    .tap-input {
      width: 100%;
      margin-top: 2px;
      padding: 6px 8px;
      border: 1px solid var(--accent);
      border-radius: 8px;
      background: var(--surface);
      color: var(--ink);
      font-size: 15px;
      font-weight: 700;
    }
    .data-cell {
      min-width: 0;
      min-height: 44px;
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: var(--surface-2);
    }
    #review-screen .locked-data {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5px;
      margin-bottom: 7px;
    }
    #review-screen .data-cell {
      min-height: 47px;
      padding: 8px 11px;
      background: var(--surface-3);
      border-color: transparent;
    }
    #review-screen .document-group .data-cell { min-height: 39px; padding: 6px 10px; }
    #review-screen .document-group output { color: var(--muted); font-size: 11px; }
    #review-screen .data-cell.primary-data { grid-column: auto; }
    #review-screen .data-cell.primary-data:nth-child(3) { grid-column: 1 / -1; }
    #review-screen .data-cell.wide { grid-column: 1 / -1; }
    #review-screen .data-cell .data-label { margin-bottom: 3px; font-size: 9px; }
    #review-screen .data-cell output,
    #review-screen .data-cell input { font-size: 13px; }
    #review-screen .data-cell input { height: 19px; }
    .data-cell.wide { grid-column: 1 / -1; }
    .data-cell .data-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 3px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .02em;
    }
    .data-cell .lock-mark { color: var(--green); letter-spacing: 0; white-space: nowrap; }
    .data-cell output {
      display: block;
      overflow: hidden;
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .data-cell.comment output { color: var(--muted); font-weight: 600; }
    .data-cell input {
      width: 100%;
      height: 21px;
      padding: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
    }
    .data-cell input::placeholder { color: var(--muted); font-weight: 500; }
    .data-cell input:focus { box-shadow: inset 0 -2px 0 var(--green); }
    .manual-data-input,
    .manual-hint,
    .document-data-input,
    .edit-hint { display: none; }
    .correction-attachment { display: block; margin: 0 0 8px; }
    .correction-attachment > span { display: block; margin: 0 0 5px 2px; color: var(--muted); font-size: 9px; font-weight: 800; }
    .attachment-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .attachment-choice {
      display: grid;
      place-items: center;
      align-content: center;
      gap: 2px;
      min-width: 0;
      min-height: 70px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface-2);
      color: var(--ink);
      font-size: 24px;
      cursor: pointer;
    }
    .attachment-choice img,
    .attachment-choice svg { width: 44px; height: 44px; object-fit: contain; }
    .attachment-choice small { display: block; color: var(--muted); font-size: 8px; font-weight: 800; }
    .attachment-choice.selected { border-color: var(--accent-strong); background: var(--accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
    .attachment-file-name { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 700; overflow-wrap: anywhere; }
    #review-screen.editing-mode { overflow-y: auto; }
    #review-screen.editing-mode .correction-attachment { display: block; }
    #review-screen.editing-mode .primary-data output,
    #review-screen.editing-mode .document-data output { display: none; }
    #review-screen.editing-mode .primary-data .manual-data-input,
    #review-screen.editing-mode .document-data .document-data-input { display: block; }
    #review-screen.editing-mode .manual-hint,
    #review-screen.editing-mode .edit-hint { display: inline; color: var(--accent-strong); font-size: 8px; letter-spacing: .04em; }
    #review-screen.editing-mode .data-cell { background: var(--surface-2); border-color: var(--accent); }
    .beneficiary-check {
      display: block;
      margin: -2px 0 8px;
      padding: 10px 11px;
      border: 1px solid color-mix(in srgb, var(--accent-strong) 42%, var(--line));
      border-radius: 11px;
      background: var(--accent-soft);
    }
    .beneficiary-check.visible { display: block; }
    .beneficiary-check strong { display: block; font-size: 11px; }
    .beneficiary-check p { margin: 3px 0 7px; color: var(--muted); font-size: 10px; }
    .beneficiary-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
    .beneficiary-suggestions[hidden] { display: none; }
    .beneficiary-suggestion,
    .beneficiary-confirm-new {
      min-height: 30px;
      padding: 5px 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-2);
      color: var(--ink);
      font-size: 9px;
      font-weight: 800;
      cursor: pointer;
    }
    .beneficiary-confirm-new { border-color: transparent; background: var(--ink); color: var(--surface); }
    #review-screen.no-note-mode .primary-data output { display: none; }
    #review-screen.no-note-mode .primary-data .manual-data-input { display: block; }
    #review-screen.no-note-mode .manual-hint {
      display: inline;
      color: var(--accent-strong);
      font-size: 8px;
      letter-spacing: .04em;
    }
    #review-screen.no-note-mode .document-data { display: none; }
    #review-screen.no-note-mode .primary-data:nth-child(3) { grid-column: 1 / -1; }
    #review-screen.no-note-mode .data-cell { background: var(--surface-2); border-color: var(--accent); }
    .compact-suggestions { margin: 0 0 10px; }
    .compact-suggestions .block-label {
      display: block;
      margin: 0 0 7px 1px;
      color: var(--ink);
      font-size: 13px;
    }
    .suggestion-row { display: grid; grid-template-columns: 1fr; gap: 9px; }
    .category-field {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      min-width: 0;
    }
    .category-label {
      color: var(--ink);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.15;
    }
    .select-shell {
      position: relative;
      min-width: 0;
      min-height: 43px;
      border: 1px solid color-mix(in srgb, var(--accent-strong) 42%, var(--line));
      border-radius: 11px;
      background: var(--accent-soft);
    }
    .select-shell::after {
      content: "";
      position: absolute;
      top: 16px;
      right: 13px;
      width: 7px;
      height: 7px;
      border-right: 1.5px solid var(--accent-strong);
      border-bottom: 1.5px solid var(--accent-strong);
      transform: rotate(45deg);
      pointer-events: none;
    }
    .select-shell select {
      display: block;
      width: 100%;
      height: 43px;
      min-width: 0;
      padding: 0 34px 0 12px;
      border: 0;
      outline: 0;
      border-radius: 10px;
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      color: var(--ink);
      color-scheme: light;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }
    .select-shell select option {
      background: #fffbea;
      color: #1c1b15;
      font-weight: 700;
    }
    .select-shell select option:checked {
      background: #f2c94c;
      color: #1c1b15;
    }
    .category-field:focus-within .select-shell {
      border-color: var(--accent-strong);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
    }
    .bank-select { position: relative; min-width: 0; z-index: 5; }
    .bank-trigger {
      display: grid;
      grid-template-columns: 25px minmax(0, 1fr) 10px;
      align-items: center;
      gap: 9px;
      width: 100%;
      height: 43px;
      padding: 0 12px 0 8px;
      border: 1px solid color-mix(in srgb, var(--accent-strong) 42%, var(--line));
      border-radius: 11px;
      background: var(--accent-soft);
      color: var(--ink);
      text-align: left;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }
    .bank-trigger::after {
      content: "";
      width: 7px;
      height: 7px;
      border-right: 1.5px solid var(--accent-strong);
      border-bottom: 1.5px solid var(--accent-strong);
      transform: rotate(45deg);
    }
    .bank-trigger[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -2px); }
    .bank-logo {
      display: block;
      width: 46px;
      height: 28px;
      object-fit: contain;
      border-radius: 6px;
      background: #fff;
      padding: 2px 4px;
      flex-shrink: 0;
    }
    .bank-menu {
      position: absolute;
      z-index: 40;
      left: 0;
      right: 0;
      bottom: 48px;
      display: grid;
      gap: 2px;
      padding: 5px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface-2);
      box-shadow: 0 12px 30px rgba(0,0,0,.22);
    }
    .bank-menu[hidden] { display: none; }
    .bank-choice {
      display: grid;
      grid-template-columns: 27px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      width: 100%;
      min-height: 36px;
      padding: 4px 7px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--ink);
      text-align: left;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }
    .bank-choice strong { display: block; color: var(--ink); font-size: 11px; line-height: 1.15; }
    .bank-choice small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 700; }
    .bank-choice:hover,
    .bank-choice:focus-visible,
    .bank-choice.selected { background: var(--accent-soft); outline: none; }
    .comment-field {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      margin: 0 0 8px;
    }
    .comment-field textarea {
      width: 100%;
      height: 84px;
      min-width: 0;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 11px;
      outline: 0;
      resize: none;
      background: var(--surface-2);
      color: var(--ink);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35;
    }
    .comment-field textarea::placeholder { color: var(--muted); font-weight: 500; }
    .comment-field textarea:focus {
      border-color: var(--accent-strong);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
    }
    /* Botão da Conferência: no fluxo normal, após a descrição */
    #review-screen .sticky-action {
      position: static;
      z-index: auto;
      padding: 10px 0 2px;
      background: linear-gradient(transparent, var(--surface) 32%);
    }
    #review-screen .primary-btn { min-height: 45px; border-radius: 14px; }
    #review-screen .microcopy { margin-top: 3px; font-size: 9px; }
    .pending-summary { margin-bottom: 10px; }
    #pending-entry-screen .prefill-note { margin: -2px 0 7px; font-size: 10px; }
    #pending-entry-screen .source-options { gap: 7px; }
    #pending-entry-screen .source-option { min-height: 68px; padding: 7px 11px; border-radius: 14px; }
    #pending-entry-screen .source-icon { width: 52px; height: 52px; border-radius: 15px; }
    #pending-entry-screen .source-option strong { font-size: 12px; }
    #pending-entry-screen .source-option.source-photo { background: color-mix(in srgb, #f2c94c 24%, var(--surface-2)); border-color: color-mix(in srgb, #b58500 34%, var(--line)); }
    #pending-entry-screen .source-photo .source-icon { background: #ffd34f; color: #5a4200; }
    #pending-entry-screen .source-option.source-whatsapp { background: color-mix(in srgb, #25d366 9%, var(--surface-2)); border-color: color-mix(in srgb, #168c43 32%, var(--line)); }
    #pending-entry-screen .source-whatsapp .source-icon { background: color-mix(in srgb, #25d366 25%, var(--surface-2)); color: #117a38; }
    #pending-entry-screen .source-option.source-email { background: color-mix(in srgb, #4f86d9 9%, var(--surface-2)); border-color: color-mix(in srgb, #3569b8 30%, var(--line)); }
    #pending-entry-screen .source-email .source-icon { background: color-mix(in srgb, #4f86d9 23%, var(--surface-2)); color: #285aa6; }
    #pending-entry-screen .source-option.source-none { background: color-mix(in srgb, #d56558 10%, var(--surface-2)); border-color: color-mix(in srgb, #b3483d 35%, var(--line)); }
    #pending-entry-screen .source-none .source-icon { background: color-mix(in srgb, #d56558 23%, var(--surface-2)); color: #9f352c; }
    #pending-entry-screen .source-option span { font-size: 9px; }
    .description-preview {
      margin: 8px 0 12px;
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--surface-3);
    }
    .description-preview span { display: block; color: var(--muted); font-size: 9px; font-weight: 800; }
    .description-preview strong { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; }
    #preview-screen .center-copy { margin-bottom: 10px; }
    #preview-screen .center-copy h1 { font-size: 26px; }
    #preview-screen .preview-total { padding: 14px 18px; margin: 6px 0 8px; border-radius: 18px 18px 7px 18px; }
    #preview-screen .preview-total strong { font-size: 30px; }
    #preview-screen .flow-table { margin-bottom: 8px; }
    #preview-screen .flow-row { padding: 7px 2px; }
    #preview-screen .success-mark { width: 40px; height: 40px; margin: 2px auto 7px; }
    #preview-screen .description-row strong { max-width: 230px; font-size: 10px; line-height: 1.25; }

    @media (min-height: 760px) {
      #pending-entry-screen,
      #preview-screen { overflow: hidden; }
    }
    @media (max-height: 759px) {
      #review-screen,
      #pending-entry-screen,
      #preview-screen { padding-top: 12px; }
      #review-screen .back-title,
      #pending-entry-screen .back-title,
      #preview-screen .back-title { margin-bottom: 5px; }
      #review-screen .review-heading,
      #pending-entry-screen .review-heading { margin-bottom: 7px; }
      #review-screen .scan-status { min-height: 25px; margin-bottom: 4px; }
      #review-screen .data-cell { min-height: 42px; padding-top: 6px; padding-bottom: 6px; }
      #review-screen .locked-data { gap: 4px; margin-bottom: 5px; }
      .compact-suggestions { margin-bottom: 7px; }
      .compact-suggestions .block-label { margin-bottom: 5px; }
      .suggestion-row { gap: 7px; }
      .select-shell { min-height: 40px; }
      .select-shell select { height: 40px; }
      .select-shell::after { top: 14px; }
      .comment-field { margin-bottom: 6px; }
      .comment-field textarea { height: 70px; }
      #review-screen .primary-btn { min-height: 42px; }
    }

    @media (max-width: 520px) {
      .stage { display: block; padding: 0; }
      .phone { width: 100%; height: 100svh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
      .screen { padding-top: max(24px, env(safe-area-inset-top)); }
    }
    @media (max-height: 700px) and (min-width: 521px) {
      .phone { height: calc(100svh - 28px); min-height: 560px; }
      .stage { padding: 14px; }
    }
    @media (prefers-reduced-motion: no-preference) {
      .screen.active { animation: appear .22s ease-out; }
      @keyframes appear { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
    }
    @media (prefers-reduced-motion: reduce) {
      .filters-panel:not([hidden]) { animation: none; }
    }
  
/* ============================================================
   ThiBassi Notas v9 — adaptações PWA sobre o CSS verbatim do
   protótipo "App da Lara — Protótipo" (somente leitura).
   Este bloco vem DEPOIS do CSS do protótipo; não editar o acima.
   ============================================================ */

/* --- shell PWA: tela cheia abaixo da barra MODO TESTE --- */
html, body { height: 100%; }
body { background: var(--surface); }
.app { max-width: 520px; margin: 0 auto; min-height: 100dvh; position: relative; }
.screen { position: fixed; inset: 38px 0 0; display: block; max-width: 520px; margin: 0 auto; }
.bottom-nav { position: fixed; max-width: 520px; margin: 0 auto; }
.testbar { position: fixed; top: 0; left: 0; right: 0; height: 38px; z-index: 80; display: flex; align-items: center; justify-content: center; gap: 10px; background: #2e2000; color: #ffd34f; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.testbar small { font-weight: 600; letter-spacing: .05em; opacity: .8; }

/* --- home: grade simétrica + contadores nas ações --- */
.summary-grid { grid-template-columns: 1fr 1fr; }
.home-action-card { position: relative; }
.action-count { position: absolute; top: 10px; right: 10px; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }

/* --- login --- */
.login-screen { display: grid; place-items: center; padding: 48px 24px; background: var(--page); }
.login-card { width: 100%; max-width: 360px; text-align: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 24px; padding: 38px 28px; box-shadow: var(--shadow); }
.login-card .app-title { margin-bottom: 14px; }
.login-card h1 { margin: 0 0 10px; font-size: 26px; line-height: 1.15; }
.login-sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; }
.login-note { margin: 18px 0 0; font-size: 11px; letter-spacing: .12em; color: var(--muted); font-weight: 700; }

/* --- tela de bloqueio / login (digital): layout dedicado --- */
#lock-screen .login-wrap, #login-screen .login-wrap {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 340px; text-align: center;
}
#lock-screen .app-ver, #login-screen .app-ver {
  position: static; transform: none; margin: 0 0 6px;
}
#lock-screen .login-sub, #login-screen .login-sub { margin: 0 0 18px; }
.login-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink); font-weight: 700; font-size: 15px;
  font-family: inherit; cursor: pointer;
}
.login-btn:active { transform: scale(.98); }
#lock-screen .login-status, #login-screen .login-status {
  margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.4; min-height: 18px;
}

/* --- tela de bloqueio: visual premium (chumbo + dourado) --- */
#lock-screen {
  background: radial-gradient(130% 90% at 50% 0%, #45444f 0%, #2b2a32 52%, #141318 100%);
}
#lock-screen .lock-logo {
  width: 112px; height: 112px; border-radius: 30px; margin-bottom: 20px;
  box-shadow: 0 0 0 1px rgba(255,196,0,.35), 0 12px 44px rgba(255,196,0,.28);
}
#lock-screen .lock-title {
  font-size: 27px; font-weight: 800; letter-spacing: .02em; color: #FFC400;
}
#lock-screen .lock-ver {
  margin: 5px 0 24px; font-size: 11px; font-weight: 700; letter-spacing: .24em;
  color: rgba(255,255,255,.45);
}
#lock-screen .login-sub { color: rgba(245,242,234,.72); margin: 0 0 16px; font-size: 14px; }
#lock-screen .login-btn {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #f5f2ea;
}
#lock-screen .login-btn + .login-btn { margin-top: 10px; }
#lock-screen .login-btn.login-primary {
  border: 0;
  background: linear-gradient(180deg, #ffd34d, #FFC400);
  color: #1c1b15;
  font-size: 16px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(255,196,0,.32);
}
#lock-screen .login-btn.login-primary:active { transform: scale(.98); }
#lock-screen .login-status { color: rgba(245,242,234,.62); }

/* --- tela de login: mesmo visual premium da tela de bloqueio --- */
#login-screen {
  background: radial-gradient(130% 90% at 50% 0%, #45444f 0%, #2b2a32 52%, #141318 100%);
}
#login-screen .lock-logo {
  width: 112px; height: 112px; border-radius: 30px; margin-bottom: 20px;
  box-shadow: 0 0 0 1px rgba(255,196,0,.35), 0 12px 44px rgba(255,196,0,.28);
}
#login-screen .lock-title {
  font-size: 27px; font-weight: 800; letter-spacing: .02em; color: #FFC400;
}
#login-screen .lock-ver {
  margin: 5px 0 24px; font-size: 11px; font-weight: 700; letter-spacing: .24em;
  color: rgba(255,255,255,.45);
}
#login-screen .login-sub { color: rgba(245,242,234,.72); margin: 0 0 16px; font-size: 14px; }
#login-screen .login-btn {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #f5f2ea;
}
#login-screen .login-btn + .login-btn { margin-top: 10px; }
#login-screen .login-btn.login-primary {
  border: 0;
  background: linear-gradient(180deg, #ffd34d, #FFC400);
  color: #1c1b15;
  font-size: 16px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(255,196,0,.32);
}
#login-screen .login-btn.login-primary:active { transform: scale(.98); }
#login-screen .login-btn.login-primary:disabled { opacity: .6; }
#login-screen .login-status { color: rgba(245,242,234,.62); }

/* --- formulário de e-mail/senha --- */
.auth-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.auth-input {
  width: 100%; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  color: #f5f2ea; font-size: 15px; font-family: inherit;
}
.auth-input::placeholder { color: rgba(245,242,234,.4); }
.auth-input:focus { outline: none; border-color: rgba(255,196,0,.6); }
.auth-form .login-btn { margin-top: 4px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 16px 0; color: rgba(245,242,234,.4); font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.14);
}

/* --- gestão de usuários (admin) --- */
.users-wrap { padding: 16px 18px calc(var(--nav-h) + 24px); max-width: 560px; margin: 0 auto; }
.users-hint { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.users-new { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.users-new .auth-input {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.users-new .auth-input::placeholder { color: var(--muted); }
.users-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.user-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.user-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-info strong { font-size: 14px; }
.user-info small { font-size: 12px; color: var(--muted); }
.user-tag {
  display: inline-block; margin-top: 4px; margin-right: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  background: #eee; color: #555;
}
.user-tag.admin { background: #313036; color: #FFC400; }
.user-tag.temp { background: #fff3cd; color: #8a6d00; }
.user-actions { display: flex; gap: 8px; flex-shrink: 0; }
.user-btn {
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: #f6f6f6; font-size: 12px; font-weight: 700; cursor: pointer;
}
.user-btn.danger { background: #fdecea; border-color: #f5c6c0; color: #b3261e; }

/* --- scanner: vídeo, preview e veredito --- */
.camera-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-frame .scan-preview-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.scan-verdict { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.scan-verdict.ok { background: rgba(225,242,231,.96); color: #1d5c3d; }
.scan-verdict.warn { background: rgba(250,226,221,.96); color: #8f2f27; }
.scan-verdict.info { background: rgba(232,237,242,.96); color: #33414e; }
.overlay { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; gap: 12px; background: rgba(10,12,11,.72); color: #fff; text-align: center; border-radius: 26px; padding: 24px; }
.overlay.full { position: fixed; inset: 38px 0 0; border-radius: 0; }
.overlay strong { font-size: 15px; }
.spinner { width: 38px; height: 38px; margin: 0 auto; border-radius: 50%; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- conferência: alternância output/input por célula --- */
#review-screen .data-cell input { display: none; }
#review-screen .data-cell.editing input { display: block; }
#review-screen .data-cell.editing output { display: none; }
#review-screen .data-cell { cursor: pointer; }
.lock-hint { margin: 10px 2px 0; font-size: 12.5px; color: var(--accent-strong); font-weight: 600; }
.bank-trigger .bank-placeholder { color: var(--muted); font-weight: 600; }
.form-error { color: var(--attention); font-weight: 700; font-size: 13.5px; margin: 12px 2px 0; }

/* --- resultado: link do Drive --- */
.drive-link { display: block; text-align: center; margin: 4px 0 14px; font-weight: 700; color: var(--accent-strong); }

/* --- utilidades --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.flow-empty[hidden], .pending-empty[hidden] { display: none; }

/* === AUDIT visual v12: fidelidade ao protótipo (2026-09-24) === */
/* Botão voltar: circular como o .icon-btn do protótipo */
.back-title .back {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--surface-3);
  color: inherit; font-size: 26px; line-height: 1;
  padding: 0 0 3px; cursor: pointer;
}
/* Parágrafo de introdução da origem: cinza 13px como no protótipo */
p.source-intro { color: var(--muted); font-size: 13px; line-height: 1.45; }
/* Títulos de seção (h2.review-heading): serifados como no protótipo */
h2.review-heading {
  font-family: "Newsreader", serif; font-weight: 600; letter-spacing: -.025em;
  line-height: 1.05; margin-top: 0;
}
#source-screen h2.review-heading { font-size: 32px; }
#review-screen h2.review-heading { font-size: 21px; }
#pending-entry-screen h2.review-heading { font-size: 25px; }
/* Caixa "Tudo na mesma fila": igual ao .pending-tip do protótipo */
.source-note {
  margin: 22px 0 0; padding: 17px;
  border-radius: 8px 20px 20px 20px;
  background: var(--surface-3);
}
.source-note strong { font-size: 13px; }
.source-note span { margin-top: 5px; font-size: 12px; line-height: 1.45; }
/* Seta dos cards de origem: tamanho do protótipo */
.source-arrow { font-size: 22px; }
/* Emoji dentro do ícone de origem: centralizado e legível */
.source-icon { font-size: 24px; }

/* --- conferência: grade de células (visual do protótipo sobre a estrutura do app) --- */
#review-screen .locked-data { display: block; margin-bottom: 10px; }
#review-screen .locked-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
}
#review-screen .locked-row > span {
  display: block; min-width: 0; min-height: 42px;
  padding: 6px 10px; border-radius: 11px;
  background: var(--surface-3);
  color: var(--muted); font-size: 9px; font-weight: 800;
}
#review-screen .locked-row > span > strong {
  display: block; margin-top: 2px;
  color: var(--ink); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#review-screen .edit-row {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
#review-screen .edit-row .ocr-field-input {
  flex: 1; min-width: 0; height: 38px;
  padding: 0 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink); font-size: 13px;
}
#review-screen .edit-row .ocr-field-input:focus {
  outline: none; border-color: var(--accent);
}
.unlock-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); color: var(--ink);
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  cursor: pointer;
}

/* --- trigger de pagamento: um caret só + ellipsis --- */
.bank-trigger .bank-caret { display: none; }
.bank-trigger #selected-card-label {
  display: block; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- ícone de texto (emoji 🚫): centralizado e legível, sem herdar o span genérico --- */
#source-screen .source-option.tint-pink .source-icon,
#pending-entry-screen .source-option .source-icon {
  display: grid; place-items: center;
  font-size: 30px; line-height: 1; text-align: center;
}

/* --- labels de categoria: "Pagamento"/"Comentário" cabem em uma linha --- */
#review-screen .category-field,
#review-screen .comment-field { grid-template-columns: 108px minmax(0, 1fr); }
#review-screen .category-field > label,
#review-screen .comment-field > label { white-space: nowrap; font-size: 12px; }

/* --- câmera: fundo escuro full-bleed --- */
#camera-screen.screen { inset: 0; background: #0d1211; }

/* --- placeholder do pagamento: uma linha com ellipsis --- */
.bank-trigger .bank-placeholder {
  display: block; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- pending-entry: grade de dados fixos igual à da conferência --- */
#pending-entry-screen .locked-data {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px; margin-bottom: 7px;
}
#pending-entry-screen .data-cell {
  min-height: 47px; padding: 8px 11px;
  background: var(--surface-3); border: 1px solid transparent; border-radius: 11px;
  min-width: 0;
}
#pending-entry-screen .data-cell.wide { grid-column: 1 / -1; }
#pending-entry-screen .data-cell .data-label {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 3px; font-size: 9px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
#pending-entry-screen .data-cell .lock-mark {
  font-size: 8px; font-weight: 800; color: var(--accent-strong);
  text-transform: uppercase; letter-spacing: .05em;
}
#pending-entry-screen .data-cell output {
  display: block; font-size: 13px; font-weight: 700; color: var(--ink);
}

    /* OCR progress overlay */
    .ocr-busy {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      background: rgba(0,0,0,.55);
    }
    .ocr-busy[hidden] { display: none; }
    .ocr-busy-card {
      width: min(300px, 84vw);
      padding: 22px 20px;
      border-radius: 18px;
      background: var(--surface);
      text-align: center;
      box-shadow: 0 12px 40px rgba(0,0,0,.3);
    }
    .ocr-busy-card strong { display: block; margin-top: 12px; font-size: 16px; }
    .ocr-busy-card span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
    .ocr-busy-spinner {
      width: 36px; height: 36px;
      margin: 0 auto;
      border: 4px solid var(--line);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: ocr-spin 0.8s linear infinite;
    }
    @keyframes ocr-spin { to { transform: rotate(360deg); } }
    .ocr-progress {
      height: 8px;
      margin-top: 14px;
      border-radius: 99px;
      background: var(--surface-2);
      overflow: hidden;
    }
    .ocr-progress-bar {
      height: 100%;
      width: 0%;
      border-radius: 99px;
      background: var(--accent);
      transition: width 0.4s ease;
    }

    /* Batch mode */
    .batch-indicator {
      text-align: center;
      margin-bottom: 8px;
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
    }
    .batch-summary {
      margin: 10px 0;
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
    }
    .batch-item {
      padding: 10px 12px;
      font-size: 13px;
      border-bottom: 1px solid var(--line);
    }
    .batch-item:last-child { border-bottom: 0; }
    .tint-purple .source-icon { background: #d9c8f0; }

/* --- Cadastros (V09.26.68) --- */
.cad-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 6px; -webkit-overflow-scrolling: touch; }
.cad-tab { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cad-tab.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cad-tools { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 12px; }
.cad-search { min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--ink); font-size: 15px; outline: none; width: 100%; }
.cad-search:focus { border-color: var(--green); }
.cad-new { border: 0; border-radius: 14px; background: var(--accent); color: #1c1b15; font-weight: 800; font-size: 14px; padding: 0 18px; min-height: 48px; cursor: pointer; white-space: nowrap; }
.cad-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 110px; }
.cad-item { display: grid; grid-template-columns: 34px 1fr auto 18px; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--surface-2); border-radius: 16px; padding: 12px 12px; cursor: pointer; color: var(--ink); width: 100%; }
.cad-emoji { font-size: 22px; text-align: center; }
.cad-noemoji { color: var(--muted); }
.cad-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cad-item-txt strong { font-size: 15px; }
.cad-item-txt small { color: var(--muted); font-size: 12px; }
.cad-sub { color: var(--muted); font-size: 11.5px; }
.cad-off { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #9f352c; background: color-mix(in srgb, #d56558 18%, var(--surface-2)); border-radius: 8px; padding: 4px 8px; }
.cad-toggle { display: flex !important; align-items: center; justify-content: space-between; }
.cad-switch { width: 52px; height: 30px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-3); cursor: pointer; position: relative; padding: 0; }
.cad-switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: left .15s ease, background .15s ease; }
.cad-switch.on { background: var(--green); border-color: var(--green); }
.cad-switch.on i { left: 25px; background: #fff; }
.cad-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cad-chip { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 8px 13px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cad-chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
#cadastro-edit-screen { padding-bottom: 110px; }

/* === V09.26.78: barra superior compartilhada (versão + avatar + menus) === */
.screen-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}
.screen-topbar .menu-wrap { margin: 0; }
.screen-topbar .app-logo {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; margin-right: auto; flex: none;
}

/* === V09.26.71: menu hambúrguer ao lado do avatar (cabeçalho da home) === */
.menu-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.menu-btn {
  display: grid; place-items: center; align-content: center; gap: 4px;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface-2); cursor: pointer;
}
.menu-btn span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); }
.menu-btn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }
.menu-dropdown {
  position: absolute; z-index: 60; top: calc(100% + 8px); right: 0;
  min-width: 198px; padding: 6px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-2); box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.menu-dropdown[hidden] { display: none; }
.menu-item {
  display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 10px;
  width: 100%; min-height: 46px; padding: 6px 10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  text-align: left; font-size: 15px; font-weight: 700; cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--accent-soft); outline: none; }
.menu-item-ico { font-size: 19px; text-align: center; }

/* === V09.26.73: botão engrenagem ao lado do hambúrguer === */
/* === V09.26.74: engrenagem em SVG dourado (padrão, sem emoji) === */
.menu-btn.gear-btn { background: var(--accent); border-color: var(--accent); color: #1c1b15; }
.menu-btn.gear-btn svg { width: 22px; height: 22px; }
.menu-btn.gear-btn[aria-expanded="true"] { background: var(--accent); border-color: var(--accent-strong); }

/* === V09.26.71: cards de streak lado a lado, compactos (mesmo padrão dos summary-cards) === */
.streak-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#home-screen .streak-card {
  min-height: 91px; padding: 11px 12px; border-radius: 7px 15px 15px 15px;
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
  background: color-mix(in srgb, var(--blue) 7%, var(--surface-2));
}
.streak-num { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.streak-num .days-ball { font-size: 24px; }
.streak-num .days-num { font-size: 26px; color: var(--ink); }
/* === V09.26.74: fontes menores no label e na data dos streak-cards === */
/* === V09.26.76: 2 retângulos de largura cheia (um embaixo do outro) === */
.streak-list { display: grid; gap: 10px; }
#home-screen .streak-card { padding: 14px 16px; border-radius: 14px; }
.streak-half { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.streak-days { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
#home-screen .streak-card .streak-div { margin: 12px 0; }
#home-screen .streak-card.done { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 24%, transparent); }
#home-screen .streak-card.alert { background: var(--attention-soft); border-color: color-mix(in srgb, var(--attention) 24%, transparent); }
#home-screen .streak-card .streak-label { display: block; color: var(--muted); font-size: 10px; font-weight: 700; }
#home-screen .streak-card > strong { display: block; margin-top: 2px; color: var(--ink); font-size: 13px; }
#home-screen .streak-card .launch-count { display: block; margin-top: 2px; font-size: 22px; font-weight: 800; color: var(--success); }
#home-screen .streak-card .pend-count { display: block; margin-top: 2px; font-size: 22px; font-weight: 800; color: #d43d2a; }
#home-screen .streak-card .pend-total { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--ink); }
#home-screen .streak-card .streak-div { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
#home-screen .streak-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.3; }
/* === V09.26.79: streak-cards compactos p/ a home caber numa tela só === */
#home-screen .streak-card { padding: 10px 14px; border-radius: 12px; }
#home-screen .streak-card .streak-label { font-size: 9px; }
#home-screen .streak-card > strong { font-size: 12px; }
#home-screen .streak-card .launch-count { font-size: 17px; }
#home-screen .streak-card .pend-count { font-size: 17px; }
#home-screen .streak-card .pend-total { font-size: 13px; }
#home-screen .streak-card .streak-div { margin: 7px 0; }
#home-screen .streak-card small { font-size: 8px; }
#home-screen .streak-num { gap: 5px; margin-top: 2px; }
#home-screen .streak-num .days-ball { font-size: 19px; }
#home-screen .streak-num .days-num { font-size: 21px; }
.streak-none { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }