:root {
  color-scheme: light;
  --page: #d8eac7;
  --page-soft: #e9f3df;
  --sidebar: #0f2c10;
  --sidebar-2: #173b18;
  --panel: #dfeeda;
  --panel-strong: #d5e8c9;
  --field: #eef7e8;
  --field-light: #f8fbf4;
  --line: #8db56d;
  --line-soft: rgba(76, 132, 51, .30);
  --ink: #06290b;
  --muted: #31552e;
  --green: #278c22;
  --green-dark: #0a5f11;
  --green-bright: #20b75a;
  --accent: #8dc63f;
  --danger: #ef3e42;
  --warning: #d18a00;
  --white: #ffffff;
  --shadow: rgba(26, 58, 18, .18);
  --shadow-soft: rgba(26, 58, 18, .10);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--page);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.55), transparent 28%),
    linear-gradient(135deg, #cfe6ba 0%, #dbeccd 48%, #c7e4ab 100%);
}

a {
  color: var(--green-dark);
  text-decoration: none;
  font-weight: 700;
}

.wrap {
  width: 100%;
  min-height: 100vh;
  padding: 16px 18px 38px 278px;
}

.topbar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: 258px;
  padding: 14px 16px;
  border-right: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, var(--sidebar) 0%, #0a250d 100%);
  box-shadow: 18px 0 38px rgba(10, 38, 11, .22);
}

.brand {
  display: grid;
  place-items: center;
  min-height: 96px;
  margin: 0 0 24px;
  padding: 12px 16px 13px;
  border: 1px solid rgba(204, 236, 177, .18);
  border-radius: 22px;
  color: #f5ffe8;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  text-align: center;
}

.brand img {
  display: block;
  width: min(150px, 100%);
  max-height: 58px;
  object-fit: contain;
  object-position: center;
}

.brand span {
  display: block;
  margin-top: 7px;
  color: #cfe7c7;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.nav {
  display: grid;
  gap: 10px;
  align-content: start;
}

.nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #f3ffe9;
  background: transparent;
  font-weight: 700;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.nav a:hover,
.nav a.primary {
  border-color: rgba(169, 216, 124, .36);
  background: rgba(141, 198, 63, .16);
}

.nav a:active {
  transform: translateY(1px);
}

.hero {
  position: relative;
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
  padding: 17px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(229, 241, 216, .96), rgba(210, 231, 197, .94));
  box-shadow: 0 12px 24px var(--shadow), inset 0 1px 0 rgba(255,255,255,.78);
}

.hero::after {
  content: "admin";
  position: absolute;
  top: 24px;
  right: 20px;
  display: none;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(142, 177, 107, .28);
  color: var(--green-dark);
  font-weight: 900;
}

body.admin-page .hero::after {
  display: inline-flex;
}

.hero h1,
.page-title {
  margin: 0;
  color: var(--green-dark);
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.hero h2,
.card-body h2,
.card-body h3 {
  margin: 0;
  color: #2f861f;
}

.hero p,
p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(224, 239, 214, .92);
  box-shadow: 0 16px 30px var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.70);
  overflow: hidden;
}

.card-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.course-card {
  transition: transform .18s ease, box-shadow .18s ease;
}

.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 34px var(--shadow);
}

.course-card img,
.course-cover {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 10px;
  background: linear-gradient(180deg, #eaf5df, #cfe7bc);
  border-bottom: 1px solid var(--line-soft);
}

.price {
  color: var(--green-dark);
  font-size: 1.25rem;
  font-weight: 900;
}

.status {
  display: inline-flex;
  width: fit-content;
  padding: 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255,255,255,.34);
  color: var(--muted);
  font-weight: 900;
}

.status.ok {
  border-color: rgba(39, 140, 34, .34);
  background: rgba(207, 255, 219, .55);
  color: var(--green-dark);
}

.notice {
  padding: 14px 16px;
  border: 1px solid rgba(36, 133, 50, .18);
  border-radius: 14px;
  background: #d8f9dd;
  color: var(--green-dark);
  font-weight: 700;
}

.notice.error {
  border-color: rgba(239, 62, 66, .22);
  background: #ffe3df;
  color: #a31317;
}

.detail,
.payment,
.ai-layout {
  display: grid;
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.form,
.admin-form {
  display: grid;
  gap: 14px;
  width: 100%;
}

.admin-panel {
  margin-bottom: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--green-dark);
  font-weight: 900;
}

input,
textarea,
select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(87, 143, 64, .42);
  border-radius: 13px;
  padding: 11px 15px;
  color: var(--ink);
  background: rgba(245, 250, 240, .78);
  box-shadow: inset 0 1px 2px rgba(9, 47, 12, .06);
  font: inherit;
  outline: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #54a235;
  background: #f8fcf5;
  box-shadow: 0 0 0 4px rgba(77, 151, 44, .14), inset 0 1px 2px rgba(9,47,12,.05);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid rgba(77, 132, 54, .34);
  border-radius: 13px;
  padding: 10px 16px;
  color: var(--green-dark);
  background: rgba(239, 248, 230, .76);
  box-shadow: 0 8px 16px rgba(29, 72, 19, .10);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.button:hover,
button:hover {
  background: rgba(248, 252, 245, .96);
}

.button.primary,
button.primary,
.nav a.primary {
  color: #fff;
  border-color: rgba(15, 104, 20, .22);
  background: linear-gradient(180deg, #2aa02a, #157f1f);
  box-shadow: 0 12px 22px rgba(25, 127, 31, .22);
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.inline-actions form {
  display: inline-flex;
  margin: 0;
}

.edit-cover {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: rgba(238, 247, 232, .62);
}

.edit-cover img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
}

.course-lessons-editor {
  display: grid;
  gap: 14px;
  margin: 4px 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: rgba(238, 247, 232, .62);
}

.course-lessons-editor legend {
  padding: 0 8px;
  color: var(--green-dark);
  font-size: 1.15rem;
  font-weight: 900;
}

.lesson-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lesson-edit-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(87, 143, 64, .26);
  border-radius: 18px;
  background: rgba(248, 252, 245, .72);
}

.lesson-edit-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: #f8fbf4;
}

.lesson-edit-fields {
  display: grid;
  gap: 10px;
}

/* Mantem os numeros das paginas em linha, sem estourar o card. */
.lesson-edit-fields label,
.lesson-edit-fields input {
  min-width: 0;
}

.lesson-edit-fields input[type="number"] {
  width: 96px;
  max-width: 100%;
}

.lesson-nav {
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.lesson-nav .button {
  flex: 0 0 auto;
  min-width: 42px;
  padding-inline: 12px;
}

.support-materials {
  display: grid;
  gap: 12px;
  margin: 2px 0 4px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(238, 247, 232, .62);
}

.support-materials legend {
  padding: 0 6px;
  color: var(--green-dark);
  font-weight: 900;
}

.material-list {
  display: grid;
  gap: 10px;
}

.material-row {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 10px;
  align-items: end;
}

.material-remove,
.material-add {
  white-space: nowrap;
}

.material-add {
  width: fit-content;
}

.material-file-field small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.support-material-block {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.support-material-block h2 {
  margin: 0;
  color: var(--green-dark);
  font-size: 1.12rem;
}

.support-material-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.support-material-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(87, 143, 64, .30);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(248, 252, 245, .76);
  box-shadow: 0 10px 18px rgba(33, 85, 27, .06);
  text-decoration: none;
}

.support-material-item:hover {
  border-color: rgba(39, 140, 34, .56);
  background: rgba(255, 255, 255, .88);
}

.support-material-item strong,
.support-material-item small {
  display: block;
}

.support-material-item strong {
  color: var(--green-dark);
  line-height: 1.28;
}

.support-material-item small {
  margin-top: 2px;
  color: var(--muted);
  font-weight: 800;
}

.material-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: var(--green-dark);
  background: rgba(39, 140, 34, .12);
}

.material-icon::before {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  background-color: currentColor;
  -webkit-mask: var(--material-icon) center / 24px 24px no-repeat;
  mask: var(--material-icon) center / 24px 24px no-repeat;
}

.material-icon-apostila {
  --material-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h9a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3V5a1 1 0 0 1 1-1zm2 2v11a1 1 0 0 0 1 1h7V7a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
}

.material-icon-apresentacao {
  --material-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v11H4zm2 2v7h12V6zm5 10h2v4h4v2H7v-2h4z'/%3E%3C/svg%3E");
}

.material-icon-video {
  --material-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h12a2 2 0 0 1 2 2v1.2l3-1.7v9l-3-1.7V16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm1 2v8h11V8z'/%3E%3C/svg%3E");
}

.material-icon-link {
  --material-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 13.4a1 1 0 0 1 0-1.4l3.5-3.5a3 3 0 1 1 4.2 4.2l-2.1 2.1-1.4-1.4 2.1-2.1a1 1 0 1 0-1.4-1.4L12 13.4a1 1 0 0 1-1.4 0zm2.8-2.8a1 1 0 0 1 0 1.4l-3.5 3.5a3 3 0 1 1-4.2-4.2l2.1-2.1 1.4 1.4-2.1 2.1a1 1 0 1 0 1.4 1.4l3.5-3.5a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E");
}

.qr-panel {
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f8fbf4;
  box-shadow: 0 16px 30px var(--shadow-soft);
}

.qr-panel img {
  width: 230px;
  max-width: 100%;
  image-rendering: crisp-edges;
}

.reader img {
  display: block;
  width: min(100%, 1300px);
  margin: 0 auto 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 34px var(--shadow);
}

.lesson-nav {
  position: sticky;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(229, 241, 216, .92);
  box-shadow: 0 12px 22px var(--shadow-soft);
}

.ai-output {
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: rgba(248, 252, 245, .72);
  color: var(--ink);
  line-height: 1.68;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(244, 250, 239, .52);
}

th,
td {
  padding: 12px;
  border: 1px solid rgba(108, 150, 86, .25);
  text-align: left;
}

th {
  color: var(--ink);
  background: rgba(241, 248, 236, .78);
  font-weight: 900;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.metric-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(224, 239, 214, .92);
  box-shadow: 0 16px 28px var(--shadow-soft);
  text-align: center;
}

.metric-card span {
  color: #26851a;
  font-weight: 900;
}

.metric-card strong {
  color: var(--green-dark);
  font-size: clamp(1.45rem, 2.7vw, 2rem);
}

.evolution-metrics .metric-card {
  min-height: 126px;
}

.trend-up {
  border-color: rgba(37, 148, 65, .38);
  background: rgba(217, 250, 221, .88);
}

.trend-down {
  border-color: rgba(198, 56, 56, .34);
  background: rgba(255, 231, 225, .82);
}

.trend-down span,
.trend-down strong {
  color: #ad2e26;
}

.trend-steady {
  border-color: rgba(188, 132, 30, .35);
  background: rgba(255, 244, 210, .82);
}

.trend-steady span,
.trend-steady strong {
  color: #8a6418;
}

.compact-filter {
  max-width: 440px;
}

.section-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: end;
  justify-content: space-between;
}

.section-heading span,
.muted-inline {
  color: var(--muted);
  font-weight: 800;
}

.line-chart-wrap {
  width: 100%;
  min-height: 260px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(237, 247, 229, .34)),
    rgba(248, 252, 245, .64);
  overflow: hidden;
}

.line-chart {
  display: block;
  width: 100%;
  min-width: 0;
}

.chart-grid {
  stroke: rgba(72, 122, 52, .20);
  stroke-width: 1;
}

.chart-axis {
  stroke: rgba(40, 91, 34, .42);
  stroke-width: 1.4;
}

.chart-line {
  fill: none;
  stroke: #248726;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-point {
  fill: #fff;
  stroke: #188221;
  stroke-width: 4;
}

.chart-label {
  fill: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.chart-labels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
}

.chart-labels span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(248, 252, 245, .66);
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.chart-labels strong {
  color: var(--green-dark);
}

.chart-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.bar-list {
  display: grid;
  gap: 14px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, 2fr) 58px;
  gap: 12px;
  align-items: center;
}

.bar-row-label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bar-row-label strong {
  overflow-wrap: anywhere;
  color: var(--ink);
}

.bar-row-label span {
  color: var(--muted);
  font-size: .88rem;
  font-weight: 800;
}

.bar-track {
  height: 16px;
  border: 1px solid rgba(62, 126, 40, .24);
  border-radius: 999px;
  background: rgba(222, 238, 210, .72);
  overflow: hidden;
}

.bar-track span {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #72bf3d, #1a8d28);
}

.bar-row b {
  color: var(--green-dark);
  text-align: right;
}

body.auth-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 18%, rgba(16, 116, 48, .36), transparent 28%),
    radial-gradient(circle at 40% 55%, rgba(58, 127, 58, .20), transparent 30%),
    linear-gradient(135deg, #020f0a 0%, #092716 52%, #00321a 100%);
  color: #f6fff5;
}

body.auth-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 50px 50px;
}

body.auth-page .wrap {
  width: min(460px, calc(100% - 28px));
  min-height: auto;
  padding: 0;
}

body.auth-page .topbar {
  display: none;
}

body.auth-page .card {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(26, 49, 34, .88), rgba(10, 36, 22, .94));
  box-shadow: 0 26px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10);
}

body.auth-page .card-body {
  padding: 30px;
  gap: 18px;
}

.auth-logo {
  display: grid;
  place-items: center;
  gap: 8px;
  margin: 0 0 4px;
  text-align: center;
}

.auth-logo img {
  display: block;
  width: min(220px, 82%);
  max-height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .22));
}

.auth-logo span {
  color: #cfe7c7;
  font-size: .95rem;
  font-weight: 800;
}

body.auth-page .page-title {
  color: #fff;
  font-size: 2.1rem;
}

body.auth-page .page-title::before {
  content: none;
}

body.auth-page p,
body.auth-page label {
  color: #cdf0d4;
}

body.auth-page input {
  min-height: 56px;
  border-color: rgba(255,255,255,.18);
  border-radius: 15px;
  background: #f1f8f1;
}

body.auth-page button.primary {
  min-height: 58px;
  border-radius: 16px;
  background: linear-gradient(180deg, #22c466, #15944a);
  font-size: 1.05rem;
}

body.auth-page .notice {
  background: #d8f9dd;
}

body.auth-page a {
  color: #a4f1b9;
}

@media (max-width: 980px) {
  .wrap {
    padding: 14px;
  }

  .topbar {
    position: static;
    width: auto;
    min-height: auto;
    margin-bottom: 16px;
    border-radius: 20px;
    box-shadow: 0 12px 26px var(--shadow);
  }

  .brand {
    margin-bottom: 12px;
  }

  .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid,
  .detail,
  .payment,
  .ai-layout,
  .form-row,
  .edit-cover,
  .material-row,
  .support-material-list,
  .metrics-grid,
  .chart-grid-two {
    grid-template-columns: 1fr;
  }

  .material-add,
  .material-remove {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .nav {
    grid-template-columns: 1fr;
  }

  .hero,
  .card {
    border-radius: 18px;
  }

  .card-body {
    padding: 15px;
  }

  .bar-row {
    grid-template-columns: 1fr;
  }

  .bar-row b {
    text-align: left;
  }

  .line-chart-wrap {
    min-height: 220px;
    padding: 8px;
  }

  .line-chart {
    height: 220px;
  }
}
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(238, 247, 232, .58);
}

.check-row input {
  width: 18px;
  min-height: 18px;
}

button.danger,
.button.danger {
  color: #fff;
  border-color: rgba(188, 20, 27, .24);
  background: linear-gradient(180deg, #f15b5f, #d9242d);
  box-shadow: 0 10px 18px rgba(217, 36, 45, .18);
}

.quiz-form {
  display: grid;
  gap: 16px;
}

.quiz-question {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: rgba(248, 252, 245, .66);
}

.quiz-question.correct {
  border-color: rgba(25, 127, 31, .55);
  background: rgba(216, 249, 221, .72);
}

.quiz-question.wrong {
  border-color: rgba(239, 62, 66, .36);
  background: rgba(255, 235, 230, .72);
}

.quiz-question legend {
  padding: 0 6px;
  color: var(--green-dark);
  font-weight: 900;
  line-height: 1.45;
}

.quiz-options {
  display: grid;
  gap: 9px;
}

.quiz-option {
  display: grid;
  grid-template-columns: auto 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(87, 143, 64, .30);
  border-radius: 14px;
  background: rgba(245, 250, 240, .78);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.quiz-option input {
  width: 18px;
  min-height: 18px;
}

.quiz-option span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(39, 140, 34, .12);
  color: var(--green-dark);
  font-weight: 900;
}

.quiz-option.is-correct {
  border-color: rgba(25, 127, 31, .65);
  background: #d8f9dd;
}

.quiz-option.is-wrong {
  border-color: rgba(239, 62, 66, .55);
  background: #ffe3df;
}

.quiz-comment {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .56);
  color: var(--muted);
  line-height: 1.55;
}
.quiz-option {
  grid-template-columns: 22px 34px minmax(0, 1fr);
  min-height: 48px;
  padding: 8px 12px;
}

.quiz-option input[type="radio"] {
  appearance: auto;
  -webkit-appearance: radio;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  justify-self: start;
}

.quiz-option span {
  width: 28px;
  height: 28px;
}
/* Ajuste fino do treino IA: radio pequeno + texto da resposta. */
.quiz-option {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  line-height: 1.35 !important;
}

.quiz-option input[type="radio"],
.quiz-option input[type=radio] {
  appearance: auto !important;
  -webkit-appearance: radio !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-self: center !important;
}

.quiz-option span {
  display: none !important;
}

.followup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 20px;
}

.study-list {
  display: grid;
  gap: 12px;
}

.study-item {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(248, 252, 245, .68);
}

.study-item.priority {
  border-color: rgba(39, 140, 34, .44);
  background: rgba(216, 249, 221, .56);
}

.study-item strong {
  color: var(--green-dark);
}

.study-item span,
.study-item p {
  color: var(--muted);
}

.bank-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.bank-card {
  padding: 15px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: rgba(248, 252, 245, .66);
}

.bank-card h3 {
  margin: 0 0 10px;
  color: var(--green-dark);
}

.bank-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

@media (max-width: 1180px) {
  .bank-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .followup-grid,
  .bank-grid {
    grid-template-columns: 1fr;
  }
}
/* Capas dos cursos preenchendo todo o quadro do card. */
.course-card img,
.course-cover {
  width: 100% !important;
  height: auto;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  padding: 0 !important;
  background: #cfe7bc !important;
}
/* Capas sem corte: o quadro acompanha a proporção real da imagem. */
.course-card img,
.course-cover {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  padding: 0 !important;
  background: transparent !important;
}
/* Organização do catálogo por grupos e categorias. */
.catalog-hero {
  margin-bottom: 18px;
}

.category-panel {
  margin-bottom: 22px;
}

.category-panel .card-body {
  gap: 14px;
}

.category-panel h2,
.category-panel h3 {
  margin: 0;
  color: var(--green-dark);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(87, 143, 64, .36);
  border-radius: 999px;
  color: var(--green-dark);
  background: rgba(248, 252, 245, .78);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 18px rgba(33, 85, 27, .06);
}

.filter-chip:hover,
.filter-chip.active {
  color: #fff;
  border-color: rgba(39, 140, 34, .78);
  background: linear-gradient(180deg, #2daa38, #188322);
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.course-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(87, 143, 64, .26);
  border-radius: 999px;
  color: var(--green-dark);
  background: rgba(39, 140, 34, .10);
  font-size: .82rem;
  font-weight: 900;
}

@media (max-width: 720px) {
  .filter-chip {
    width: 100%;
  }
}

.ai-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(7, 31, 17, .48);
  backdrop-filter: blur(5px);
}

.ai-loading.is-visible {
  display: grid;
}

.ai-loading-card {
  width: min(430px, 100%);
  padding: 24px;
  border: 1px solid rgba(87, 143, 64, .38);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(248, 252, 245, .98), rgba(221, 239, 207, .98));
  box-shadow: 0 24px 80px rgba(8, 39, 18, .34);
}

.ai-loading-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--green-dark);
  font-size: 1.25rem;
}

.ai-loading-card p {
  margin: 0 0 16px;
  color: var(--muted);
}

.ai-loading-bar {
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: rgba(87, 143, 64, .18);
}

.ai-loading-bar span {
  display: block;
  width: 44%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1b7f28, #2ec048, #93d66f);
  animation: aiLoadingBar 1.05s ease-in-out infinite;
}

@keyframes aiLoadingBar {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(240%);
  }
}

.nav a {
  gap: 8px;
}

.nav-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 9px;
  color: var(--green-dark);
  background: rgba(39, 140, 34, .12);
  font-size: .95rem;
  font-weight: 900;
  line-height: 1;
}

.nav a.primary .nav-icon,
.nav a:hover .nav-icon {
  color: #fff;
  background: rgba(255, 255, 255, .22);
}

/* Icones do menu desenhados via CSS para nao depender da fonte do navegador. */
.nav a::before {
  content: "";
  display: inline-block;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  margin-right: 10px;
  border-radius: 7px;
  background-color: #d8f5cf;
  opacity: .95;
  -webkit-mask: var(--menu-icon) center / 19px 19px no-repeat;
  mask: var(--menu-icon) center / 19px 19px no-repeat;
}

.nav a:hover::before,
.nav a.primary::before {
  background-color: #ffffff;
}

.nav a[href="index.php"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.5 12 3l9 7.5v9.5a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.nav a[href="meus_cursos.php"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h11a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3V5a1 1 0 0 1 1-1zm2 2v11a1 1 0 0 0 1 1h9V7a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
}

.nav a[href="acompanhamento.php"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19h16v2H4zm1-2 4-6 4 3 5-8 2 1.2-6.5 10-4-3L7 18z'/%3E%3C/svg%3E");
}

.nav a[href="historico_treinos.php"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 1 1-7.7 10.2h2.2A6 6 0 1 0 8 7.8V11H3V6h2.1A8 8 0 0 1 12 4zm1 4v4l3 2-1.1 1.7L11 13V8z'/%3E%3C/svg%3E");
}

.nav a[href="evolucao_treinos.php"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19h17v2H2V3h2v16zm2-2V9h3v8H6zm5 0V5h3v12h-3zm5 0v-6h3v6h-3z'/%3E%3C/svg%3E");
}

.nav a[href="admin_cursos.php"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm8.5 4a7 7 0 0 0-.1-1l2-1.5-2-3.4-2.4 1a8 8 0 0 0-1.7-1L16 3.5h-4l-.3 2.6a8 8 0 0 0-1.7 1l-2.4-1-2 3.4 2 1.5a7 7 0 0 0 0 2l-2 1.5 2 3.4 2.4-1a8 8 0 0 0 1.7 1l.3 2.6h4l.3-2.6a8 8 0 0 0 1.7-1l2.4 1 2-3.4-2-1.5c.1-.3.1-.7.1-1z'/%3E%3C/svg%3E");
}

.nav a[href="admin_vendas.php"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19h16v2H3V3h2zm2-2V9h3v8zm5 0V5h3v12zm5 0v-6h3v6z'/%3E%3C/svg%3E");
}

.nav a[href="admin_categorias.php"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h5l2 2h5a2 2 0 0 1 2 2v3H4zm0 7h16v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm3 2v2h7v-2z'/%3E%3C/svg%3E");
}

.nav a[href="admin_usuarios.php"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0 2c3.3 0 6 1.8 6 4v2H3v-2c0-2.2 2.7-4 6-4zm8-1a3 3 0 1 1 .1-6 3 3 0 0 1-.1 6zm0 1c2.8 0 5 1.5 5 3.4V18h-5v-1c0-1.4-.8-2.7-2.1-3.7.7-.2 1.4-.3 2.1-.3z'/%3E%3C/svg%3E");
}

.nav a[href="admin_liberar_curso.php"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 1 5 5v3h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h10V7a3 3 0 0 0-5.8-1H7.1A5 5 0 0 1 12 2zm3.7 12.7-1.4-1.4-3.3 3.3-1.3-1.3-1.4 1.4 2.7 2.7z'/%3E%3C/svg%3E");
}

.nav a[href="login.php"],
.nav a[href="logout.php"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4h9a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-9v-2h8V6h-8zm1.5 3.5L16 12l-4.5 4.5V13H3v-2h8.5z'/%3E%3C/svg%3E");
}

.nav a[href="cadastro.php"] {
  --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 11a4 4 0 1 0-8 0 4 4 0 0 0 8 0zM3 21c0-3 3.6-5 8-5 1.3 0 2.5.2 3.6.6A6 6 0 0 0 14 19v2zm16-8v3h3v2h-3v3h-2v-3h-3v-2h3v-3z'/%3E%3C/svg%3E");
}

.sortable-courses {
  align-items: stretch;
}

.sortable-course {
  position: relative;
  cursor: grab;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.sortable-course:active {
  cursor: grabbing;
}

.sortable-course.is-dragging {
  opacity: .55;
  transform: scale(.985);
  box-shadow: 0 18px 42px rgba(18, 78, 19, .24);
}

.drag-handle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 14px;
  color: #ffffff;
  border-color: rgba(255, 255, 255, .38);
  background: rgba(12, 67, 20, .78);
  box-shadow: 0 10px 20px rgba(12, 67, 20, .24);
  cursor: grab;
  font-size: 1.05rem;
  letter-spacing: -2px;
}

.drag-handle:active {
  cursor: grabbing;
}

.order-status {
  min-height: 24px;
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.order-status.ok {
  color: var(--green-dark);
}

.order-status.saving {
  color: var(--warning);
}

.order-status.error {
  color: var(--danger);
}

.print-toolbar {
  align-items: start;
}

.print-filter {
  width: 100%;
  max-width: none;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(248, 252, 245, .72);
}

.print-filter .form-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.print-history {
  display: grid;
  gap: 18px;
}

.print-cover,
.print-training {
  padding: 22px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: rgba(248, 252, 245, .78);
  box-shadow: 0 14px 34px var(--shadow-soft);
}

.print-cover h2,
.print-training h2,
.print-question h3 {
  margin: 0;
  color: var(--green-dark);
}

.print-cover p,
.print-training-head p {
  margin: 6px 0 0;
}

.print-training {
  break-inside: avoid;
}

.print-training-head {
  display: grid;
  gap: 5px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.print-question {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid rgba(87, 143, 64, .26);
  border-radius: 14px;
  background: rgba(255, 255, 255, .42);
  break-inside: avoid;
}

.print-question.correct {
  border-color: rgba(25, 127, 31, .45);
}

.print-question.wrong {
  border-color: rgba(239, 62, 66, .36);
}

.print-options {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 26px;
}

.print-options li {
  padding: 6px 8px;
  border-radius: 8px;
}

.print-options li.correct {
  background: rgba(216, 249, 221, .85);
  font-weight: 800;
}

.print-options li.wrong {
  background: rgba(255, 227, 223, .9);
  font-weight: 800;
}

.print-comment {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(223, 238, 218, .7);
  color: var(--muted);
  line-height: 1.5;
}

@media print {
  @page {
    margin: 14mm;
  }

  html,
  body {
    background: #fff !important;
  }

  body.print-page {
    color: #111;
    font-size: 11pt;
  }

  body.print-page .topbar,
  body.print-page .print-toolbar,
  body.print-page .print-filter,
  body.print-page .nav,
  body.print-page .button,
  body.print-page button {
    display: none !important;
  }

  body.print-page .wrap {
    min-height: auto;
    padding: 0;
  }

  body.print-page .print-cover,
  body.print-page .print-training,
  body.print-page .print-question {
    box-shadow: none;
    background: #fff;
  }

  body.print-page .print-cover,
  body.print-page .print-training {
    border: 0;
    padding: 0;
  }

  body.print-page .print-training {
    margin-top: 18px;
    page-break-after: auto;
  }

  body.print-page .print-question {
    border-color: #ccc;
  }
}