/* ── Lingo+ — alinhado com Lingo Brand Guidelines 2026 ─────────────────── */

:root {
  /* Brand primaries (oficial) */
  --p:  #7C3AED;   /* roxo — cor principal */
  --cy: #00B4CC;   /* ciano — secundária */
  --go: #C9971A;   /* ouro — acento */

  /* Ink */
  --ink:  #0F172A; /* tinta — texto principal */
  --ink2: #1E293B; /* footer e dark surfaces */

  /* Surfaces (tema claro) */
  --bg:      #FFFFFF; /* fundo principal */
  --surface: #F8FAFC; /* superfície / seções alt */
  --border:  #E2E8F0; /* bordas e divisores */
  --gray:    #64748B; /* texto secundário */

  /* Tints (cards em destaque) */
  --p-tint:  #EDE9FE;
  --cy-tint: #E0F7FA;
  --go-tint: #FEF3C7;

  /* Semantic */
  --ok:    #16A34A;
  --duelo: #EA580C;
  --error: #DC2626;

  /* Section colors (Lingo+ specific) */
  --communication: var(--cy);
  --grammar:       var(--p);
  --vocabulary:    var(--ok);

  /* Top-bar gradient (identidade) */
  --gradient: linear-gradient(90deg, var(--p), var(--cy), var(--go));

  /* Type stack */
  --fd:    'Syne', system-ui, sans-serif;          /* display / títulos */
  --fb:    'DM Sans', system-ui, sans-serif;       /* body */
  --fm:    'JetBrains Mono', monospace;            /* labels / mono */
  --flogo: 'Comfortaa', sans-serif;                /* logo */

  /* Aliases pra retrocompat */
  --font-sans:   var(--fb);
  --font-serif:  var(--fd);
  --font-mono:   var(--fm);
  --font-logo:   var(--flogo);

  /* Radius tokens (das guidelines) */
  --rs:  8px;
  --rs2: 14px;
  --rs3: 20px;
  --pill: 40px;

  /* Aliases */
  --radius:      var(--rs);
  --radius-md:   var(--rs2);
  --radius-lg:   var(--rs3);
  --radius-pill: var(--pill);

  /* Compat com classes existentes */
  --fg:      var(--ink);
  --muted:   var(--gray);
  --muted-2: #94A3B8;
  --card:    var(--bg);
  --surface-2: var(--surface);
  --rule:    var(--border);
  --primary: var(--p);
  --secondary: var(--cy);
  --accent:  var(--go);
  --pending: var(--gray);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--fb);
  font-size: 16px; font-weight: 400; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--p); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Headings — Syne 800 */
h1, h2, h3, h4 {
  font-family: var(--fd); font-weight: 800; line-height: 1.1;
  color: var(--ink); letter-spacing: -0.02em;
}
h1 { font-size: clamp(36px, 4.2vw, 56px); margin: 0 0 .5rem; }
h2 { font-size: clamp(26px, 3.2vw, 40px); margin: 2rem 0 1rem; }
h3 { font-size: 1.25rem; margin: 0; letter-spacing: -0.01em; }
h4 { font-size: 1rem; }

.muted { color: var(--gray); }
.small { font-size: 0.875rem; }
.center { text-align: center; }
.mono { font-family: var(--fm); }
code {
  font-family: var(--fm); font-size: 0.875em;
  background: var(--surface); padding: .1em .35em; border-radius: 6px;
}

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Top gradient bar — fixo 4px no topo */
.gradient-bar { height: 4px; background: var(--gradient); }

/* ── Top bar ────────────────────────────────────────────────────────── */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.topbar .logo {
  font-family: var(--flogo); font-size: 1.5rem; font-weight: 700;
  color: var(--ink); text-decoration: none; letter-spacing: -0.02em;
}
.topbar .logo .plus { color: var(--p); }
.topbar nav { display: flex; gap: 1.25rem; align-items: center; }
.topbar nav a {
  color: var(--ink); font-weight: 500; font-size: 0.9375rem;
}
.topbar nav a.admin-link { color: var(--go); }
.topbar .link-btn {
  background: none; border: none; color: var(--ink); cursor: pointer; font: inherit; padding: 0;
}

/* ── Container ──────────────────────────────────────────────────────── */

.container { max-width: 1140px; margin: 0 auto; padding: 80px 5vw; }
@media (max-width: 720px) {
  .container { padding: 32px 5vw 64px; }
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .75rem 1.5rem;
  border-radius: var(--pill); font-weight: 600; cursor: pointer;
  border: none; font-family: var(--fb); font-size: 1rem;
  text-decoration: none;
  transition: background .15s, transform .15s, opacity .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

/* Primário: preto/tinta com hover roxo (das guidelines) */
.btn-primary { background: var(--ink); color: #FFF; }
.btn-primary:hover { background: var(--p); }
.btn-primary:disabled { opacity: .35; cursor: not-allowed; transform: none; background: var(--ink); }

/* Roxo: CTAs de IA Intérprete (no caso de Lingo+, usado pra ações premium) */
.btn-roxo { background: var(--p); color: #FFF; }
.btn-roxo:hover { opacity: .9; }

/* Ciano: CTAs secundários */
.btn-ciano { background: var(--cy); color: #FFF; }
.btn-ciano:hover { opacity: .9; }

/* Outline roxo */
.btn-outline { background: transparent; color: var(--p); border: 1.5px solid var(--p); }
.btn-outline:hover { background: var(--p); color: #FFF; }

/* Ghost (low-emphasis) */
.btn-ghost {
  background: var(--bg); color: var(--ink); border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface); }

.btn-lg { padding: 1rem 1.75rem; font-size: 1.0625rem; }
.btn-sm { padding: .45rem .9rem; font-size: 0.875rem; }

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero { text-align: center; padding: 2rem 0 3rem; }
.hero h1 { font-size: clamp(36px, 5vw, 64px); }
.hero .lede {
  font-size: 1.125rem; color: var(--gray);
  max-width: 600px; margin: 1rem auto 2rem;
}
.hero .btn + .btn { margin-left: .5rem; }

.lede { font-size: 1.125rem; color: var(--gray); }

/* ── Cards ──────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px; margin-top: 1rem;
}
.card {
  display: block; padding: 1.5rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--rs3); color: var(--ink); text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.card:hover { border-color: var(--p); }
.card h3 { margin: .5rem 0; }
.card .price { font-weight: 700; color: var(--p); margin-top: 1rem; font-family: var(--fd); }
.hover-elevate { transition: transform .15s, box-shadow .15s, border-color .15s; }
.hover-elevate:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  text-decoration: none; border-color: var(--p);
}

/* Badge (pill 40px) */
.badge {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .25rem .75rem;
  background: var(--p-tint); color: var(--p);
  border-radius: var(--pill);
  font-size: 11px; font-weight: 700;
  font-family: var(--fm); text-transform: uppercase; letter-spacing: .05em;
}
.badge.status-ok        { background: rgba(22,163,74,.1);   color: var(--ok); }
.badge.status-error     { background: rgba(220,38,38,.1);   color: var(--error); }
.badge.status-pending   { background: rgba(100,116,139,.12); color: var(--gray); }
.badge.status-published { background: rgba(22,163,74,.1);   color: var(--ok); }
.badge.status-draft     { background: rgba(100,116,139,.12); color: var(--gray); }
.badge.status-archived  { background: rgba(220,38,38,.1);   color: var(--error); }

/* ── Forms ──────────────────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: 1rem; max-width: 480px; }
.form label { display: flex; flex-direction: column; gap: .4rem; }
.form label > span:first-child {
  font-size: 0.8125rem; font-weight: 500; color: var(--ink);
  font-family: var(--fb);
}
.form input, .form select, .form textarea {
  padding: .75rem .9rem; border-radius: var(--rs);
  border: 1px solid var(--border); background: var(--bg); color: var(--ink);
  font: inherit; font-family: var(--fb);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--p);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}
.form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; max-width: none;
}
.form-grid label { max-width: none; }

.auth-box { max-width: 420px; margin: 2rem auto; }
.upload-form { max-width: none; }

/* ── Alerts ─────────────────────────────────────────────────────────── */

.alert {
  padding: .85rem 1rem; border-radius: var(--rs);
  margin-bottom: 1rem; font-size: 0.875rem;
}
.alert-error { background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.25); color: #991B1B; }
.alert-ok    { background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.25); color: #15803D; }

/* ── Dashboard ──────────────────────────────────────────────────────── */

.dashboard h1 { margin-bottom: 1.5rem; }
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.stat-card {
  background: var(--bg); border: 1px solid var(--border);
  padding: 1.25rem; border-radius: var(--rs3);
  display: flex; flex-direction: column;
}
.stat-label { font-size: 0.8125rem; color: var(--gray); font-family: var(--fm); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.stat-value { font-size: 2.25rem; font-weight: 800; font-family: var(--fd); margin-top: .25rem; letter-spacing: -0.02em; }
.stat-sub   { font-size: 0.875rem; color: var(--gray); margin-top: .25rem; }

.empty-state {
  text-align: center; padding: 3rem 1rem;
  background: var(--bg); border-radius: var(--rs3); border: 1px dashed var(--border);
}

.progress-bar {
  width: 100%; height: 6px; background: var(--surface);
  border-radius: var(--pill); overflow: hidden; margin-top: .5rem;
}
.progress-bar.large { height: 10px; }
.progress-fill { height: 100%; background: var(--gradient); transition: width .3s; }

/* ── Course detail (student) ────────────────────────────────────────── */

.back-link { display: inline-block; font-size: 0.875rem; color: var(--gray); margin-bottom: .75rem; }
.back-link:hover { color: var(--p); text-decoration: none; }
.course-header { margin-bottom: 2rem; }
.overall-progress { margin-top: 1rem; }
.unit { margin-bottom: 2rem; }
.unit-header { margin-bottom: 1rem; }
.unit-num {
  display: inline-block; font-family: var(--fm); font-size: 11px;
  font-weight: 700; color: var(--go); text-transform: uppercase; letter-spacing: .08em;
}
.section-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem;
}
.section-card {
  display: flex; flex-direction: column; gap: .4rem; padding: 1rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--rs2); color: var(--ink); text-decoration: none;
  transition: transform .15s, border-color .15s;
}
.section-card:hover { transform: translateY(-1px); text-decoration: none; border-color: var(--p); }
.section-card.section-locked { opacity: .55; cursor: not-allowed; }
.section-card.status-mastered { border-color: var(--ok); }
.section-type { font-weight: 600; font-family: var(--fb); }
.section-status { font-size: 0.875rem; color: var(--gray); margin-top: auto; }

/* ── Player ─────────────────────────────────────────────────────────── */

.player-header { margin-bottom: 1.5rem; }
.section-label {
  font-family: var(--fm); font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--go); margin: 0; font-weight: 700;
}
.tagline {
  border-left: 3px solid var(--cy);
  margin: 1rem 0 0; padding: .5rem 0 .5rem 1rem;
  color: var(--gray); font-style: italic;
}

.player-loading { text-align: center; padding: 4rem 0; color: var(--gray); }

.player-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--rs3); padding: 2rem 1.5rem;
}
.player-progress {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;
}
.player-counter {
  font-family: var(--fm); font-size: 0.875rem; color: var(--gray); font-weight: 500;
}
.player-fav {
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; color: var(--muted-2); padding: 0;
}
.player-fav.active { color: var(--go); }

.exercise-text {
  font-size: 1.5rem; line-height: 1.4; margin: 1rem 0;
  font-family: var(--fd); font-weight: 600; min-height: 4rem; letter-spacing: -0.01em;
}
.exercise-text.statement { color: var(--ink); }
.exercise-text.question  { color: var(--cy); }
.exercise-text.answer    { color: var(--ok); font-style: italic; font-weight: 500; }
.exercise-text.idle {
  color: var(--gray); font-size: 1rem; font-style: italic;
  font-family: var(--fb); font-weight: 400;
}

.timer {
  font-family: var(--fm); font-size: 3rem; font-weight: 700;
  text-align: center; margin: 1rem 0; color: var(--duelo);
}
.timer.urgent { color: var(--error); }

.timer-bar {
  width: 100%; height: 4px; background: var(--surface);
  border-radius: var(--pill); overflow: hidden;
}
.timer-bar-fill { height: 100%; background: var(--duelo); transition: width .1s linear; }

.player-controls {
  display: flex; gap: .5rem; margin-top: 2rem;
  justify-content: center; flex-wrap: wrap;
}

.player-end { text-align: center; padding: 2rem 0; }

.player-modes {
  display: flex; gap: .5rem; align-items: center;
  margin-bottom: 1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.mode-toggle {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--gray); padding: .4rem .9rem;
  border-radius: var(--pill); cursor: pointer;
  font-size: 0.8125rem; font-family: var(--fb); font-weight: 500;
  display: inline-flex; align-items: center; gap: .35rem;
}
.mode-toggle.active {
  background: var(--p-tint); color: var(--p);
  border-color: var(--p);
}
.player-counter-row { display: flex; justify-content: center; margin-bottom: .5rem; }

.player-nav {
  display: flex; gap: .875rem; margin-top: 1.5rem;
  justify-content: center; align-items: center;
}
.nav-btn {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--ink); width: 48px; height: 48px;
  border-radius: 50%; cursor: pointer; font-size: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fb);
}
.nav-btn:hover:not(:disabled) { background: var(--surface); border-color: var(--ink); }
.nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.nav-btn.primary {
  background: var(--ink); border: none; color: #FFF;
  width: 64px; height: 64px; font-size: 1.5rem;
}
.nav-btn.primary:hover:not(:disabled) { background: var(--p); }

.audio-indicator {
  text-align: center; padding: 2.5rem 0;
  color: var(--gray); font-size: 0.9375rem;
}
.audio-indicator .icon {
  font-size: 3rem; display: block; margin-bottom: 1rem; color: var(--cy);
}
.audio-indicator .label {
  font-family: var(--fm); text-transform: uppercase;
  letter-spacing: .08em; font-size: 0.75rem; font-weight: 700;
}

.reveal-btn {
  background: var(--bg); border: 1px dashed var(--border);
  color: var(--gray); padding: .5rem 1.25rem;
  border-radius: var(--pill); cursor: pointer; font: inherit;
  display: block; margin: 1rem auto 0; font-size: 0.875rem;
  font-family: var(--fb);
}
.reveal-btn:hover { color: var(--ink); border-color: var(--ink); }

.auto-hint {
  font-family: var(--fm); font-size: 11px; color: var(--go);
  text-align: center; margin-top: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}

/* ── Tables ─────────────────────────────────────────────────────────── */

.data-table {
  width: 100%; border-collapse: collapse;
  background: var(--bg); border-radius: var(--rs3);
  overflow: hidden; margin-top: 1rem; border: 1px solid var(--border);
}
.data-table th, .data-table td {
  padding: .85rem 1rem; text-align: left;
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.data-table th {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gray); background: var(--surface);
  font-family: var(--fm);
}
.data-table tr:last-child td { border-bottom: none; }

/* ── Admin ──────────────────────────────────────────────────────────── */

.admin .admin-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;
}
.admin-tabs {
  display: flex; gap: .25rem;
  border-bottom: 1px solid var(--border); margin-bottom: 1.5rem;
}
.admin-tabs a {
  padding: .625rem 1rem; color: var(--gray);
  border-bottom: 2px solid transparent; font-weight: 500;
}
.admin-tabs a.active { color: var(--ink); border-bottom-color: var(--p); }
.admin-tabs a:hover { text-decoration: none; color: var(--ink); }

.course-meta-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--rs3); padding: 1.25rem;
  margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
}
.course-meta-card .meta-row { display: flex; flex-direction: column; gap: .25rem; }
.course-meta-card .actions { margin-left: auto; }

.coupon-form-toggle summary { list-style: none; cursor: pointer; display: inline-block; }
.coupon-form-toggle summary::-webkit-details-marker { display: none; }

.price-editor {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin: 1rem 0;
}
.price-editor summary {
  list-style: none; cursor: pointer; font-weight: 600; color: var(--primary);
  font-size: 0.875rem; user-select: none;
}
.price-editor summary::-webkit-details-marker { display: none; }
.price-editor summary::before { content: "▸ "; transition: transform 0.15s; display: inline-block; }
.price-editor[open] summary::before { content: "▾ "; }

/* ── Course landing ─────────────────────────────────────────────────── */

.course-landing { max-width: 720px; }
.course-landing .cta-row { margin-top: 2rem; }
.price-box { display: flex; flex-direction: column; margin-bottom: 1rem; }
.price-amount {
  font-size: 2.5rem; font-weight: 800; color: var(--p);
  font-family: var(--fd); letter-spacing: -0.02em;
}

/* ── Misc ───────────────────────────────────────────────────────────── */

.favorites-list, .cert-list { list-style: none; padding: 0; margin: 1rem 0; }
.favorite-item, .cert-item {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--rs2); padding: 1rem; margin-bottom: .5rem;
}
.favorite-meta { margin-bottom: .5rem; }
.favorite-sq { margin-bottom: .25rem; }

.profile-info { margin: 1.5rem 0; }
.profile-info dt { font-size: 0.8125rem; color: var(--gray); margin-top: .5rem; font-family: var(--fm); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.profile-info dd { margin: 0; }

.checkout-result { text-align: center; padding: 3rem 1rem; }
.error-page { text-align: center; padding: 4rem 1rem; }
.error-page h1 { font-size: 4rem; color: var(--muted-2); }

.footer {
  border-top: 1px solid var(--border); padding: 2rem 1.5rem;
  text-align: center; color: var(--gray); font-size: 0.875rem;
  background: var(--bg);
}

/* ── Mobile tweaks ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .topbar { padding: .75rem 1rem; }
  .topbar nav { gap: .75rem; font-size: 0.875rem; }
  .topbar nav .btn { padding: .4rem .9rem; font-size: 0.875rem; }
  .container { padding: 24px 5vw 56px; }
  .exercise-text { font-size: 1.25rem; }
  .timer { font-size: 2.5rem; }
  .data-table { font-size: 0.875rem; }
  .data-table th, .data-table td { padding: .5rem; }
  .data-table .small { display: none; }
}