/* ============ 安装宝塔面板页 ============ */
/* 本页已去掉 hero 配图，标题区改单列全宽 */
.p-hero .wrap{grid-template-columns:minmax(0,1fr)}
.p-hero h1 .t-green{color:#12B76A}
.bt-lead{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 34px}
.bt-lead div{border:1px solid var(--line);background:#fff;padding:20px 22px}
.bt-lead b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px;font-weight:600;margin-right:8px}
.bt-lead h4{display:flex;align-items:center;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:8px}
.bt-lead p{font-size:13.5px;line-height:1.8;color:var(--ink2)}

/* 面板预览 */
.bt-shot{margin:0 0 34px;border:1px solid var(--line);background:#fff}
.bt-shot-bar{display:flex;align-items:center;gap:7px;padding:10px 13px;background:#F7F9FC;border-bottom:1px solid var(--line)}
.bt-shot-bar i{width:9px;height:9px;border-radius:50%;background:#D8DEE9;display:block;flex:0 0 auto}
.bt-shot-bar i:first-child{background:#F87171}
.bt-shot-bar i:nth-child(2){background:#FBBF24}
.bt-shot-bar i:nth-child(3){background:#34D399}
.bt-shot-body{background:#F1F5F9;line-height:0}
.bt-shot-body picture{display:block}
.bt-shot-body img{display:block;width:100%;height:auto}
.bt-shot figcaption{font-size:12.5px;color:var(--ink3);padding:10px 14px;border-top:1px solid var(--line);background:#fff}

.bt-blk{margin-bottom:40px}
.bt-blk > h3{font-size:20px;font-weight:600;color:var(--ink);margin-bottom:6px;letter-spacing:-.3px}
.bt-blk > .sub{font-size:13.5px;color:var(--ink3);margin-bottom:18px}

/* 系统切换 */
.bt-ver{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0;border-bottom:1px solid var(--line)}
.bt-ver button{flex:0 0 auto;border:1px solid var(--line);border-bottom:0;background:#fff;color:var(--ink2);font-size:13.5px;padding:10px 16px;cursor:pointer;border-radius:0;transition:.18s;position:relative;top:1px}
.bt-ver button:hover{color:var(--blue)}
.bt-ver button.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.bt-panel{display:none;border:1px solid var(--line);border-top:0;background:#fff;padding:22px}
.bt-panel.on{display:block}
.bt-panel .p-note{font-size:13.5px;line-height:1.85;color:var(--ink2);margin-bottom:14px}
.bt-panel .p-note b{color:var(--ink)}
.bt-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.bt-tags span{font-size:12px;line-height:22px;padding:0 9px;background:var(--blue-l);color:var(--blue);border-radius:2px}

/* 命令块 */
.cmd{position:relative;background:#0F172A;border-radius:4px;padding:16px 70px 16px 18px;margin-bottom:14px}
.cmd code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.9;color:#E2E8F0;white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere}
.cmd .copy{position:absolute;top:10px;right:10px;height:28px;padding:0 12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#CBD5E1;font-size:12px;border-radius:3px;cursor:pointer;transition:.18s}
.cmd .copy:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.cmd .copy.done{background:#12B76A;border-color:#12B76A;color:#fff}
.cmd .cap{font-size:12px;color:#94A3B8;margin-bottom:8px}

.bt-src{font-size:12.5px;color:var(--ink3);margin-top:12px}
.bt-src a{color:var(--blue)}

/* 步骤 */
.bt-steps{counter-reset:s;border-left:2px solid var(--blue-l);padding-left:22px}
.bt-steps li{position:relative;list-style:none;padding-bottom:22px}
.bt-steps li:last-child{padding-bottom:0}
.bt-steps li:before{counter-increment:s;content:counter(s);position:absolute;left:-35px;top:1px;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--blue);color:var(--blue);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.bt-steps h4{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:6px}
.bt-steps p{font-size:13.5px;line-height:1.85;color:var(--ink2)}
.bt-steps code{background:#EEF2F9;color:#1A56DB;font-size:12.5px;padding:1px 5px;border-radius:2px;font-family:ui-monospace,Menlo,Consolas,monospace}

/* 表格 */
.bt-table{width:100%;border-collapse:collapse;border:1px solid var(--line);font-size:13.5px;background:#fff}
.bt-table th,.bt-table td{border-bottom:1px solid var(--line);padding:11px 14px;text-align:left;color:var(--ink2)}
.bt-table th{background:#F7F9FC;font-weight:600;color:var(--ink);white-space:nowrap}
.bt-table tr:last-child td{border-bottom:0}
.bt-table td:first-child{color:var(--ink);font-weight:600}

.bt-stable{border:1px dashed var(--line);border-radius:4px;padding:16px 18px;margin-top:22px;background:#FCFDFF}
.bt-stable h4{font-size:14.5px;margin:0 0 6px;color:var(--ink)}
.bt-stable p{font-size:13px;line-height:1.85;color:var(--ink3);margin:0 0 12px}
.bt-stable .cmd{margin-bottom:0}

.bt-tip{border-left:3px solid #F79009;background:#FFFAEB;padding:14px 16px;font-size:13.5px;line-height:1.85;color:#7A4B00;margin-top:18px}
.bt-tip b{color:#7A4B00}

@media (max-width:767px){
  .bt-lead{grid-template-columns:1fr;gap:12px}
  .p-hero h1{font-size:29px}
  /* 手机上把系统 tabs 折成两列，避免横向滚动藏住「Windows / 统信麒麟」 */
  .bt-ver{display:grid;grid-template-columns:1fr 1fr;overflow:visible;border-bottom:0;gap:6px}
  .bt-ver button{width:100%;border:1px solid var(--line);border-radius:3px;top:0;padding:9px 6px;font-size:12.5px;line-height:1.45;text-align:center;white-space:normal;word-break:break-word}
  .bt-ver button.on{border-color:var(--blue)}
  .bt-panel{border-top:1px solid var(--line);margin-top:2px}
  .bt-panel{padding:16px 14px}
  .cmd{padding:14px 12px 46px}
  .cmd code{font-size:11.5px;line-height:1.95;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;overflow-x:visible;padding-bottom:2px}
  .cmd .copy{top:auto;bottom:9px;right:9px;height:27px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);color:#F1F5F9}
  .bt-table{display:block;overflow-x:auto;white-space:nowrap}
  .bt-steps{padding-left:18px}
  .bt-steps li:before{left:-31px;width:22px;height:22px}
  .bt-shot figcaption{font-size:12px;padding:9px 11px}
}
