/* 顶栏 */
.topbar{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:var(--c-surface);border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;padding:0 20px;gap:18px;
}
.topbar .brand{font-weight:700;font-size:1.05rem;color:var(--c-text)}
.topbar .brand span{color:var(--c-primary)}
.topbar nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.topbar nav a{
  padding:6px 12px;border-radius:var(--radius-sm);color:var(--c-text-2);
  font-size:.92rem;
}
.topbar nav a:hover{background:var(--c-bg);text-decoration:none}
.topbar nav a.active{background:var(--c-primary);color:#fff}

/* 三栏布局 */
.shell{max-width:var(--content-w);margin:0 auto;padding:20px;display:flex;gap:20px}
.shell .side-left{width:230px;flex-shrink:0}
.shell .main{flex:1;min-width:0}
.shell .side-right{width:230px;flex-shrink:0}

.card{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
  margin-bottom:16px;
}
.card h3{margin-top:0}
.muted{color:var(--c-text-2);font-size:.9rem}
.small{font-size:.85rem}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:var(--radius-sm);border:1px solid var(--c-border);
  background:var(--c-surface);color:var(--c-text);font-size:.95rem;
}
.btn:hover{background:var(--c-bg)}
.btn-primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.btn-primary:hover{background:var(--c-primary-dark)}
.btn-block{display:flex;width:100%;justify-content:center}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* 进度条 */
.progress{height:8px;background:#e5e9ed;border-radius:4px;overflow:hidden}
.progress > i{display:block;height:100%;background:var(--c-primary);border-radius:4px;transition:width .3s}

/* 标签 */
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.78rem;background:#eaeef2;color:var(--c-text-2);margin:2px}
.tag.ok{background:#dafbe1;color:var(--c-success)}
.tag.warn{background:#fff8c5;color:var(--c-warning)}
.tag.err{background:#ffebe9;color:var(--c-danger)}

/* 列表 */
.list-item{
  display:flex;align-items:center;gap:12px;padding:12px;
  border:1px solid var(--c-border);border-radius:var(--radius-sm);
  margin-bottom:8px;background:var(--c-surface);
}
.list-item:hover{border-color:var(--c-primary)}
.list-item .meta{margin-left:auto;text-align:right;flex-shrink:0}

/* 章节树 */
.tree-group{font-size:.95rem}
.tree-group .g-title{font-weight:600;margin:10px 0 6px;color:var(--c-text-2)}
.tree-leaf{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;
  color:var(--c-text);font-size:.92rem;
}
.tree-leaf:hover{background:var(--c-bg);text-decoration:none}
.tree-leaf.active{background:#ddf4ff;color:var(--c-primary)}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dot.new{background:var(--st-new)}
.dot.learning{background:var(--st-learning)}
.dot.weak{background:var(--st-weak)}
.dot.master{background:var(--st-master)}

/* 空态 */
.empty{padding:40px;text-align:center;color:var(--c-text-3)}