/* ============================================================
   我爱换客网 · 设计系统 v2（Design System v2）
   ------------------------------------------------------------
   设计哲学：安静 · 留白 · 层次
     ① 去边框化：卡片无边框，以"柔和阴影 + 留白"分离层次
     ② 呼吸感：区块间距 20px / 卡片内边距 20px（+25%）
     ③ 层次化：背景三级 / 文字四级 / 强调色克制
     ④ 安静的交互：hover 细腻不张扬
   回滚：删除 header.html 中对该文件的引用行
   ============================================================ */

:root{
  /* ---------- 背景三级层次 ---------- */
  --bg-page:#f7f5f1;           /* 页面底：暖米灰 */
  --bg-card:#fffefc;           /* 卡片：暖白纸 */
  --bg-inset:#f3f0ea;          /* 内嵌区：浅米 */

  /* ---------- 文字四级层次 ---------- */
  --text-1:#2d2a26;            /* 标题：深墨 */
  --text-2:#4a463f;            /* 正文 */
  --text-3:#7a7468;            /* 辅助 */
  --text-4:#a8a196;            /* 弱化 */

  /* ---------- 强调色（克制使用） ---------- */
  --accent:#5a7d6f;            /* 主色：灰绿 */
  --accent-hover:#4a6b5e;
  --accent-soft:#eef3f0;       /* 主色浅底 */
  --gold:#b89a67;              /* 暖金 */
  --gold-soft:#f7f2e8;
  --seal:#a65d4a;              /* 赭红 */

  /* ---------- 线条（极少使用） ---------- */
  --line:#ece8e0;
  --line-soft:#f2efe8;

  /* ---------- 形状 ---------- */
  --r-sm:6px;
  --r-md:12px;
  --r-lg:16px;

  /* ---------- 阴影（三级，双层柔和） ---------- */
  --shadow-flat:0 1px 2px rgba(45,42,38,.03);
  --shadow-card:0 1px 2px rgba(45,42,38,.03), 0 4px 16px rgba(45,42,38,.045);
  --shadow-float:0 2px 6px rgba(45,42,38,.05), 0 12px 32px rgba(45,42,38,.09);

  /* ---------- 字体 ---------- */
  --font-serif:Georgia,"Songti SC","STSong",serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  /* ---------- 节奏 ---------- */
  --gap:20px;                  /* 区块间距 */
  --pad:20px;                  /* 卡片内边距 */
}

/* ============================================================
   全局
   ============================================================ */
body{
  font-family:var(--font-sans) !important;
  color:var(--text-2);
  background:var(--bg-page) !important;
  background-image:none !important;
  font-size:15px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 标题层级：大标题衬线（20px+），小标题无衬线 */
h1,h2,.fs20,.fs24,.fs36{
  font-family:var(--font-serif);
  color:var(--text-1);
  letter-spacing:.5px;
  line-height:1.45;
}
h3,h4,.fs16,.fs18{
  color:var(--text-1);
  line-height:1.5;
}

/* 链接：细下划线（安静的表达） */
a{color:var(--text-2);text-decoration:none;transition:color .25s;}
a:hover{color:var(--accent);}

/* ============================================================
   卡片：去边框化（核心决策）
   ============================================================ */
.card{
  border:none !important;
  border-radius:var(--r-md) !important;
  background:var(--bg-card);
  box-shadow:var(--shadow-card) !important;
  margin-bottom:var(--gap);
  transition:box-shadow .4s ease;
}
.card:hover{box-shadow:var(--shadow-float) !important;}
.card:last-child{margin-bottom:0;}

.card-header{
  background:transparent !important;
  border-bottom:none !important;
  font-family:var(--font-sans) !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  color:var(--text-1);
  padding:18px var(--pad) 4px !important;
  letter-spacing:.3px;
}
.card-body{padding:var(--pad) !important;}

/* 卡片标题装饰：暖金小点（极简） */
.card-header::before{
  content:"";
  display:inline-block;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--gold);
  margin-right:9px;
  vertical-align:2px;
  opacity:.75;
}

/* ============================================================
   按钮：三层体系（主/次/幽灵）
   ============================================================ */
.btn{
  border-radius:var(--r-sm) !important;
  font-size:13.5px;
  font-weight:500;
  padding:6px 18px;
  letter-spacing:.3px;
  transition:all .3s ease;
  border:none;
}
/* 主按钮 */
.btn-info,.btn-primary{
  background:var(--accent) !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(90,125,111,.2);
}
.btn-info:hover,.btn-primary:hover{
  background:var(--accent-hover) !important;
  box-shadow:0 4px 14px rgba(90,125,111,.3);
  transform:translateY(-1px);
}
/* 次按钮 */
.btn-success{background:#6f9077 !important;color:#fff !important;}
.btn-danger{background:var(--seal) !important;color:#fff !important;}
.btn-secondary{background:#ece8e0 !important;color:var(--text-2) !important;}
.btn-light{background:var(--bg-inset) !important;color:var(--text-3) !important;}
/* 幽灵按钮 */
.btn-outline-primary,.btn-outline-info{
  background:transparent !important;
  border:1px solid rgba(90,125,111,.45) !important;
  color:var(--accent) !important;
}
.btn-outline-primary:hover,.btn-outline-info:hover{
  background:var(--accent-soft) !important;
  border-color:var(--accent) !important;
}
.btn-outline-secondary{border:1px solid var(--line) !important;color:var(--text-3) !important;background:transparent !important;}
.btn-outline-secondary:hover{background:var(--bg-inset) !important;color:var(--text-2) !important;}
.btn-outline-danger{border:1px solid rgba(166,93,74,.4) !important;color:var(--seal) !important;background:transparent !important;}
.btn-outline-danger:hover{background:#f9f0ec !important;}
.btn-sm{padding:4px 14px !important;font-size:13px;}

/* ============================================================
   导航：深墨绿 + 底部暖金细线
   ============================================================ */
.header{
  background:#31413b !important;
  box-shadow:none !important;
  position:relative;
}
.header::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,rgba(184,154,103,.4) 70%,transparent);
  opacity:.5;
}
.header .nav-link{position:relative;transition:color .3s;}
.header .nav-link::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1.5px;
  background:var(--gold);border-radius:1px;
  transform:scaleX(0);transition:transform .35s ease;
}
.header .nav-link:hover::after{transform:scaleX(1);}

/* ============================================================
   徽章与标签
   ============================================================ */
.badge{border-radius:4px !important;font-weight:400;letter-spacing:.2px;}
.badge-secondary{background:var(--accent-soft) !important;color:var(--accent) !important;}
.badge-light{background:var(--bg-inset) !important;color:var(--text-3) !important;}
.badge-warning{background:var(--gold-soft) !important;color:#8a6d3b !important;}
.badge-danger{background:#f9f0ec !important;color:var(--seal) !important;}

/* ============================================================
   表单：安静的设计
   ============================================================ */
.form-control{
  border-radius:var(--r-sm) !important;
  border:1px solid var(--line) !important;
  background:var(--bg-card);
  font-size:14px;
  padding:10px 14px;
  color:var(--text-2);
  transition:border-color .25s,box-shadow .25s;
}
.form-control:focus{
  border-color:rgba(90,125,111,.5) !important;
  box-shadow:0 0 0 3px rgba(90,125,111,.1) !important;
  background:#fff;
}
.form-control::placeholder{color:var(--text-4);}

/* ============================================================
   列表 / 表格 / 分页
   ============================================================ */
.list-group-item{
  background:transparent;
  border:none !important;
  border-bottom:1px solid var(--line-soft) !important;
  color:var(--text-2);
  padding:13px 4px;
  transition:background .25s;
}
.list-group-item:last-child{border-bottom:none !important;}
.list-group-item:hover{background:var(--bg-inset);}

.table{color:var(--text-2);font-size:13.5px;}
.table thead th{
  border:none !important;
  color:var(--text-3);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.5px;
  padding:10px 12px;
}
.table td{
  border:none !important;
  border-bottom:1px solid var(--line-soft) !important;
  padding:12px;
  vertical-align:middle;
}
.table-hover tbody tr:hover{background:var(--bg-inset);}

.pagination .page-link{
  color:var(--text-3);
  background:var(--bg-card);
  border:none;
  border-radius:var(--r-sm) !important;
  margin:0 3px;
  padding:7px 13px;
  font-size:13.5px;
  box-shadow:var(--shadow-flat);
  transition:all .25s;
}
.pagination .page-link:hover{background:var(--accent-soft);color:var(--accent);}
.pagination .page-item.active .page-link{background:var(--accent);color:#fff;}
.pagination .page-item.disabled .page-link{background:transparent;box-shadow:none;color:var(--text-4);}

/* ============================================================
   内容排版（阅读体验）
   ============================================================ */
.common-content{
  font-size:15px;
  line-height:1.95;
  color:var(--text-2);
  letter-spacing:.2px;
}
.common-content p{margin-bottom:16px;}
.common-content img{
  max-width:100%;
  border-radius:var(--r-sm);
  box-shadow:0 4px 20px rgba(45,42,38,.1);
  display:block;
  margin:18px auto;
}
.common-content h2,.common-content h3{
  font-family:var(--font-serif);
  color:var(--text-1);
  margin:28px 0 14px;
}
.common-content a{
  color:var(--accent);
  border-bottom:1px solid rgba(90,125,111,.3);
}
.common-content a:hover{border-bottom-color:var(--accent);}

/* 引用块：信笺 */
blockquote{
  background:var(--gold-soft);
  border-left:3px solid var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:16px 20px;
  margin:16px 0;
  color:var(--text-3);
  font-family:var(--font-serif);
}
blockquote p{margin:0;}

/* 代码 */
pre{
  background:var(--bg-inset) !important;
  border:none;
  border-radius:var(--r-sm);
  padding:16px 18px;
  font-family:"SF Mono","Menlo","Consolas",monospace;
  font-size:12.5px;
  line-height:1.75;
  color:#4a4438;
}
code{
  background:var(--bg-inset);
  color:#8a5a44;
  padding:2px 7px;
  border-radius:4px;
  font-size:.92em;
}
pre code{background:transparent;color:inherit;padding:0;}

/* ============================================================
   头像：精致相框
   ============================================================ */
img[src*="/uploadfile/user/"]{
  border-radius:50% !important;
  box-shadow:0 0 0 2px var(--bg-card), 0 0 0 3.5px var(--line), 0 2px 6px rgba(45,42,38,.08);
}

/* ============================================================
   下拉菜单 / 弹窗 / 提示
   ============================================================ */
.dropdown-menu{
  border:none !important;
  border-radius:var(--r-md) !important;
  box-shadow:var(--shadow-float) !important;
  background:var(--bg-card) !important;
  padding:7px;
}
.dropdown-item{
  border-radius:var(--r-sm);
  font-size:13.5px;
  color:var(--text-2);
  padding:8px 13px;
  transition:background .2s;
}
.dropdown-item:hover{background:var(--accent-soft);color:var(--accent);}

.modal-content{border:none;border-radius:var(--r-lg);box-shadow:0 24px 70px rgba(45,42,38,.2);background:var(--bg-card);}
.modal-header{border-bottom:1px solid var(--line-soft);padding:18px 22px;}
.modal-footer{border-top:1px solid var(--line-soft);padding:14px 22px;}

.alert{border:none;border-radius:var(--r-sm);font-size:13.5px;padding:14px 18px;}
.alert-info{background:var(--accent-soft);color:var(--accent-hover);}
.alert-warning{background:var(--gold-soft);color:#8a6d3b;}
.alert-danger{background:#f9f0ec;color:var(--seal);}
.alert-success{background:#eef4ec;color:#4a6b52;}

/* ============================================================
   标签页
   ============================================================ */
.nav-tabs{border-bottom:1px solid var(--line-soft);}
.nav-tabs .nav-link{
  color:var(--text-3);border:none;background:transparent;
  border-bottom:2px solid transparent;border-radius:0;
  padding:10px 18px;font-size:14px;
  transition:all .25s;
}
.nav-tabs .nav-link:hover{color:var(--accent);border-bottom-color:rgba(90,125,111,.25);}
.nav-tabs .nav-link.active{color:var(--accent);border-bottom:2px solid var(--accent);font-weight:600;background:transparent;}

/* ============================================================
   分隔线 / 滚动条 / 选中
   ============================================================ */
hr{
  border:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent);
  margin:20px 0;
}

::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{
  background:rgba(168,161,150,.35);
  border-radius:6px;
  border:2px solid var(--bg-page);
}
::-webkit-scrollbar-thumb:hover{background:rgba(168,161,150,.55);}
::-webkit-scrollbar-track{background:transparent;}

::selection{background:rgba(184,154,103,.28);color:var(--text-1);}

/* ============================================================
   布局节奏（呼吸感）
   ============================================================ */
.container .card{margin-bottom:var(--gap);}
.row > [class*="col-"]{padding-left:10px;padding-right:10px;}
.row{margin-left:-10px;margin-right:-10px;}

/* 首页双栏内容微调 */
.col-md-8 .card-body,.col-md-4 .card-body{padding:var(--pad) !important;}

/* 正文行高覆盖（文章页 lh30） */
.lh30{line-height:1.95 !important;}


/* ============================================================
   布局节奏 v2：主次差异化 + 杂志扉页
   ============================================================ */

/* ---------- 主栏（8列）：舒展 ---------- */
.col-md-8 > .card .card-header,
.col-md-8 > div > .card .card-header{padding:20px 22px 4px !important;}
.col-md-8 > .card .card-body,
.col-md-8 > div > .card .card-body{padding:22px !important;}

/* ---------- 侧栏（4列）：紧凑 ---------- */
.col-md-4 > .card .card-header,
.col-md-4 > div > .card .card-header{padding:15px 16px 2px !important;font-size:14px !important;}
.col-md-4 > .card .card-body,
.col-md-4 > div > .card .card-body{padding:15px 16px !important;font-size:13.5px;}

/* ---------- 面包屑：安静化 ---------- */
.breadcrumb{background:transparent !important;padding:10px 2px;font-size:13px;margin-bottom:4px;}
.breadcrumb-item a{color:var(--text-4);transition:color .25s;}
.breadcrumb-item a:hover{color:var(--accent);}
.breadcrumb-item.active{color:var(--text-3);}
.breadcrumb-item + .breadcrumb-item::before{content:"·";color:var(--text-4);padding:0 6px;}

/* ---------- 文章标题：杂志扉页 ---------- */
.card-body > h1.h5{
  font-family:var(--font-serif) !important;
  font-size:23px !important;
  font-weight:700 !important;
  line-height:1.55 !important;
  letter-spacing:.8px;
  color:var(--text-1);
  padding:8px 0 14px !important;
}
/* 文章作者信息行 */
.card-body .media .media-body a{color:var(--text-2);font-weight:500;font-size:13.5px;}
.card-body .media .media-body .c9{color:var(--text-4) !important;font-size:12.5px;letter-spacing:.3px;}
.card-body .media{border-bottom:1px solid var(--line-soft);padding-bottom:14px;}

/* ---------- 分类按钮区（文章列表页） ---------- */
.mb-3 > .btn.text-secondary{color:var(--text-3) !important;padding:5px 10px;}
.mb-3 > .btn.text-secondary:hover{color:var(--accent) !important;background:var(--accent-soft);}

/* ---------- 首页卷首语下方的间距微调 ---------- */
.container > div[style*="text-align:center"] + .row{margin-top:6px;}


/* ============================================================
   公告栏（wordad）紧凑化
   ============================================================ */
.wordad-bar{margin-bottom:14px !important;background:transparent !important;box-shadow:none !important;}
.wordad-bar .card-body{padding:8px 14px !important;}
.wordad-bar .wordad-link{
  font-size:12.5px;
  color:var(--text-3);
  letter-spacing:.2px;
  transition:color .25s;
}
.wordad-bar .wordad-link:hover{color:var(--accent);}


/* ---------- select 下拉框修复（Bootstrap 固定高度冲突） ---------- */
select.form-control{
  height:auto !important;
  line-height:1.6 !important;
  padding:9px 36px 9px 14px !important;
  background-position:right 12px center;
}