/* 梦幻西游工具箱 · 公共导航 / 登录注册 / 滑块验证
 * 全部使用 .tb- 前缀，避免与三个工具原有的 style.css / goods.css 冲突。 */
:root{
  --tb-blue:#2f6df6;
  --tb-blue-d:#1f57d0;
  --tb-gold:#c9922f;
  --tb-ink:#1d2430;
  --tb-sub:#657184;
  --tb-line:#e3e8ef;
  --tb-bg:#f4f6f9;
  --tb-shadow:0 8px 28px rgba(21,35,60,.12);
}

/* ---------------------------------------------------------------- 顶栏 */
.tb-nav{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;
  padding:8px 16px;background:#fff;border-bottom:1px solid var(--tb-line);
  box-shadow:0 1px 8px rgba(21,35,60,.04);
  font:13px/1.5 "PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--tb-ink);
}
.tb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:none}
.tb-logo{
  width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#2f6df6,#7aa5ff);color:#fff;
  font-size:18px;font-weight:800;box-shadow:0 3px 10px rgba(47,109,246,.28);
}
.tb-brand-txt strong{display:block;font-size:15px;font-weight:700;letter-spacing:.4px}
.tb-brand-txt small{display:block;font-size:11px;color:var(--tb-sub)}
.tb-links{display:flex;gap:3px;flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.tb-links::-webkit-scrollbar{display:none}
.tb-links a{
  display:inline-flex;align-items:center;height:32px;padding:0 11px;border-radius:8px;
  color:var(--tb-sub);text-decoration:none;white-space:nowrap;font-size:13px;transition:.15s;
}
.tb-links a:hover{background:#f0f4fb;color:var(--tb-blue)}
.tb-links a.on{background:#eaf1ff;color:var(--tb-blue);font-weight:650}
.tb-account{display:flex;align-items:center;gap:8px;flex:none}
.tb-user{font-size:12.5px;color:var(--tb-sub)}
.tb-user b{color:var(--tb-ink);font-weight:650}

.tb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 16px;border-radius:8px;border:1px solid transparent;
  font:13px/1 "PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  cursor:pointer;white-space:nowrap;transition:.15s;background:none;
}
.tb-btn.primary{background:var(--tb-blue);color:#fff;border-color:var(--tb-blue)}
.tb-btn.primary:hover{background:var(--tb-blue-d)}
.tb-btn.ghost{background:#fff;color:var(--tb-sub);border-color:#d5ddeb}
.tb-btn.ghost:hover{color:var(--tb-blue);border-color:var(--tb-blue)}
.tb-btn.sm{height:30px;padding:0 12px;font-size:12.5px}
.tb-btn.wide{width:100%;height:38px;font-size:14px;font-weight:600}
.tb-btn:disabled{opacity:.55;cursor:not-allowed}
.tb-btn.primary:disabled:hover{background:var(--tb-blue)}
.tb-btn.ghost:disabled{background:#f4f6fa;color:#98a3b3;border-color:#e2e7f0;opacity:1}

/* ---------------------------------------------------------------- 首页 */
.tb-home{max-width:1080px;margin:0 auto;padding:38px 24px 60px;
  font:14px/1.7 "PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--tb-ink)}
.tb-hero{
  position:relative;overflow:hidden;border-radius:16px;padding:36px 40px;margin-bottom:26px;
  background:linear-gradient(120deg,#1e3c8f 0%,#2f6df6 58%,#6a9bff 100%);
  color:#fff;box-shadow:var(--tb-shadow);
}
.tb-hero::after{
  content:"";position:absolute;right:-70px;top:-110px;width:330px;height:330px;border-radius:50%;
  border:42px solid rgba(255,255,255,.08);
}
.tb-hero h1{margin:0 0 10px;font-size:29px;font-weight:750;letter-spacing:1px}
.tb-hero p{margin:0;opacity:.9;font-size:14px;max-width:650px}
.tb-hero .tb-hero-tag{
  display:inline-block;margin-bottom:14px;padding:3px 12px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);font-size:12px;
}
.tb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tb-card{
  display:block;position:relative;text-decoration:none;color:inherit;background:#fff;
  border:1px solid var(--tb-line);border-radius:14px;padding:24px 22px 20px;
  box-shadow:0 2px 10px rgba(21,35,60,.05);transition:.18s;
}
.tb-card:hover{transform:translateY(-3px);box-shadow:var(--tb-shadow);border-color:#c9dbfa}
.tb-card-ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  font-size:20px;font-weight:700;color:#fff;margin-bottom:16px;
  background:linear-gradient(135deg,#2f6df6,#7aa5ff);
}
.tb-card:nth-child(2) .tb-card-ico{background:linear-gradient(135deg,#7a5cf0,#b18bff)}
.tb-card:nth-child(3) .tb-card-ico{background:linear-gradient(135deg,#c9922f,#e8bf6b)}
.tb-card h2{margin:0 0 8px;font-size:17px;font-weight:700}
.tb-card p{margin:0 0 18px;color:var(--tb-sub);font-size:13px;min-height:44px}
.tb-card-foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--tb-blue)}
.tb-badge{padding:2px 9px;border-radius:999px;background:#eaf1ff;color:var(--tb-blue);font-size:11.5px}
.tb-badge.lock{background:#fff3e6;color:#b45309}
.tb-note{
  margin-top:28px;padding:18px 22px;background:#fff;border:1px solid var(--tb-line);
  border-radius:12px;color:var(--tb-sub);font-size:13px;
}
.tb-note b{color:var(--tb-ink)}
.tb-note code{background:#f1f4f9;padding:1px 6px;border-radius:5px;color:#b45309}

/* ---------------------------------------------------------------- 弹窗 */
.tb-mask{
  position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;
  background:rgba(18,26,42,.46);padding:18px;overflow:auto;
  font:13px/1.6 "PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--tb-ink);
}
.tb-mask.on{display:flex}
.tb-modal{
  position:relative;width:420px;max-width:100%;background:#fff;border-radius:16px;
  box-shadow:0 24px 70px rgba(10,20,40,.28);padding:24px 26px 26px;
}
.tb-modal h3{margin:0 0 4px;font-size:19px;font-weight:700}
.tb-modal .tb-modal-sub{margin:0 0 18px;color:var(--tb-sub);font-size:12.5px}
.tb-close{
  position:absolute;right:14px;top:12px;width:28px;height:28px;border:0;border-radius:8px;
  background:transparent;color:#98a3b3;font-size:20px;line-height:1;cursor:pointer;
}
.tb-close:hover{background:#f1f4f9;color:var(--tb-ink)}
.tb-tabs{display:flex;gap:6px;background:#f1f4f9;border-radius:9px;padding:4px;margin-bottom:18px}
.tb-tabs button{
  flex:1;height:32px;border:0;border-radius:7px;background:transparent;color:var(--tb-sub);
  font:13px/1 inherit;cursor:pointer;
}
.tb-tabs button.on{background:#fff;color:var(--tb-blue);font-weight:650;box-shadow:0 1px 4px rgba(21,35,60,.1)}
.tb-form{display:none}
.tb-form.on{display:block}
.tb-field{display:block;margin-bottom:14px}
.tb-field>span{display:block;margin-bottom:6px;font-size:12.5px;color:var(--tb-sub)}
.tb-field input.tb-input,.tb-code-row input.tb-input{
  width:100%;height:38px;padding:0 12px;border:1px solid #d5ddeb;border-radius:8px;
  background:#fff;color:var(--tb-ink);font:13px/1 inherit;outline:none;box-shadow:none;
}
.tb-field input.tb-input:focus,.tb-code-row input.tb-input:focus{
  border-color:var(--tb-blue);box-shadow:0 0 0 3px rgba(47,109,246,.12);
}
.tb-code-row{display:flex;gap:8px}
.tb-code-row input.tb-input{flex:1;min-width:0}
.tb-code-row .tb-btn{flex:none;height:38px}
.tb-msg{min-height:20px;margin:2px 0 10px;font-size:12.5px}
.tb-msg.err{color:#d13b3b}
.tb-msg.ok{color:#128a4c}
.tb-switch{margin:12px 0 0;text-align:center;color:var(--tb-sub);font-size:12.5px}
.tb-switch a{color:var(--tb-blue);cursor:pointer}

/* ---------------------------------------------------------------- 滑块 */
.tb-slider{width:300px;max-width:100%;margin:2px 0 14px;user-select:none}
.tb-slider-box{position:relative;width:300px;height:140px;border-radius:9px;overflow:hidden;
  border:1px solid #d5ddeb;background:#eef2f8}
.tb-slider-box canvas{display:block;position:absolute;left:0;top:0}
.tb-slider-piece{pointer-events:none}
.tb-slider-refresh{
  position:absolute;right:7px;top:7px;width:26px;height:26px;border:0;border-radius:7px;
  background:rgba(255,255,255,.82);color:#5b6675;font-size:16px;line-height:1;cursor:pointer;
}
.tb-slider-refresh:hover{color:var(--tb-blue)}
.tb-slider-rail{
  position:relative;width:300px;height:40px;margin-top:8px;border-radius:8px;
  background:#f1f4f9;border:1px solid #d5ddeb;overflow:hidden;
}
.tb-slider-fill{position:absolute;left:0;top:0;bottom:0;width:44px;background:#e3edff}
.tb-slider-tip{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#8b95a3;font-size:12.5px;pointer-events:none;
}
.tb-slider-handle{
  position:absolute;left:0;top:0;width:44px;height:38px;border:0;border-radius:7px;
  background:var(--tb-blue);color:#fff;font-size:18px;line-height:1;cursor:grab;
  touch-action:none;box-shadow:0 1px 5px rgba(47,109,246,.35);
}
.tb-slider-handle:active{cursor:grabbing}
.tb-slider.ok .tb-slider-fill{background:#dff5e9}
.tb-slider.ok .tb-slider-handle{background:#12a150;cursor:default}
.tb-slider.ok .tb-slider-tip{color:#128a4c;font-weight:600}
.tb-slider.err .tb-slider-fill{background:#ffecec}
.tb-slider.err .tb-slider-handle{background:#d13b3b}

/* ------------------------------------------------- 滑块浮层（点发送验证码后弹出） */
.tb-slider-pop{
  position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;
  background:rgba(18,26,42,.42);padding:18px;
  font:13px/1.6 "PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--tb-ink);
}
.tb-slider-pop.on{display:flex}
.tb-slider-pop-card{
  position:relative;width:340px;max-width:100%;background:#fff;border-radius:14px;
  box-shadow:0 20px 60px rgba(10,20,40,.3);padding:20px 20px 14px;text-align:center;
}
.tb-slider-pop-card h4{margin:0 0 4px;font-size:16px;font-weight:700}
.tb-slider-pop-card p{margin:0 0 14px;color:var(--tb-sub);font-size:12.5px}
.tb-slider-pop-card .tb-close{right:10px;top:8px}
.tb-slider-pop-card .tb-slider{margin:0 auto}
.tb-slider-pop-msg{min-height:18px;margin-top:2px;font-size:12.5px;color:#d13b3b}
.tb-slider-pop-msg.ok{color:#128a4c}
.tb-code-row .tb-btn[data-tb="sendcode"]{min-width:112px}

/* ---------------------------------------------------------------- 登录守卫 */
.tb-guard{
  position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:rgba(244,246,249,.94);padding:24px;text-align:center;
  font:14px/1.8 "PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--tb-ink);
}
.tb-guard-inner{max-width:460px}
.tb-guard-lock{
  width:58px;height:58px;margin:0 auto 16px;border-radius:16px;display:grid;place-items:center;
  background:#fff3e6;color:#b45309;font-size:24px;border:1px solid #ffd9b8;
}
.tb-guard h2{margin:0 0 8px;font-size:20px}
.tb-guard p{margin:0 0 20px;color:var(--tb-sub)}
.tb-guard .tb-btn{margin:0 5px}

/* 商品价格纪录页的深色顶栏：改由本工具箱主题开关控制，不再跟随系统偏好 */
  html[data-theme="dark"] body[data-guard="1"] .tb-nav{background:#111925;border-bottom-color:var(--line);color:var(--text)}
  html[data-theme="dark"] body[data-guard="1"] .tb-brand-txt strong{color:var(--text)}
  html[data-theme="dark"] body[data-guard="1"] .tb-brand-txt small{color:var(--text-3)}
  html[data-theme="dark"] body[data-guard="1"] .tb-links a{color:var(--text-2)}
  html[data-theme="dark"] body[data-guard="1"] .tb-links a:hover{background:var(--panel-2);color:var(--brand)}
  html[data-theme="dark"] body[data-guard="1"] .tb-links a.on{background:#222e44;color:#a9c5ff}
  html[data-theme="dark"] body[data-guard="1"] .tb-user{color:var(--text-2)}
  html[data-theme="dark"] body[data-guard="1"] .tb-user b{color:var(--text)}
  html[data-theme="dark"] body[data-guard="1"] .tb-btn.ghost{background:var(--panel-2);border-color:var(--line);color:var(--text-2)}
  html[data-theme="dark"] .tb-guard{background:rgba(12,17,25,.94);color:var(--text)}
  html[data-theme="dark"] .tb-guard p{color:var(--text-2)}

@media (max-width:900px){
  body{min-width:0 !important}
  .tb-nav{gap:12px;padding:9px 12px;flex-wrap:wrap}
  .tb-links{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap}
  .tb-account{margin-left:auto}
  .tb-grid{grid-template-columns:1fr}
  .tb-hero{padding:26px 22px}
  .tb-hero h1{font-size:23px}
  .tb-slider,.tb-slider-box,.tb-slider-rail{max-width:100%}
}