:root {
  --primary-color: #1677ff;
  --primary-hover: #4096ff;
  --primary-active: #0958d9;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --danger-color: #ff4d4f;
  --info-color: #13c2c2;
  --text-primary: rgba(0,0,0,0.88);
  --text-secondary: rgba(0,0,0,0.65);
  --text-tertiary: rgba(0,0,0,0.45);
  --text-placeholder: rgba(0,0,0,0.25);
  --bg-color: #f5f5f5;
  --bg-layout: #f0f2f5;
  --bg-secondary: #fafafa;
  --bg-tertiary: #f0f0f0;
  --card-bg: #ffffff;
  --border-color: #d9d9d9;
  --border-secondary: #f0f0f0;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.03),0 1px 6px -1px rgba(0,0,0,0.02),0 2px 4px 0 rgba(0,0,0,0.02);
  --shadow-md: 0 6px 16px 0 rgba(0,0,0,0.08),0 3px 6px -4px rgba(0,0,0,0.12),0 9px 28px 8px rgba(0,0,0,0.05);
  --radius: 8px;
  --radius-sm: 6px;
  --header-height: 56px;
}
body.dark-theme {
  --bg-color: #141414;
  --bg-layout: #000000;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #2a2a2a;
  --card-bg: #1f1f1f;
  --border-color: #424242;
  --border-secondary: #303030;
  --text-primary: rgba(255,255,255,0.88);
  --text-secondary: rgba(255,255,255,0.65);
  --text-tertiary: rgba(255,255,255,0.45);
  --text-placeholder: rgba(255,255,255,0.25);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.45),0 1px 6px -1px rgba(0,0,0,0.45),0 2px 4px 0 rgba(0,0,0,0.45);
  --shadow-md: 0 6px 16px 0 rgba(0,0,0,0.55),0 3px 6px -4px rgba(0,0,0,0.55),0 9px 28px 8px rgba(0,0,0,0.45);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  background: var(--bg-layout);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5714;
  -webkit-font-smoothing: antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
a { text-decoration: none; color: inherit; transition: color .2s; }

/* ====== 统一顶部导航 ====== */
.top-navbar{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  width:92%;max-width:1100px;height:60px;padding:0 12px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  background:color-mix(in srgb,var(--card-bg) 80%,transparent);
  backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--border-secondary);border-radius:999px;
  z-index:1000;transition:all .4s cubic-bezier(.16,1,.3,1);
  box-shadow:0 8px 32px rgba(0,0,0,.08);
}
body.dark-theme .top-navbar{
  background:color-mix(in srgb,#0a0e1a 75%,transparent);
  border-color:rgba(99,102,241,0.12);
}
.top-navbar.scrolled{top:10px;width:96%;box-shadow:0 16px 48px rgba(0,0,0,.12);}
.top-nav-left{padding-left:12px;display:flex;align-items:center;}
.top-nav-logo{
  font-size:18px;font-weight:800;text-decoration:none;
  display:flex;align-items:center;gap:10px;letter-spacing:.5px;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.top-nav-logo-icon{
  width:36px;height:36px;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:20px;
  box-shadow:0 4px 12px rgba(99,102,241,.5);
  transform:rotate(-5deg);transition:transform .3s;
  -webkit-background-clip:unset;-webkit-text-fill-color:unset;
}
.top-nav-logo:hover .top-nav-logo-icon{transform:rotate(0deg) scale(1.05);}
.top-nav-center{display:flex;justify-content:center;}
.top-nav-links{
  display:flex;gap:4px;
  background:rgba(125,125,125,.08);padding:4px;border-radius:999px;
}
.top-nav-links a{
  color:var(--text-tertiary);text-decoration:none;font-size:13px;font-weight:600;
  padding:8px 20px;border-radius:999px;transition:all .25s ease;
}
.top-nav-links a:hover,.top-nav-links a.active{color:var(--text-primary);background:rgba(0,0,0,.06);}
body.dark-theme .top-nav-links a:hover,body.dark-theme .top-nav-links a.active{color:#fff;background:rgba(255,255,255,.1);}
.top-nav-right{display:flex;align-items:center;gap:10px;padding-right:8px;}
.top-nav-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;border-radius:999px;font-size:13px;font-weight:600;
  cursor:pointer;border:none;transition:all .25s;
}
.top-nav-btn-ghost{background:transparent;color:var(--text-tertiary);border:1px solid var(--border-color);}
.top-nav-btn-ghost:hover{color:var(--text-primary);border-color:var(--primary-color);}
.top-nav-btn-primary{
  background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;
  box-shadow:0 4px 16px rgba(99,102,241,.3);
}
.top-nav-btn-primary:hover{box-shadow:0 6px 24px rgba(99,102,241,.4);transform:translateY(-1px);}
.top-nav-user{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 6px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--border-color);cursor:pointer;text-decoration:none;transition:all .25s;}
.top-nav-user:hover{background:rgba(255,255,255,.16);}
.top-nav-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;}
.top-nav-avatar-text{background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;font-size:13px;font-weight:700;}
.top-nav-nick{font-size:13px;font-weight:600;color:var(--text-primary);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.top-mobile-menu-btn{
  display:none;width:40px;height:40px;
  align-items:center;justify-content:center;
  font-size:24px;color:var(--text-primary);
  background:transparent;border:none;cursor:pointer;
}
.top-mobile-overlay{
  position:fixed;top:0;left:0;width:100%;height:100vh;
  background:rgba(0,0,0,.8);backdrop-filter:blur(10px);
  z-index:999;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:24px;
}
.top-mobile-overlay.active{display:flex;}
.top-mobile-overlay a{font-size:24px;font-weight:700;color:#fff;text-decoration:none;}
.top-mobile-overlay .close-link{font-size:16px;color:rgba(255,255,255,.5);margin-top:20px;}

/* 内容区 */
.tool-container {
  /* ⚠️ width:100% 不能省：body 是 column flex（.foot 用 margin-top:auto 贴底），
     而本容器带 `margin:0 auto` —— 交叉轴上的 auto margin 会让 align-items:stretch 失效，
     容器退化成 fit-content：内容窄的页面（ip/base64/site_health）就缩成 390~600px 一条窄柱，
     而 max-width:1100px 完全不起作用。显式 width:100% 后所有工具页统一 1100px。 */
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 24px 24px;
  flex:1;
}

/* 页面标题 */
.tool-page-header {
  margin-bottom: 24px;
}
.tool-page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tool-page-title i {
  color: var(--primary-color);
  font-size: 22px;
}
.tool-page-desc {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* 卡片 */
.tool-card {
  background: var(--card-bg);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}
.tool-card:hover {
  box-shadow: var(--shadow-md);
}
.tool-card-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tool-card-title i {
  color: var(--primary-color);
  font-size: 18px;
}
.tool-card-desc {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}

/* 表单 */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.form-control, .form-textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  background: var(--card-bg);
  color: var(--text-primary);
  transition: all .15s;
}
.form-textarea {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
}
.form-control:hover, .form-textarea:hover {
  border-color: var(--primary-color);
}
.form-control:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(5,145,255,0.1);
}
.form-control::placeholder, .form-textarea::placeholder {
  color: var(--text-placeholder);
}

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  transition: all .15s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.btn-primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}
.btn-success {
  background: var(--success-color);
  border-color: var(--success-color);
  color: #fff;
}
.btn-success:hover { opacity: .9; color: #fff; }
.btn-danger {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: #fff;
}
.btn-danger:hover { opacity: .9; color: #fff; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* 结果区域 */
.tool-result {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-layout);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm);
  display: none;
}
.tool-result.show { display: block; }
.tool-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.tool-result-label {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.tool-result-action {
  font-size: 13px;
  color: var(--primary-color);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.tool-result-action:hover { color: var(--primary-hover); }
.tool-result-content {
  font-size: 14px;
  word-break: break-all;
  font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  color: var(--text-primary);
  white-space: pre-wrap;
  background: var(--card-bg);
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-secondary);
}

/* 状态标签 */
.status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 22px;
}
.status-tag-safe { background: rgba(82,196,26,0.1); color: var(--success-color); }
.status-tag-danger { background: rgba(255,77,79,0.1); color: var(--danger-color); }
.status-tag-warning { background: rgba(250,173,20,0.1); color: var(--warning-color); }
.status-tag-unknown { background: rgba(0,0,0,0.04); color: var(--text-tertiary); }
body.dark-theme .status-tag-unknown { background: rgba(255,255,255,0.08); }

/* 信息描述列表 */
.desc-list { }
.desc-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-secondary);
}
.desc-item:last-child { border-bottom: none; }
.desc-label {
  color: var(--text-tertiary);
  font-size: 14px;
  min-width: 80px;
}
.desc-value {
  color: var(--text-primary);
  font-size: 14px;
  text-align: right;
  word-break: break-all;
}

/* 首页工具网格 */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}
.tool-grid-item {
  background: var(--card-bg);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.tool-grid-item:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.tool-grid-icon {
  width: 48px; height: 48px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.tool-grid-icon.blue { background: rgba(22,119,255,0.1); color: var(--primary-color); }
.tool-grid-icon.green { background: rgba(82,196,26,0.1); color: var(--success-color); }
.tool-grid-icon.orange { background: rgba(250,173,20,0.1); color: var(--warning-color); }
.tool-grid-icon.purple { background: rgba(114,46,209,0.1); color: #722ed1; }
.tool-grid-name { font-size: 15px; font-weight: 500; color: var(--text-primary); }
.tool-grid-desc { font-size: 13px; color: var(--text-tertiary); line-height: 1.5; }

/* 二维码预览 */
.tool-qr-preview { text-align: center; margin-top: 16px; }
.tool-qr-preview img { max-width: 300px; border-radius: var(--radius-sm); border: 1px solid var(--border-secondary); }

/* 加载 */
.tool-loading {
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 12px;
}
.tool-loading.show { display: flex; }
.tool-loading .spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border-secondary);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.tool-toast {
  position: fixed;
  top: 72px;
  right: 24px;
  z-index: 9999;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: #fff;
  opacity: 0;
  transform: translateX(30px);
  transition: all .3s;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}
.tool-toast.show { opacity: 1; transform: translateX(0); }
.tool-toast.success { background: var(--success-color); }
.tool-toast.error { background: var(--danger-color); }
.tool-toast.info { background: var(--primary-color); }

/* 批量结果表格 */
.tool-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tool-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-layout);
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: 13px;
  border-bottom: 1px solid var(--border-secondary);
}
.tool-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-secondary);
  color: var(--text-primary);
}
.tool-table tr:last-child td { border-bottom: none; }
.tool-table tr:hover td { background: rgba(0,0,0,0.02); }
body.dark-theme .tool-table tr:hover td { background: rgba(255,255,255,0.04); }

/* Footer */
.tool-footer{text-align:center;padding:20px;font-size:12px;color:var(--text-tertiary);margin-top:auto;}

/* 响应式 */
@media(max-width:768px){
  .top-nav-center{visibility:hidden;height:0;overflow:hidden;}
  /* 手机端导航窄：logo 旁的站点名文字太占地方，只留图标（[data-site-name] 由 site-meta.js 填文案） */
  .top-nav-logo [data-site-name]{display:none;}
  .top-mobile-menu-btn{display:flex;}
  .top-nav-right .top-nav-btn{padding:6px 14px;font-size:12px;}
  .tool-container { padding: 80px 16px 16px; }
  .tool-card { padding: 16px; }
  .tool-grid { grid-template-columns: 1fr; }
  .btn-group { flex-direction: column; }
  .btn-group .btn { width: 100%; justify-content: center; }
  .desc-item { flex-direction: column; gap: 4px; }
  .desc-value { text-align: left; }
}

/* ============ IP 页 ============ */
.ip-card-hero{
  background:linear-gradient(135deg,var(--primary-color),#7b61ff);
  border-radius:16px;padding:28px 24px;margin-bottom:20px;color:#fff;
  box-shadow:0 8px 32px rgba(22,119,255,.2);overflow:hidden;position:relative;
}
.ip-card-hero::before{
  content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;
  border-radius:50%;background:rgba(255,255,255,.08);
}
.ip-card-hero::after{
  content:'';position:absolute;bottom:-30px;left:-30px;width:100px;height:100px;
  border-radius:50%;background:rgba(255,255,255,.06);
}
.ip-hero-label{font-size:13px;opacity:.85;margin-bottom:12px;display:flex;align-items:center;gap:6px;position:relative;z-index:1;}
.ip-hero-content{position:relative;z-index:1;}
.ip-hero-ip{font-size:28px;font-weight:800;letter-spacing:1px;word-break:break-all;}
.ip-hero-loc{font-size:14px;opacity:.9;margin-top:6px;}
.ip-card{
  background:var(--card-bg);border:1px solid var(--border-secondary);
  border-radius:16px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.ip-card-head{font-size:16px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.ip-search-bar{display:flex;gap:8px;margin-bottom:16px;}
.ip-search-bar .form-control{flex:1;}
@media(max-width:600px){
  .ip-hero-ip{font-size:22px;}
  .ip-card-hero{padding:20px 16px;}
  .ip-card{padding:16px;}
}

/* ============ 域名拦截 ============ */
.status-tag-warning{background:rgba(250,173,20,0.1);color:#faad14;}
.result-card{background:var(--card-bg);border:1px solid var(--border-secondary);border-radius:8px;padding:16px;margin-bottom:12px;transition:box-shadow 0.2s;}
.result-card:hover{box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.result-card.safe{border-left:3px solid #52c41a;}
.result-card.sub_alive{border-left:3px solid #faad14;}
.result-card.blocked{border-left:3px solid #ff4d4f;}
.result-card.error{border-left:3px solid #86909c;}
.result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px;}
.result-domain{font-size:15px;font-weight:600;color:var(--text-primary);word-break:break-all;}
.result-detail{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px;}
@media(max-width:600px){.result-detail{grid-template-columns:1fr;}}
.result-detail-item{padding:8px 12px;background:var(--bg-layout);border-radius:6px;border:1px solid var(--border-secondary);}
.result-detail-label{font-size:11px;color:var(--text-tertiary);margin-bottom:4px;}
.result-detail-value{font-size:13px;color:var(--text-primary);word-break:break-all;}
.result-detail-value.safe{color:#52c41a;}
.result-detail-value.blocked{color:#ff4d4f;}
.result-detail-value.warning{color:#faad14;}
.result-detail-value.error{color:#86909c;}
.result-tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--border-secondary);padding-bottom:0;}
.result-tab{padding:8px 16px;font-size:13px;color:var(--text-secondary);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all 0.2s;white-space:nowrap;}
.result-tab:hover{color:var(--primary-color);}
.result-tab.active{color:var(--primary-color);border-bottom-color:var(--primary-color);font-weight:500;}
.result-tab span{font-size:11px;background:var(--bg-layout);padding:1px 6px;border-radius:10px;margin-left:2px;}
.result-card.checking{opacity:0.6;border-left:3px solid var(--primary-color);}
.result-card.checking .result-domain::after{content:' 检测中...';font-size:12px;color:var(--primary-color);font-weight:400;animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.3;}}
.copy-btn{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:2px 4px;font-size:13px;border-radius:4px;transition:all 0.2s;line-height:1;}
.copy-btn:hover{color:var(--primary-color);background:rgba(22,93,255,0.08);}
.page-btn{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--border-secondary);background:var(--card-bg);color:var(--text-secondary);border-radius:6px;cursor:pointer;font-size:13px;transition:all 0.2s;display:inline-flex;align-items:center;justify-content:center;}
.page-btn:hover:not(:disabled){border-color:var(--primary-color);color:var(--primary-color);}
.page-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color);}
.page-btn:disabled{opacity:0.4;cursor:not-allowed;}
.page-info{font-size:13px;color:var(--text-tertiary);margin:0 8px;}

/* ============ 二维码 ============ */
.qr-tabs{display:flex;gap:0;margin-bottom:16px;background:var(--card-bg);border:1px solid var(--border-secondary);border-radius:8px;overflow:hidden;width:100%;}
.qr-tab{flex:1;padding:10px 28px;font-size:14px;cursor:pointer;color:var(--text-secondary);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;border-right:1px solid var(--border-secondary);}
.qr-tab:last-child{border-right:none;}
.qr-tab:hover{color:var(--text-primary);background:rgba(0,0,0,.02);}
.qr-tab.active{color:#fff;background:var(--primary-color);}
.qr-tab-panel{display:none;}
.qr-tab-panel.active{display:block;}
.qr-design-tabs{display:flex;gap:0;margin-bottom:12px;border-bottom:2px solid var(--border-secondary);}
.qr-design-tab{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--text-secondary);transition:all .15s;border-bottom:2px solid transparent;margin-bottom:-2px;}
.qr-design-tab:hover{color:var(--text-primary);}
.qr-design-tab.active{color:var(--primary-color);border-bottom-color:var(--primary-color);font-weight:500;}
.qr-design-panel{display:none;padding-top:4px;}
.qr-design-panel.active{display:block;}
.qr-design-subtitle{font-size:12px;color:var(--text-tertiary);margin-bottom:10px;}
.qr-preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.qr-preset-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:2px solid var(--border-secondary);border-radius:8px;cursor:pointer;transition:all .15s;background:var(--card-bg);}
.qr-preset-card:hover{border-color:var(--primary-color);background:rgba(22,119,255,.04);}
.qr-preset-card.active{border-color:var(--primary-color);background:rgba(22,119,255,.06);}
.qr-preset-card span{font-size:11px;color:var(--text-tertiary);white-space:nowrap;}
.qr-preset-card.active span{color:var(--primary-color);}
.qr-preset-thumb{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-secondary);}
.qr-style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.qr-style-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:2px solid var(--border-secondary);border-radius:8px;cursor:pointer;transition:all .15s;color:var(--text-primary);background:var(--card-bg);}
.qr-style-item:hover{border-color:var(--primary-color);background:rgba(22,119,255,.04);}
.qr-style-item.active{border-color:var(--primary-color);background:rgba(22,119,255,.08);color:var(--primary-color);}
.qr-style-item span{font-size:11px;color:var(--text-tertiary);white-space:nowrap;}
.qr-style-item.active span{color:var(--primary-color);}
.qr-color-wrap{display:flex;align-items:center;gap:6px;background:var(--bg-secondary);border-radius:8px;padding:4px 10px;border:1px solid var(--border-secondary);}
.qr-color-input{width:28px;height:28px;border:none;border-radius:4px;cursor:pointer;padding:0;background:none;}
.qr-color-input::-webkit-color-swatch-wrapper{padding:0;}
.qr-color-input::-webkit-color-swatch{border:1px solid var(--border-secondary);border-radius:4px;}
.qr-color-hex{font-size:12px;color:var(--text-secondary);font-family:monospace;min-width:60px;}
.qr-logo-area{border:2px dashed var(--border-secondary);border-radius:10px;padding:16px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;}
.qr-logo-area:hover{border-color:var(--primary-color);background:rgba(22,119,255,.04);}
.qr-logo-area.dragover{border-color:var(--primary-color);background:rgba(22,119,255,.08);}
.qr-logo-placeholder{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-tertiary);font-size:13px;}
.qr-logo-placeholder i{font-size:28px;}
.qr-logo-preview{position:relative;display:inline-block;}
.qr-logo-preview img{max-width:80px;max-height:80px;border-radius:6px;border:1px solid var(--border-secondary);}
.qr-logo-remove{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--danger-color);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;transition:transform .15s;}
.qr-logo-remove:hover{transform:scale(1.1);}
.qr-preview-box{min-height:260px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:10px;padding:16px;}
.qr-preview-empty{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-tertiary);font-size:13px;}
#qrCanvasWrapper{padding:12px;background:#fff;border-radius:4px;}
#qrCanvas canvas,#qrCanvas svg{max-width:100%;border-radius:4px;display:block;}
.qr-upload-area{border:2px dashed var(--border-secondary);border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;}
.qr-upload-area:hover{border-color:var(--primary-color);background:rgba(22,119,255,.04);}
.qr-upload-area.dragover{border-color:var(--primary-color);background:rgba(22,119,255,.08);}
.qr-upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-tertiary);}
.qr-upload-preview{position:relative;display:inline-block;text-align:center;}
.qr-upload-preview img{max-width:200px;max-height:200px;border-radius:6px;border:1px solid var(--border-secondary);}
.btn-sm{font-size:12px;padding:4px 10px;border-radius:6px;}
@media(max-width:768px){
  .qr-tab{flex:1;justify-content:center;padding:10px 12px;font-size:13px;}
  .qr-tab-panel.active>div[style*="grid"]{grid-template-columns:1fr!important;}
  .qr-tab-panel.active>div[style*="grid"]>.tool-card[style*="sticky"]{position:static;order:-1;}
  .qr-style-grid{grid-template-columns:repeat(3,1fr);}
  .qr-preset-grid{grid-template-columns:repeat(4,1fr);gap:6px;}
  .qr-preset-thumb{width:36px;height:36px;}
  .qr-design-tab{padding:8px 10px;font-size:12px;}
}

/* ============ 网站健康 ============ */
.health-check-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border-secondary);}
.health-check-item:last-child{border-bottom:none;}
.health-check-name{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);}
.health-check-desc{font-size:12px;color:var(--text-tertiary);margin-left:4px;}
.health-check-pass{color:var(--success-color);}
.health-check-fail{color:var(--text-tertiary);}
.img-list-item{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:6px;margin-bottom:4px;font-size:13px;background:var(--bg-secondary);transition:background .2s;}
.img-list-item:hover{background:var(--bg-tertiary);}
.img-list-url{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);margin-right:12px;max-width:60%;}
.img-list-size{font-weight:500;flex-shrink:0;}
.img-list-oversized{color:var(--danger-color);}
.img-size-bar{height:4px;border-radius:2px;background:var(--bg-tertiary);margin-top:4px;overflow:hidden;}
.img-size-bar-inner{height:100%;border-radius:2px;transition:width .3s;}
.img-toggle-btn{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--primary-color);cursor:pointer;margin-top:8px;user-select:none;}
.img-toggle-btn:hover{opacity:.8;}