@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

/* ========================
   DESIGN TOKENS
======================== */
:root {
  --bg-base:      #070b14;
  --bg-surface:   #0f1623;
  --bg-surface-2: #161e2e;
  --bg-surface-3: #1e2a3d;
  --border:       rgba(255,255,255,0.07);
  --border-hover: rgba(255,255,255,0.13);
  --border-accent:rgba(45,212,191,0.3);

  --accent:       #2dd4bf;
  --accent-dark:  #0d9488;
  --accent-glow:  rgba(45,212,191,0.15);
  --accent-2:     #818cf8;
  --accent-2-glow:rgba(129,140,248,0.15);

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;

  --success: #4ade80;
  --warning: #fbbf24;
  --danger:  #f87171;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --transition:      0.2s ease;
  --transition-slow: 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* ========================
   RESET
======================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Inter', system-ui, sans-serif;
  background:var(--bg-base);
  color:var(--text-primary);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
}
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; }

/* ========================
   TYPOGRAPHY
======================== */
h1, h2, h3 {
  font-family:'DM Serif Display', Georgia, serif;
  line-height:1.2;
  letter-spacing:-0.01em;
}
h1 { font-size:clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size:clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size:clamp(1.2rem, 2vw, 1.6rem); }
p  { line-height:1.75; }

/* ========================
   LAYOUT HELPERS
======================== */
.container    { max-width:1100px; margin:0 auto; padding:0 2rem; }
.container-sm { max-width:740px;  margin:0 auto; padding:0 2rem; }
.container-xs { max-width:560px;  margin:0 auto; padding:0 2rem; }
.flex         { display:flex; }
.flex-col     { display:flex; flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-sm { gap:0.5rem; }
.gap-md { gap:1rem; }
.gap-lg { gap:1.5rem; }
.text-center { text-align:center; }
.text-accent  { color:var(--accent); }
.text-muted   { color:var(--text-secondary); }
.text-danger  { color:var(--danger); }
.text-success { color:var(--success); }
.mt-sm { margin-top:0.5rem; }
.mt-md { margin-top:1rem; }
.mt-lg { margin-top:1.5rem; }
.mt-xl { margin-top:2rem; }

/* ========================
   NAV
======================== */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:1.1rem 2rem;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(7,11,20,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-logo {
  font-family:'DM Serif Display', serif;
  font-size:1.5rem; font-weight:400;
  color:var(--text-primary);
  display:flex; align-items:center; gap:0.5rem;
}
.nav-logo img { width:32px; height:32px; object-fit:contain; }
.nav-logo span { color:var(--accent); }
.nav-actions { display:flex; align-items:center; gap:1rem; }
.nav-link {
  color:var(--text-secondary); font-size:0.9rem; font-weight:500;
  transition:color var(--transition);
}
.nav-link:hover { color:var(--text-primary); }

/* ========================
   BUTTONS
======================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:0.5rem; padding:0.75rem 1.75rem;
  border:none; border-radius:var(--radius-full);
  font-size:0.95rem; font-weight:600;
  transition:all var(--transition);
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn-primary {
  background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  color:#000;
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 32px var(--accent-glow);
}
.btn-primary:active { transform:translateY(0); }
.btn-ghost {
  background:transparent; color:var(--text-secondary);
  border:1px solid var(--border);
}
.btn-ghost:hover {
  border-color:var(--border-accent); color:var(--text-primary);
  background:rgba(45,212,191,0.05);
}
.btn-danger {
  background:rgba(248,113,113,0.1); color:var(--danger);
  border:1px solid rgba(248,113,113,0.2);
}
.btn-danger:hover { background:rgba(248,113,113,0.2); }
.btn-lg  { padding:1rem 2.5rem; font-size:1.05rem; }
.btn-sm  { padding:0.5rem 1.2rem; font-size:0.85rem; }
.btn-full { width:100%; }
.btn:disabled { opacity:0.45; pointer-events:none; }

/* ========================
   CARDS
======================== */
.card {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  transition:border-color var(--transition);
}
.card:hover { border-color:var(--border-hover); }
.card-glass {
  background:rgba(15,22,35,0.6);
  backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.card-accent {
  border-color:var(--border-accent);
  background:linear-gradient(135deg, rgba(45,212,191,0.05), rgba(15,22,35,0.9));
}

/* ========================
   PROGRESS BAR
======================== */
.progress-bar {
  width:100%; height:4px;
  background:var(--bg-surface-3);
  border-radius:var(--radius-full); overflow:hidden;
}
.progress-fill {
  height:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:var(--radius-full);
  transition:width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.progress-fill.thin { height:3px; }

/* ========================
   FORM ELEMENTS
======================== */
.form-group { display:flex; flex-direction:column; gap:0.5rem; }
.form-label {
  font-size:0.875rem; font-weight:600;
  color:var(--text-secondary); letter-spacing:0.02em; text-transform:uppercase;
}
.form-input {
  background:var(--bg-surface-2); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:0.85rem 1.1rem;
  color:var(--text-primary); font-size:1rem;
  transition:border-color var(--transition), box-shadow var(--transition);
  outline:none;
}
.form-input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.form-input::placeholder { color:var(--text-muted); }
.form-select {
  background:var(--bg-surface-2); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:0.85rem 1.1rem;
  color:var(--text-primary); font-size:1rem; outline:none;
  transition:border-color var(--transition);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
  padding-right:2.5rem;
}
.form-select:focus { border-color:var(--accent); }

/* ========================
   BADGE / PILL
======================== */
.badge {
  display:inline-flex; align-items:center; gap:0.3rem;
  padding:0.3rem 0.75rem;
  border-radius:var(--radius-full);
  font-size:0.78rem; font-weight:600; letter-spacing:0.03em;
}
.badge-teal   { background:rgba(45,212,191,0.1);  color:var(--accent); border:1px solid rgba(45,212,191,0.2); }
.badge-purple { background:rgba(129,140,248,0.1); color:var(--accent-2); border:1px solid rgba(129,140,248,0.2); }
.alert-info    { border-color:rgba(96,165,250,0.2); background:rgba(96,165,250,0.06); color:rgba(96,165,250,0.9); }
.alert-success { border-color:rgba(74,222,128,0.2); background:rgba(74,222,128,0.06); color:rgba(74,222,128,0.9); }
.alert-warning { border-color:rgba(251,191,36,0.2); background:rgba(251,191,36,0.06); color:rgba(251,191,36,0.9); }
.alert-danger  { border-color:rgba(248,113,113,0.25); background:rgba(248,113,113,0.06); color:rgba(248,113,113,0.9); }

/* ========================
   DISCLAIMER / ALERT BANNERS
======================== */
.alert {
  display:flex; gap:0.75rem; align-items:flex-start;
  padding:1rem 1.25rem; border-radius:var(--radius-md);
  font-size:0.875rem; line-height:1.6;
}
.alert-warning {
  background:rgba(251,191,36,0.07);
  border:1px solid rgba(251,191,36,0.2);
  color:#fbbf24;
}
.alert-danger {
  background:rgba(248,113,113,0.07);
  border:1px solid rgba(248,113,113,0.25);
  color:var(--danger);
}
.alert-info {
  background:rgba(45,212,191,0.07);
  border:1px solid rgba(45,212,191,0.2);
  color:var(--accent);
}
.alert-icon { font-size:1.1rem; flex-shrink:0; margin-top:0.05rem; }

/* ========================
   SCORE METER
======================== */
.score-meter {
  display:flex; flex-direction:column; gap:0.4rem;
}
.score-meter-label {
  display:flex; justify-content:space-between;
  font-size:0.85rem; font-weight:500;
}
.score-meter-bar {
  height:8px; background:var(--bg-surface-3);
  border-radius:var(--radius-full); overflow:hidden;
}
.score-meter-fill {
  height:100%; border-radius:var(--radius-full);
  transition:width 1.2s cubic-bezier(0.4,0,0.2,1);
}

/* ========================
   SECTION DIVIDERS
======================== */
.section-label {
  display:flex; align-items:center; gap:0.75rem;
  margin-bottom:1.5rem;
}
.section-label-line {
  flex:1; height:1px; background:var(--border);
}
.section-label-text {
  font-size:0.78rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-muted);
  white-space:nowrap;
}

/* ========================
   ANIMATIONS
======================== */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes pulse   { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
@keyframes spin    { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
@keyframes breathe {
  0%,100% { transform:scale(1); opacity:0.6; }
  50%     { transform:scale(1.08); opacity:1; }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-10px); }
}
@keyframes gradientMove {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

.anim-fade-up { animation:fadeUp 0.6s ease both; }
.anim-fade-in { animation:fadeIn 0.5s ease both; }
.delay-1 { animation-delay:0.1s; }
.delay-2 { animation-delay:0.2s; }
.delay-3 { animation-delay:0.3s; }
.delay-4 { animation-delay:0.4s; }
.delay-5 { animation-delay:0.5s; }

/* ========================
   SKELETON LOADER
======================== */
.skeleton {
  background:linear-gradient(90deg, var(--bg-surface-2) 25%, var(--bg-surface-3) 50%, var(--bg-surface-2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius-sm);
}

/* ========================
   SCROLLBAR
======================== */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg-base); }
::-webkit-scrollbar-thumb { background:var(--bg-surface-3); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* ========================
   MODAL
======================== */
.modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem; opacity:0; pointer-events:none;
  transition:opacity var(--transition-slow);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:2rem;
  max-width:480px; width:100%;
  transform:translateY(20px);
  transition:transform var(--transition-slow);
}
.modal-overlay.open .modal { transform:translateY(0); }

/* ========================
   TOOLTIP
======================== */
.tooltip-wrap { position:relative; display:inline-flex; }
.tooltip {
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%); white-space:nowrap;
  background:var(--bg-surface-3); color:var(--text-primary);
  font-size:0.78rem; padding:0.3rem 0.7rem;
  border-radius:var(--radius-sm); pointer-events:none;
  opacity:0; transition:opacity var(--transition);
}
.tooltip-wrap:hover .tooltip { opacity:1; }

/* ========================
   RESPONSIVE
======================== */
@media (max-width:768px) {
  .container, .container-sm, .container-xs { padding:0 1.25rem; }
  .nav { padding:1rem 1.25rem; }
  .btn-lg { padding:0.9rem 2rem; }
  .hide-mobile { display:none !important; }
}
@media (max-width:480px) {
  h1 { font-size:2rem; }
  h2 { font-size:1.5rem; }
}