*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#0D0C0B;--bg-warm:#141210;--bg-sidebar:#0f0a2a;--bg-sidebar-hover:#1a1340;
    --bg-sidebar-active:rgba(226,172,110,0.12);--text:#F4EFE7;--text-mid:#B6AE9F;
    --text-light:#837A6D;--accent:#C8884D;--accent-soft:#2C2117;--purple:#E2AC6E;
    --purple-soft:#281E13;--emerald:#E2AC6E;--emerald-soft:#281E13;--amber:#f59e0b;
    --amber-soft:#2A2212;--white:#211C16;--border:rgba(255,255,255,0.09);--sidebar-w:280px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--text);line-height:1.65;background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Montserrat',sans-serif;font-weight:800;line-height:1.1;letter-spacing:-0.5px}
.portal{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--bg-sidebar);position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;overflow-y:auto;z-index:50;transition:transform 0.3s}
.sidebar-header{padding:28px 20px 24px;border-bottom:1px solid rgba(255,255,255,0.08);text-align:center}
.sidebar-logo{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none}
.sidebar-logo-photo{height:56px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(226,172,110,0.3))}
.sidebar-logo-text{font-family:'Montserrat',sans-serif;font-weight:800;font-size:20px;color:#fff}
.sidebar-progress{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.08)}
.progress-label{font-size:11px;font-weight:700;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.progress-bar{height:6px;border-radius:3px;background:rgba(255,255,255,0.1);overflow:hidden}
.progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--purple),var(--accent));transition:width 0.5s}
.progress-text{font-size:12px;color:rgba(255,255,255,0.4);margin-top:6px}
.sidebar-nav{flex:1;padding:12px 0}
.nav-section-label{font-size:11px;font-weight:800;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:1.5px;padding:20px 20px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 20px;color:rgba(255,255,255,0.65);text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;cursor:pointer;border:none;background:none;width:100%;text-align:left}
.nav-item:hover{color:rgba(255,255,255,0.9);background:var(--bg-sidebar-hover)}
.nav-item.active{color:#fff;background:var(--bg-sidebar-active);font-weight:600}
.nav-item.completed .nav-check{background:var(--purple);border-color:var(--purple)}
.nav-item.completed .nav-check svg{opacity:1}
.nav-check{width:22px;height:22px;border-radius:6px;border:1.5px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-check svg{width:12px;height:12px;color:#12100C;opacity:0}
.nav-num{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:rgba(255,255,255,0.4);width:22px;text-align:center;flex-shrink:0}
.main{flex:1;margin-left:var(--sidebar-w);min-height:100vh;overflow-x:hidden}
.topbar{position:sticky;top:0;z-index:40;background:rgba(13,12,11,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:14px 40px;display:flex;align-items:center;justify-content:space-between}
.topbar-breadcrumb{font-size:13px;color:var(--text-light)}
.topbar-breadcrumb strong{color:var(--text);font-weight:600}
.topbar-actions{display:flex;align-items:center;gap:12px}
.topbar-btn{padding:8px 16px;border-radius:8px;border:1px solid var(--border);background:var(--white);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--text-mid);cursor:pointer;display:none;align-items:center;gap:6px;transition:all 0.2s}
.topbar-btn:hover{border-color:var(--text-mid);color:var(--text)}
.content{max-width:760px;margin:0 auto;padding:48px 40px 120px;overflow-x:hidden;word-wrap:break-word}
.content-header{margin-bottom:40px}
.content-chapter{font-size:12px;font-weight:700;color:var(--purple);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
.content h1{font-size:36px;margin-bottom:16px}
.content h2{font-size:24px;margin:48px 0 16px;padding-top:32px;border-top:1px solid var(--border)}
.content h2:first-of-type{border-top:none;padding-top:0}
.content h3{font-size:18px;margin:32px 0 12px}
.content p{margin-bottom:16px;color:var(--text-mid)}
.content ul,.content ol{margin-bottom:16px;padding-left:24px;color:var(--text-mid)}
.content li{margin-bottom:8px}
.content pre{background:#1e1b2e;color:#e2dff0;border-radius:12px;padding:24px;margin:20px 0;overflow-x:auto;font-size:13px;line-height:1.6;font-family:'JetBrains Mono','Fira Code',monospace}
.content code{background:var(--bg-warm);padding:2px 8px;border-radius:4px;font-size:13px;color:var(--purple);font-family:'JetBrains Mono','Fira Code',monospace}
.content pre code{background:none;padding:0;color:inherit}
.avatar-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:12px;background:var(--purple-soft);border:1px solid rgba(226,172,110,0.15);color:var(--purple);font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;margin:24px 0}
.avatar-btn:hover{background:rgba(226,172,110,0.15);transform:translateY(-1px)}
.avatar-thumb{width:36px;height:36px;border-radius:8px;background:var(--purple);display:flex;align-items:center;justify-content:center;color:#12100C;font-size:16px}
.breakout{border-radius:12px;padding:20px 24px;margin:24px 0;border-left:4px solid}
.breakout-tip{background:var(--accent-soft);border-color:var(--accent)}
.breakout-warning{background:var(--amber-soft);border-color:var(--amber)}
.breakout-try{background:var(--emerald-soft);border-color:var(--emerald)}
.breakout-trouble{background:var(--purple-soft);border-color:var(--purple)}
.breakout-title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;margin-bottom:8px}
.breakout p{margin-bottom:8px;font-size:14px}
.breakout p:last-child{margin-bottom:0}
.breakout ul{margin-bottom:8px;padding-left:20px;font-size:14px}
.screenshot{background:var(--bg-warm);border:1.5px dashed rgba(255,255,255,0.10);border-radius:12px;padding:40px 24px;text-align:center;margin:24px 0;color:var(--text-light);font-size:14px}
.checklist{list-style:none;padding:0;margin:24px 0}
.checklist li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;background:var(--bg-warm);margin-bottom:8px;font-size:14px;cursor:pointer;transition:all 0.2s;color:var(--text-mid)}
.checklist li:hover{background:var(--purple-soft)}
.checklist li.done{opacity:0.5;text-decoration:line-through}
.check-box{width:20px;height:20px;border-radius:6px;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.checklist li.done .check-box{background:var(--purple);border-color:var(--purple)}
.check-box svg{width:12px;height:12px;color:#12100C;opacity:0}
.checklist li.done .check-box svg{opacity:1}
.chapter-complete{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;border-radius:12px;background:var(--purple-soft);border:1.5px solid rgba(226,172,110,0.2);color:var(--purple);font-family:'Inter',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.3s;margin-top:48px}
.chapter-complete:hover{background:var(--purple);color:#12100C;transform:translateY(-2px);box-shadow:0 8px 24px rgba(226,172,110,0.25)}
.chapter-nav{display:flex;justify-content:space-between;gap:16px;margin-top:24px;padding-top:24px;border-top:1px solid var(--border)}
.chapter-nav-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;border-radius:10px;background:var(--bg-warm);border:1px solid var(--border);font-size:14px;font-weight:500;color:var(--text-mid);text-decoration:none;cursor:pointer;transition:all 0.2s}
.chapter-nav-btn:hover{border-color:var(--text-mid);color:var(--text)}
.chatbot-btn{display:none}
.glossary-term{border-bottom:1.5px dotted var(--purple);cursor:help;position:relative;color:var(--text);transition:color 0.2s}
.glossary-term:hover{color:var(--purple)}
.glossary-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:280px;background:var(--bg-sidebar);color:#fff;border-radius:12px;padding:16px;font-size:13px;line-height:1.5;box-shadow:0 12px 40px rgba(0,0,0,0.2);opacity:0;visibility:hidden;pointer-events:none;transition:all 0.2s;z-index:100}
.glossary-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--bg-sidebar)}
.glossary-term:hover .glossary-tooltip{opacity:1;visibility:visible}
.glossary-tooltip-title{font-weight:700;margin-bottom:4px;color:var(--purple);font-size:12px;text-transform:uppercase;letter-spacing:0.5px}
.content table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.content table th,.content table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}
.content table th{font-weight:700;background:var(--bg-warm);font-family:'Montserrat',sans-serif;font-size:13px}
.content table td{color:var(--text-mid)}
.content blockquote{border-left:3px solid var(--purple);padding:12px 20px;margin:20px 0;background:var(--purple-soft);border-radius:0 8px 8px 0;color:var(--text-mid);font-size:14px;font-style:italic}

/* HELP CHATBOT */
.help-fab{position:fixed;top:50%;right:16px;transform:translateY(-50%);z-index:60}
.help-fab-btn{height:auto;background:none;display:flex;flex-direction:column;align-items:center;gap:0;padding:0;cursor:pointer;border:none;transition:all 0.3s;position:relative}
.help-fab-btn:hover{transform:scale(1.04)}
.help-fab-photo{width:120px;height:auto;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(226,172,110,0.3));transition:filter 0.3s}
.help-fab-btn:hover .help-fab-photo{filter:drop-shadow(0 6px 20px rgba(226,172,110,0.5))}
.help-fab-speech{position:absolute;top:-44px;right:0;background:var(--white);border:2px solid var(--purple);border-radius:14px;padding:8px 16px;font-size:13px;font-weight:800;color:var(--text);white-space:nowrap;box-shadow:0 4px 16px rgba(226,172,110,0.15);font-family:'Inter',sans-serif}
.help-fab-speech::after{content:'';position:absolute;bottom:-7px;right:24px;width:12px;height:12px;background:var(--white);border-right:2px solid var(--purple);border-bottom:2px solid var(--purple);transform:rotate(45deg)}
.help-fab-icon{display:none}
/* Guide picker */
.guide-picker{position:fixed;bottom:120px;right:24px;background:var(--white);border-radius:20px;border:1.5px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,0.12);padding:24px;z-index:62;display:none;width:320px;text-align:center}
.guide-picker.open{display:block}
.guide-picker h3{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:800;margin-bottom:6px}
.guide-picker p{font-size:13px;color:var(--text-mid);margin-bottom:16px}
.guide-options{display:flex;gap:24px;justify-content:center}
.guide-option{cursor:pointer;text-align:center;transition:transform 0.2s}
.guide-option:hover{transform:scale(1.06)}
.guide-option img{width:100px;height:auto;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.1));transition:all 0.2s}
.guide-option:hover img{filter:drop-shadow(0 6px 16px rgba(226,172,110,0.3))}
.guide-option span{display:block;margin-top:8px;font-size:14px;font-weight:700;color:var(--text)}
.help-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.help-suggestion{padding:6px 12px;border-radius:100px;background:var(--purple-soft);border:1px solid rgba(226,172,110,0.15);color:var(--purple);font-size:12px;cursor:pointer;transition:all 0.2s;font-family:'Inter',sans-serif}
.help-suggestion:hover{background:rgba(226,172,110,0.2)}
.help-panel{position:fixed;bottom:90px;right:24px;width:380px;max-height:500px;background:var(--white);border-radius:20px;border:1.5px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,0.12);z-index:61;display:none;flex-direction:column;overflow:hidden}
.help-panel.open{display:flex}
.help-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.help-header-title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px}
.help-close{background:none;border:none;cursor:pointer;color:var(--text-light);font-size:18px;padding:4px}
.help-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px;max-height:340px}
.help-msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.6}
.help-msg.bot{background:var(--bg-warm);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px}
.help-msg.user{background:var(--accent);color:#12100C;align-self:flex-end;border-bottom-right-radius:4px}
.help-msg.loading{background:var(--bg-warm);color:var(--text-light);align-self:flex-start}
.help-input-wrap{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px}
.help-input{flex:1;padding:10px 14px;border-radius:100px;border:1.5px solid var(--border);font-family:'Inter',sans-serif;font-size:13px;color:var(--text);background:var(--bg)}
.help-input:focus{outline:none;border-color:var(--purple)}
.help-input::placeholder{color:var(--text-light)}
.help-send{width:36px;height:36px;border-radius:50%;background:var(--accent);border:none;color:#12100C;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s;flex-shrink:0}
.help-send:hover{background:var(--purple)}

@media(max-width:500px){
    .help-panel{width:calc(100vw - 32px);right:16px;bottom:80px}
}

@media(max-width:900px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.open{transform:translateX(0)}
    .main{margin-left:0;overflow-x:hidden}
    .content{padding:24px 16px 100px}
    .content h1{font-size:26px;word-wrap:break-word}
    .content h2{font-size:20px}
    .topbar{padding:12px 16px}
    .topbar-breadcrumb{font-size:12px}
    .topbar-btn{display:flex}
    .content pre{font-size:12px;padding:16px}
    .chapter-nav{flex-direction:column}
    .help-fab{top:auto;bottom:24px;right:16px;transform:none}
    .help-fab-photo{width:60px}
    .help-fab-speech{display:none}
    .guide-picker{width:calc(100vw - 32px);right:16px;bottom:100px}
    .guide-option img{width:80px}
}