:root {
      --accent:       #c8a15f;
      --accent-soft:  rgba(200,161,95,0.14);
      --bg:           #060d15;
      --surface:      #111c2b;
      --surface-2:    #162438;
      --border:       #263a54;
      --border-strong:#355073;
      --text:         #e8eef6;
      --muted:        #8ea3ba;
      --green:        #21c58d;
      --green-soft:   rgba(33,197,141,0.14);
      --red:          #ef5b63;
      --red-soft:     rgba(239,91,99,0.14);
      --orange:       #f4a259;
      --orange-soft:  rgba(244,162,89,0.14);
      --teal-soft:    rgba(31,127,119,0.18);
      --purple-soft:  rgba(141,162,255,0.14);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body { min-height: 100%; }

    body {
      font-family: 'Outfit', sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 88% -12%, rgba(200,161,95,0.18), transparent 34%),
        radial-gradient(circle at -12% 26%, rgba(31,127,119,0.14), transparent 42%),
        linear-gradient(170deg, #040910 0%, #070f1a 52%, #050b14 100%);
      min-height: 100vh;
    }

    h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.01em; }

    .hidden { display: none !important; }

    /* ─── Layout ─────────────────────────────────────────── */
    .ca-page {
      min-height: 100vh;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 32px 16px 64px;
    }

    .ca-container { width: 100%; max-width: 460px; }

    /* ─── Card ───────────────────────────────────────────── */
    .ca-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px 28px;
      box-shadow: 0 20px 48px rgba(0,0,0,0.4);
    }

    /* ─── Header da tela de busca ────────────────────────── */
    .ca-header {
      text-align: center;
      margin-bottom: 28px;
    }

    .ca-logo {
      width: 74px;
      height: 74px;
      object-fit: cover;
      border-radius: 16px;
      border: 1px solid rgba(200,161,95,0.5);
      margin-bottom: 16px;
      box-shadow:
        0 0 0 5px rgba(200,161,95,0.07),
        0 14px 38px rgba(200,161,95,0.24);
    }

    .ca-eyebrow {
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .ca-title { font-size: 22px; color: var(--text); }

    /* ─── Form ───────────────────────────────────────────── */
    .ca-field { margin-bottom: 16px; }

    .ca-label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 7px;
    }

    .ca-input {
      width: 100%;
      background: #0f1a2a;
      border: 1px solid var(--border);
      border-radius: 9px;
      color: var(--text);
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
      padding: 12px 14px;
      outline: none;
      transition: border-color 0.15s;
    }

    .ca-input:focus { border-color: var(--accent); }
    .ca-input::placeholder { color: #3d566e; }

    /* ─── Botões ─────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-family: 'Outfit', sans-serif;
      font-size: 15px;
      font-weight: 600;
      padding: 12px 20px;
      border-radius: 9px;
      border: none;
      cursor: pointer;
      transition: opacity 0.15s, transform 0.1s;
    }

    .btn:active { transform: scale(0.98); }

    .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

    .btn-primary {
      background: linear-gradient(135deg, #e6c988 0%, var(--accent) 55%, #b98f45 100%);
      color: #1a1204;
      box-shadow: 0 6px 18px rgba(200,161,95,0.22), inset 0 1px 0 rgba(255,255,255,0.35);
    }
    .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(200,161,95,0.38), inset 0 1px 0 rgba(255,255,255,0.4); }

    .btn-ghost {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
    }
    .btn-ghost:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }

    .btn-full { width: 100%; }

    /* ─── Mensagens ──────────────────────────────────────── */
    .ca-error {
      color: var(--red);
      font-size: 13px;
      margin-top: 12px;
      text-align: center;
      line-height: 1.6;
    }

    /* ─── Voltar ─────────────────────────────────────────── */
    .ca-back {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      color: var(--muted);
      cursor: pointer;
      background: none;
      border: none;
      font-family: 'Outfit', sans-serif;
      padding: 0;
      margin-bottom: 18px;
    }

    .ca-back:hover { color: var(--text); }

    /* ─── Lista de seleção ───────────────────────────────── */
    .ca-selecao-title {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 12px;
    }

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

    .ca-item {
      background: var(--surface-2);
      border: 2px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }

    .ca-item:hover { border-color: var(--accent); background: rgba(200,161,95,0.06); }
    .ca-item.selected { border-color: var(--accent); background: var(--accent-soft); }

    .ca-item-nome { font-size: 15px; font-weight: 600; color: var(--text); }
    .ca-item-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }

    /* ─── Tela conta: topbar ─────────────────────────────── */
    .ca-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
    }

    .ca-welcome-nome { font-size: 17px; font-weight: 700; color: var(--text); }
    .ca-welcome-sub  { font-size: 12px; color: var(--muted); margin-top: 1px; }

    /* ─── Status dos óculos ──────────────────────────────── */
    .status-card {
      display: flex;
      align-items: center;
      gap: 16px;
      border-radius: 12px;
      padding: 18px 20px;
      margin-bottom: 14px;
      border: 1px solid transparent;
    }

    .status-card.laboratorio {
      background: var(--teal-soft);
      border-color: rgba(31,127,119,0.3);
    }

    .status-card.pronto {
      background: var(--green-soft);
      border-color: rgba(33,197,141,0.3);
    }

    .status-card.entregue {
      background: var(--purple-soft);
      border-color: rgba(141,162,255,0.25);
    }

    .status-icon { font-size: 30px; line-height: 1; flex-shrink: 0; }

    .status-tag {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      margin-bottom: 3px;
    }

    .status-value { font-size: 18px; font-weight: 700; }
    .status-card.laboratorio .status-value { color: #4ecdc4; }
    .status-card.pronto      .status-value { color: var(--green); }
    .status-card.entregue    .status-value { color: #8da2ff; }

    .status-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }

    /* ─── Resumo financeiro ──────────────────────────────── */
    .ca-summary {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 18px;
    }

    .ca-pill {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 13px 10px;
      text-align: center;
    }

    .ca-pill-label {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 5px;
    }

    .ca-pill-value { font-size: 14px; font-weight: 700; }
    .ca-pill-value.accent { color: var(--accent); }
    .ca-pill-value.green  { color: var(--green); }
    .ca-pill-value.red    { color: var(--red); }

    /* ─── OS info ────────────────────────────────────────── */
    .ca-os-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 16px;
    }

    .ca-os-chip strong { color: var(--text); }

    /* ─── Parcelas ───────────────────────────────────────── */
    .ca-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 12px;
    }

    .ca-section-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 14px;
    }

    .ca-parcelas { display: flex; flex-direction: column; gap: 6px; }

    .ca-parcela {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 11px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .ca-parcela-num {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      min-width: 26px;
    }

    .ca-parcela-info { flex: 1; }

    .ca-parcela-date { font-size: 13px; color: var(--text); }

    .ca-parcela-saldo { font-size: 11px; color: var(--muted); margin-top: 1px; }

    .ca-parcela-val {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
    }

    /* ─── Badges ─────────────────────────────────────────── */
    .badge {
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .badge-pago     { background: var(--green-soft);  color: var(--green); }
    .badge-pendente { background: var(--accent-soft);  color: var(--accent); }
    .badge-atrasado { background: var(--red-soft);    color: var(--red); }
    .badge-parcial  { background: var(--orange-soft); color: var(--orange); }

    /* ─── Pagamentos (histórico) ─────────────────────────── */
    .ca-pgtos { display: flex; flex-direction: column; gap: 6px; }

    .ca-pgto {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }

    .ca-pgto:last-child { border-bottom: none; padding-bottom: 0; }

    .ca-pgto-data { font-size: 12px; color: var(--muted); }
    .ca-pgto-forma { font-size: 12px; color: var(--text); }
    .ca-pgto-val { font-size: 14px; font-weight: 700; color: var(--green); white-space: nowrap; }

    /* ─── Loading / Empty ────────────────────────────────── */
    .ca-msg {
      text-align: center;
      color: var(--muted);
      font-size: 13px;
      padding: 20px 0;
    }

    /* ─── Pagamento Pix ──────────────────────────────────── */
    .ca-pix-card {
      background: var(--green-soft);
      border: 1px solid rgba(33,197,141,0.35);
      border-radius: 14px;
      padding: 22px 20px;
      margin-bottom: 12px;
    }

    .ca-pix-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .ca-pix-icon {
      font-size: 22px;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(33,197,141,0.18);
      border-radius: 11px;
      flex-shrink: 0;
    }

    .ca-pix-title {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 17px;
      font-weight: 700;
      color: var(--green);
    }

    .ca-pix-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

    /* ─── Seletor de parcela a pagar ─────────────────────── */
    .ca-pix-target { margin-bottom: 16px; }

    .ca-pix-target-label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin-bottom: 7px;
    }

    .ca-pix-target-select {
      width: 100%;
      background: rgba(4,9,16,0.45);
      border: 1px solid rgba(33,197,141,0.35);
      border-radius: 10px;
      color: var(--text);
      font-family: 'Outfit', sans-serif;
      font-size: 14px;
      font-weight: 600;
      padding: 12px 14px;
      cursor: pointer;
      outline: none;
      transition: border-color 0.15s;
    }

    .ca-pix-target-select:focus { border-color: var(--green); }
    .ca-pix-target-select:disabled { opacity: 0.6; cursor: not-allowed; }
    .ca-pix-target-select option { background: var(--surface); color: var(--text); }

    .ca-pix-target-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .ca-pix-target-head .ca-pix-target-label { margin-bottom: 0; }

    .ca-pix-todas {
      background: none;
      border: none;
      color: var(--green);
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      white-space: nowrap;
    }
    .ca-pix-todas:hover { text-decoration: underline; }
    .ca-pix-todas:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }

    .ca-pix-parcelas { display: flex; flex-direction: column; gap: 6px; }

    .ca-pix-parcela-opt {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(4,9,16,0.45);
      border: 1px solid rgba(33,197,141,0.22);
      border-radius: 10px;
      padding: 10px 12px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .ca-pix-parcela-opt:hover { border-color: rgba(33,197,141,0.5); }

    .ca-pix-parcela-check {
      width: 18px;
      height: 18px;
      accent-color: var(--green);
      flex-shrink: 0;
      cursor: pointer;
    }
    .ca-pix-parcela-check:disabled { cursor: not-allowed; }

    .ca-pix-parcela-txt { flex: 1; font-size: 13px; color: var(--text); }
    .ca-pix-parcela-val { font-size: 13px; font-weight: 700; color: var(--green); white-space: nowrap; }

    .ca-pix-qr-wrap { display: flex; justify-content: center; margin-bottom: 14px; }

    .ca-pix-qr {
      background: #ffffff;
      padding: 12px;
      border-radius: 12px;
      line-height: 0;
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    }

    .ca-pix-qr canvas, .ca-pix-qr img { display: block; width: 200px; height: 200px; }

    .ca-pix-amount {
      text-align: center;
      font-size: 14px;
      color: var(--muted);
      margin-bottom: 14px;
    }

    .ca-pix-amount strong { color: var(--green); font-size: 16px; }

    .ca-pix-key {
      background: rgba(4,9,16,0.45);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
      text-align: center;
      margin-bottom: 14px;
    }

    .ca-pix-key-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin-bottom: 5px;
    }

    .ca-pix-key-value { font-size: 16px; font-weight: 700; color: var(--text); }
    .ca-pix-key-name { font-size: 12px; color: var(--muted); margin-top: 5px; }

    .ca-pix-paguei { margin-top: 8px; }

    .ca-pix-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
      padding: 12px;
      border-radius: 9px;
      background: var(--orange-soft);
      color: var(--orange);
      font-size: 13px;
      font-weight: 700;
    }

    .ca-pix-badge-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--orange);
      animation: pixPulse 1.4s ease-in-out infinite;
    }

    @keyframes pixPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

    /* ─── Responsivo ─────────────────────────────────────── */
    @media (max-width: 380px) {
      .ca-card { padding: 24px 18px; }
      .ca-summary { grid-template-columns: repeat(3, 1fr); }
      .ca-pill-value { font-size: 12px; }
    }

/* === Utilitarios extraidos de estilos inline (endurecimento de CSP) === */
.ca-oculto { display: none; }
.ca-btn-sair { padding: 8px 14px; font-size: 13px; }
.ca-msg-erro { color: var(--red); }
.ca-msg-pad { padding: 40px 10px; }
.ca-muted { color: var(--muted); }

/* === Qualidade mobile === */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (hover: none) {
  .btn:active, button:active { transform: scale(0.97); }
}