/* ===========================================================
   黔东南州集美大数据 · 苗侗非遗雅致风 全局样式 style.css
   蜡染靛蓝 · 苗银亮银 · 朱砂红 · 米白底
   =========================================================== */

/* ---------- 设计变量 ---------- */
:root {
  --indigo-deep: #1e3a5f;      /* 蜡染深靛 */
  --indigo: #2c5282;           /* 靛蓝 */
  --indigo-light: #3a6ea5;     /* 浅靛 */
  --indigo-soft: #e8f0f7;      /* 靛蓝浅底 */
  --silver: #9aa5b1;           /* 苗银 */
  --silver-light: #cbd5e0;     /* 亮银 */
  --silver-soft: #f0f2f5;      /* 银灰底 */
  --vermilion: #c0392b;        /* 朱砂红 */
  --vermilion-light: #e74c3c;  /* 亮朱砂 */
  --cream: #faf7f0;            /* 米白主底 */
  --paper: #fffdf8;            /* 卡片纸白 */
  --ink: #2d3748;              /* 墨色 */
  --ink-2: #4a5568;            /* 次级墨 */
  --ink-3: #718096;            /* 弱墨 */
  --gold: #a98338;             /* 雅金 */
  --gold-light: #c9a35a;       /* 浅金 */
  --line: #e6ddc8;             /* 分割线(米色调) */
  --line-2: #ebe6d8;
  --shadow: 0 2px 12px rgba(30,58,95,.06);
  --shadow-md: 0 6px 24px rgba(30,58,95,.10);
  --shadow-lg: 0 12px 40px rgba(30,58,95,.14);
  --radius: 10px;
  --radius-lg: 16px;
  --radius-sm: 6px;
  --serif: "Noto Serif SC","Songti SC","SimSun",serif;
  --sans: "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --maxw: 1200px;
}

/* ---------- 基础重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--indigo); text-decoration: none; transition: color .2s; }
a:hover { color: var(--vermilion); }
img { max-width: 100%; display: block; }
ul,ol { list-style: none; }
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; color: var(--indigo-deep); line-height: 1.35; }
input,textarea,select,button { font-family: inherit; font-size: inherit; outline: none; }

/* ---------- 布局工具 ---------- */
.qd-container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.qd-row { display: flex; flex-wrap: wrap; }
.qd-grid { display: grid; gap: 22px; }
.qd-center { display: flex; align-items: center; justify-content: center; }
.qd-between { display: flex; align-items: center; justify-content: space-between; }
.qd-gap { gap: 12px; }
.qd-gap-lg { gap: 24px; }
.qd-mt { margin-top: 24px; } .qd-mt-lg { margin-top: 40px; } .qd-mb { margin-bottom: 24px; }
.qd-text-center { text-align: center; } .qd-text-right { text-align: right; }
.qd-hidden { display: none !important; }
.qd-clear::after { content:""; display:block; clear:both; }

/* ---------- 蜡染/苗银纹样底纹 ---------- */
.qd-batik-bg {
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(44,82,130,.04) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(192,57,43,.03) 0, transparent 40%);
}
.qd-silver-line {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--indigo) 50%, var(--gold) 80%, transparent);
}

/* ---------- 标题装饰 ---------- */
.qd-sec-title { text-align: center; margin-bottom: 32px; }
.qd-sec-title h2 { font-size: 30px; color: var(--indigo-deep); letter-spacing: 2px; }
.qd-sec-title .qd-sub { color: var(--ink-3); font-size: 14px; margin-top: 8px; letter-spacing: 4px; }
.qd-sec-title .qd-deco { width: 60px; height: 2px; background: var(--gold); margin: 14px auto 0; position: relative; }
.qd-sec-title .qd-deco::before,.qd-sec-title .qd-deco::after { content:""; position:absolute; top:-3px; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); }
.qd-sec-title .qd-deco::before { left:-4px; } .qd-sec-title .qd-deco::after { right:-4px; }

/* ---------- 按钮 ---------- */
.qd-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding: 10px 26px; border:none; border-radius: var(--radius); font-size: 15px; cursor: pointer; transition: all .25s; white-space:nowrap; font-family: var(--sans); }
.qd-btn-primary { background: var(--indigo); color: #fff; }
.qd-btn-primary:hover { background: var(--indigo-deep); color:#fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.qd-btn-vermilion { background: var(--vermilion); color: #fff; }
.qd-btn-vermilion:hover { background: var(--vermilion-light); color:#fff; }
.qd-btn-outline { background: transparent; color: var(--indigo); border: 1.5px solid var(--indigo); }
.qd-btn-outline:hover { background: var(--indigo); color:#fff; }
.qd-btn-ghost { background: var(--silver-soft); color: var(--ink-2); }
.qd-btn-ghost:hover { background: var(--silver-light); color: var(--ink); }
.qd-btn-gold { background: linear-gradient(135deg,var(--gold),var(--gold-light)); color:#fff; }
.qd-btn-gold:hover { box-shadow: 0 6px 20px rgba(169,131,56,.4); color:#fff; transform: translateY(-1px); }
.qd-btn-lg { padding: 14px 38px; font-size: 17px; }
.qd-btn-sm { padding: 6px 16px; font-size: 13px; }
.qd-btn-block { display:flex; width:100%; }
.qd-btn:disabled { opacity:.5; cursor:not-allowed; }

/* ---------- 卡片 ---------- */
.qd-card { background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow:hidden; transition: all .3s; }
.qd-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--silver-light); }
.qd-card-body { padding: 22px; }
.qd-card-flat { background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 20px; }

/* ---------- 徽章/标签 ---------- */
.qd-badge { display:inline-flex; align-items:center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight:500; }
.qd-badge-indigo { background: var(--indigo-soft); color: var(--indigo); }
.qd-badge-vermilion { background: #fdeaea; color: var(--vermilion); }
.qd-badge-gold { background: #f8f0dd; color: var(--gold); }
.qd-badge-green { background: #e6f6ec; color: #2f855a; }
.qd-badge-gray { background: var(--silver-soft); color: var(--ink-3); }
.qd-tag { display:inline-block; padding: 4px 12px; background: var(--cream); border:1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); font-size: 13px; margin: 0 6px 6px 0; cursor:pointer; transition: all .2s; }
.qd-tag:hover, .qd-tag.active { background: var(--indigo); color:#fff; border-color: var(--indigo); }

/* ---------- 表单 ---------- */
.qd-form-group { margin-bottom: 18px; }
.qd-form-label { display:block; margin-bottom: 7px; font-weight: 500; color: var(--ink-2); font-size: 14px; }
.qd-form-label .req { color: var(--vermilion); margin-left: 3px; }
.qd-input, .qd-textarea, .qd-select {
  width:100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); transition: all .2s; font-size: 15px;
}
.qd-input:focus, .qd-textarea:focus, .qd-select:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(44,82,130,.12); }
.qd-textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.qd-input::placeholder, .qd-textarea::placeholder { color: var(--ink-3); }
.qd-form-hint { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.qd-form-row { display:flex; gap: 16px; } .qd-form-row > * { flex:1; }
.qd-checkbox { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.qd-checkbox input { width:16px; height:16px; accent-color: var(--indigo); }

/* ---------- 表格 ---------- */
.qd-table { width:100%; border-collapse: collapse; background: var(--paper); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.qd-table th { background: var(--indigo); color:#fff; padding: 13px 16px; text-align:left; font-weight:500; font-size: 14px; }
.qd-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.qd-table tr:last-child td { border-bottom: none; }
.qd-table tr:hover td { background: var(--indigo-soft); }

/* ---------- 分页 ---------- */
.qd-pagination { display:flex; gap:6px; justify-content:center; margin-top: 32px; }
.qd-pagination a, .qd-pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border:1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-2); font-size:14px; }
.qd-pagination a:hover { border-color: var(--indigo); color: var(--indigo); }
.qd-pagination .active { background: var(--indigo); color:#fff; border-color: var(--indigo); }

/* ---------- 提示 ---------- */
.qd-alert { padding: 13px 18px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; display:flex; gap:10px; align-items:flex-start; }
.qd-alert-info { background: var(--indigo-soft); color: var(--indigo); border-left:3px solid var(--indigo); }
.qd-alert-success { background: #e6f6ec; color: #2f855a; border-left:3px solid #2f855a; }
.qd-alert-warn { background: #fdf6e3; color: #976a14; border-left:3px solid #d4a72c; }
.qd-alert-error { background: #fdeaea; color: var(--vermilion); border-left:3px solid var(--vermilion); }

/* ---------- 面包屑 ---------- */
.qd-breadcrumb { padding: 14px 0; font-size: 13px; color: var(--ink-3); }
.qd-breadcrumb a { color: var(--ink-3); }
.qd-breadcrumb a:hover { color: var(--indigo); }
.qd-breadcrumb .sep { margin: 0 8px; color: var(--silver); }

/* ---------- 标签页 ---------- */
.qd-tabs { display:flex; gap:4px; border-bottom: 2px solid var(--line); margin-bottom: 24px; }
.qd-tabs a { padding: 12px 22px; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight:500; }
.qd-tabs a.active, .qd-tabs a:hover { color: var(--indigo); border-bottom-color: var(--indigo); }

/* ---------- 空状态 ---------- */
.qd-empty { text-align:center; padding: 60px 20px; color: var(--ink-3); }
.qd-empty .qd-empty-ico { font-size: 48px; margin-bottom: 14px; opacity:.5; }
.qd-empty p { margin-bottom: 16px; }

/* ---------- 头部 ---------- */
.qd-topbar { background: var(--indigo-deep); color: #c9d6e5; font-size: 13px; }
.qd-topbar .qd-container { display:flex; justify-content:space-between; align-items:center; height: 36px; }
.qd-topbar a { color: #c9d6e5; }
.qd-topbar a:hover { color: #fff; }
.qd-topbar .qd-tb-links { display:flex; gap: 18px; }
.qd-topbar .qd-tb-links span { color: var(--gold-light); }

.qd-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(30,58,95,.05); }
.qd-header .qd-container { display:flex; align-items:center; height: 70px; gap: 30px; }
.qd-logo { display:flex; align-items:center; gap: 10px; flex-shrink:0; }
.qd-logo svg { width: 42px; height: 42px; }
.qd-logo .qd-logo-text { display:flex; flex-direction:column; line-height:1.1; }
.qd-logo .qd-logo-text b { font-family: var(--serif); font-size: 21px; color: var(--indigo-deep); letter-spacing:1px; }
.qd-logo .qd-logo-text small { font-size: 11px; color: var(--gold); letter-spacing: 3px; margin-top:2px; }
.qd-nav { display:flex; gap: 4px; flex:1; }
.qd-nav a { padding: 10px 18px; color: var(--ink-2); font-weight:500; border-radius: var(--radius); position:relative; }
.qd-nav a:hover, .qd-nav a.active { color: var(--indigo); background: var(--indigo-soft); }
.qd-nav a.active::after { content:""; position:absolute; left:18px; right:18px; bottom:4px; height:2px; background: var(--gold); }
.qd-header-actions { display:flex; gap:10px; align-items:center; }
.qd-search-mini { display:flex; align-items:center; gap:6px; background:var(--cream); border:1px solid var(--line); border-radius:20px; padding:7px 16px; }
.qd-search-mini input { border:none; background:transparent; width:150px; font-size:13px; }

/* ---------- 底部 ---------- */
.qd-footer { background: var(--indigo-deep); color: #b8c6d8; margin-top: 60px; padding: 50px 0 0; }
.qd-footer a { color: #b8c6d8; }
.qd-footer a:hover { color: var(--gold-light); }
.qd-footer .qd-footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.1); }
.qd-footer h4 { color: #fff; margin-bottom: 16px; font-size: 16px; }
.qd-footer ul li { margin-bottom: 10px; font-size: 13px; }
.qd-footer .qd-footer-brand p { font-size: 13px; line-height: 1.9; color: #9fb1c8; }
.qd-footer .qd-footer-brand .qd-logo-text b { color:#fff; }
.qd-footer .qd-footer-brand .qd-logo-text small { color: var(--gold-light); }
.qd-footer-contact li { display:flex; gap:8px; }
.qd-footer-contact .qd-ico { color: var(--gold-light); }
.qd-footer-bottom { padding: 18px 0; text-align:center; font-size: 12px; color: #7d92ac; }
.qd-footer-bottom a { color: #7d92ac; }
.qd-footer-bottom .qd-fb-links { display:flex; gap:14px; justify-content:center; margin-bottom: 6px; }
.qd-icp { display:inline-flex; align-items:center; gap:6px; }

/* ---------- 后台布局（全新设计） ---------- */
.qd-admin { display:flex; min-height: 100vh; background: var(--cream); }
.qd-admin-sidebar { width: 230px; background: var(--indigo-deep); color: #c9d6e5; flex-shrink:0; position: sticky; top:0; height: 100vh; overflow-y:auto; }
.qd-admin-sidebar .qd-as-brand { padding: 22px 20px; border-bottom: 1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:10px; }
.qd-admin-sidebar .qd-as-brand b { font-family: var(--serif); color:#fff; font-size: 17px; }
.qd-admin-sidebar .qd-as-brand small { color: var(--gold-light); font-size: 11px; }
.qd-admin-sidebar .qd-as-nav { padding: 14px 0; }
.qd-admin-sidebar .qd-as-nav .qd-as-group { font-size: 11px; color: #6e8aa8; padding: 14px 22px 6px; letter-spacing: 2px; }
.qd-admin-sidebar .qd-as-nav a { display:flex; align-items:center; gap:11px; padding: 11px 22px; color: #c9d6e5; font-size: 14px; border-left: 3px solid transparent; }
.qd-admin-sidebar .qd-as-nav a:hover { background: rgba(255,255,255,.06); color:#fff; }
.qd-admin-sidebar .qd-as-nav a.active { background: rgba(169,131,56,.18); color:#fff; border-left-color: var(--gold); }
.qd-admin-main { flex:1; min-width:0; }
.qd-admin-topbar { background: var(--paper); border-bottom:1px solid var(--line); padding: 0 26px; height: 60px; display:flex; align-items:center; justify-content:space-between; position: sticky; top:0; z-index:50; }
.qd-admin-topbar .qd-at-title { font-family: var(--serif); font-size: 19px; color: var(--indigo-deep); }
.qd-admin-topbar .qd-at-user { display:flex; align-items:center; gap:10px; font-size: 14px; color: var(--ink-2); }
.qd-admin-content { padding: 26px; }
.qd-admin-card { background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow); }
.qd-admin-card h3 { font-size: 17px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* ---------- KPI 统计卡（苗银纹） ---------- */
.qd-stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-bottom: 24px; }
.qd-stat { background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; position:relative; overflow:hidden; box-shadow: var(--shadow); }
.qd-stat::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg,var(--indigo),var(--gold)); }
.qd-stat .qd-stat-num { font-family: var(--serif); font-size: 32px; color: var(--indigo-deep); font-weight:700; }
.qd-stat .qd-stat-label { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.qd-stat .qd-stat-ico { position:absolute; right: 18px; top: 18px; font-size: 26px; opacity:.25; }

/* ---------- 通用页头横幅 ---------- */
.qd-page-head { background: linear-gradient(135deg, var(--indigo-deep), var(--indigo)); color:#fff; padding: 50px 0; position:relative; overflow:hidden; }
.qd-page-head::after { content:""; position:absolute; right:-40px; bottom:-40px; width:200px; height:200px; border:2px solid rgba(169,131,56,.2); border-radius:50%; }
.qd-page-head h1 { color:#fff; font-size: 30px; letter-spacing: 2px; }
.qd-page-head p { color: #c9d6e5; margin-top: 8px; }
.qd-page-head .qd-breadcrumb { color: #9fb1c8; padding: 0; margin-bottom: 14px; }
.qd-page-head .qd-breadcrumb a { color: #9fb1c8; }

/* ---------- 通用 ---------- */
.qd-price { color: var(--vermilion); font-weight: 700; font-family: var(--serif); }
.qd-price small { font-size: 13px; font-weight: 500; }
.qd-price-del { color: var(--ink-3); text-decoration: line-through; font-size: 13px; font-weight: 400; margin-left: 6px; }
.qd-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--silver-light); }
.qd-divider { height:1px; background: var(--line); margin: 22px 0; }
.qd-loader { text-align:center; padding: 30px; color: var(--ink-3); }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .qd-footer .qd-footer-grid { grid-template-columns: 1fr 1fr; }
  .qd-stats { grid-template-columns: 1fr 1fr; }
  .qd-nav { display:none; }
}
@media (max-width: 640px) {
  .qd-footer .qd-footer-grid { grid-template-columns: 1fr; }
  .qd-stats { grid-template-columns: 1fr; }
  .qd-form-row { flex-direction: column; }
  .qd-admin-sidebar { display:none; }
}