/* style.css - tema escuro para fundo de página claro (namespace cc-) */
:root{
  --cc-bg:#0b0f14;            /* fundo do card (escuro) */
  --cc-surface:#0f1720;
  --cc-accent:#fe5900;        /* cor principal solicitada */
  --cc-muted:#9aa6b2;
  --cc-glass: rgba(255,255,255,0.03);
  --cc-success:#10b981;
  --cc-danger:#ef4444;
  --cc-radius:12px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}

/* Container com borda e sombra para destacar sobre fundo branco */
.cc-container{
  width:100%;
  max-width:920px;
  background: linear-gradient(180deg, var(--cc-bg), var(--cc-surface));
  border-radius:var(--cc-radius);
  padding:20px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.15);
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:20px;
  color:#e6eef8;
  border: 1px solid rgba(0,0,0,0.06);
}

/* Header */
.cc-header{grid-column:1 / -1;display:flex;gap:12px;align-items:center}
.cc-logo{
  width:56px;height:56px;border-radius:10px;
  background: linear-gradient(135deg, rgba(254,89,0,0.95), rgba(255,150,60,0.9));
  display:flex;align-items:center;justify-content:center;font-weight:800;color:white;
  box-shadow: 0 6px 18px rgba(254,89,0,0.12);
  font-size:18px;
}
.cc-title{margin:0;font-size:18px}
.cc-lead{margin:4px 0 0 0;color:var(--cc-muted);font-size:13px}

/* Form */
.cc-form{background:transparent;border-radius:10px;padding:0}
.cc-input{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02);color:#f1f5f9;font-size:15px;outline:none;
}
.cc-input::placeholder{color:rgba(241,245,249,0.45)}
.cc-input:focus{box-shadow:0 6px 18px rgba(254,89,0,0.12);border-color:rgba(254,89,0,0.45)}
.cc-row{display:flex;gap:12px;margin-bottom:14px}
.cc-field{flex:1}
.cc-small{font-size:12px;color:var(--cc-muted);margin-top:6px}
.cc-actions{display:flex;gap:10px;margin-top:6px}
.cc-btn{
  cursor:pointer;border:0;padding:10px 14px;border-radius:10px;font-weight:700;color:#0b0f14;
  background: linear-gradient(90deg,var(--cc-accent), #ff8a3d);
  box-shadow: 0 8px 20px rgba(11,15,20,0.45);
}
.cc-btn.ghost{
  background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--cc-muted);
}

/* Result card */
.cc-result{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px;
  border: 1px solid rgba(255,255,255,0.02);
}
.cc-card-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cc-big{font-size:20px;font-weight:800;color:#fff}
.cc-muted{color:var(--cc-muted);font-size:13px}
.cc-fee{color:var(--cc-danger);font-weight:700}
.cc-net{color:var(--cc-success);font-weight:700}
.cc-copy{
  background:transparent;border:1px dashed rgba(255,255,255,0.06);padding:8px 10px;border-radius:10px;color:var(--cc-muted);
  font-weight:700;cursor:pointer;
}

/* Responsivo */
@media (max-width:880px){
  .cc-container{grid-template-columns:1fr;padding:14px}
  .cc-result{order:2}
}