/* ===== NumisDon Coin Identification (scoped) ===== */
.nd-ci{ 
  --nd-bg1:#1a2a6c; --nd-bg2:#b21f1f; --nd-bg3:#fdbb2d;
  --nd-text:#333; --nd-dark:#2c3e50; --nd-muted:#7f8c8d;
  --nd-white:#fff; --nd-blue:#3498db; --nd-blue-dark:#2980b9; --nd-green:#27ae60;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding:20px;
  background: linear-gradient(135deg, var(--nd-bg1), var(--nd-bg2), var(--nd-bg3));
  border-radius: 16px;
}
.nd-ci__container{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:30px; }
.nd-ci__header{
  text-align:center; padding:30px; background: rgba(255,255,255,.95);
  border-radius:20px; box-shadow:0 15px 35px rgba(0,0,0,.2);
}
.nd-ci__title{ font-size:2.4rem; color:var(--nd-dark); margin:0 0 8px; font-weight:800; }
.nd-ci__tagline{ font-size:1.1rem; color:var(--nd-muted); }

.nd-ci__content{ display:flex; gap:30px; flex-wrap:wrap; }
.nd-ci__panel{ flex:1; min-width:300px; background: rgba(255,255,255,.95); padding:30px;
  border-radius:20px; box-shadow:0 15px 35px rgba(0,0,0,.2);
}
.nd-ci__section-title{ font-size:1.6rem; color:var(--nd-dark); margin:0 0 16px; padding:0 0 12px;
  border-bottom:3px solid var(--nd-blue);
}

.nd-ci__drop{
  border:3px dashed var(--nd-blue); border-radius:15px; padding:48px 20px; text-align:center;
  cursor:pointer; transition:.3s; margin-bottom:20px; background:#f8f9fa;
}
.nd-ci__drop:hover{ background:#e3f2fd; border-color:var(--nd-blue-dark); transform:translateY(-5px); }
.nd-ci__drop i{ font-size:64px; color:var(--nd-blue); margin-bottom:14px; display:block; }
.nd-ci__drop h3{ font-size:1.4rem; color:var(--nd-dark); margin:8px 0; }
.nd-ci__drop p{ color:var(--nd-muted); }

.nd-ci__buttons{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:16px 0 0; }
.nd-ci__btn{
  display:inline-flex; gap:10px; align-items:center; justify-content:center;
  padding:12px 22px; background:var(--nd-blue); color:#fff; border:none; border-radius:999px;
  font-weight:600; transition:.3s; cursor:pointer;
}
.nd-ci__btn:hover{ background:var(--nd-blue-dark); transform:translateY(-2px); box-shadow:0 7px 15px rgba(0,0,0,.15); }
.nd-ci__btn--outline{ background:transparent; color:var(--nd-blue); border:2px solid var(--nd-blue); }
.nd-ci__btn--outline:hover{ background:var(--nd-blue); color:#fff; }

.nd-ci__fileinfo{ margin-top:16px; text-align:center; color:var(--nd-muted); background:#f8f9fa; padding:12px; border-radius:10px; }

.nd-ci__features{ display:flex; flex-wrap:wrap; gap:16px; margin:22px 0; }
.nd-ci__feature{ flex:1; min-width:200px; text-align:center; padding:18px 12px; background:#f8f9fa; border-radius:15px; transition:.3s; }
.nd-ci__feature:hover{ transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,.1); }
.nd-ci__feature i{ font-size:32px; color:var(--nd-blue); margin-bottom:12px; display:block; }
.nd-ci__feature h3{ color:var(--nd-dark); font-size:1.1rem; margin:0 0 6px; }
.nd-ci__feature p{ color:var(--nd-muted); margin:0; }

.nd-ci__loading{ display:none; text-align:center; padding:24px; }
.nd-ci__loading.visible{ display:block; }
.nd-ci__spinner{ width:48px; height:48px; border:5px solid #f3f3f3; border-top:5px solid var(--nd-blue);
  border-radius:50%; margin:0 auto 12px; animation: ndspin 1s linear infinite; }
@keyframes ndspin{ to{ transform:rotate(360deg);} }

.nd-ci__results{ display:none; padding:18px; background:#f8f9fa; border-radius:15px; box-shadow:0 5px 15px rgba(0,0,0,.08); }
.nd-ci__results.visible{ display:block; animation: ndfade .4s ease; }
@keyframes ndfade{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:translateY(0);} }
.nd-ci__labels{ margin:8px 0 0; }
.nd-ci__label-chip{
  display:inline-block; padding:2px 8px; margin:4px 6px 0 0; border:1px solid #e0e0e0; border-radius:999px;
  font-size:12px; background:#fff;
}

.nd-ci__details{ display:flex; gap:24px; flex-wrap:wrap; margin-top:10px; }
.nd-ci__image{ flex:1; min-width:240px; text-align:center; }
.nd-ci__image img{ max-width:100%; max-height:300px; object-fit:contain; border-radius:15px; box-shadow:0 8px 20px rgba(0,0,0,.15); }

.nd-ci__meta{ flex:2; min-width:300px; }
.nd-ci__item{ margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid #e0e0e0; }
.nd-ci__item:last-child{ border-bottom:none; }
.nd-ci__label{ font-weight:700; color:var(--nd-dark); display:block; margin-bottom:6px; }
.nd-ci__value{ color:var(--nd-muted); font-size:1.05rem; }
.nd-ci__value--accent{ color:var(--nd-green); font-weight:800; font-size:1.2rem; }

.nd-ci__candidates{ margin-top:10px; }

/* Camera modal */
.nd-ci__camera{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999; justify-content:center; align-items:center; }
.nd-ci__camera.visible{ display:flex; }
.nd-ci__camera-box{ background:#fff; padding:24px; border-radius:16px; width:90%; max-width:640px; text-align:center; }
.nd-ci__camera-box video{ width:100%; border-radius:10px; margin-bottom:16px; }
.nd-ci__camera-controls{ display:flex; justify-content:center; gap:12px; }

/* Responsive */
@media (max-width: 768px){
  .nd-ci__title{ font-size:2rem; }
  .nd-ci__btn{ width:100%; }
  .nd-ci__buttons{ flex-direction:column; }
}