/* ============================================================
   TRACKS — grade das 4 trilhas (SQL, BI, DAX, Python), cabeçalho
   de cada trilha, grupos de rank, nós de lição e a seção "Sala
   de Situação" (trilha unificada/core).
   Por que separado: é o CSS que mais cresce quando se adiciona
   conteúdo (ex: a trilha Python). Isolar aqui evita procurar
   regras de trilha misturadas com o modal de lição.
   ============================================================ */
.tracks-wrap{max-width:1180px;margin:0 auto;width:100%;padding:28px 18px 60px;}
.track-tabs{display:none;gap:8px;margin-bottom:18px;}
.track-tab{flex:1;padding:10px 8px;border-radius:12px;border:1px solid var(--border);background:var(--surface);font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--text-dim);text-align:center;transition:.15s;}
.track-tab.active{color:var(--bg);}
.track-tab[data-track="sql"].active{background:var(--sql);border-color:var(--sql);}
.track-tab[data-track="bi"].active{background:var(--bi);border-color:var(--bi);}
.track-tab[data-track="dax"].active{background:var(--dax);border-color:var(--dax);}
.track-tab[data-track="python"].active{background:var(--python);border-color:var(--python);}

.tracks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start;}
.track-col{display:flex;flex-direction:column;}
.track-header{border-radius:var(--radius);padding:16px 16px 14px;margin-bottom:18px;border:1px solid var(--border);position:relative;overflow:hidden;}
.track-header .th-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.track-header .th-name{font-family:var(--font-display);font-weight:700;font-size:19px;}
.track-header .th-icon{width:26px;height:26px;}
.track-header .th-desc{font-size:12.5px;color:var(--text-dim);line-height:1.5;}
.track-header .th-progress{margin-top:12px;}
.th-progress-bar{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden;}
.th-progress-fill{height:100%;border-radius:4px;transition:width .4s;}
.th-progress-label{font-size:11px;color:var(--text-faint);margin-top:5px;font-family:var(--font-mono);}
.track-header[data-track="sql"]{background:linear-gradient(160deg,var(--sql-dim),transparent 70%);}
.track-header[data-track="sql"] .th-progress-fill{background:var(--sql);}
.track-header[data-track="bi"]{background:linear-gradient(160deg,var(--bi-dim),transparent 70%);}
.track-header[data-track="bi"] .th-progress-fill{background:var(--bi);}
.track-header[data-track="dax"]{background:linear-gradient(160deg,var(--dax-dim),transparent 70%);}
.track-header[data-track="dax"] .th-progress-fill{background:var(--dax);}
.track-header[data-track="python"]{background:linear-gradient(160deg,var(--python-dim),transparent 70%);}
.track-header[data-track="python"] .th-progress-fill{background:var(--python);}

.rank-group{margin-bottom:8px;position:relative;}
.rank-title{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:1px;margin:18px 0 10px;padding-left:4px;}
.rank-title .rank-badge{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:11px;color:var(--bg);flex-shrink:0;}
.rank-title.locked{opacity:.4;}
.video-card{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:12px 14px;margin-bottom:14px;transition:.15s;}
.video-card:hover{border-color:var(--surface-3);background:var(--surface-3);}
.video-card-icon{width:30px;height:30px;flex-shrink:0;}
.video-card-icon svg{width:100%;height:100%;}
.video-card-text{flex:1;min-width:0;}
.video-card-label{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.5px;}
.video-card-title{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.3;margin-top:2px;}
.video-card-ext{width:15px;height:15px;color:var(--text-faint);flex-shrink:0;}
.video-card-ext svg{width:100%;height:100%;}

.node-list{display:flex;flex-direction:column;gap:10px;position:relative;}
.lesson-node{display:flex;align-items:center;gap:12px;padding:9px 14px 9px 9px;border-radius:14px;background:var(--surface);border:1px solid var(--border);position:relative;z-index:1;transition:.15s;text-align:left;width:100%;}
.lesson-node:not(.locked):hover{transform:translateX(3px);border-color:var(--surface-3);}
.lesson-node.locked{opacity:.45;cursor:default;}
.hex{width:38px;height:38px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;}
.hex svg{width:100%;height:100%;position:absolute;inset:0;}
.hex .hex-ico{position:relative;z-index:1;font-size:15px;font-family:var(--font-mono);font-weight:600;}
.hex .hex-lock{position:relative;z-index:1;width:14px;height:14px;color:var(--text-faint);}
.lesson-info{flex:1;min-width:0;}
.lesson-name{font-size:13.5px;font-weight:600;}
.lesson-meta{font-size:11px;color:var(--text-faint);font-family:var(--font-mono);margin-top:1px;}
.lesson-status{flex-shrink:0;}
.check-badge{width:20px;height:20px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;}
.check-badge svg{width:11px;height:11px;color:#04211d;}
.star-row{display:flex;gap:2px;}
.star-row svg{width:11px;height:11px;}

.review-timer-toggle{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:18px;font-size:13px;color:var(--text-dim);cursor:pointer;}
.review-timer-toggle input{width:16px;height:16px;accent-color:var(--core);}
.review-timer-badge{font-family:var(--font-mono);font-weight:700;font-size:13px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:5px 10px;color:var(--text);transition:.2s;}
.ai-btn{width:100%;padding:12px 18px;border-radius:12px;background:linear-gradient(135deg,#F5A623,#C084FC);color:#1a1025;font-family:var(--font-display);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s;}
.ai-btn:hover{filter:brightness(1.08);}
.ai-note{text-align:center;font-size:10.5px;color:var(--text-faint);margin-top:6px;font-family:var(--font-mono);}
.ai-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--text-faint);font-size:11px;text-transform:uppercase;letter-spacing:1px;}
.ai-divider::before,.ai-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.ai-loading-inline{display:flex;align-items:center;gap:10px;padding:12px;color:var(--text-dim);font-size:12.5px;}
.ai-loading-spinner{display:flex;align-items:center;justify-content:center;}

.core-section{margin-top:40px;border-radius:20px;border:1px solid var(--border);background:linear-gradient(135deg,var(--core-dim),transparent 60%),var(--surface);padding:26px 22px;position:relative;overflow:hidden;}
.core-section.locked{opacity:.55;}
.core-top{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.core-badge-icon{width:52px;height:52px;border-radius:14px;flex-shrink:0;background:var(--core);display:flex;align-items:center;justify-content:center;}
.core-badge-icon svg{width:26px;height:26px;color:#04211d;}
.core-title{font-family:var(--font-display);font-weight:700;font-size:21px;}
.core-sub{color:var(--text-dim);font-size:13px;margin-top:4px;max-width:560px;line-height:1.55;}
.core-cta{margin-left:auto;padding:11px 20px;border-radius:12px;background:var(--core);color:#04211d;font-family:var(--font-display);font-weight:700;font-size:13.5px;white-space:nowrap;}
.core-cta:disabled{background:var(--surface-3);color:var(--text-faint);cursor:not-allowed;}
.core-cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:20px;}
.core-case{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px;font-size:12px;}
.core-case .cc-tags{display:flex;gap:4px;margin-bottom:7px;flex-wrap:wrap;}
.cc-tag{font-family:var(--font-mono);font-size:9.5px;padding:2px 6px;border-radius:5px;font-weight:600;}
.cc-tag.sql{background:var(--sql-dim);color:var(--sql);}
.cc-tag.bi{background:var(--bi-dim);color:var(--bi);}
.cc-tag.dax{background:var(--dax-dim);color:var(--dax);}
.cc-tag.python{background:var(--python-dim);color:var(--python);}
.core-case .cc-name{font-weight:600;font-size:12.5px;line-height:1.3;}
.core-case.done{border-color:var(--ok);}