/* ================= CORE ================= */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Arial,system-ui,sans-serif;
  color:var(--text-main);
  background:#020617;
}

/* ================= VARIABLES ================= */
:root{
  --bg-1:#0b1220;
  --bg-2:#020617;
  --bg-3:#0e1628;
  --card-bg:rgba(15,23,42,.92);
  --primary:#22c55e;
  --primary-dark:#16a34a;
  --danger:#ef4444;
  --text-main:#e5e7eb;
  --text-muted:#9ca3af;
  --border-soft:#1e293b;
}

/* ================= BACKGROUND ================= */
.gradient-bg{
  min-height:100vh;
  background:linear-gradient(270deg,var(--bg-1),var(--bg-2),var(--bg-3));
  background-size:600% 600%;
  animation:bg 18s ease infinite;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}
@keyframes bg{
  0%{background-position:0%}
  50%{background-position:100%}
  100%{background-position:0%}
}

/* ================= CARD ================= */
.app-card{
  width:100%;
  max-width:1100px;
  background:var(--card-bg);
  border-radius:16px;
  padding:32px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}

/* ================= INTRO ================= */
.intro-screen{text-align:center}
.intro-screen.hide{opacity:0;transform:translateY(-10px);transition:.4s}
.intro-logo{
  max-width:120px;
  width:100%;
  height:auto;
  margin-bottom:16px;
}

/* ================= STICKY STATUS ================= */
.status-sticky{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(2,6,23,.95);
  padding:12px 16px;
  border-radius:12px;
  margin-bottom:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.timer-group{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--text-muted);
}

/* ================= PROGRESS ================= */
.progress{
  height:6px;
  background:#020617;
  border-radius:999px;
  margin-bottom:10px;
}
#progressBar{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--primary),#4ade80);
  border-radius:999px;
  transition:width .6s ease;
}

/* ================= TIMERS ================= */
.timer{
  color:var(--danger);
  font-weight:700;
}
.timer.urgent{animation:pulse 1s infinite}
@keyframes pulse{
  0%{opacity:1}
  50%{opacity:.6}
  100%{opacity:1}
}

/* ================= INPUTS ================= */
label{display:block;margin-top:18px;margin-bottom:6px;font-size:13px;color:var(--text-muted)}
input,textarea{
  width:100%;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background:#020617;
  color:var(--text-main);
}
textarea{resize:vertical}

/* ================= BUTTON ================= */
button,.btn{
  margin-top:28px;
  width:100%;
  padding:14px;
  border-radius:14px;
  border:none;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#022c22;
  font-weight:700;
  cursor:pointer;
}
button:disabled{opacity:.5}

/* ================= LOGS ================= */
.log-block{
  margin-top:24px;
  padding:18px;
  border:1px solid var(--border-soft);
  border-radius:14px;
  background:rgba(2,6,23,.45);
}
.log-encode{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.log-reference{font-size:13px;color:var(--text-muted);margin-bottom:12px}
.mono{font-family:monospace}

/* ================= FIELD GUIDE ================= */
.log-guide{
  margin:20px 0 28px;
  padding:16px;
  border:1px dashed var(--border-soft);
  border-radius:14px;
  background:rgba(2,6,23,.35);
  font-size:13px;
}
.log-guide strong{cursor:pointer;color:var(--text-main)}
.hidden{display:none}

/* ================= PSYCH ================= */
.section-wrap{position:relative;margin-top:40px}
.psych-overlay{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  z-index:5;
}
.overlay-unlock{opacity:0;transform:scale(.96)}
.unlock-badge{
  position:absolute;
  top:16px;
  right:16px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  opacity:0;
}
.badge-show{opacity:1}

/* ================= FOOTER ================= */
footer{
  margin-top:40px;
  padding-top:16px;
  border-top:1px solid var(--border-soft);
  text-align:center;
  font-size:12px;
  color:#6b7280;
}
/* ================= RESULT BADGES ================= */
.badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.3px;
}

.badge-strong{
  background:rgba(34,197,94,.15);
  color:#22c55e;
  border:1px solid rgba(34,197,94,.4);
}

.badge-review{
  background:rgba(245,158,11,.15);
  color:#f59e0b;
  border:1px solid rgba(245,158,11,.4);
}

.badge-reject{
  background:rgba(239,68,68,.15);
  color:#ef4444;
  border:1px solid rgba(239,68,68,.4);
}