/* --- RESET & BASICS --- */
:root {
  --bg-color: #080c14;
  --card-bg: rgba(22, 27, 34, 0.85);
  --border-color: #30363d;
  --accent-color: #58a6ff;
  --text-primary: #c9d1d9;
  --text-secondary: #8b949e;
  --success: #2ea043;
  --danger: #da3633;
  --purple: #bc8cff;
  --gold: #f2cc60;
  --font-main: 'Inter', sans-serif;
  --font-code: 'JetBrains Mono', monospace;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-color);
  color: var(--text-primary);
  margin: 0; padding: 0;
  min-height: 100vh; overflow-x: hidden;
  position: relative;
}

/* --- CANVAS BACKGROUND --- */
#bulge-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -1;
  pointer-events: none;
}

/* --- GLASSMORPHIC BRAND PILLS --- */
.brand-pill {
  position: fixed;
  padding: 10px 18px;
  background: rgba(22, 27, 34, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.2s ease-out;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.pill-google {
  top: 15%; left: 4%;
  color: #ea4335;
  border: 1px solid rgba(234, 67, 53, 0.35);
  animation: floatSlow 6s ease-in-out infinite;
}

.pill-meta {
  top: 48%; right: 4%;
  color: #0081fb;
  border: 1px solid rgba(0, 129, 251, 0.35);
  animation: floatSlow 7s ease-in-out infinite 1s;
}

.pill-github {
  bottom: 22%; left: 5%;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  animation: floatSlow 8s ease-in-out infinite 2s;
}

.pill-openai {
  top: 18%; right: 5%;
  color: #10a37f;
  border: 1px solid rgba(16, 163, 127, 0.35);
  animation: floatSlow 6.5s ease-in-out infinite 0.5s;
}

.pill-claude {
  top: 32%; right: 6%;
  color: #d97706;
  border: 1px solid rgba(217, 119, 6, 0.35);
  animation: floatSlow 7.5s ease-in-out infinite 1.5s;
}

.pill-voc {
  bottom: 35%; left: 4%;
  color: #bc8cff;
  border: 1px solid rgba(188, 140, 255, 0.35);
  animation: floatSlow 8.5s ease-in-out infinite 2.5s;
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}

/* --- HEADER --- */
.brand-header {
  background: rgba(22, 27, 34, 0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color); padding: 15px 0;
  position: sticky; top: 0; z-index: 100;
}
.logo-container {
  max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 15px; padding: 0 20px;
}
.brand-logo { height: 45px; width: auto; }
.brand-text { display: flex; flex-direction: column; }
.brand-title { font-size: 22px; font-weight: 800; margin: 0; color: #fff; }
.brand-subtitle { font-size: 12px; color: var(--text-secondary); font-family: var(--font-code); }

/* --- CONTAINER --- */
.container { max-width: 800px; margin: 40px auto; padding: 0 20px; position: relative; z-index: 10; perspective: 1200px; }

/* --- DYNAMIC 3D TILT BLOCK WITH RADIANT BACKLIGHT --- */
.search-panel, .card {
  position: relative;
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(88, 166, 255, 0.2);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transform-style: preserve-3d;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.search-panel {
  text-align: center;
  margin-bottom: 30px;
}

/* Backlight Aura Effect */
.search-panel::before, .card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: radial-gradient(
    450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(88, 166, 255, 0.22),
    rgba(46, 160, 67, 0.12) 40%,
    transparent 80%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.search-panel:hover::before, .card:hover::before {
  opacity: 1;
}

.search-panel:hover, .card:hover {
  border-color: rgba(88, 166, 255, 0.45);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(88, 166, 255, 0.25);
}

.panel-title { color: #fff; margin-top: 0; font-weight: 700; }
.panel-desc { color: var(--text-secondary); font-size: 14px; margin-bottom: 25px; }

/* --- INPUTS --- */
.input-group { position: relative; margin-bottom: 20px; }
.input-icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-secondary);
}
input[type="text"] {
  width: 100%; background: rgba(13, 17, 23, 0.9); border: 1px solid var(--border-color);
  color: #fff; padding: 14px 14px 14px 45px; border-radius: 8px;
  font-family: var(--font-code); font-size: 15px; box-sizing: border-box;
  transition: border-color 0.25s, box-shadow 0.25s;
}
input[type="text"]:focus { 
  border-color: var(--accent-color); 
  outline: none; 
  box-shadow: 0 0 15px rgba(88, 166, 255, 0.25);
}

/* --- CAPTCHA --- */
.captcha-wrapper { display: flex; gap: 10px; margin-bottom: 20px; }
.captcha-preview {
  background: #21262d; color: var(--text-primary); font-family: 'Courier New', monospace;
  font-weight: bold; letter-spacing: 5px; padding: 10px; border-radius: 6px; flex: 1;
  text-align: center; border: 1px dashed var(--border-color); text-decoration: line-through; opacity: 0.8;
}
.refresh-btn { background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-secondary); width: 45px; }
#captcha-input { padding-left: 15px; text-align: center; }

/* --- NEON GLASSMORPHIC METALLIC "VERIFY RECORD" BUTTON --- */
button { cursor: pointer; border-radius: 8px; font-family: var(--font-main); font-weight: 600; }

.verify-btn {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, rgba(31, 111, 235, 0.35) 0%, rgba(35, 134, 54, 0.45) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(88, 166, 255, 0.6);
  color: #ffffff;
  padding: 16px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 10px;
  box-shadow: 
    0 4px 20px rgba(31, 111, 235, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -2px 5px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Sweeping Laser Light Hover Flare */
.verify-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 70%
  );
  transform: rotate(25deg);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.verify-btn:hover::after {
  transform: rotate(25deg) translate(80%, 80%);
}

.verify-btn:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: #3fb950;
  background: linear-gradient(135deg, rgba(31, 111, 235, 0.55) 0%, rgba(46, 160, 67, 0.65) 100%);
  box-shadow: 
    0 10px 30px rgba(63, 185, 80, 0.45),
    0 0 40px rgba(31, 111, 235, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

.verify-btn:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 4px 15px rgba(35, 134, 54, 0.4);
}

/* --- RESULT CARD --- */
#result { display: flex; flex-direction: column; gap: 20px; }

.card {
  animation: slideUp 0.4s ease-out; position: relative; overflow: hidden;
}
.card::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--accent-color));
}
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.card img {
  width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--border-color);
  margin: 0 auto 15px; display: block; object-fit: cover;
}
.card h3 { color: #fff; text-align: center; margin: 0 0 5px; }
.card h4 { color: var(--text-secondary); font-size: 14px; text-align: center; margin-top: 0; font-weight: 400; }

.card p {
  margin: 8px 0; display: flex; justify-content: space-between;
  border-bottom: 1px solid rgba(48, 54, 61, 0.5); padding-bottom: 8px; font-size: 14px;
}

/* --- ACTION BUTTONS --- */
.action-buttons { display: flex; gap: 10px; margin-top: 20px; }
.btn-view, .btn-download, .btn-linkedin {
  border: none; padding: 12px; color: #fff; flex: 1; border-radius: 6px; font-size: 14px;
}
.btn-view { background: #3fb950; }
.btn-download { background: #1f6feb; }
.btn-linkedin { background: #0a66c2; width: 100%; margin-top: 10px; display: flex; justify-content: center; align-items: center; gap: 8px; }

/* --- VERIFIED SUCCESS POP-UP MODAL STYLES --- */
.success-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(8, 12, 20, 0.85);
  backdrop-filter: blur(10px);
  z-index: 100000;
  align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.success-modal-overlay.active { opacity: 1; }

.success-modal-box {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 16px;
  padding: 35px 25px;
  width: 90%; max-width: 380px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(46, 160, 67, 0.2);
  transform: scale(0.8);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.success-modal-overlay.active .success-modal-box { transform: scale(1); }

.success-checkmark-wrapper {
  position: relative;
  width: 80px; height: 80px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
}

.success-circle {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: rgba(46, 160, 67, 0.15);
  border: 2px solid #2ea043;
  animation: pulseGlow 1.8s infinite;
}

.success-check-icon {
  font-size: 38px; color: #3fb950; z-index: 2;
  animation: checkPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(46, 160, 67, 0.6); }
  70% { box-shadow: 0 0 0 18px rgba(46, 160, 67, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 160, 67, 0); }
}

@keyframes checkPop {
  0% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

.success-modal-title { color: #ffffff; font-size: 22px; font-weight: 800; margin: 0 0 8px 0; }
.success-modal-desc { color: #8b949e; font-size: 14px; margin: 0 0 25px 0; line-height: 1.4; }

.success-modal-btn {
  width: 100%;
  background: linear-gradient(135deg, #238636, #2ea043);
  color: #ffffff; border: none; padding: 12px; border-radius: 8px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 15px rgba(46, 160, 67, 0.3);
  transition: transform 0.2s, filter 0.2s;
}

.success-modal-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* UTILS */
.spinner {
  border: 4px solid #21262d; border-top: 4px solid var(--accent-color);
  border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 30px auto;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

.toast {
  visibility: hidden; min-width: 250px; background-color: #333; color: #fff;
  text-align: center; border-radius: 4px; padding: 16px; position: fixed; z-index: 999;
  left: 50%; bottom: 30px; transform: translateX(-50%); opacity: 0; transition: 0.5s;
}
.toast.show { visibility: visible; opacity: 1; bottom: 50px; }

/* MOBILE RESPONSIVENESS */
@media (max-width: 600px) {
  .action-buttons { flex-direction: column; }
  .card p { flex-direction: column; gap: 4px; border-bottom: none; margin-bottom: 12px; }
  .card p span { color: #fff; }
  .brand-pill { display: none; }
}