/* AU Pay Calculator Styles */
:root{
  --au-bg:#ffffff;
  --au-border:#e8e8ef;
  --au-muted:#6b7280;
  --au-text:#0f172a;
  --au-accent:#0b5fff;
  --au-shadow:0 10px 30px rgba(2,6,23,.08);
  --au-radius:1.25rem;
}

#au-pay,.au-pay-card{ font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--au-text); }
.au-pay-card{
  background:var(--au-bg); border:1px solid var(--au-border); border-radius:var(--au-radius);
  box-shadow:var(--au-shadow); padding:1.6rem; max-width:1100px; margin:1rem auto;
}

.au-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; align-items:end; }
.au-field{ grid-column:span 6 / span 6; display:flex; flex-direction:column; }
.au-field label{ font-size:.95rem; font-weight:600; margin-bottom:.25rem; }
.au-field input,.au-field select{ border:1px solid var(--au-border); border-radius:.9rem; padding:.75rem 1rem; outline:none; background:#fff; font-size:1rem; }
.au-field input:focus,.au-field select:focus{ border-color:var(--au-accent); box-shadow:0 0 0 4px rgba(11,95,255,.12); }

.au-actions{ grid-column:span 12 / span 12; display:flex; flex-wrap:wrap; gap:.75rem; }
.au-btn{ background:var(--au-accent); color:#fff; border:none; border-radius:.9rem; padding:.8rem 1.1rem; font-weight:600; cursor:pointer; box-shadow:0 6px 18px rgba(11,95,255,.2); }
.au-btn:hover{ transform:translateY(-1px); }
.au-btn.ghost{ background:#f4f6ff; color:#1f2937; box-shadow:none; border:1px solid var(--au-border); }

.au-results{ margin-top:1rem; display:grid; gap:1rem; }
.card{ border:1px solid var(--au-border); background:#fafbff; border-radius:1rem; padding:1rem 1.1rem; }
.row{ display:flex; justify-content:space-between; margin:.25rem 0; }
.row .label{ color:var(--au-muted); }
.row .value{ font-weight:600; }

.au-charts{ margin-top:1rem; display:grid; gap:1rem; grid-template-columns:repeat(12,1fr); }
.chart-card{ grid-column:span 6 / span 6; border:1px solid var(--au-border); border-radius:1rem; padding:1rem; background:#fff; }
.chart-card h4{ margin:0 0 .5rem 0; }

.au-compare{ margin-top:1rem; display:grid; gap:1rem; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.tag{ display:inline-block; padding:.2rem .6rem; border-radius:999px; background:#eef2ff; color:#1e3a8a; font-weight:600; font-size:.82rem; }

.muted{ color:var(--au-muted); } .small{ font-size:.85rem; }

@media (max-width: 720px){
  .au-field{ grid-column:span 12 / span 12; }
  .chart-card{ grid-column:span 12 / span 12; }
}