*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body.lab-app{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:#0d1117;
  color:#c9d1d9;
}

.lab-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:240px minmax(0,1fr)300px;
  gap:0;
}

.lab-sidebar{
  padding:28px 18px;
  border-right:1px solid #21262d;
  background:#0d1117;
}

.lab-brand{
  display:block;
  font-size:22px;
  font-weight:700;
  color:#2f81f7;
  text-decoration:none;
  margin-bottom:28px;
  line-height:1.3;
}

.lab-nav{display:flex;flex-direction:column;gap:8px}
.lab-nav-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:10px;
  color:#8b949e;text-decoration:none;font-size:15px;
  transition:background .2s,color .2s;
}
.lab-nav-item:hover{color:#c9d1d9;background:#161b22}
.lab-nav-item.is-active{
  color:#fff;
  background:#1f6feb33;
  box-shadow:inset 0 0 0 1px #1f6feb66;
}
.lab-nav-icon{font-size:18px;width:22px;text-align:center;flex-shrink:0}

.lab-main{
  padding:36px 32px 48px;
  background:#0d1117;
}

.lab-article-card,
.lab-list-card,
.lab-form-card{
  background:#161b22;
  border:1px solid #30363d;
  border-radius:16px;
  padding:32px 36px;
  max-width:860px;
}

.lab-article-title,
.lab-list-card h2{
  margin:0 0 18px;
  font-size:34px;
  line-height:1.35;
  color:#f0f6fc;
  font-weight:700;
}

.lab-article-summary,
.lab-list-card p{
  margin:0 0 24px;
  font-size:16px;
  line-height:1.75;
  color:#8b949e;
}

.lab-code-preview{
  background:#0d1117;
  border:1px solid #30363d;
  border-radius:12px;
  padding:24px 28px;
  min-height:220px;
  font-family:Consolas,"Courier New",monospace;
  font-size:14px;
  line-height:1.8;
  color:#8b949e;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:auto;
}

.lab-code-preview.is-full{color:#c9d1d9}
.lab-code-label{color:#484f58;margin-bottom:12px;font-size:13px}

.lab-meta{
  margin-top:18px;
  font-size:13px;
  color:#6e7681;
}

.lab-lock-mask{
  margin-top:20px;
  padding:18px 20px;
  border-radius:12px;
  border:1px dashed #30363d;
  background:linear-gradient(180deg,transparent,#161b22 60%);
  text-align:center;
  color:#8b949e;
}

.lab-list{display:flex;flex-direction:column;gap:18px;max-width:860px}
.lab-list-card{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:border-color .2s,transform .2s;
}
.lab-list-card:hover{
  border-color:#2f81f7;
  transform:translateY(-1px);
}
.lab-list-card .lab-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:#2f81f7;margin-bottom:10px;
}
.lab-list-cover{
  width:100%;height:180px;object-fit:cover;border-radius:10px;margin-bottom:16px;
  border:1px solid #30363d;background:#0d1117;
}
.lab-article-cover{
  width:100%;max-height:320px;object-fit:cover;border-radius:12px;margin-bottom:22px;
  border:1px solid #30363d;
}
.lab-article-body img{
  max-width:100%;border-radius:10px;margin:16px 0;border:1px solid #30363d;
}
.lab-article-body p,.lab-article-body br{line-height:1.8}
.lab-empty{
  max-width:860px;
  padding:48px 24px;
  text-align:center;
  color:#6e7681;
  background:#161b22;
  border:1px solid #30363d;
  border-radius:16px;
}

.lab-panel{
  padding:36px 24px;
  border-left:1px solid #21262d;
  background:#0d1117;
}

.lab-panel-card{
  background:#161b22;
  border:1px solid #2f81f7;
  border-radius:16px;
  padding:24px 22px;
  text-align:center;
}

.lab-panel-status{
  font-size:14px;
  color:#8b949e;
  margin-bottom:18px;
}

.lab-avatar{
  width:72px;height:72px;
  margin:0 auto 18px;
  border-radius:50%;
  background:#30363d;
  color:#8b949e;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
  line-height:1.3;
  padding:8px;
}

.lab-vip-badge{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  background:#23863633;
  color:#3fb950;
  font-size:13px;
  margin-bottom:10px;
}

.lab-vip-expire{font-size:12px;color:#8b949e;margin-bottom:14px}

.lab-cta-btn{
  display:block;
  width:100%;
  padding:14px 16px;
  border-radius:999px;
  background:#2f81f7;
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  margin-bottom:18px;
  transition:background .2s;
}
.lab-cta-btn:hover{background:#1f6feb}

.lab-qrcode-wrap{margin-bottom:12px}
.lab-qrcode,
.lab-qrcode-placeholder{
  width:160px;height:160px;
  margin:0 auto;
  border-radius:8px;
  display:block;
}
.lab-qrcode-placeholder{background:#fff}

.lab-panel-foot{font-size:12px;color:#6e7681;margin-bottom:10px}
.lab-wechat{font-size:12px;color:#8b949e;margin-bottom:12px;word-break:break-all}
.lab-link{
  display:inline-block;
  margin:6px 8px 0;
  font-size:13px;
  color:#2f81f7;
  text-decoration:none;
}
.lab-link:hover{text-decoration:underline}

.lab-form-card{max-width:520px}
.lab-form-card h2{margin:0 0 20px;color:#f0f6fc}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:8px;color:#8b949e;font-size:14px}
.form-group input{
  width:100%;padding:12px 14px;
  border:1px solid #30363d;border-radius:10px;
  background:#0d1117;color:#c9d1d9;font-size:14px;
}
.btn{
  display:inline-block;padding:12px 18px;
  background:#2f81f7;color:#fff;border:none;border-radius:10px;
  text-decoration:none;cursor:pointer;font-size:14px;
}
.btn:hover{background:#1f6feb}
.alert-error{color:#f85149;margin-bottom:12px}

.lab-article-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  max-width:860px;margin-top:20px;
}
.lab-nav-link{
  display:flex;flex-direction:column;gap:8px;
  padding:18px 20px;border-radius:12px;
  background:#161b22;border:1px solid #30363d;
  text-decoration:none;color:inherit;min-height:88px;
  transition:border-color .2s,background .2s;
}
.lab-nav-link:hover{border-color:#2f81f7;background:#1c2128}
.lab-nav-link.is-disabled{
  opacity:.45;cursor:not-allowed;
}
.lab-nav-next{text-align:right}
.lab-nav-label{font-size:13px;color:#2f81f7;font-weight:600}
.lab-nav-title{font-size:15px;color:#c9d1d9;line-height:1.5}
.lab-nav-next .lab-nav-label,.lab-nav-next .lab-nav-title{align-self:flex-end}

@media (max-width:1100px){
  .lab-shell{grid-template-columns:200px minmax(0,1fr)260px}
  .lab-article-title,.lab-list-card h2{font-size:28px}
}
@media (max-width:900px){
  .lab-shell{grid-template-columns:1fr}
  .lab-sidebar,.lab-panel{border:none;padding:16px}
  .lab-nav{flex-direction:row;flex-wrap:wrap}
  .lab-main{padding:16px}
  .lab-article-nav{grid-template-columns:1fr}
  .lab-nav-next{text-align:left}
  .lab-nav-next .lab-nav-label,.lab-nav-next .lab-nav-title{align-self:flex-start}
}