/* ── FONTS ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=DM+Sans:wght@300;400;500&display=swap');

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --c-bg:        #0d1117;
  --c-surface:   #161b22;
  --c-surface2:  #1c2128;
  --c-border:    #30363d;
  --c-border2:   #21262d;
  --c-text:      #e6edf3;
  --c-text2:     #8b949e;
  --c-text3:     #484f58;
  --c-accent:    #2ea89e;
  --c-accent2:   #26d0c3;
  --c-gold:      #d4a843;
  --c-danger:    #e05c5c;
  --c-success:   #3fb950;
  --c-warn:      #d29922;
  --font-head:   'Syne', sans-serif;
  --font-body:   'DM Sans', sans-serif;
  --radius:      8px;
  --radius-lg:   14px;
  --shadow:      0 4px 24px rgba(0,0,0,0.4);
  --nav-h:       58px;
  --transition:  0.18s ease;
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; }

/* ── NAV ───────────────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  background: rgba(13,17,23,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border2);
}
.nav-inner {
  max-width: 1400px; margin: 0 auto;
  height: 100%; padding: 0 24px;
  display: flex; align-items: center; gap: 32px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: 1.2rem; font-weight: 700;
  color: var(--c-accent2); letter-spacing: -0.02em;
  flex-shrink: 0;
}
.nav-logo svg { color: var(--c-accent2); }
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-link {
  padding: 6px 14px; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 400; color: var(--c-text2);
  transition: color var(--transition), background var(--transition);
}
.nav-link:hover { color: var(--c-text); background: var(--c-surface2); }
.nav-link.active { color: var(--c-accent2); background: rgba(46,168,158,0.1); }
.nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-credits {
  font-family: var(--font-head); font-size: 0.875rem; font-weight: 600;
  color: var(--c-gold); padding: 4px 10px;
  background: rgba(212,168,67,0.1); border-radius: var(--radius);
  border: 1px solid rgba(212,168,67,0.2);
}
.lang-select {
  background: var(--c-surface2); border: 1px solid var(--c-border);
  color: var(--c-text2); border-radius: var(--radius);
  padding: 4px 8px; font-size: 0.8rem; cursor: pointer;
}
.lang-select:focus { outline: none; border-color: var(--c-accent); }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 500; border: none;
  transition: all var(--transition); white-space: nowrap;
}
.btn-primary {
  background: var(--c-accent); color: #fff;
}
.btn-primary:hover { background: var(--c-accent2); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(46,168,158,0.3); }
.btn-ghost {
  background: transparent; color: var(--c-text2);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 6px 16px; font-size: 0.875rem;
  transition: all var(--transition); display: inline-flex; align-items: center;
}
.btn-ghost:hover { border-color: var(--c-accent); color: var(--c-accent2); }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { background: #c44; }
.btn-sm { padding: 5px 12px; font-size: 0.8rem; }

/* ── FORMS ─────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 0.8rem; color: var(--c-text2); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.form-input, .form-select, .form-textarea {
  background: var(--c-surface2); border: 1px solid var(--c-border);
  color: var(--c-text); border-radius: var(--radius);
  padding: 10px 14px; font-size: 0.9rem; width: 100%;
  transition: border-color var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(46,168,158,0.1);
}
.form-input::placeholder { color: var(--c-text3); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-error { font-size: 0.8rem; color: var(--c-danger); }
.form-hint  { font-size: 0.78rem; color: var(--c-text3); }

/* ── CARDS ─────────────────────────────────────────────────── */
.card {
  background: var(--c-surface); border: 1px solid var(--c-border2);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover { border-color: var(--c-border); box-shadow: var(--shadow); }

/* ── BADGES ────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em;
}
.badge-teal    { background: rgba(46,168,158,0.15); color: var(--c-accent2); border: 1px solid rgba(46,168,158,0.2); }
.badge-gold    { background: rgba(212,168,67,0.15); color: var(--c-gold); border: 1px solid rgba(212,168,67,0.2); }
.badge-danger  { background: rgba(224,92,92,0.15); color: var(--c-danger); border: 1px solid rgba(224,92,92,0.2); }
.badge-neutral { background: var(--c-surface2); color: var(--c-text2); border: 1px solid var(--c-border); }
.badge-free    { background: rgba(63,185,80,0.15); color: var(--c-success); border: 1px solid rgba(63,185,80,0.2); }

/* ── STARS ─────────────────────────────────────────────────── */
.stars { display: inline-flex; gap: 1px; color: var(--c-gold); }
.stars-accuracy { color: var(--c-accent2); }

/* ── ALERTS ────────────────────────────────────────────────── */
.alert {
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 0.875rem; border: 1px solid transparent;
}
.alert-error   { background: rgba(224,92,92,0.1); border-color: rgba(224,92,92,0.3); color: var(--c-danger); }
.alert-success { background: rgba(63,185,80,0.1); border-color: rgba(63,185,80,0.3); color: var(--c-success); }
.alert-warn    { background: rgba(210,153,34,0.1); border-color: rgba(210,153,34,0.3); color: var(--c-warn); }

/* ── LOADING ───────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--c-border); border-top-color: var(--c-accent2);
  animation: spin 0.7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── PAGE WRAPPER ──────────────────────────────────────────── */
.page { padding-top: var(--nav-h); min-height: 100vh; }

/* ── UTILITY ───────────────────────────────────────────────── */
.text-muted  { color: var(--c-text2); }
.text-small  { font-size: 0.8rem; }
.text-accent { color: var(--c-accent2); }
.text-gold   { color: var(--c-gold); }
.text-danger { color: var(--c-danger); }
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-8       { gap: 8px; }
.gap-12      { gap: 12px; }
.gap-16      { gap: 16px; }
.mt-8        { margin-top: 8px; }
.mt-16       { margin-top: 16px; }
.mt-24       { margin-top: 24px; }
.hidden      { display: none !important; }