.account-nav{display:inline-flex;align-items:center;margin-left:18px}.account-user-link,.account-nav-link{display:inline-flex;align-items:center;max-width:190px;padding:8px 13px;border:1px solid var(--line);border-radius:9px;color:var(--blue);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-user-link:hover,.account-nav-link:hover{border-color:#6da9ff88;color:var(--teal)}.account-main{min-height:65vh;padding-bottom:70px}.account-card{max-width:680px;padding:30px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#14233b,#0d172a)}.account-card h2{font:750 28px Manrope,sans-serif;margin:0 0 8px}.account-muted{color:var(--muted);font-size:14px}.password-field-wrap{position:relative;display:flex;align-items:center;width:100%}.password-field-wrap input{padding-right:54px!important}.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:38px;height:34px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;font-size:17px}.password-toggle:hover{color:var(--blue);border-color:#6da9ff88}.reader-tools .account-nav{margin-left:4px}@media(max-width:620px){.account-nav{margin-left:0}.account-user-link,.account-nav-link{max-width:120px;padding:7px 9px;font-size:11px}.reader-tools .account-nav{width:100%;justify-content:flex-end}}

/* Shared contrast-safe palette for all lesson SVG diagrams. */
.lesson-diagram,.lesson-figure{
  margin:28px 0;padding:18px;border:1px solid var(--diagram-border);
  border-radius:16px;background:var(--diagram-surface);overflow:hidden;color:var(--diagram-text)
}
.lesson-diagram svg,.lesson-figure svg{display:block;width:100%;height:auto;overflow:visible}
.lesson-diagram figcaption,.lesson-figure figcaption{margin-top:12px;color:var(--diagram-caption);font-size:13px;line-height:1.6}
.lesson-diagram .svg-title,.lesson-figure .svg-title{fill:var(--diagram-title);color:var(--diagram-title);font:700 17px Manrope,Arial,sans-serif}
.lesson-diagram .svg-label,.lesson-figure .svg-label{fill:var(--diagram-text);color:var(--diagram-text);font:600 13px Manrope,Arial,sans-serif}
.lesson-diagram .svg-small,.lesson-figure .svg-small{fill:var(--diagram-muted);color:var(--diagram-muted);font:12px Manrope,Arial,sans-serif}
.lesson-diagram .svg-accent,.lesson-figure .svg-accent{fill:#2477c5;color:#2477c5}
.lesson-diagram .svg-box,.lesson-figure .svg-box{fill:var(--diagram-box);stroke:var(--diagram-box-stroke);stroke-width:1.5}
.lesson-diagram .svg-box2,.lesson-figure .svg-box2{fill:var(--diagram-box2);stroke:var(--diagram-box2-stroke);stroke-width:1.5}
.lesson-diagram .svg-box3,.lesson-figure .svg-box3{fill:var(--diagram-box3);stroke:var(--diagram-box3-stroke);stroke-width:1.5}
.lesson-diagram .svg-box4,.lesson-figure .svg-box4{fill:var(--diagram-box4);stroke:var(--diagram-box4-stroke);stroke-width:1.5}
.lesson-diagram svg rect:not([class]),.lesson-figure svg rect:not([class]){rx:10}
.lesson-glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}
.glossary-entry{position:relative;padding:16px 17px 15px 20px;border:1px solid var(--line);border-radius:13px;background:var(--panel);overflow:hidden}
.glossary-entry:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--blue),var(--violet),var(--teal))}
.glossary-entry .term{display:block;color:var(--text);font-weight:800;font-family:Manrope,Arial,sans-serif}
.glossary-entry .term-en{display:block;margin-top:3px;color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.04em}
.glossary-entry p{margin:9px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
.glossary-entry .term-index{float:right;color:var(--muted);font:700 10px ui-monospace,monospace;opacity:.8}
@media(max-width:560px){.lesson-diagram,.lesson-figure{padding:10px}.lesson-diagram .svg-title,.lesson-figure .svg-title{font-size:15px}.lesson-diagram .svg-label,.lesson-figure .svg-label{font-size:12px}.lesson-diagram .svg-small,.lesson-figure .svg-small{font-size:10px}.lesson-glossary{grid-template-columns:1fr}}
/* Lesson-page header uses the same transparent logo asset as the main site. */
.brand img{
  display:block;width:43px;height:43px;object-fit:contain;padding:5px;
  border:1px solid rgba(116,165,235,.34);border-radius:12px;
  background:#f4f7ff;
  box-shadow:0 5px 18px rgba(35,91,170,.18)
}