/* COLORS */
:root{
  --light-bg: linear-gradient(135deg,#2b5876,#4e4376);
  --dark-bg: linear-gradient(135deg,#0f1724,#1f2937);
  --card-light: rgba(255,255,255,0.06);
  --card-dark: rgba(255,255,255,0.03);
  --text-light: #fff;
  --muted: rgba(255,255,255,0.75);
  --accent: #00eaff;
  --radius: 18px;
}

/* BASE */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  transition: background 300ms, color 300ms;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* THEMES */
body.light{background:var(--light-bg);color:var(--text-light)}
body.light .card{background:var(--card-light); color:var(--text-light)}
body.dark{background:var(--dark-bg); color:var(--text-light)}
body.dark .card{background:var(--card-dark); color:var(--text-light)}

/* TOPBAR */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  max-width:1100px;
  margin: 12px auto 0;
}
.title{font-weight:700;font-size:18px}
.controls{display:flex;align-items:center;gap:8px}
.controls button{
  width:44px;height:44px;border-radius:12px;border:none;background:var(--accent);
  color:var(--text-light);cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;transition:transform .18s;
}
.controls button:active{transform:scale(.96)}

/* LAYOUT */
.container{
  display:flex;
  gap:18px;
  max-width:1100px;
  margin: 18px auto 84px;
  padding: 0 14px;
}
.left-column{flex:1;min-width:280px}
.right-column{width:360px;min-width:260px}

/* CARD */
.card{
  border-radius:var(--radius);
  padding:14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  margin-bottom:16px;
  backdrop-filter: blur(6px);
}

/* UPLOAD AREA */
.upload-area{
  border-radius:14px;
  padding:14px;
  border:1px dashed rgba(255,255,255,0.06);
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  justify-content:center;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.upload-area.dragover{
  transform: translateY(-4px);
  border-color: rgba(0,234,255,0.85);
  box-shadow: 0 8px 30px rgba(0,234,255,0.06);
}
.upload-area .hint{font-size:13px;color:var(--muted)}

/* PREVIEW */
.preview{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:10px;
}
.preview-container{position:relative; display:inline-block}
.preview img{
  width:400px;  /* smaller image */
  max-width:80vw;
  height:auto;
  border-radius:14px;
  border:3px solid rgba(0,0,0,0.12);
  display:block;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

/* FACE BBOX overlay */
.face-box{
  position:absolute;
  border:3px solid var(--accent);
  border-radius:8px;
  pointer-events:none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

/* IMAGE RESULT POPUP */
.result-popup{
  position:absolute;
  top:12px; right:12px;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;font-size:14px;
  opacity:0; transform:translateY(-8px) scale(.98);
  transition:all .28s cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
  backdrop-filter: blur(6px);
}
.result-popup.show{opacity:1; transform:translateY(0) scale(1)}
.result-success{background: rgba(0,255,0,0.12); color:#00ff88; border:1px solid rgba(0,255,0,0.18)}
.result-fail{background: rgba(255,0,0,0.12); color:#ff4b4b; border:1px solid rgba(255,0,0,0.18)}

/* BUTTONS */
.buttons{display:flex;gap:12px;margin-top:8px;justify-content:center}
button.primary{
  background:linear-gradient(45deg,#0f9b0f,#00b4db);
  color:#fff;padding:10px 14px;border-radius:14px;border:none;cursor:pointer;font-weight:700;
  box-shadow: 0 8px 18px rgba(0,0,0,0.3);
}
button.ghost{
  background:#e42a2a; /* red solid background */
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:700;
}
button.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* LOADING SPINNER overlay */
.spinner-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.18);
  z-index:120;
  pointer-events:none;
  opacity:0; transition:opacity .18s;
}
.spinner-overlay.show{opacity:1;pointer-events:auto}
.spinner{
  width:78px;height:78px;border-radius:30px;background:rgba(255,255,255,0.03);
  display:flex;align-items:center;justify-content:center;box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.dot{
  width:12px;height:12px;border-radius:50%;background:var(--accent);margin:6px;
  animation: jump 0.9s infinite;
}
.dot:nth-child(2){animation-delay: 0.15s}
.dot:nth-child(3){animation-delay: 0.3s}
@keyframes jump{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}

/* HISTORY */
.history-list{max-height:380px;overflow:auto;padding:6px}
.history-row{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;cursor:default}
.history-meta{flex:1}
.history-meta .time{font-size:12px;color:var(--muted)}
.history-meta .msg{font-weight:700;}

/* RAW OUTPUT */
#output{background:#000;padding:10px;border-radius:10px;color:#0f0;min-height:120px;overflow:auto;font-family:monospace;font-size:12px}

/* BOTTOM NAV */
.bottom-nav{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:18px;z-index:100;display:flex;gap:12px;padding:10px 16px;background:#222;
  border-radius:20px;
}

/* RESPONSIVE */
@media (max-width: 820px){
  .container{flex-direction:column;align-items:center;margin-bottom:120px}
  .left-column,.right-column{width:100%;max-width:420px}
  .preview img{width:300px}
  .bottom-nav{width:calc(100% - 40px);max-width:560px}
}