:root{--unit-color: var(--color-accent);--unit-color-light: var(--color-accent-light);--color-on-accent: #3d2a00;--shadow-sm: 0 1px 4px rgba(0, 0, 0, .06);--shadow-md: 0 4px 16px rgba(0, 0, 0, .09);--header-h: 56px;--nav-w: 220px;--content-max: 760px}body.dark{--shadow-sm: 0 1px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .5)}.unit-nav{position:fixed;top:var(--header-h);bottom:0;left:0;width:var(--nav-w);background:var(--color-surface);border-right:1px solid var(--color-border);overflow-y:auto;z-index:50;padding:1rem .5rem 2rem}.nav-section-label{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-secondary);padding:0 .75rem;margin-bottom:.5rem}.nav-unit-btn{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem .75rem;min-height:44px;border:none;background:transparent;border-radius:8px;text-align:left;cursor:pointer;transition:all .15s;border-left:3px solid transparent}.nav-unit-btn:hover{background:var(--color-bg)}.nav-unit-btn.active{background:var(--unit-color-light, var(--color-accent-light));border-left-color:var(--unit-color, var(--color-accent))}.nav-unit-btn.active .nav-label{color:var(--color-accent-text);font-weight:700}body.dark .nav-unit-btn.active .nav-label{color:var(--color-accent)}.nav-num{font-size:.75rem;color:var(--color-text-secondary);min-width:1.8rem;font-weight:700}.nav-label{font-size:.85rem;color:var(--color-text-primary);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-quiz-dot{width:7px;height:7px;border-radius:50%;background:var(--color-border);flex-shrink:0;margin-left:auto}.nav-quiz-dot.done{background:var(--color-accent)}.main{margin-left:var(--nav-w);padding:2rem 2.5rem 4rem;max-width:calc(var(--nav-w) + var(--content-max))}.unit-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:2px solid var(--unit-color, var(--color-accent))}.unit-num{font-size:.75rem;font-weight:700;letter-spacing:.05em;color:var(--color-on-accent, var(--color-accent-text));background:var(--unit-color, var(--color-accent));padding:.2rem .6rem;border-radius:4px;flex-shrink:0;margin-top:.3rem}.unit-title{font-size:1.6rem;font-weight:700;line-height:1.3}.unit-progress{font-size:.85rem;color:var(--color-text-secondary);margin-top:.25rem}.markdown-body{font-size:1.05rem;line-height:1.9}.markdown-body h2{font-size:1.25rem;font-weight:700;color:var(--color-text-primary);margin-top:3rem;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:2px solid var(--unit-color, var(--color-accent))}.markdown-body h3{font-size:1.1rem;font-weight:700;color:var(--color-text-primary);margin-top:2rem;margin-bottom:.5rem;padding-left:.75rem;border-left:4px solid var(--unit-color, var(--color-accent))}.markdown-body p{margin-bottom:1.25rem}.markdown-body ul,.markdown-body ol{padding-left:1.5rem;margin-bottom:1.25rem}.markdown-body li{margin-bottom:.5rem}.markdown-body code{font-family:var(--font-mono);font-size:.9em;background:var(--color-surface);color:var(--color-accent-text);padding:.15em .4em;border-radius:4px;border:1px solid var(--color-border)}body.dark .markdown-body code{color:var(--color-accent)}.markdown-body pre{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:1.25rem;overflow-x:auto;margin-bottom:1.5rem}.markdown-body pre code{background:none;border:none;color:var(--color-text-primary);padding:0;font-size:.9rem;line-height:1.6}.markdown-body table{width:100%;border-collapse:collapse;font-size:.95rem;margin-bottom:1.5rem}.markdown-body th{background:var(--color-bg);border:1px solid var(--color-border);padding:.75rem 1rem;text-align:left;font-weight:700;color:var(--color-text-secondary)}.markdown-body td{border:1px solid var(--color-border);padding:.75rem 1rem;line-height:1.6}.markdown-body blockquote{border-left:4px solid var(--unit-color, var(--color-accent));background:var(--unit-color-light, var(--color-accent-light));border-radius:0 8px 8px 0;padding:1rem 1.5rem;margin-bottom:1.5rem;font-size:1rem}.quiz-score-display{text-align:right;margin-bottom:.5rem}.quiz-score-display strong{font-size:1.6rem;color:var(--unit-color, var(--color-accent));font-weight:700;display:block;line-height:1}.quiz-score-display span{font-size:.8rem;color:var(--color-text-secondary)}.quiz-progress-bar{height:6px;background:var(--color-border);border-radius:100px;overflow:hidden;margin-bottom:2rem}.quiz-progress-fill{height:100%;width:0%;background:var(--unit-color, var(--color-accent));transition:width .35s ease}.cloze-word{display:inline-block;padding:1px 6px;margin:0 1px;border-radius:4px;cursor:pointer;font-weight:700;transition:all .15s;vertical-align:baseline}.cloze-word.cloze-hidden{background:var(--color-text-primary);color:transparent!important;border:1px solid var(--color-text-primary)}.cloze-word.revealed{background:var(--unit-color-light, var(--color-accent-light));color:var(--color-text-primary);border:1px solid var(--unit-color, var(--color-accent))}.cloze-hint{border-bottom:2px solid var(--unit-color, var(--color-accent));color:var(--unit-color, var(--color-accent));font-weight:700}@media(max-width:900px){.unit-nav{position:absolute;top:100%;left:0;right:0;width:auto;max-height:calc(100vh - var(--header-h) - 1rem);border-right:none;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);box-shadow:0 8px 24px #0000001f;padding:.5rem .5rem 1rem;transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform .2s ease,opacity .2s ease;z-index:49}body.nav-open .unit-nav{transform:translateY(0);opacity:1;pointer-events:auto}.main{margin-left:0;padding:1.5rem}}.tab-btns{display:inline-flex;background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;padding:2px;gap:2px}.tab-btn{background:transparent;border:none;border-radius:6px;padding:.4rem 1rem;font-size:.85rem;font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all .15s ease}.tab-btn:hover{color:var(--color-text-primary)}.tab-btn.active{background:var(--color-surface);color:var(--color-accent-text);box-shadow:0 1px 3px #00000014}body.dark .tab-btn.active{color:var(--color-accent);box-shadow:0 1px 3px #0000004d}
