/* 服务器主机销售面板 hostsale.css — 复用站点主题变量，三端响应式 */
body[data-page="tools"] .app{max-width:100%}
.hs-page{max-width:none;margin:0;box-sizing:border-box;padding:18px 22px 40px;color:var(--text-primary);font-size:14px}
.hs-page *{box-sizing:border-box}

/* 顶部 */
.hs-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.hs-top-l{display:flex;align-items:center;gap:12px}
.hs-logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:color-mix(in srgb,var(--accent) 16%,transparent)}
.hs-top-t h1{font-size:20px;margin:0;line-height:1.2}
.hs-top-sub{margin:2px 0 0;color:var(--text-secondary);font-size:12.5px}
.hs-top-r{display:flex;gap:8px;flex-wrap:wrap}

/* 按钮 */
.hs-btn{appearance:none;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);
  padding:8px 14px;border-radius:10px;cursor:pointer;font-size:13px;transition:.15s;white-space:nowrap}
.hs-btn:hover{border-color:var(--accent)}
.hs-btn-pri{background:var(--accent);border-color:var(--accent);color:#fff}
.hs-btn-pri:hover{filter:brightness(1.06)}
.hs-btn-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--border-color))}
.hs-btn-danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)}
.hs-btn:disabled{opacity:.5;cursor:not-allowed}

/* 主体两栏 */
.hs-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}

/* 卡片 */
.hs-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:16px 18px;margin-bottom:16px}
.hs-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.hs-card-h h2{font-size:15px;margin:0}
.hs-tag{font-size:11.5px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);
  padding:3px 9px;border-radius:999px}

/* 配置器 */
.hs-config-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hs-f{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text-secondary)}
.hs-input{appearance:none;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);
  padding:8px 10px;border-radius:9px;font-size:13px;width:100%}
.hs-input:focus{outline:none;border-color:var(--accent)}
.hs-bw-traffic{display:none}
.hs-quote{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;
  padding-top:14px;border-top:1px dashed var(--border-color)}
.hs-quote-price{font-size:26px;font-weight:700;color:var(--accent)}
.hs-quote-price i{font-size:13px;font-style:normal;color:var(--text-secondary);font-weight:400;margin-left:4px}
.hs-quote-sub{color:var(--text-secondary);font-size:12.5px;margin-top:4px}

/* 分类 chips */
.hs-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.hs-chip{border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);
  padding:7px 14px;border-radius:999px;cursor:pointer;font-size:13px}
.hs-chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff}

/* 套餐网格 */
.hs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}
.hs-plan{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:14px;padding:14px;
  display:flex;flex-direction:column;gap:8px;position:relative;transition:.15s}
.hs-plan:hover{border-color:var(--accent);transform:translateY(-2px)}
.hs-plan.is-rec{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent) inset}
.hs-plan-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.hs-plan-name{font-weight:600;font-size:14px}
.hs-plan-cat{font-size:11.5px;color:var(--text-secondary)}
.hs-badge{font-size:10.5px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.hs-plan-spec{font-size:12.5px;color:var(--text-secondary);line-height:1.7}
.hs-plan-spec b{color:var(--text-primary);font-weight:600}
.hs-plan-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;gap:8px}
.hs-price{font-size:18px;font-weight:700;color:var(--accent)}
.hs-price i{font-size:11px;font-style:normal;color:var(--text-secondary);font-weight:400}
.hs-plan-acts{display:flex;gap:6px}
.hs-mini{border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);
  padding:6px 10px;border-radius:8px;cursor:pointer;font-size:12px}
.hs-mini:hover{border-color:var(--accent)}
.hs-mini.is-on{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent);color:var(--accent)}

/* 选购车 */
.hs-cart{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;padding:14px;
  position:sticky;top:16px;display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
.hs-cart-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.hs-cart-h h2{font-size:15px;margin:0}
.hs-cart-count{font-size:12px;color:var(--text-secondary)}
.hs-cart-promo{font-size:12px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-radius:10px;padding:8px 10px;margin-bottom:10px;line-height:1.6;display:none}
.hs-cart-promo.is-show{display:block}
.hs-cart-list{overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px;min-height:60px}
.hs-cart-empty{color:var(--text-secondary);font-size:12.5px;padding:18px 6px;text-align:center}
.hs-cart-empty.is-hide{display:none}
.hs-ci{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:11px;padding:10px}
.hs-ci-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.hs-ci-name{font-weight:600;font-size:13px}
.hs-ci-spec{font-size:11.5px;color:var(--text-secondary);line-height:1.6;margin:4px 0}
.hs-ci-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.hs-ci-qty{display:flex;align-items:center;gap:6px}
.hs-ci-qty button{width:24px;height:24px;border:1px solid var(--border-color);background:var(--bg-secondary);border-radius:6px;cursor:pointer;color:var(--text-primary)}
.hs-ci-qty span{min-width:18px;text-align:center;font-size:13px}
.hs-ci-price{font-weight:700;color:var(--accent);font-size:14px}
.hs-ci-del{background:none;border:none;color:var(--danger);cursor:pointer;font-size:12px}
.hs-cart-foot{border-top:1px dashed var(--border-color);margin-top:10px;padding-top:10px}
.hs-cart-total{display:flex;align-items:baseline;justify-content:space-between}
.hs-cart-total strong{font-size:20px;color:var(--accent)}
.hs-cart-save{font-size:12px;color:var(--danger);margin:4px 0 8px;min-height:14px}
.hs-cart-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hs-cart-acts .hs-btn-pri{grid-column:1 / -1}

/* 遮罩 / 弹窗 */
.hs-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;z-index:120000;padding:18px}
.hs-mask[hidden]{display:none!important}
.hs-compare,.hs-order{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;
  width:min(760px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.hs-compare-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border-color)}
.hs-compare-h h3{margin:0;font-size:15px}
.hs-x{background:none;border:none;color:var(--text-secondary);font-size:18px;cursor:pointer}
.hs-compare-body{overflow:auto;padding:14px 16px}
.hs-cmp-table{width:100%;border-collapse:collapse;font-size:12.5px}
.hs-cmp-table th,.hs-cmp-table td{border:1px solid var(--border-color);padding:8px 10px;text-align:left;vertical-align:top}
.hs-cmp-table th{background:var(--bg-primary);position:sticky;top:0}
.hs-cmp-name{font-weight:600;color:var(--accent)}
.hs-order-pre{margin:0;padding:14px 16px;overflow:auto;font-size:12.5px;line-height:1.6;white-space:pre-wrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;flex:1}
.hs-order-acts{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border-color)}
.hs-order-acts .hs-btn{flex:1}

/* toast */
.hs-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--text-primary);color:var(--bg-primary);
  padding:10px 18px;border-radius:999px;font-size:13px;z-index:200000;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.hs-toast[hidden]{display:none!important}

/* 三端断点 */
@media (max-width:980px){
  .hs-body{grid-template-columns:1fr}
  .hs-cart{position:static;max-height:none}
  .hs-config-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
  .hs-page{padding:14px 14px 36px}
  .hs-config-grid{grid-template-columns:repeat(2,1fr)}
  .hs-grid{grid-template-columns:1fr}
  .hs-top-r .hs-btn{flex:1}
  .hs-quote{flex-direction:column;align-items:stretch;gap:10px}
  .hs-quote .hs-btn-pri{width:100%}
}
@media (max-width:420px){
  .hs-config-grid{grid-template-columns:1fr}
}