/* =======================================================================
   RUGZ — site styles (buttons, header, hero, cards) + scan UI components
   ======================================================================= */

/* ===== Theme tokens ===== */
:root{
  --brand-a:#ff7a59;
  --brand-b:#ff3d77;
  --bg:#0a0b0e;
  --card:#101319;
  --ink:#e9edf6;
  --muted:#9aa4b2;

  --ok:#22c55e;
  --watch:#facc15;
  --risky:#fb923c;
  --danger:#ef4444;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,122,89,.08), transparent),
    radial-gradient(900px 600px at 110% 10%, rgba(83,17,65,.15), transparent),
    var(--bg);
  color:var(--ink);
  font-family: system-ui, Segoe UI, Inter, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:#7dd3fc;text-decoration:none}
a:hover{text-decoration:underline}
code, .mono{font-family:ui-monospace,SFMono-Regular,Consolas,Monaco,"Liberation Mono","Courier New",monospace}

/* ===== Buttons ===== */
.btn-primary{
  background: linear-gradient(90deg,var(--brand-a) 0%,var(--brand-b) 100%);
  color:#111; font-weight:800; border-radius:9999px; padding:.6rem 1rem;
  box-shadow:0 10px 24px rgba(255,61,119,.35);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 18px 34px rgba(255,61,119,.45); }
.btn-dark{ background:#18181b; color:#fff; border-radius:9999px; padding:.55rem 1rem; }
.btn-lite{ color:#e5e7eb; padding:.45rem .8rem; border-radius:.75rem; background:#0d1420; border:1px solid #202734; }

/* ===== Header (polished left) ===== */
.site-header{
  backdrop-filter:saturate(140%) blur(8px);
  background:
    radial-gradient(900px 120px at 50% -40%, rgba(255,122,89,.18), transparent),
    linear-gradient(to right, rgba(10,10,10,.88), rgba(15,8,8,.78));
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.brand-logo{
  width:40px; height:40px; border-radius:.9rem; overflow:hidden;
  background: radial-gradient(120% 120% at 10% 10%, var(--brand-a), #2b0d0d);
  box-shadow:0 6px 18px rgba(255,122,89,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  display:grid; place-items:center;
}
.brand-logo img{ width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.brand-text{ color:#e5e7eb; font-weight:600; }

/* ===== Hero watermark behind content ===== */
.hero{ position:relative; }
.hero::before{
  content:""; position:absolute; left:-8vw; top:1.5rem;
  width:min(90vw, 900px); aspect-ratio:1/1;
  background:url('/assets/img/icon_logo.png') center/contain no-repeat;
  opacity:.22; transform:rotate(-12deg);
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.45)) saturate(1.05);
  mix-blend-mode:soft-light; pointer-events:none;
}
@media (max-width:640px){ .hero::before{ left:-30vw; top:4rem; width:130vw; opacity:.2; } }

/* ===== Floaty hero image (subtle) ===== */
@keyframes floaty {
  0%   { transform:translateY(0) rotate(-.2deg); }
  50%  { transform:translateY(-8px) rotate(.2deg); }
  100% { transform:translateY(0) rotate(-.2deg); }
}
.floaty{ animation: floaty 6s ease-in-out infinite; }

/* ===== Cards & stickers ===== */
.card{ background: linear-gradient(180deg, #0f1420, #0b0f16);
       border:1px solid #1e293b; border-radius:18px; padding:18px;
       box-shadow:0 10px 30px #0008; }
.card-img{ border-radius:1rem; box-shadow:0 20px 45px rgba(0,0,0,.35); }
.sticker{
  border-radius:1rem; background:#0b0b0b; padding:.75rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.35);
}

/* ===== Scan card (existing) ===== */
.scan-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius:1rem; padding:1rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.scan-input{
  flex:1; background:#0f0f11; border:1px solid rgba(255,255,255,.08);
  border-radius:.8rem; padding:.7rem .9rem; color:#fff; outline:none;
}
.scan-input:focus{ border-color:var(--brand-a); box-shadow:0 0 0 3px rgba(255,122,89,.25); }
.hint{ margin-top:.45rem; font-size:.75rem; color:#a3a3a3; }

/* =======================================================================
   NEW — Epic scan UI components (used by /app/scan.html)
   ======================================================================= */

.container{max-width:980px;margin:40px auto;padding:0 16px}
.header-row{display:flex;gap:12px;align-items:center;justify-content:space-between}
.title{font-weight:800;letter-spacing:.3px}

/* Controls row */
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
input,select,button{background:#0b1017;color:#e7eef7;border:1px solid #1f2a3a;border-radius:12px;padding:12px 14px}
input,select{min-width:260px}
button{cursor:pointer}
button.primary{
  background: linear-gradient(90deg,var(--brand-a),var(--brand-b));
  border:none;color:#111;font-weight:800;
  box-shadow:0 0 24px rgba(255,61,119,.35); transition:transform .06s
}
button.primary:active{transform:scale(.98)}
button.copy{background:#0d1420}

/* Badges */
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.badge{padding:6px 10px;border-radius:20px;border:1px solid #223043;color:#cdd6e1;background:#0b111a}
.badge.ok{border-color:#1e3a26;background:#0d1f14;color:#b6f3c9}
.badge.watch{border-color:#3a2f1e;background:#1f180d;color:#fde68a}
.badge.risky{border-color:#3a271e;background:#1f120d;color:#fdba74}
.badge.danger{border-color:#3a1e1e;background:#1f0d0d;color:#fecaca}

/* Layout + Gauge */
.grid{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center}
@media (max-width:840px){ .grid{grid-template-columns:1fr; } }

.gauge{
  width:180px;height:180px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--gauge-color) calc(var(--pct)*1%), #1f2937 0);
  box-shadow:0 0 80px var(--gauge-color) inset, 0 0 60px #0006
}
.gauge-inner{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;background:#0b0f16;border:1px solid #1f2a3a}
.score{font-size:42px;font-weight:900;letter-spacing:.5px}
.verdict{margin-top:6px;font-weight:700;color:var(--muted)}

/* Key/Value + lists */
.kv{display:grid;grid-template-columns:140px 1fr;gap:8px;margin-top:10px}
.kv div:first-child{color:var(--muted)}
.list{margin:0;padding-left:22px}

/* Links row */
.links{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}

/* Raw JSON panel */
pre.json{max-height:300px;overflow:auto;background:#0a0f15;border:1px solid #1f2a3a;border-radius:12px;padding:12px}

/* Footer */
.footer{opacity:.65;text-align:center;margin:28px 0 10px}