/* assets/style.css - polished, match script.js UI changes
   - quota badge
   - dex button
   - responsive card layout
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root {
  --bg: #071029;
  --panel: #0f1724;
  --muted: #94a3b8;
  --accent: #10b981;
  --accent-2: #6366f1;
  --danger: #ef4444;
  --card: #0f1724;
  --glass: rgba(255,255,255,0.02);
  --btn-gradient: linear-gradient(90deg,#6366f1,#2563eb);
  --btn-dex-gradient: linear-gradient(90deg,#10b981,#06b6d4);
}

* { box-sizing: border-box; }

#csd-container {
  max-width: 1100px;
  margin: 24px auto;
  padding: 24px;
  background: linear-gradient(180deg,var(--bg) 0%, #0b1220 100%);
  border-radius: 14px;
  color: #e6eef8;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  box-shadow: 0 18px 48px rgba(3,7,18,0.7);
}

/* header */
.csd-header { text-align:center; margin-bottom: 14px; }
.csd-header h2 { margin:0; font-size:26px; color:var(--accent); }
.csd-header p { margin:6px 0 0; color:var(--muted); font-size:13px; }

/* form */
#csd-form-wrap { margin-bottom: 12px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.input-row { width:100%; display:flex; gap:10px; align-items:center; max-width:880px; flex-wrap: wrap; } /* improved for mobile */
.input-row input[type="text"], .input-row select {
  flex:1; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02); color:#e6eef8; font-size:15px; min-width: 200px;
}
.input-row input::placeholder { color:var(--muted); }
#csd-submit { background: var(--btn-gradient); border:none; color:#fff; padding:11px 16px; border-radius:10px; cursor:pointer; font-weight:700; box-shadow:0 8px 24px rgba(37,99,235,0.12); }
#csd-submit:disabled { opacity:0.6; cursor:not-allowed; }

/* quota badge */
#csd-quota { font-size:13px; color:var(--muted); display:block; text-align:center; margin-top:6px; }
.quota-badge { display:inline-block; padding:8px 12px; border-radius:999px; font-weight:600; font-size:13px; }
.quota-badge.free { background: rgba(255,255,255,0.02); color: var(--accent-2); border:1px solid rgba(255,255,255,0.03); }
.quota-badge.paid { background: linear-gradient(90deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04)); color: var(--accent); border:1px solid rgba(16,185,129,0.08); }

/* token preview */
#token-info { width:100%; max-width:880px; margin-top:8px; display:none; }
.token-row { display:flex; gap:12px; align-items:center; }
.token-logo { width:56px; height:56px; border-radius:10px; background:var(--glass); object-fit:cover; }
.token-meta { font-size:14px; color:#e6eef8; }
.token-price { color:var(--muted); margin-top:6px; font-size:13px; }
.token-actions { margin-top:8px; }

/* dex button */
.dex-btn, .btn-dex {
  display:inline-block; padding:8px 12px; border-radius:10px; color:#fff; font-weight:700; text-decoration:none;
  background: var(--btn-dex-gradient); box-shadow: 0 8px 18px rgba(6,182,212,0.08);
}
.dex-btn:hover, .btn-dex:hover { transform: translateY(-2px); transition:200ms ease; }

/* loader */
#csd-loading { display:none; margin-top:10px; }
.loader { width:36px; height:36px; border-radius:50%; border:5px solid rgba(255,255,255,0.04); border-top-color:var(--accent-2); animation:spin 1s linear infinite; display:inline-block; vertical-align:middle; margin-right:10px; }
.loading-text { display:inline-block; color:var(--muted); font-weight:600; vertical-align:middle; }

/* results */
#csd-results { margin-top:16px; display:none; }
.result-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.result-logo { width:64px; height:64px; border-radius:12px; object-fit:cover; background:var(--glass); }
.result-title h3 { margin:0; font-size:18px; color:#fff; }
.result-price { color:var(--muted); margin-top:6px; font-size:13px; }

/* score */
.score-pill { display:flex; flex-direction:column; align-items:center; padding:10px 12px; border-radius:10px; min-width:92px; }
.score-num { font-size:22px; font-weight:900; color:#fff; }
.score-label { font-size:13px; color:var(--muted); margin-top:4px; }
.score-pill.trusted { background: linear-gradient(90deg, rgba(16,185,129,0.14), rgba(16,185,129,0.06)); color:var(--accent); border:1px solid rgba(16,185,129,0.08); }
.score-pill.suspicious { background: linear-gradient(90deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04)); color:#f59e0b; border:1px solid rgba(245,158,11,0.08); }
.score-pill.scam { background: linear-gradient(90deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04)); color:var(--danger); border:1px solid rgba(239,68,68,0.08); }

/* grid */
.cards-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
.card { 
  background: rgba(255,255,255,0.02); 
  padding:14px; 
  border-radius:12px; 
  border:1px solid rgba(255,255,255,0.02); 
  box-shadow: 0 6px 18px rgba(2,6,23,0.4); 
}
.card h3 { margin:0 0 8px 0; color:var(--accent); font-size:15px; }

/* checks */
.checks { list-style:none; padding-left:0; margin:0; color:#e6eef8; }
.checks li { margin:8px 0; display:flex; gap:10px; align-items:center; font-size:14px; }
.csd-icon-yes { color:#22c55e; }
.csd-icon-no { color:var(--danger); }
.csd-icon-warn { color:#f59e0b; }

/* notes */
.notes ul { margin:6px 0 0 16px; color:var(--muted); }

/* paid card (prediction) */
.card-chart { grid-column:1 / -1; }
.card-chart .small { color:var(--muted); margin-bottom:8px; }
.final-line { color:var(--muted); font-weight:700; margin-top:8px; }

/* AI verdict card */
.card-verdict { grid-column:1 / -1; }
.ai-text { color:#e6eef8; margin-bottom:6px; }

/* Dex action wrapper */
.dex-action-wrap { text-align:right; margin-bottom:8px; }

/* disclaimer */
#csd-disclaimer { margin-top:14px; padding:12px; border-radius:10px; background:rgba(239,68,68,0.06); border:1px solid rgba(239,68,68,0.18); color:#fecaca; font-size:13px; text-align:center; }

/* error */
#error, .error { background:#2a0000; color:#ffcccc; padding:10px; border-radius:8px; text-align:center; }

/* responsive */
@media (max-width: 900px) {
  .cards-grid { grid-template-columns: 1fr; }
  .result-header { flex-direction:column; align-items:flex-start; gap:8px; }
  .dex-action-wrap { text-align:left; margin-bottom:10px; }
  .input-row { flex-direction: column; gap: 8px; }
}

@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ---------------------------
   FIX: force dark background
   --------------------------- */
#csd-container .card {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  color: #e6eef8 !important;
}
#csd-container .card h3,
#csd-container .card p,
#csd-container .card span,
#csd-container .card li {
  color: #e6eef8 !important;
}
