/* ===== AENAPPS — Course dashboard stylesheet (extends style.css) ===== */
.app{display:grid; grid-template-columns:270px 1fr; min-height:100vh;}
@media(max-width:900px){.app{grid-template-columns:1fr;}}

.sidebar{
  background:var(--bg-elev); border-right:1px solid var(--border); padding:22px 18px;
  display:flex; flex-direction:column; gap:22px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
@media(max-width:900px){.sidebar{position:relative; height:auto; border-right:none; border-bottom:1px solid var(--border);}}
.sb-progress{padding:14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-m);}
.sb-progress .top{display:flex; justify-content:space-between; font-size:12px; color:var(--gray); margin-bottom:8px;}
.sb-stats{display:flex; gap:8px; margin-top:12px;}
.sb-stat{flex:1; text-align:center; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:8px 4px;}
.sb-stat .n{font-family:var(--font-display); font-weight:800; font-size:15px;}
.sb-stat .l{font-size:10px; color:var(--gray-dim); text-transform:uppercase; letter-spacing:.04em; margin-top:2px;}

.sb-nav{display:flex; flex-direction:column; gap:3px;}
.sb-nav-title{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-dim); padding:0 10px; margin:10px 0 4px;}
.sb-item{ display:flex; align-items:center; gap:11px; padding:10px 10px; border-radius:10px; font-size:13.5px; color:var(--gray); border:1px solid transparent; transition:all .15s ease; }
.sb-item:hover{background:rgba(255,255,255,0.03); color:var(--white);}
.sb-item.active{background:rgba(37,99,235,0.12); border-color:rgba(37,99,235,0.35); color:var(--white); font-weight:600;}
.sb-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.sb-dot.done{background:var(--green);} .sb-dot.active-dot{background:var(--blue-accent); box-shadow:0 0 0 3px rgba(56,189,248,0.18);} .sb-dot.locked{background:var(--gray-dim); opacity:.5;}
.sb-item .lock{margin-left:auto; font-size:11px; color:var(--gray-dim);}

.main{padding:26px 32px 60px;}
@media(max-width:640px){.main{padding:18px 16px 50px;}}
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; flex-wrap:wrap; gap:14px;}
.topbar h1{font-size:21px;}
.topbar .sub{font-size:13px; color:var(--gray); margin-top:3px;}
.user-chip{display:flex; align-items:center; gap:10px; background:var(--bg-card); border:1px solid var(--border); padding:8px 14px 8px 8px; border-radius:100px;}
.avatar{width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg, var(--gold), #d97706); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#0B1220;}
.user-chip .name{font-size:13px; font-weight:600;}
.user-chip .plan{font-size:10.5px; color:var(--gold);}

.tabs{display:flex; gap:8px; margin-bottom:24px; border-bottom:1px solid var(--border); overflow-x:auto;}
.tab-btn{ padding:11px 4px; margin-right:22px; font-size:14px; font-weight:600; color:var(--gray-dim); border:none; background:none; border-bottom:2px solid transparent; white-space:nowrap; font-family:var(--font-body); cursor:pointer; }
.tab-btn.active{color:var(--white); border-color:var(--blue-accent);}

.panel{display:none;} .panel.active{display:block;}
.grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:20px;}
@media(max-width:900px){.grid-2{grid-template-columns:1fr;}}

.lesson-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.lesson-badge{font-size:11.5px; font-weight:700; color:var(--blue-accent); background:rgba(56,189,248,0.1); padding:4px 10px; border-radius:100px;}
.lesson-title{font-size:22px; margin:10px 0 6px;}
.lesson-meta{font-size:12.5px; color:var(--gray-dim);}
.lesson-body{font-size:14.5px; color:var(--gray); line-height:1.75; margin:18px 0;}
.lesson-body p{margin-bottom:14px;}
.chart-mock{background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-m); padding:14px; height:180px; margin:18px 0;}
.chart-mock svg{width:100%; height:100%;}
.lesson-callout{background:rgba(56,189,248,0.06); border:1px solid rgba(56,189,248,0.18); border-radius:12px; padding:14px 16px; font-size:13.5px; color:var(--gray); margin:16px 0;}
.lesson-nav{display:flex; justify-content:space-between; margin-top:26px; gap:12px;}
.btn.small-btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; padding:12px 20px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--white);}
.btn.small-btn:hover{filter:brightness(1.08);}

.quiz-progress{font-size:12px; color:var(--gray-dim); margin-bottom:10px;}
.journal-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-dim); padding:10px 12px; border-bottom:1px solid var(--border);}
td{padding:12px; border-bottom:1px solid var(--border); color:var(--gray);}
tr:last-child td{border-bottom:none;}
.tag{font-size:11px; font-weight:700; padding:3px 9px; border-radius:100px;}
.tag.win{color:var(--green); background:rgba(34,197,94,0.1);} .tag.loss{color:var(--red); background:rgba(239,68,68,0.1);}
.table-wrap{overflow-x:auto;}

.plan-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0;}
@media(max-width:640px){.plan-grid{grid-template-columns:1fr;}}
.plan-field label{font-size:12px; color:var(--gray-dim); display:block; margin-bottom:6px; font-weight:600;}
.plan-field input, .plan-field select, .plan-field textarea{ width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px 12px; color:var(--white); font-family:var(--font-body); font-size:13.5px; }
.plan-field textarea{resize:vertical; min-height:70px;}

.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.badge{display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border); padding:8px 12px; border-radius:100px; font-size:12px;}
.badge.locked{opacity:.4;}
.welcome-toast{ background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.3); border-radius:var(--radius-m); padding:14px 18px; font-size:13.5px; margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.demo-note{font-size:11.5px; color:var(--gray-dim); margin-top:30px; text-align:center; opacity:.7;}

/* ===== Lesson pages (chapter-based, all modules unlocked) ===== */
.sb-item.done{color:var(--gray);}
.chapter-block{margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--border);}
.chapter-block:last-of-type{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.chapter-num{font-size:11px; font-weight:700; color:var(--blue-accent); letter-spacing:.03em; display:block; margin-bottom:6px;}
.chapter-block h3{font-size:16px; margin-bottom:8px; color:var(--white); font-family:var(--font-display); font-weight:700;}
.chapter-block p{font-size:14px; color:var(--gray); line-height:1.75; margin:0;}
.module-progress-note{font-size:12px; color:var(--gray-dim); margin-bottom:4px;}
.module-nav-footer{display:flex; justify-content:space-between; align-items:center; margin-top:38px; gap:12px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--border);}
.btn.next-btn{background:linear-gradient(135deg, var(--blue), #1d4fd1); border-color:transparent; color:#fff;}
.btn.finish-btn{background:linear-gradient(135deg, var(--gold), #d97706); border-color:transparent; color:#0B1220;}

/* ===== Congratulations / finish page ===== */
.finish-wrap{max-width:760px; margin:0 auto;}
.finish-badge{ width:84px; height:84px; border-radius:50%; margin:0 auto 22px; background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.4); display:flex; align-items:center; justify-content:center; font-size:38px; }
.finish-hero{text-align:center; margin-bottom:44px;}
.finish-hero h1{font-size:clamp(26px,4vw,38px); margin-bottom:14px;}
.finish-hero p{color:var(--gray); font-size:16px; max-width:560px; margin:0 auto;}
.tips-list{display:flex; flex-direction:column; gap:14px; margin:36px 0;}
.tip-item{display:flex; gap:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-m); padding:18px 20px;}
.tip-num{ width:30px; height:30px; border-radius:9px; background:rgba(56,189,248,0.12); color:var(--blue-accent); font-family:var(--font-display); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tip-item p{font-size:14px; color:var(--gray); line-height:1.65; margin:0;}
.tip-item strong{color:var(--white);}