/* ============================================================
   Tokens — paleta neutra (mesma base de ferramentas-web-ui-base)
   ============================================================ */
:root {
  --ink: #374251;
  --muted: #8b929c;
  --line: #e2e6eb;
  --green: #22bf69;
  --wash: #eff7ff;
  --navy: #171c25;
  --accent: #22bf69;
  --accent-dark: #1a9d57;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--wash); }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }

/* ============================================================
   Marca
   ============================================================ */
.brand-mark { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 750; font-size: 17px; white-space: nowrap; text-decoration: none; color: var(--ink); }
.brand-mark .brand-code { color: var(--accent); font-size: 23px; vertical-align: middle; }
.muted { color: var(--muted); }

/* ============================================================
   Shell de estudo — sidebar + conteúdo
   ============================================================ */
.study-shell { min-height: 100vh; display: grid; grid-template-columns: 272px 1fr; background: var(--wash); }

.sidebar { background: #fff; border-right: 1px solid var(--line); height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; }
.sidebar .brand { padding: 23px 19px 18px; border-bottom: 1px solid var(--line); }
.sidebar .brand p { font-size: 12px; color: var(--muted); margin: 7px 0 0; }
.sidebar nav { padding: 18px 14px; overflow: auto; flex: 1; }

.nav-section { margin-bottom: 16px; }
.nav-heading { display: flex; gap: 8px; align-items: center; color: #5c636a; font-size: 12px; margin: 0 7px 7px; }
.nav-heading span { color: var(--accent-dark); }

.nav-link { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border: 0; background: transparent; text-align: left; color: #858b91; border-radius: 7px; font-size: 12px; margin: 2px 0; text-decoration: none; }
.nav-link:hover { background: #f0f6f3; }
.nav-link.active { background: var(--green); color: #fff; box-shadow: 0 2px 5px rgba(34, 191, 105, .25); }
.nav-link.draft { color: #b7bcc2; cursor: default; }
.nav-link.draft:hover { background: transparent; }
.nav-dot { background: #e3e5e7; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.nav-link.active .nav-dot { background: #e8fff2; }
.nav-link.done .nav-dot { background: var(--accent-dark); }
.nav-chevron { margin-left: auto; }
.nav-draft-tag { margin-left: auto; font-size: 10px; color: #b7bcc2; }

.sidebar-bottom { border-top: 1px solid var(--line); padding: 18px 16px; font-size: 11px; color: #9299a1; }
.progress { height: 6px; border-radius: 6px; background: #e1f4ff; margin-top: 10px; overflow: hidden; }
.progress div { height: 100%; width: 0; background: var(--green); transition: width .3s; }

.study-main { min-width: 0; }
.toolbar { height: 52px; display: flex; align-items: center; gap: 12px; max-width: 980px; margin: auto; padding: 0 20px; }
.toolbar-right { margin-left: auto; display: flex; gap: 8px; }
.small-button { border: 0; background: transparent; font-size: 19px; color: #6b7480; display: none; }
.eyebrow { color: #8a929d; font-size: 12px; margin: 0; }

.button { padding: 10px 15px; border-radius: 8px; font-weight: 650; font-size: 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; border: 0; }
.button-dark { background: var(--navy); color: #fff; }
.button-primary { background: var(--green); color: #fff; }
.button-outline { border: 1px solid #cfd8df; background: #fff; color: #344255; }
.button-outline[aria-disabled="true"] { color: #c3cad1; pointer-events: none; }

.lesson { max-width: 880px; margin: 0 auto; padding: 8px 32px 100px; }
.lesson-head .eyebrow { margin: 12px 0 0; }
.lesson-head h1 { font-size: 29px; letter-spacing: -.8px; margin: 12px 0 13px; }
.lesson-head .lead { font-size: 16px; color: #87909a; margin: 0 0 27px; }

.prose { line-height: 1.7; font-size: 14.5px; max-width: 790px; }
.prose p { margin: 0 0 17px; }
.lesson-section { margin-top: 36px; }
.lesson-section h2 { font-size: 18px; margin: 0 0 14px; }
.lesson-section h3 { font-size: 15px; margin: 18px 0 8px; }

.concept-block { margin-top: 20px; background: #fff; border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; padding: 14px 20px 16px; font-size: 13.5px; line-height: 1.55; box-shadow: 0 2px 10px rgba(22, 52, 74, .05); }
.concept-block .block-title { font-weight: 700; font-size: 12.5px; margin-bottom: 5px; color: var(--accent-dark); }

.prose ul, .lesson-section ul { padding-left: 19px; line-height: 1.8; }
.prose table, .lesson-section table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 14px 0; }
.prose table th, .lesson-section table th { background: var(--navy); color: #fff; padding: 8px 12px; text-align: left; }
.prose table td, .lesson-section table td { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.prose table tr:nth-child(even) td, .lesson-section table tr:nth-child(even) td { background: #f8fafb; }

.prose pre, .lesson-section pre { background: #1c232d; color: #e4e9ef; border-radius: 8px; padding: 14px 16px; overflow-x: auto; font: 12.5px/1.6 Consolas, Monaco, monospace; }
.prose code, .lesson-section code { background: #e0eaf2; padding: 2px 5px; border-radius: 3px; font-size: .92em; }
.prose pre code, .lesson-section pre code { background: none; padding: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* ============================================================
   Glossário contextual
   ============================================================ */
[data-def] { cursor: help; border-bottom: 1.5px dashed rgba(34, 66, 90, .4); }
#term-popup { position: fixed; max-width: 320px; background: var(--navy); color: #dde3f0; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 12px 16px; font-size: 13.5px; line-height: 1.55; z-index: 99999; pointer-events: none; box-shadow: 0 8px 32px rgba(0,0,0,.35); opacity: 0; transform: translateY(6px); transition: opacity .14s ease, transform .14s ease; }
#term-popup.visible { opacity: 1; transform: translateY(0); }
.popup-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 5px; }

/* ============================================================
   Playground de código
   ============================================================ */
.playground-section { margin-top: 37px; }
.playground-section h2 { font-size: 16px; margin: 0 0 16px; }
.target { color: var(--accent-dark); font-size: 20px; margin-right: 8px; }
.playground { border: 1px solid #dce2e7; border-radius: 9px; overflow: hidden; background: #fff; box-shadow: 0 5px 15px rgba(22,52,74,.08); }
.playground-top { min-height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid #e2e6e9; font-size: 13px; }
.link-button { border: 0; background: transparent; color: var(--accent-dark); font-size: 12px; margin-left: 8px; }
.playground-content { display: grid; grid-template-columns: 1fr 1fr; min-height: 333px; }
.editor-pane { min-width: 0; border-right: 1px solid #dde3e8; }
.tabs { display: flex; align-items: center; background: #f8f9fa; border-bottom: 1px solid #e0e4e9; height: 35px; }
.tab { height: 100%; padding: 0 16px; border: 0; background: transparent; color: #8b949d; font-size: 12px; }
.tab.active { background: var(--accent); color: #fff; }
.tabs-spacer { flex: 1; }
.icon-btn { background: transparent; border: 0; color: #707780; padding: 0 12px; font-size: 17px; }
.code-editor { display: grid; grid-template-columns: 42px 1fr; height: 300px; overflow: hidden; }
.line-numbers { font: 12px/19px Consolas, Monaco, monospace; color: #699aaf; text-align: right; padding: 12px 9px 12px 0; margin: 0; background: #f8f9fa; border-right: 1px solid #f0f1f2; user-select: none; overflow: hidden; }
textarea.code-input { border: 0; resize: none; outline: none; min-width: 0; padding: 12px; font: 12px/19px Consolas, Monaco, monospace; color: #273340; tab-size: 2; white-space: pre; overflow: auto; width: 100%; height: 100%; }
.preview-pane { min-width: 0; background: #f1f8ff; }
.preview-title { height: 35px; display: flex; align-items: center; justify-content: space-between; background: #dff0fc; padding: 0 13px; font-size: 12px; color: #496375; border-bottom: 1px solid #d4e4f0; }
.preview-title span { font-size: 10px; color: var(--accent-dark); }
.preview-pane iframe { width: 100%; height: 300px; border: 0; background: #f1f8ff; }
.hint { color: #8d959e; font-size: 12px; }

/* ============================================================
   Exercício / checkpoint
   ============================================================ */
.exercise { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin-top: 30px; }
.exercise h2 { font-size: 16px; margin: 0 0 12px; }
.answer-row { display: flex; gap: 10px; flex-wrap: wrap; }
.answer-row button { border: 1px solid #cdd8e1; background: #f8fafc; border-radius: 6px; padding: 9px 16px; font-size: 13px; }
.answer-row button:hover { border-color: var(--accent); }
#answer-message { min-height: 16px; color: var(--accent-dark); font-weight: 600; font-size: 13px; }
.lesson-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* ============================================================
   Modo apresentação
   ============================================================ */
.presentation { min-height: 100vh; background: var(--navy); padding: 3vh 3vw 90px; display: flex; justify-content: center; align-items: flex-start; }
.presentation-window { width: min(1600px, 100%); aspect-ratio: 16/9; min-height: 430px; background: #262c35; position: relative; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.4); border-radius: 6px; overflow: hidden; }
.slide-content { flex: 1; display: grid; grid-template-columns: 1fr; align-items: center; padding: 3% 6%; min-height: 0; overflow: auto; }
.slide-content.has-art { grid-template-columns: 54% 46%; }
.slide-art svg { width: 100%; height: auto; max-height: 100%; }
.slide-writing { color: #fafafa; }
.slide-number { font-size: clamp(28px, 4.5vw, 70px); color: var(--green); letter-spacing: 5px; font-weight: 300; margin: 0 0 3%; }
.slide-writing h1 { font-size: clamp(26px, 4vw, 54px); font-weight: 600; line-height: 1.25; letter-spacing: -.5px; margin: 0 0 5%; }
.slide-body { font-size: clamp(14px, 1.6vw, 22px); line-height: 1.6; color: #e7eaee; }
.slide-body ul { padding-left: 1.1em; }
.slide-body li { margin-bottom: .5em; }
.slide-body pre { background: #171c25; border-radius: 8px; padding: 16px 18px; font: clamp(12px,1.3vw,17px)/1.6 Consolas, Monaco, monospace; overflow-x: auto; }
.slide-body code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 3px; }
.slide-footer { background: #30363f; height: 6%; min-height: 34px; display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding: 0 18px; color: #e4e9ed; font-size: 12px; }
.presentation-controls { position: fixed; bottom: 15px; display: flex; gap: 12px; justify-content: center; left: 0; right: 0; }
.presentation-controls button { background: #f0f4f7; color: #273441; border: 0; border-radius: 7px; padding: 11px 18px; font-weight: 600; }
.presentation-controls button:hover { background: var(--green); color: #fff; }

/* ============================================================
   Catálogo
   ============================================================ */
.catalog-shell { max-width: 1040px; margin: 0 auto; padding: 48px 24px 100px; }
.catalog-hero { text-align: center; margin-bottom: 48px; }
.catalog-hero .brand-mark { font-size: 22px; justify-content: center; display: flex; }
.catalog-hero h1 { font-size: 34px; margin: 18px 0 10px; letter-spacing: -.8px; }
.catalog-hero .lead { color: var(--muted); font-size: 16px; max-width: 560px; margin: 0 auto; }
.catalog-group { margin-top: 36px; }
.catalog-group h2 { font-size: 14px; color: #5c636a; display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.catalog-group h2 span { color: var(--accent-dark); }
.catalog-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.catalog-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 6px; transition: box-shadow .15s, transform .15s; }
.catalog-card:hover { box-shadow: 0 8px 20px rgba(22,52,74,.1); transform: translateY(-1px); }
.catalog-card--draft { opacity: .6; cursor: default; }
.catalog-card--draft:hover { box-shadow: none; transform: none; }
.catalog-card-order { font-size: 11px; color: var(--muted); font-family: Consolas, monospace; }
.catalog-card h3 { font-size: 15px; margin: 0; }
.catalog-card p { font-size: 12.5px; color: var(--muted); margin: 0; }
.badge { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; background: #e8fff2; color: var(--accent-dark); }
.badge--draft { background: #f1f2f4; color: #8a929d; }

/* ============================================================
   Sidebar de slides no modo apresentação — hover na borda esquerda
   (desktop) ou swipe a partir da borda (mobile). Lista os slides da
   aula atual pra pular direto durante a apresentação ao vivo.
   ============================================================ */
#slide-nav {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 268px;
  background: rgba(8, 10, 16, .93);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  z-index: 9999;
  transform: translateX(-100%);
  opacity: 0;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease;
  display: flex;
  flex-direction: column;
}
#slide-nav.visible { transform: translateX(0); opacity: 1; }

#slide-nav .nav-header {
  flex-shrink: 0;
  padding: 20px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
#slide-nav .nav-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: background .15s, color .15s;
}
#slide-nav .nav-action:hover { background: rgba(255,255,255,.09); color: rgba(255,255,255,.95); }
#slide-nav .nav-action--exit { color: rgba(255,150,150,.7); }
#slide-nav .nav-action--exit:hover { background: rgba(200,50,50,.14); color: rgba(255,170,170,1); }

#slide-nav ul {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
  margin: 0;
  padding: 10px 0 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
#slide-nav li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  color: rgba(255,255,255,.5);
  font-size: 13px;
  line-height: 1.35;
  position: relative;
  transition: color .14s, background .14s;
  user-select: none;
}
#slide-nav li::before {
  content: '';
  position: absolute;
  left: 0; top: 5px; bottom: 5px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: transparent;
  transition: background .15s;
}
#slide-nav li:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.04); }
#slide-nav li.active { color: #fff; font-weight: 600; background: rgba(255,255,255,.05); }
#slide-nav li.active::before { background: rgba(255,255,255,.55); }
#slide-nav .nav-number {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 10px;
  letter-spacing: .04em;
  opacity: .3;
  flex-shrink: 0;
  min-width: 20px;
  text-align: right;
  transition: opacity .14s;
}
#slide-nav li.active .nav-number { opacity: .55; }
#slide-nav li:hover .nav-number { opacity: .45; }

@media (max-width: 899px) and (orientation: portrait) {
  body[data-mode="presentation"]::before {
    content: '';
    position: fixed;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 60px;
    background: rgba(255,255,255,.25);
    border-radius: 0 4px 4px 0;
    z-index: 9998;
    pointer-events: none;
  }
}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 850px) {
  .study-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 30; width: 272px; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 24px rgba(0,0,0,.08); }
  .sidebar.open { transform: translateX(0); }
  .small-button { display: block; }
  .lesson { padding: 10px 18px 70px; }
  .playground-content { grid-template-columns: 1fr; }
  .editor-pane { border-right: 0; border-bottom: 1px solid #ddd; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .presentation { padding: 1vh 1vw 90px; }
  .presentation-window { min-height: 0; }
  .slide-content.has-art { grid-template-columns: 1fr; }
  .slide-art { display: none; }
  .toolbar-right .button span.label { display: none; }
}