/* Scoped styles ONLY for this plugin */
.cryptonft-av-wrap{
  --bg:#0b0f1a;
  --card:#111a2e;
  --text:#e9efff;
  --muted:#a9b6d6;
  --line:rgba(255,255,255,.10);
  --good:#2be38b;
  --bad:#ff5570;
  --btn2:#2a6cff;

  width:100%;
  margin:0;
  padding:0;
}

/* IMPORTANT: do NOT style body/html in a WP plugin.
   Instead, set the background ONLY inside the plugin container. */
.cryptonft-av-wrap .page{
  max-width:1100px;
  margin:0 auto;
  padding:18px 14px 28px;

  /* Tool background only (not site-wide) */
  background: radial-gradient(1200px 800px at 20% 10%, #1a2450 0%, var(--bg) 55%), var(--bg);
  border-radius: 18px;
}

.cryptonft-av-wrap *{ box-sizing:border-box; }
.cryptonft-av-wrap h1,
.cryptonft-av-wrap h2,
.cryptonft-av-wrap p,
.cryptonft-av-wrap label,
.cryptonft-av-wrap summary,
.cryptonft-av-wrap li,
.cryptonft-av-wrap span,
.cryptonft-av-wrap div{
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.cryptonft-av-wrap .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.cryptonft-av-wrap .brand{display:flex;align-items:center;gap:12px}
.cryptonft-av-wrap .logo{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#2be38b,#5b9cff);display:grid;place-items:center;color:#07101d;font-weight:900;font-size:20px;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.cryptonft-av-wrap h1{margin:0;font-size:20px;letter-spacing:.2px}
.cryptonft-av-wrap .sub{margin:2px 0 0;color:var(--muted);font-size:13px}
.cryptonft-av-wrap .badge{padding:8px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px;background:rgba(255,255,255,.03)}

.cryptonft-av-wrap .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
@media (max-width: 920px){.cryptonft-av-wrap .grid{grid-template-columns:1fr}}

.cryptonft-av-wrap .card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 14px 12px;
  box-shadow:0 20px 60px rgba(0,0,0,.35)
}

.cryptonft-av-wrap .row{margin-bottom:12px}
.cryptonft-av-wrap .row.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width: 640px){.cryptonft-av-wrap .row.two{grid-template-columns:1fr}}

.cryptonft-av-wrap .label{display:block;margin:0 0 6px;font-size:12px;color:var(--muted)}
.cryptonft-av-wrap .select,
.cryptonft-av-wrap .input,
.cryptonft-av-wrap .textarea{
  width:100%;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  color:var(--text);
  padding:12px 12px;
  outline:none;
}
.cryptonft-av-wrap .textarea{resize:vertical; min-height:72px}
.cryptonft-av-wrap .select:focus,
.cryptonft-av-wrap .input:focus,
.cryptonft-av-wrap .textarea:focus{
  border-color:rgba(91,156,255,.55);
  box-shadow:0 0 0 4px rgba(91,156,255,.12)
}

.cryptonft-av-wrap .inputWrap{position:relative}
.cryptonft-av-wrap .miniBtns{position:absolute;right:10px;top:10px;display:flex;gap:8px}

.cryptonft-av-wrap .btn{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:650;
  font-size:13px;
}
.cryptonft-av-wrap .btn:hover{background:rgba(255,255,255,.08)}
.cryptonft-av-wrap .btn:active{transform:translateY(1px)}
.cryptonft-av-wrap .btn.primary{
  background:linear-gradient(135deg, rgba(34,58,116,1), var(--btn2));
  border-color:rgba(91,156,255,.45)
}
.cryptonft-av-wrap .btn.ghost{padding:7px 10px;font-size:12px;background:rgba(0,0,0,.25)}
.cryptonft-av-wrap .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

.cryptonft-av-wrap .hint{color:var(--muted);font-size:12px;margin-top:6px}

.cryptonft-av-wrap .result{
  display:flex;gap:10px;align-items:flex-start;margin-top:10px;
  padding:12px;border-radius:16px;border:1px solid var(--line);
  background:rgba(0,0,0,.20)
}
.cryptonft-av-wrap .pill{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.cryptonft-av-wrap .pill.good{background:rgba(43,227,139,.15);border:1px solid rgba(43,227,139,.35);color:var(--good)}
.cryptonft-av-wrap .pill.bad{background:rgba(255,85,112,.12);border:1px solid rgba(255,85,112,.35);color:var(--bad)}
.cryptonft-av-wrap .pill.neutral{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted)}
.cryptonft-av-wrap .resultText{color:var(--text);font-size:13px;line-height:1.45}

.cryptonft-av-wrap .warn{
  margin-top:10px;padding:10px 12px;border-radius:16px;
  border:1px solid rgba(255,204,102,.28);
  background:rgba(255,204,102,.08);
  color:#ffe4a6;font-size:13px
}

.cryptonft-av-wrap .details{
  margin-top:10px;border:1px solid var(--line);border-radius:16px;
  padding:10px 12px;background:rgba(0,0,0,.12)
}
.cryptonft-av-wrap .details summary{cursor:pointer;color:var(--muted);font-weight:700}
.cryptonft-av-wrap .details ul{margin:8px 0 0 18px;color:var(--muted);font-size:13px}

.cryptonft-av-wrap .qrHeader h2{margin:2px 0 0;font-size:16px}
.cryptonft-av-wrap .sub2{margin:4px 0 0;color:var(--muted);font-size:12px}

.cryptonft-av-wrap .qrBox{
  display:grid;place-items:center;border:1px dashed rgba(255,255,255,.18);
  border-radius:18px;padding:12px;background:rgba(0,0,0,.18);margin:10px 0 12px
}

/* Make sure canvas stays readable */
.cryptonft-av-wrap #qrCanvas{
  width:320px;height:320px;max-width:100%;
  border-radius:12px;background:#fff
}

.cryptonft-av-wrap .tiny{color:var(--muted);font-size:12px;margin-top:8px;line-height:1.45}
.cryptonft-av-wrap code{
  background:rgba(255,255,255,.08);
  padding:2px 6px;border-radius:8px;border:1px solid var(--line)
}