/**
 * common.css - 全站公共样式
 *
 * 包含内容：CSS变量、基础重置、header（logo/搜索框/图标/汉堡按钮）、
 * 左侧栏（分类导航/统计卡/广告卡/排行榜）、移动端抽屉与遮罩层等
 * index.php 和 amazon_view.php 共用的部分。
 *
 * 各页面独有的样式（如商品列表、商品详情页）仍保留在各自文件的 <style> 里。
 */
:root{
  --ink:#1d1d1f;
  --muted:#6e6e73;
  --hint:#9a9a9e;
  --line:#e4e4e7;
  --page:#f5f5f7;
  --card:#ffffff;
  --accent:#378ADD;
  --accent-dark:#185FA5;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.shell{
  max-width:1260px;
  margin:0 auto;
}

/* ===== Header ===== */
header{
  display:flex;
  align-items:center;
  gap:24px;
  background:var(--card);
  border-radius:0;
  padding:16px 24px;
  margin-bottom:15px;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.brand i{ font-size:26px; color:#D4537E; }
.brand .titles p{ margin:0; }
.brand .titles .t1{ font-size:17px; font-weight:600; letter-spacing:-0.01em; }
.brand .titles .t2{ font-size:11.5px; color:var(--hint); }

.search-bar{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--page);
  border:1px solid var(--line);
  border-radius:0;
  padding:0 4px;
  height:44px;
}
.search-bar i{ font-size:18px; color:var(--hint); }
.search-bar input{
  border:none;
  background:transparent;
  outline:none;
  font-size:14px;
  flex:1;
  color:var(--ink);
}
.search-bar button{
  background:var(--ink);
  color:#fff;
  border:none;
  border-radius:0;
  padding:8px 18px;
  font-size:13px;
  cursor:pointer;
}

.header-icons{
  display:flex;
  gap:16px;
  color:var(--muted);
  flex-shrink:0;
}
.header-icons i{ font-size:19px; cursor:pointer; }

/* ===== 汉堡菜单按钮：桌面端不显示 ===== */
.hamburger-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex-shrink:0;
  background:transparent;
  border:none;
  border-radius:0;
  color:var(--ink);
  cursor:pointer;
  padding:0;
}
.hamburger-btn svg{ display:block; }

/* ===== 搜索图标按钮：手机窄屏专用，桌面/平板不显示 ===== */
.search-toggle-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex-shrink:0;
  background:transparent;
  border:none;
  border-radius:0;
  color:var(--ink);
  cursor:pointer;
  padding:0;
}
.search-toggle-btn svg{ display:block; }

/* ===== 移动端侧边抽屉内的头部（仅移动端可见） ===== */
.sidebar-mobile-head{
  display:none;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  font-size:14px;
  font-weight:600;
}
.sidebar-close-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  color:var(--muted);
  line-height:1;
  cursor:pointer;
  padding:4px;
}

/* ===== 移动端遮罩层 ===== */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  z-index:998;
  opacity:0;
  transition:opacity .25s ease;
}
.sidebar-overlay.show{
  display:block;
  opacity:1;
}

/* ===== Main grid ===== */
.layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:20px;
  align-items:start;
}

/* ===== Sidebar (tools) ===== */
.tools-card{
  background:var(--card);
  border-radius:0;
  padding:16px 12px;
}
.tools-card .label{
  font-size:11.5px;
  color:var(--hint);
  margin:0 0 10px 4px;
}
.tools-grid{
  display:flex;
  flex-direction:column;
}
.tool-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 8px;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.tool-row:last-child{ border-bottom:none; }
.tool-row i.leading{ font-size:17px; color:var(--muted); width:18px; text-align:center; }
.tool-row span{ flex:1; font-size:13.5px; }
.tool-row i.chevron{ font-size:15px; color:var(--hint); }
.tool-row.active{
  background:#eef5fc;
  margin:0 -12px;
  padding-left:20px;
  padding-right:20px;
}
.tool-row.active i.leading{ color:var(--accent); }
.tool-row.active span{ font-weight:600; }

/* ===== Right column ===== */
.side-card{
  background:var(--card);
  border-radius:0;
  padding:16px;
  margin-bottom:16px;
}
.side-card .label{
  font-size:11.5px;
  color:var(--hint);
  margin:0 0 4px;
}
.side-card .big-num{
  font-size:22px;
  font-weight:600;
  margin:0 0 10px;
}
.chart-wrap{ position:relative; height:110px; }

.ad-card{
  background:#fbfbfc;
  border:1px solid var(--line);
  border-radius:0;
  padding:16px;
  margin-bottom:16px;
  position:relative;
}
.pr-tag{
  position:absolute;
  top:10px;
  right:10px;
  font-size:9.5px;
  color:var(--hint);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:0;
  padding:2px 6px;
}
.ad-card .ad-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.ad-card .ad-head i{ font-size:22px; color:var(--accent); }
.ad-card .ad-title{ margin:0; font-size:13px; font-weight:600; }
.ad-card p.desc{ margin:0; font-size:12px; color:var(--muted); line-height:1.55; }

.rank-list{ display:flex; flex-direction:column; }
.rank-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 2px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
}
.rank-row:last-child{ border-bottom:none; }
.rank-num{
  width:18px; height:18px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px;
  font-weight:700;
  color:#fff;
  background:var(--hint);
}
.rank-row:nth-child(1) .rank-num{ background:#D4AF37; }
.rank-row:nth-child(2) .rank-num{ background:#9AA0A6; }
.rank-row:nth-child(3) .rank-num{ background:#B08D57; }
.rank-name{ font-size:13px; }

/* ===== 手机/平板：左侧栏改为可滑出的抽屉，汉堡按钮出现 ===== */
@media (max-width:1000px){
  .layout{ grid-template-columns:1fr; }

  .hamburger-btn{ display:flex; }

  .col-left{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:82%;
    max-width:300px;
    background:var(--page);
    z-index:999;
    overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .28s ease;
    box-shadow:2px 0 12px rgba(0,0,0,0.12);
  }
  .col-left.open{
    transform:translateX(0);
  }
  .col-left .tools-card,
  .col-left .side-card{
    border-left:none;
    border-right:none;
    border-radius:0;
    margin-top:0;
  }
  .sidebar-mobile-head{ display:flex; }
}

/* ===== 手机窄屏 header：左边logo，右边搜索图标+汉堡菜单 ===== */
@media (max-width:680px){
  header{
    flex-wrap:wrap;
    gap:10px;
    padding:12px 14px;
  }

  .brand{
    order:1;
    flex:1 1 auto;
    min-width:0;
  }
  .brand .titles p{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .header-icons{ display:none; }

  .search-toggle-btn{
    display:flex;
    order:2;
  }
  .hamburger-btn{ order:3; }

  .search-bar{
    display:none;
    order:5;
    flex:1 1 100%;
    width:100%;
  }
  .search-bar.mobile-show{
    display:flex;
  }
}