:root{
  --bg:#0f172a; /* slate-900 */
  --panel:#111827; /* gray-900 */
  --muted:#9ca3af; /* gray-400 */
  --text:#e5e7eb; /* gray-200 */
  --primary:#7c3aed; /* violet-600 */
  --primary-700:#6d28d9;
  --border:#1f2937; /* gray-800 */
  --green:#10b981;
  --yellow:#f59e0b;
  --glass: rgba(17,24,39,0.6);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:linear-gradient(180deg,#0f172a,#0b1228);color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:32px}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;position:relative}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#22d3ee);display:flex;align-items:center;justify-content:center;font-weight:700}
.brand-text h1{font-size:18px;margin:0}
.brand-text p{margin:2px 0 0;color:var(--muted);font-size:12px}
.header-actions{display:flex;gap:8px}
.badge{border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:999px;font-size:12px;background:#0b1228}
.badge-pix{border-color:#00e676;color:#00e676}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.card{background:var(--glass);backdrop-filter: blur(10px);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 12px 40px rgba(0,0,0,0.35)}
h2{font-size:18px;margin:0 0 4px}
.card-sub{margin:0 0 16px;color:var(--muted);font-size:13px}
h2{font-size:18px;margin:0 0 16px}
.section-title{margin:16px 0 8px;color:var(--muted);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.field-group{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.field-row{grid-template-columns:1fr}}
label{font-size:13px;color:var(--muted)}
input,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0b1228;color:var(--text);outline:none}
input:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
textarea{min-height:120px;resize:vertical}
.actions{display:flex;justify-content:flex-end;gap:8px}
.actions-split{justify-content:space-between}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--primary),#22d3ee);color:white;border:none;padding:12px 16px;border-radius:12px;font-weight:600;cursor:pointer;position:relative;transition:transform .05s ease}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:hover{background:var(--primary-700)}
.btn-primary.loading{opacity:.85;pointer-events:none}
.btn-loader{width:0;height:0;border:2px solid transparent;border-left-color:#fff;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;display:none}
.btn-primary.loading .btn-loader{display:inline-block;width:14px;height:14px}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-secondary{background:#0b1228;color:#fff;border:1px solid var(--border);padding:10px 14px;border-radius:12px;cursor:pointer}
.btn-tertiary{display:inline-block;text-decoration:none;background:#0b1228;color:#fff;border:1px solid var(--border);padding:10px 14px;border-radius:10px}
.result{display:grid;grid-template-columns:220px 1fr;gap:16px}
@media(max-width:700px){.result{grid-template-columns:1fr}}
.qr{display:flex;align-items:flex-start;justify-content:center}
#qr-image{width:220px;height:220px;border-radius:12px;border:1px solid var(--border);background:#0b1228}
.copy-actions{display:flex;gap:8px;margin-top:8px}
.meta{margin-top:12px;font-size:12px;color:var(--muted)}
.footer{margin-top:20px;text-align:center;color:var(--muted);font-size:12px}


/* Status list styling */
.status-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.status-item{border:1px solid var(--border);border-radius:12px;padding:12px;background:#0b1228}
.status-row{display:flex;gap:8px;align-items:center;justify-content:flex-start;margin-bottom:6px}
.status-meta{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:6px;color:var(--muted);font-size:12px}
@media(max-width:700px){.status-meta{grid-template-columns:1fr}}
.badge.status-pending{border-color:var(--yellow);color:var(--yellow)}
.badge.status-processing{border-color:#60a5fa;color:#60a5fa}
.badge.status-approved{border-color:var(--green);color:var(--green)}
.badge.status-declined{border-color:#ef4444;color:#ef4444}
.badge.status-refunded{border-color:#22d3ee;color:#22d3ee}
.badge.status-cancelled{border-color:#f59e0b;color:#f59e0b}

/* Withdrawal styles */
.withdrawal-details{display:flex;flex-direction:column;gap:12px}
.detail-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.detail-row:last-child{border-bottom:none}
.detail-label{font-size:13px;color:var(--muted);font-weight:500}
.detail-value{font-size:13px;color:var(--text);font-weight:600}
.field-hint{font-size:11px;color:var(--muted);margin-top:4px}
select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0b1228;color:var(--text);outline:none;cursor:pointer}
select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.badge.status-completed{border-color:var(--green);color:var(--green)}

/* Transactions list styles */
.transactions-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.transaction-item{border:1px solid var(--border);border-radius:12px;padding:16px;background:#0b1228;transition:all 0.2s}
.transaction-item:hover{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.transaction-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.transaction-id{font-size:12px;color:var(--muted);font-family:monospace}
.transaction-amount{font-size:16px;font-weight:600;color:var(--text)}
.transaction-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:12px;color:var(--muted)}
.transaction-details div{display:flex;justify-content:space-between}
.transaction-details strong{color:var(--text)}
.badge.status-pending{border-color:var(--yellow);color:var(--yellow)}
.badge.status-processing{border-color:#60a5fa;color:#60a5fa}
.badge.status-completed{border-color:var(--green);color:var(--green)}
.badge.status-failed{border-color:#ef4444;color:#ef4444}
.badge.status-cancelled{border-color:#f59e0b;color:#f59e0b}

/* Receipt/Comprovante styles */
.receipt-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--border)}
.receipt-logo{display:flex;gap:16px;align-items:center}
.receipt-brand h2{margin:0;font-size:20px;color:var(--text)}
.receipt-brand p{margin:4px 0 0;color:var(--muted);font-size:14px}
.receipt-status{text-align:right}
.status-badge{background:linear-gradient(135deg,var(--green),#059669);color:white;padding:8px 16px;border-radius:20px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.receipt-content{display:flex;flex-direction:column;gap:24px}
.receipt-section h3{margin:0 0 16px;font-size:16px;color:var(--text);display:flex;align-items:center;gap:8px}
.receipt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.receipt-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--glass);border:1px solid var(--border);border-radius:8px;transition:all 0.2s}
.receipt-item:hover{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.receipt-item.highlight{background:linear-gradient(135deg,rgba(124,58,237,0.1),rgba(34,211,238,0.1));border-color:var(--primary)}
.receipt-label{font-size:13px;color:var(--muted);font-weight:500}
.receipt-value{font-size:14px;color:var(--text);font-weight:600;text-align:right}
.receipt-footer{margin-top:24px;padding-top:20px;border-top:2px solid var(--border)}
.receipt-actions{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.receipt-message{text-align:center;padding:12px;background:linear-gradient(135deg,rgba(16,185,129,0.1),rgba(5,150,105,0.1));border:1px solid var(--green);border-radius:8px;color:var(--green);font-weight:600;font-size:14px}

/* Print styles for receipt */
@media print{
  .receipt-header{border-bottom:2px solid #000}
  .receipt-item{border:1px solid #000;background:transparent}
  .receipt-footer{border-top:2px solid #000}
  .receipt-actions{display:none}
  body{background:white;color:black}
  .card{box-shadow:none;border:2px solid #000}
}

