:root{
  --bg:#0b1520;
  --panel:#0f1c29;
  --ink:#e8eef5;
  --muted:#9bb0c3;
  --accent:#4B9CD3;       /* subtle, trustworthy blue */
  --valid:#26c281;
  --invalid:#ff5a5f;
  --warn:#ffb020;
  --ring: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
  --radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, #17314a 0%, transparent 60%),
    radial-gradient(1200px 600px at 110% 110%, #17314a 0%, transparent 60%),
    var(--bg);
  line-height:1.5;
}
.wrap{
  max-width: 920px;
  margin: min(8vh,5rem) auto;
  padding: 0 1rem;
}
header{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.25rem;
}
.card{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background: linear-gradient(180deg, #17314a, #0f1c29);
  box-shadow: var(--shadow);
  flex: 0 0 auto;
}
.title h1{
  margin:0;
  font-size: clamp(1.25rem, 1.1rem + 1.2vw, 1.85rem);
  letter-spacing:.2px;
}
.title p{
  margin:.2rem 0 0;
  color:var(--muted);
  font-size:.95rem;
}

.panel{
  background:linear-gradient(180deg, #0f1c29, #0c1824);
  border:1px solid #16283a;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1rem, 1rem + 1.2vw, 1.75rem);
}

form{
  display:grid;
  gap:1rem;
}
.field{
  display:grid; gap:.5rem;
}
label{
  color:var(--muted);
  font-size:.95rem;
}
.cc-input{
  display:flex; align-items:center; gap:.6rem;
  background:#0a1420; border:1px solid #193049;
  border-radius:12px; padding:.85rem .95rem;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.cc-input:focus-within{
  border-color:var(--accent);
  box-shadow: var(--ring);
}
.cc-input input{
  background: transparent;
  color:var(--ink);
  border:0; outline:0; font-size:1.05rem; width:100%;
  letter-spacing:.6px;
}
.brand-chip{
  min-width:92px;
  text-align:right;
  color:var(--muted);
  font-variant-numeric: tabular-nums;
  font-size:.9rem;
  opacity:.9;
}
.hint{
  color:var(--muted); font-size:.85rem;
  display:flex; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
}

.row{
  display:grid; gap:1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .row{ grid-template-columns: 1fr 1fr; }
}

button{
  appearance:none; border:0; cursor:pointer;
  padding:.9rem 1.1rem; border-radius:12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff 0%), var(--accent));
  color:white; font-weight:600; letter-spacing:.2px;
  box-shadow: 0 8px 18px rgba(75,156,211,.25);
  transition: transform .06s ease, filter .15s ease;
}
button:hover{ filter: brightness(1.06) }
button:active{ transform: translateY(1px) }

.result{
  margin-top:.5rem;
  display:grid;
  gap:.75rem;
}
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; padding:.5rem .7rem; border-radius:10px;
  border:1px solid #20364d; background:#0b1622; color:var(--muted);
}
.badge strong{ color: var(--ink) }
.pill{
  display:inline-flex; align-items:center; gap:.45rem;
  border-radius:999px; padding:.35rem .6rem; font-size:.87rem; font-weight:600;
}
.pill.valid{ background: color-mix(in srgb, var(--valid) 16%, transparent); color: var(--valid); border:1px solid color-mix(in srgb, var(--valid) 40%, transparent)}
.pill.invalid{ background: color-mix(in srgb, var(--invalid) 16%, transparent); color: var(--invalid); border:1px solid color-mix(in srgb, var(--invalid) 40%, transparent)}
.pill.warn{ background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); border:1px solid color-mix(in srgb, var(--warn) 40%, transparent)}

details{
  border-top:1px dashed #20364d;
  padding-top:.75rem;
}
summary{
  cursor:pointer; color:var(--muted); font-size:.92rem;
  list-style:none;
}
summary::-webkit-details-marker{ display:none; }
.meta{
  display:grid; gap:.35rem; margin-top:.5rem;
  color:var(--muted); font-size:.92rem;
}

footer{
  margin-top:1rem; color:var(--muted); font-size:.85rem;
}
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* COPYRIGHT FOOTER (bottom right, clickable link) */
.copyright {
  position: fixed;
  bottom: 12px;
  right: 16px;        /* ✅ use right instead of left */
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.8;
  user-select: none;
  z-index: 50;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.copyright a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.copyright a:hover {
  text-decoration: underline;
}

.copyright:hover {
  opacity: 1;
}

/* BRAND LOGO + NAME DISPLAY */
.brand-chip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  min-width: 120px;
  text-align: right;
  color: var(--muted);
  font-size: 0.9rem;
}

.brand-chip img {
  height: 20px;
  width: auto;
  display: none; /* Hidden until a card network is detected */
}