/* ============================================================
   base.css — 设计系统根基「Emerald & Gold」
   深绿主色 × 浅灰背景 × 金色点缀
   ============================================================ */

:root {
  /* 深绿主色阶 */
  --g-950: #052016;
  --g-900: #07261A;
  --g-800: #0B3524;
  --g-700: #0F4630;
  --g-600: #155C40;
  --g-500: #1D7A54;
  --g-400: #2E9468;
  --g-300: #5FA986;
  --g-200: #A8D3BE;
  --g-100: #DCEFE5;
  --g-50:  #EFF7F2;

  /* 金色点缀 */
  --gold-700: #8F7318;
  --gold-600: #B08D1E;
  --gold-500: #C9A227;
  --gold-400: #D9B94A;
  --gold-300: #E8D08A;
  --gold-100: #F6EDD2;
  --gold-50:  #FBF7EA;

  /* 背景与表面 */
  --bg:      #F3F5F4;
  --bg-soft: #EAEEEC;
  --surface: #FFFFFF;
  --line:    #E2E8E4;
  --line-2:  #EDF1EE;

  /* 文字 */
  --ink:   #15201A;
  --ink-2: #43524A;
  --ink-3: #75847C;
  --ink-4: #A3AFA8;

  /* 功能色（与深绿体系调和） */
  --ok:     #1D7A54;
  --ok-bg:  #E3F3EB;
  --warn:   #B9770E;
  --warn-bg:#FBF1DD;
  --err:    #C0392B;
  --err-bg: #FBE9E6;
  --acc:    #1F6FEB;
  --acc-bg: #E7F0FE;
  --purple: #7C4DBE;
  --purple-bg: #F1EAFB;

  /* 几何 */
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;

  /* 阴影 */
  --sh-sm: 0 1px 2px rgba(7, 38, 26, .05);
  --sh-md: 0 6px 20px rgba(7, 38, 26, .08);
  --sh-lg: 0 16px 44px rgba(7, 38, 26, .16);
  --sh-gold: 0 4px 16px rgba(201, 162, 39, .28);

  /* 品牌渐变 */
  --grad-green: linear-gradient(135deg, #0F4630 0%, #0B3524 55%, #07261A 100%);
  --grad-gold: linear-gradient(135deg, #E8D08A 0%, #C9A227 50%, #B08D1E 100%);

  --sidebar-w: 232px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--g-600); text-decoration: none; }
a:hover { color: var(--g-500); }
img { max-width: 100%; }
h1, h2, h3, h4 { font-weight: 650; letter-spacing: .01em; }
h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
h4 { font-size: 14.5px; }
::selection { background: var(--gold-300); color: var(--g-900); }

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C7D2CB; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--g-300); }

/* ---------- 通用工具 ---------- */
.hidden { display: none !important; }
.dim   { color: var(--ink-3); }
.small { font-size: 12.5px; }
.mono  { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; }
.right { margin-left: auto; }
.row   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grow  { flex: 1; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb14  { margin-bottom: 14px; }
.mt8   { margin-top: 8px; }
.sep   { width: 1px; height: 20px; background: var(--line); flex: none; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px;
  font: inherit; font-size: 13.5px; font-weight: 550;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .16s ease;
  user-select: none;
}
.btn:hover { border-color: var(--g-300); color: var(--g-700); background: var(--g-50); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn.primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--g-600), var(--g-700));
  border-color: var(--g-700);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15, 70, 48, .28);
}
.btn.primary:hover { background: linear-gradient(135deg, var(--g-500), var(--g-600)); color: #fff; box-shadow: 0 4px 14px rgba(15, 70, 48, .34); }

.btn.gold {
  position: relative; overflow: hidden;
  background: var(--grad-gold);
  border-color: var(--gold-600);
  color: #3D3006;
  font-weight: 650;
  box-shadow: var(--sh-gold);
}
.btn.gold:hover { filter: brightness(1.06); color: #2E2404; box-shadow: 0 6px 18px rgba(201, 162, 39, .38); }
/* 主按钮悬停扫光 */
.btn.primary::after, .btn.gold::after {
  content: ""; position: absolute; left: -80%; top: 0;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn.primary:hover::after, .btn.gold:hover::after { left: 135%; }

.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--bg-soft); border-color: transparent; color: var(--ink); }

.btn.danger { color: var(--err); }
.btn.danger:hover { background: var(--err-bg); border-color: #EAB7B0; color: var(--err); }

.btn.mini { padding: 4.5px 11px; font-size: 12.5px; border-radius: 8px; }
.btn.block { width: 100%; }
.btn.lg { padding: 12px 24px; font-size: 15px; border-radius: 12px; }
.btn.xl { padding: 14px 32px; font-size: 16px; font-weight: 650; border-radius: 14px; letter-spacing: .02em; }

/* ---------- 表单 ---------- */
.field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
input[type="text"], input[type="password"], input[type="number"], input:not([type]), textarea, select {
  width: 100%;
  padding: 10px 13px;
  font: inherit; font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
input:hover, textarea:hover, select:hover { border-color: #C6D4CC; }
input:focus, textarea:focus, select:focus {
  border-color: var(--g-400);
  box-shadow: 0 0 0 3px rgba(29, 122, 84, .13);
  background: #fff;
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }
textarea { resize: vertical; min-height: 76px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
input[type="checkbox"] {
  width: 16px; height: 16px; flex: none;
  accent-color: var(--g-600); cursor: pointer;
}
input[type="checkbox"]:checked { box-shadow: none; }

/* ---------- 徽章（浅底深字，现代风） ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px;
  font-size: 12px; font-weight: 600; line-height: 1.7;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--bg-soft); color: var(--ink-2);
  border: 1px solid transparent;
}
.b-ok     { background: var(--ok-bg);     color: var(--ok); }
.b-warn   { background: var(--warn-bg);   color: var(--warn); }
.b-err    { background: var(--err-bg);    color: var(--err); }
.b-acc    { background: var(--acc-bg);    color: var(--acc); }
.b-purple { background: var(--purple-bg); color: var(--purple); }
.b-gold   { background: var(--gold-100);  color: var(--gold-700); }
.b-dim    { background: var(--bg-soft);   color: var(--ink-3); }
.b-green  { background: var(--g-100);     color: var(--g-700); }

/* ---------- 动效 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes beamFlow { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(26px, -34px) scale(1.07); }
  66% { transform: translate(-20px, 18px) scale(.96); }
}
@keyframes beamSlide {
  0% { transform: translateX(-30%) scaleX(.6); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(340%) scaleX(1); opacity: 0; }
}