/* ============================================================================
   PennySense v3 全站样式表
   设计系统：森林绿 + 暖金 + 橙点缀 · Slim Hero · 标签分类 · 紧凑卡片
   ============================================================================ */

/* ===== CSS 变量 ===== */
:root {
  /* ========================================
     全站基础 — 页面底色 / 字体
     ======================================== */
  --bg-page: #E8F5E9;               /* 页面底色 */
  --text-primary: #1A1A1A;          /* 主文字 */
  --text-secondary: #5C5C5C;        /* 次要文字 */
  --text-muted: #999999;            /* 弱化文字 */

  /* ========================================
     品牌色 — 跨区共用（按钮/链接/强调）
     ======================================== */
  --color-brand: #388E3C;           /* 品牌主绿 */
  --color-brand-light: #2E7D32;     /* hover 浅绿 */
  --color-accent: #e49129;          /* 强调暖橙 */
  --text-on-brand: #ffffff;         /* 品牌色上的白字 */

  /* ========================================
     Header — 毛玻璃导航
     ======================================== */
  --glass: rgba(255,255,255,0.94);  /* 毛玻璃底色 */

  /* ========================================
     Hero 区 — 渐变 / 装饰 / 文案色
     ======================================== */
  --bg-hero: #125149;               /* Hero 渐变深绿 */
  --color-gold: #e9b715;            /* 标题金色高亮 */
  --overlay-subtle: rgba(255,255,255,0.04);  /* 装饰圆 */
  --overlay-badge: rgba(255,255,255,0.18);   /* 徽章背景 */
  --text-on-hero: rgba(255,255,255,0.9);     /* 徽章文字 */
  --text-on-hero-sub: rgba(255,255,255,0.85); /* 副标题 */

  /* ========================================
     面板区 — 浮动面板 / 表单面板 / 页脚
     ======================================== */
  --bg-surface: #fff;            /* 面板/容器底色 */
  --bg-tab-strip: #125149;          /* Tab 条底色（独立于工具区） */
  --bg-tab: #125149;                /* Tab 按钮默认底色 */
  --shadow-panel: 0 -4px 24px rgba(0,0,0,0.05), 0 4px 24px rgba(0,0,0,0.08);

  /* ========================================
     卡片系统 — 工具卡片 / 图标底 / 标签 / 阴影
     ======================================== */
  --bg-card: #EBF2E3;               /* 卡片底色（独立于面板） */
  --bg-brand: #fff;              /* 图标底色 */
  --bg-accent: #fef9e7;             /* Popular 标签底 */
  --bg-muted: #F5F5F0;              /* Coming Soon 标签底 */
  --border-light: #EDE9D5;          /* 卡片边框 */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-hover: 0 4px 16px rgba(0,0,0,0.08);

  /* ========================================
     独立工具区 — BMI 等底部独立工具
     ======================================== */
  --bg-section-featured: #E8F5E9;    /* 独立工具区底色 */
  --bg-tool-featured: #ffffff;       /* 独立工具卡片底色 */

  /* ========================================
     工具页 — 输入框 / 提示条
     ======================================== */
  --border-default: #E0DCC8;        /* 输入框边框 */
  --bg-gold: #fef9e7;               /* 提示条底色 */

  /* ========================================
     布局参数 — 圆角
     ======================================== */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;
}

/* ===== 无障碍跳转链接 — 键盘用户跳过导航 ===== */
.skip-link {
  position: absolute; top: -999px; left: 0;
  padding: 12px 20px; background: var(--color-brand);
  color: var(--text-on-brand); font-weight: 700; font-size: 14px; z-index: 999;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

/* ===== 全局重置 — 盒模型/字体/底色/抗锯齿 ===== */
* { margin:0; padding:0; box-sizing:border-box }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ===== HEADER — 毛玻璃置顶导航栏 ===== */
.header {
  background: var(--glass);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 200;
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
}
.logo-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.logo-icon svg { width:32px; height:32px }
.logo-text { font-size: 20px; font-weight: 800; letter-spacing: -0.3px }
.logo-text span { color: var(--color-brand-light) }
.nav { display: flex; gap: 4px }
.nav a {
  padding: 7px 14px; border-radius: var(--radius-full);
  font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none;
  transition: all 0.15s;
}
.nav a:hover { background: var(--bg-brand); color: var(--color-brand) }
.nav a.active { background: var(--color-brand); color: var(--text-on-brand) }

/* ===== 信任条 — Header 下方紧凑单行 ===== */
.trust-bar {
  display: flex; justify-content: center; gap: 4px;
  padding: 8px 8px; font-size: 12px; font-weight: 500; color: var(--text-primary);
  background: var(--bg-page); border-bottom: 1px solid var(--border-light);
}
.trust-item { white-space: nowrap }
.trust-dot { color: var(--border-default) }

/* ===== Slim Hero — 深绿渐变 + 吉祥物 + 标题 ===== */
.hero {
  background: linear-gradient(160deg, var(--bg-hero) 0%, var(--color-brand) 100%);
  padding: 30px 20px 30px; text-align: center;
  position: relative; overflow: hidden;
}
/* .hero::after {
  content: ''; position: absolute; bottom: -40px; right: -20px;
  width: 160px; height: 160px; border-radius: 50%;
  background: var(--overlay-subtle);
} */
.hero-inner {
  position: relative; z-index: 1;
  max-width: 800px; margin: 0 auto;
  display: flex; align-items: flex-start; justify-content: center; gap: 16px;
}
.hero-text { text-align: left; padding-top: 32px }
.hero-badge {
  display: inline-block; background: var(--overlay-badge);
  padding: 4px 14px; border-radius: var(--radius-full);
  font-size: 12px; color: var(--text-on-hero); margin-bottom: 8px;
}
.hero h1 {
  font-size: clamp(22px, 5vw, 32px); font-weight: 800;
  color: var(--text-on-brand); line-height: 1.2; letter-spacing: -0.3px;
}
.hero h1 em { font-style: normal; color: var(--color-gold) }
.hero p {
  font-size: 14px; color: var(--text-on-hero-sub);
  max-width: 420px; line-height: 1.4; margin-top: 4px;
}
.hero-mascot { flex-shrink: 1; position: relative; width: 256px; }
.hero-mascot img { width: 256px; height: auto }
.hero-mascot-bubble {
  position: absolute; top: -16px; left: 50px;
  background: var(--bg-surface); padding: 5px 10px; border-radius: var(--radius-lg);
  font-size: 11px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-card); color: var(--text-primary);
  animation: bob 3s ease-in-out infinite;
}
@keyframes bob {
  0%,100% { transform:translateY(0) }
  50% { transform:translateY(-3px) }
}

/* ===== 浮动工具面板 — 白底圆角压在 Hero 底部 ===== */
.tools-panel {
  max-width: 1080px;
  margin: -144px auto 0;
  padding: 0 0 0;
  background: var(--bg-surface);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  position: relative;
  z-index: 10;
}

/* 面板内 Tab 导航 */
.tools-panel .tabs {
  display: flex; gap: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-bottom: 1px solid var(--border-light);
  background: var(--color-brand);
}
.tabs::-webkit-scrollbar { display: none }
.tab {
  flex: 1; text-align: center; justify-content: center;
  padding: 14px 12px; font-size: 16px; font-weight: 600;
  color: var(--text-on-brand); border: none; background: var(--color-brand);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer; position: relative; transition: background 0.15s, color 0.15s; white-space: nowrap;
}
.tab:hover { background: var(--bg-brand); color: var(--color-brand) }
.tab.active { background: var(--bg-surface); color: var(--bg-hero) }
.tab.active::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--bg-surface); border-radius: 3px 3px 0 0;
}
.tab-icon { margin-right: 6px }

/* ===== 面板内容区 ===== */
.panel-content {
  padding: 20px 20px;
}

/* 分类标题行 */
.cat-title {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
}
.cat-title h2 { font-size: 19px; font-weight: 700 }
.cat-title .cat-count { font-size: 13px; color: var(--text-muted); font-weight: 400 }

/* ===== 工具卡片网格 — 桌面4列 / 移动2列 ===== */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.tool-card {
  background: var(--bg-card); border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md); padding: 12px 16px;
  text-decoration: none; color: inherit; display: flex; gap: 14px;
  align-items: flex-start; transition: all 0.2s; position: relative;
}
.tool-card:hover {
  border-color: var(--color-brand-light);
  box-shadow: var(--shadow-hover); transform: translateY(-1px);
}
.tool-card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0; background: var(--bg-brand);
  margin-top: 8px;
}
.tool-card-body { flex:1; min-width:0;margin-left: -4px }
.tool-card-body h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px ; line-height: 1.2 }
.tool-card-body p { font-size: 12px; color: var(--text-secondary); line-height: 1.2 }

/* 🔥 Popular 热门标签 */
.tag-popular {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; color: var(--color-accent);
  background: var(--bg-accent); padding: 2px 8px;
  border-radius: var(--radius-full); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.tag-coming {
  display: inline-block; font-size: 10px; color: var(--text-muted);
  background: var(--bg-muted); padding: 2px 8px;
  border-radius: var(--radius-full); margin-top: 4px;
}

/* ===== 独立工具区 — 面板下方（BMI 等） ===== */
.featured-section {
  max-width: 1100px; margin: 0 auto 48px; padding: 0 20px;
}
.featured-divider {
  text-align: center; padding: 24px 20px 12px;
}
.featured-divider-text {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--text-secondary); font-weight: 500;
}
.featured-divider-text::before, .featured-divider-text::after {
  content: ''; width: 40px; height: 1px; background: var(--border-default);
}
.featured-content {
  padding: 20px; background: var(--bg-section-featured); border-radius: var(--radius-md);
}
.bmi-card {
  background: var(--bg-tool-featured); border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md); padding: 20px;
  display: flex; gap: 14px; align-items: center;
  text-decoration: none; color: inherit; transition: all 0.2s;
}
.bmi-card:hover { border-color: var(--color-brand-light); box-shadow: var(--shadow-hover) }
.bmi-card-icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--bg-brand); display: flex;
  align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
}
.bmi-card-body h3 { font-size: 16px; font-weight: 700; margin-bottom: 3px }
.bmi-card-body p { font-size: 13px; color: var(--text-secondary) }
.bmi-arrow { margin-left: auto; font-size: 20px; color: var(--border-default); flex-shrink: 0 }

/* ===== 页脚 ===== */
.footer {
  background: var(--bg-surface); border-top: 1px solid var(--border-light);
  padding: 28px 20px; text-align: center;
}
.footer-trust { font-size: 13px; color: var(--text-secondary); font-weight: 600; margin-bottom: 12px }
.footer-links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px }
.footer-links a { color: var(--text-secondary); font-size: 13px; text-decoration: none }
.footer-links a:hover { color: var(--color-brand) }
.footer-copy { font-size: 12px; color: var(--text-muted) }

/* ===== 移动端底部导航 — 暂时禁用 ===== */
.mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--glass); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-light);
  justify-content: space-around;
  padding: 5px 12px calc(5px + env(safe-area-inset-bottom,0px));
  z-index: 200;
}
.mobile-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  font-size: 10px; font-weight: 600; color: var(--text-muted); text-decoration: none;
}
.mobile-nav a.active { color: var(--color-brand) }
.mobile-nav-icon { font-size: 20px; line-height: 1 }

/* Tab 面板显隐（仅首页用） */
.tab-panel { display: none }
.tab-panel.active { display: block }

/* ===== 工具页通用样式 ===== */
.tool-page { max-width: 1100px; margin: 0 auto; padding: 32px 20px 64px }
.tool-header { margin-bottom: 32px }
.tool-header h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 800; margin-bottom: 8px }
.tool-header p { font-size: 16px; color: var(--text-secondary); max-width: 600px }
.tool-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px }

.back-home {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-secondary); text-decoration: none;
  font-size: 15px; font-weight: 500; margin-bottom: 20px;
  padding: 8px 16px; border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); background: var(--bg-brand);
  transition: all 0.2s;
}
.back-home:hover { color: var(--color-brand); border-color: var(--color-brand) }

.form-panel {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 28px;
}
.form-panel h2 { font-size: 18px; font-weight: 700; margin-bottom: 20px }
.form-group { margin-bottom: 20px }
.form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary) }
.form-input {
  width: 100%; padding: 12px 16px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); font-size: 16px; color: var(--text-primary);
  transition: border-color 0.2s; background: var(--bg-surface);
}
.form-input:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--bg-brand) }
select.form-input { appearance: none; cursor: pointer; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center }
/* Free 主题色标签 */
.text-brand { color: var(--color-brand) }
/* BMI 单位切换 */
.unit-toggle-bar { display: flex; gap: 0; margin-bottom: 16px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-default) }
.unit-toggle-btn { flex: 1; padding: 8px; border: none; background: var(--bg-surface); color: var(--text-secondary); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s }
.unit-toggle-btn.active { background: var(--color-brand); color: var(--text-on-brand) }
.unit-metric { display: none }
.input-unit-wrap.unit-visible { grid-column: 1 / -1 }
.form-input::placeholder { color: var(--text-muted) }
/* 去掉 number 输入框的上下箭头 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
input[type="number"] { -moz-appearance: textfield }
/* 输入框下方的 Slider 滑块 */
.input-slider {
  width: 100%; margin-top: 12px; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px; background: var(--border-default);
  outline: none; cursor: pointer; display: block;
}
.input-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-brand); cursor: pointer;
}
.input-unit-wrap { position: relative; display: block }
.input-unit {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--text-muted); pointer-events: none;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.form-row-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }

.btn-calculate {
  width: 100%; padding: 14px; background: var(--color-brand);
  color: var(--text-on-brand); border: none; border-radius: var(--radius-sm);
  font-size: 17px; font-weight: 700; cursor: pointer;
  transition: background 0.2s; margin-top: 8px;
}
.btn-calculate:hover { background: var(--bg-hero) }
.btn-calculate:active { transform: scale(0.98) }

.result-panel {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 28px; min-height: 280px;
}
.result-panel h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px }
.result-placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 220px; color: var(--text-muted);
}
.result-placeholder-icon { font-size: 48px; margin-bottom: 12px }
.result-placeholder p { font-size: 15px }
.result-big-number { font-size: 48px; font-weight: 800; color: var(--text-primary); line-height: 1; margin-bottom: 4px }
.result-big-label { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px }
.result-breakdown { border-top: 1px solid var(--border-light); padding-top: 16px }
.result-row {
  display: flex; justify-content: space-between; padding: 10px 0;
  font-size: 15px; border-bottom: 1px solid var(--bg-surface);
}
.result-row:last-child { border-bottom: none }
.result-row .label { color: var(--text-secondary) }
.result-row .value { font-weight: 600 }
.result-row.total { font-size: 18px; font-weight: 700; padding: 14px 0; border-top: 2px solid var(--border-default); border-bottom: none; color: var(--color-brand) }
.result-tip {
  background: var(--bg-gold); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-top: 16px; font-size: 14px;
  color: var(--text-primary); line-height: 1.5;
}

/* ===== Sidebar卡片（输入页右栏 · 结果页右栏） ===== */
.sidebar-card {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 28px; min-height: 280px;
}
.sidebar-card-icon { font-size: 40px; text-align: center; margin-bottom: 12px }
.sidebar-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px }

.sidebar-steps { list-style: none; padding: 0; margin: 0 0 16px }
.sidebar-steps li {
  padding: 8px 0 8px 24px; position: relative;
  font-size: 14px; color: var(--text-secondary); line-height: 1.5;
}
.sidebar-steps li::before {
  content: ''; position: absolute; left: 6px; top: 14px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand);
}

.sidebar-example {
  background: var(--bg-section-featured); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 16px;
}
.sidebar-example-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--color-brand); margin-bottom: 6px;
}
.sidebar-example-content { font-size: 14px; color: var(--text-primary); line-height: 1.6 }

.sidebar-note {
  font-size: 13px; color: var(--text-muted); line-height: 1.5;
  padding: 12px; background: var(--bg-accent); border-radius: var(--radius-sm);
}

/* 结果页右栏 — 范围条 */
.result-ranges { margin-bottom: 16px }
.range-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  transition: background 0.2s; cursor: default;
}
.range-row.active { background: var(--bg-section-featured); font-weight: 600 }
.range-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0 }
.range-label { flex: 1; font-size: 14px; color: var(--text-secondary) }
.range-value { font-size: 13px; color: var(--text-muted); white-space: nowrap }

/* ===== 工具说明区（三列卡片网格） ===== */
.tool-explainer { max-width: 1100px; margin: 48px auto 0; padding: 0 20px }
.explainer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.explainer-card {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 24px;
}
.explainer-icon { font-size: 28px; margin-right: 10px; vertical-align: middle }
.explainer-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; display: inline }
.explainer-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.7 }

/* ===== 计算器分页视图 ===== */
.calc-input-view { display: block }
.calc-result-view { display: none }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .tool-layout { grid-template-columns: 1fr }
  .sidebar-card { min-height: auto }
  .explainer-grid { grid-template-columns: 1fr }
}

.tool-explainer { max-width: 1100px; margin: 48px auto 0; padding: 0 20px }
.tool-explainer h2 { font-size: 20px; font-weight: 700; margin-bottom: 12px }
.tool-explainer p { font-size: 15px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 12px }

/* ===== 计算器分页视图 ===== */
.calc-input-view { display: block }
.calc-result-view { display: none }

/* ===== 响应式 — 平板 ≤768px ===== */
@media (max-width: 768px) {
  .nav { display: none }
  .mobile-nav { display: flex }
  .hero { padding: 8px 8px 6px }
  .hero-inner { flex-direction: column; align-items: center; gap: 8px }
  .hero-text { text-align: center; padding-top: 0 }
  .hero h1 { font-size: 32px; text-align: center }
  .hero p { font-size: 16px; margin: 4px 0 0; text-align: left }
  .hero-mascot { align-self: flex-end }
  .hero-mascot img { width: 176px; height: auto }
  .tools-panel {
    margin: -96px 8px 0;
    padding: 0 0 16px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .tools-panel .tab { padding: 8px 8px; font-size: 16px; white-space: normal; flex: 1 1 auto; word-break: break-word }
  .tools-panel .tab.active::after { left: 0; right: 0 }
  .tool-grid { grid-template-columns: repeat(2, 1fr) }
  .panel-content { padding: 20px 12px }
  .bmi-card { flex-wrap: nowrap }
  .bmi-card-icon { width: 40px; height: 40px; font-size: 20px }
  .tool-layout { grid-template-columns: 1fr }
  /* 结果页移动端宽度自适应 */
  .tool-page { padding: 0 12px }
  .result-panel, .sidebar-card { min-height: auto; padding: 20px 16px; width: 100%; box-sizing: border-box }
  .result-big-number { font-size: 36px }
  .result-row { flex-wrap: wrap; gap: 4px; justify-content: flex-start }
  .result-row .label, .result-row .value { white-space: normal; word-break: break-word; max-width: 100%; flex: 1 1 auto }
  .result-panel { word-break: break-word; overflow-wrap: break-word }
}

@media (max-width: 480px) { /* 手机小屏 */
  .logo-text { font-size: 20px }
  .hero { padding: 16px 8px 16px }
  .hero h1 { font-size: 26px }
  .tools-panel .tab { padding: 4px 4px; font-size: 16px; white-space: normal }
  .tool-card { padding: 4px 4px }
  .tool-card-icon { width: 32px; height: 32px; font-size: 16px }
  .form-row { grid-template-columns: 1fr }
  .tag-popular {  font-size: 8px }
}