/* ========================================================================
   云间造像 · 暗色吉卜力风格 UI 主题（夜空 / 暖灯 / 萤火）
   ------------------------------------------------------------------------
   - 深蓝夜空 + 月光晕染
   - 玻璃态卡片 + 手绘虚线外框
   - 暖橙灯光（窗内之灯、夕阳之色）作为高亮
   ====================================================================== */

:root {
  /* 背景层 */
  --paper:      #15202B;        /* 主背景：深夜蓝 */
  --paper2:     #1E2A3A;        /* 次背景：稍亮 */
  --paper3:     rgba(255,255,255,0.04);

  /* 文字（暖灯光 / 奶白） */
  --ink:        #FFF6E0;
  --ink2:       #F5E6CA;
  --ink3:       #A89A82;
  --ink4:       #7A6E5A;

  /* 边框 */
  --border-soft:   rgba(245, 230, 202, 0.10);
  --border-mid:    rgba(245, 230, 202, 0.18);
  --border-strong: rgba(245, 230, 202, 0.30);

  /* 蓝调 · 月光天空 */
  --sky-100:    rgba(126,175,196,0.18);
  --sky-200:    rgba(126,175,196,0.30);
  --sky-300:    #7EBFD4;
  --sky-400:    #5E94B8;

  /* 绿调 · 森林精灵 */
  --leaf-100:   rgba(168,196,154,0.18);
  --leaf-200:   rgba(168,196,154,0.30);
  --leaf-300:   #A8C49A;
  --leaf-400:   #88B074;

  /* 暖橙 · 夕阳 / 灯光 */
  --earth-100:  rgba(232,168,124,0.18);
  --earth-200:  rgba(232,168,124,0.30);
  --earth-300:  #E8B280;
  --earth-400:  #F0A878;

  --sunset-200: rgba(240,168,120,0.30);
  --sunset-300: #F0A878;
  --sunset-400: #E89060;

  /* 樱粉 */
  --sakura-100: rgba(232,164,176,0.18);
  --sakura-200: rgba(232,164,176,0.30);
  --sakura-300: #E8A4B0;

  /* 状态色（深色背景上的徽章） */
  --info-bg:    rgba(126,175,196,0.20);  --info-fg:    #7EBFD4;
  --ok-bg:      rgba(168,196,154,0.22);  --ok-fg:      #A8CC8A;
  --warning-bg: rgba(244,212,168,0.22);  --warning-fg: #F0C878;
  --pink-bg:    rgba(232,164,176,0.22);  --pink-fg:    #E8A4B0;
  --grey-bg:    rgba(255,255,255,0.08);  --grey-fg:    #B5A98E;
  --danger-bg:  rgba(232,154,154,0.22);  --danger-fg:  #E89A9A;
  --purple-bg:  rgba(180,160,210,0.22);  --purple-fg:  #B49AD0;
}

/* ---------- 基础排版 ---------- */
html, body {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--ink2);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
}

body {
  background-image:
    radial-gradient(at 0% 0%,   rgba(126,175,196,0.20) 0px, transparent 45%),
    radial-gradient(at 100% 0%, rgba(232,168,124,0.16) 0px, transparent 45%),
    radial-gradient(at 50% 100%,rgba(168,196,154,0.14) 0px, transparent 50%);
  min-height: 100vh;
  position: relative;
}

/* 星尘噪点（夜空） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.90  0 0 0 0 0.78  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.title-zh   { font-family: 'Ma Shan Zheng', cursive; letter-spacing: 0.05em; }
.title-zk   { font-family: 'ZCOOL KuaiLe',  cursive; letter-spacing: 0.04em; }
.title-long { font-family: 'Long Cang',     cursive; }

/* ---------- 通用容器 / 卡片 ---------- */
.card-paper {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 22px;
  border: 1.5px solid var(--border-soft);
  box-shadow:
    0 6px 24px -8px rgba(0,0,0,0.45),
    0 2px 8px -2px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
}
.card-paper.solid { background: rgba(30,42,58,0.92); }

.card-soft {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius: 20px;
  border: 1.5px solid var(--border-soft);
  box-shadow: 0 4px 18px -8px rgba(0,0,0,0.30);
}

/* 手绘虚线外框 */
.hand-outline { position: relative; }
.hand-outline::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 26px;
  border: 1.5px dashed rgba(245,230,202,0.18);
  pointer-events: none;
}

/* ---------- 按钮 ---------- */
.btn { display:inline-flex; align-items:center; gap:.45rem; font-weight:500; transition:all .25s ease; cursor:pointer; user-select:none; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, #5E94B8 0%, #4A7EA0 100%);
  color:#fff; padding:.6rem 1.4rem; border-radius:14px;
  box-shadow:
    0 4px 12px -2px rgba(94,148,184,.45),
    0 0 20px -8px rgba(126,191,212,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 8px 24px -4px rgba(94,148,184,.55), 0 0 30px -6px rgba(126,191,212,.55), inset 0 1px 0 rgba(255,255,255,.18); }

.btn-warm {
  background: linear-gradient(135deg, #F0A878 0%, #D88A5A 100%);
  color:#fff; padding:.6rem 1.4rem; border-radius:14px;
  box-shadow:
    0 4px 12px -2px rgba(216,138,90,.45),
    0 0 24px -8px rgba(240,168,120,.55),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-warm:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 8px 28px -4px rgba(216,138,90,.55), 0 0 36px -6px rgba(240,168,120,.65), inset 0 1px 0 rgba(255,255,255,.18); }

.btn-leaf {
  background: linear-gradient(135deg, #A8C49A 0%, #88B074 100%);
  color:#fff; padding:.6rem 1.4rem; border-radius:14px;
  box-shadow: 0 4px 12px -2px rgba(136,176,116,.4), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-leaf:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 8px 24px -4px rgba(136,176,116,.55), inset 0 1px 0 rgba(255,255,255,.18); }

.btn-ghost {
  background: rgba(255,255,255,.05); color: var(--ink2);
  padding:.55rem 1.1rem; border-radius:12px;
  border: 1.5px solid var(--border-mid);
}
.btn-ghost:hover { background: rgba(255,255,255,.10); border-color: var(--border-strong); color: var(--ink); }

.btn-danger {
  background: linear-gradient(135deg, #E89A9A 0%, #C97373 100%);
  color:#fff; padding:.55rem 1.1rem; border-radius:12px;
  box-shadow: 0 4px 12px -2px rgba(201,115,115,.4), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-danger:hover { transform: translateY(-1px); }

.btn-icon {
  width: 36px; height: 36px; border-radius: 12px;
  display: inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.05);
  border:1.5px solid var(--border-mid);
  color: var(--ink2);
  transition: all .2s;
}
.btn-icon:hover { background: rgba(255,255,255,.10); transform: translateY(-1px); color: var(--ink); }

/* ---------- 表单 ---------- */
.input-paper, .textarea-paper, .select-paper {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1.5px solid var(--border-mid);
  border-radius: 12px;
  padding: .65rem .95rem;
  color: var(--ink2);
  outline: none;
  transition: all .2s;
  font: inherit;
}
.input-paper:focus, .textarea-paper:focus, .select-paper:focus {
  border-color: var(--sky-300);
  box-shadow: 0 0 0 3px rgba(126,191,212,.20);
  background: rgba(255,255,255,.08);
}
.input-paper::placeholder, .textarea-paper::placeholder { color: var(--ink3); opacity:.65; }
.select-paper option { background:#1E2A3A; color: var(--ink2); }

.label-zh { font-size: .85rem; color: var(--ink2); font-weight:500; }

/* ---------- 状态徽章 ---------- */
.pill { padding:.18rem .65rem; border-radius:999px; font-size:.72rem; font-weight:500; display:inline-flex; align-items:center; gap:.3rem; line-height:1.4; }
.pill-blue   { background: var(--info-bg);    color: var(--info-fg);   }
.pill-green  { background: var(--ok-bg);      color: var(--ok-fg);     }
.pill-yellow { background: var(--warning-bg); color: var(--warning-fg);}
.pill-pink   { background: var(--pink-bg);    color: var(--pink-fg);   }
.pill-grey   { background: var(--grey-bg);    color: var(--grey-fg);   }
.pill-red    { background: var(--danger-bg);  color: var(--danger-fg); }
.pill-purple { background: var(--purple-bg);  color: var(--purple-fg); }

/* ---------- 侧边栏 ---------- */
.sidebar {
  background: linear-gradient(180deg, rgba(30,42,58,0.85) 0%, rgba(20,30,42,0.92) 100%);
  border-right: 1.5px solid var(--border-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-item {
  display: flex; align-items: center; gap:.75rem;
  padding: .65rem .9rem; border-radius: 14px;
  color: var(--ink2); font-weight: 500; font-size: .92rem;
  transition: all .2s;
}
.nav-item .nav-icon { width:1.2rem; text-align:center; opacity:.75; }
.nav-item:hover { background: rgba(255,255,255,.05); transform: translateX(2px); color: var(--ink); }
.nav-item.active {
  background: linear-gradient(135deg, rgba(240,168,120,0.20), rgba(232,168,124,0.10));
  color: var(--earth-300);
  box-shadow:
    inset 0 0 0 1.5px rgba(240,168,120,0.30),
    0 4px 18px -2px rgba(240,168,120,0.20);
}
.nav-item.active .nav-icon { opacity: 1; }
.nav-section-title {
  font-size: .7rem; color: var(--ink3); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 0 .9rem; margin: 1rem 0 .35rem;
}

/* ---------- 顶部条 ---------- */
.topbar {
  background: rgba(20,30,42,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--border-soft);
}

/* ---------- 装饰元素动画 ---------- */
.float-cloud { animation: cloudFloat 14s ease-in-out infinite; }
.float-cloud-2 { animation: cloudFloat 18s ease-in-out infinite reverse; }
@keyframes cloudFloat {
  0%,100% { transform: translateY(0) translateX(0); }
  50%     { transform: translateY(-10px) translateX(6px); }
}
.float-leaf { animation: leafFall 22s linear infinite; }
@keyframes leafFall {
  0%   { transform: translateY(-10vh) rotate(0deg);  opacity:0; }
  10%  { opacity: .7; }
  100% { transform: translateY(110vh) rotate(360deg); opacity:0; }
}
.fade-in    { animation: fadeIn .55s ease-out both; }
.fade-in-up { animation: fadeInUp .6s ease-out both; }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp { from{opacity:0; transform: translateY(14px);} to{opacity:1; transform:none;} }
.breathe { animation: breathe 3.5s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.glow { animation: glow 3s ease-in-out infinite; }
@keyframes glow { 0%,100% { filter: drop-shadow(0 0 6px rgba(240,168,120,0.4)); } 50% { filter: drop-shadow(0 0 14px rgba(240,168,120,0.8)); } }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(245,230,202,0.18); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245,230,202,0.30); }

/* ---------- Tab 切换 ---------- */
.tab-bar { display:flex; gap:.4rem; border-bottom:1.5px solid var(--border-soft); padding-bottom:.35rem; flex-wrap: wrap; }
.tab-item {
  padding:.5rem 1.1rem; border-radius:12px 12px 0 0;
  color: var(--ink3); font-weight:500; font-size:.92rem;
  transition: all .2s; cursor:pointer; position:relative;
}
.tab-item:hover { color: var(--ink2); }
.tab-item.active {
  color: var(--earth-300);
  background: rgba(240,168,120,0.10);
  box-shadow: inset 0 -2.5px 0 var(--earth-300);
}
.tab-item .count {
  display:inline-block; min-width:1.4rem; padding:0 .3rem;
  margin-left:.35rem; font-size:.7rem; line-height:1.4rem;
  background: rgba(255,255,255,0.08); color: var(--ink2);
  border-radius:999px; text-align:center;
}
.tab-item.active .count { background: rgba(240,168,120,0.22); color: var(--earth-300); }

/* ---------- 表格 ---------- */
.table-paper { width:100%; border-collapse: separate; border-spacing:0; }
.table-paper thead th {
  text-align:left; font-weight:500; font-size:.82rem;
  color: var(--ink3); padding:.7rem .9rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1.5px dashed var(--border-mid);
}
.table-paper tbody td {
  padding:.85rem .9rem; font-size:.9rem;
  border-bottom: 1px dashed var(--border-soft);
  color: var(--ink2);
}
.table-paper tbody tr:hover td { background: rgba(255,255,255,0.04); }

/* ---------- 进度条 ---------- */
.bar-track { height: 8px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; }
.bar-fill  {
  height: 100%; border-radius:999px; transition: width .8s ease;
  background: linear-gradient(90deg, #7EBFD4, #A8C49A, #F0A878);
  box-shadow: 0 0 12px rgba(240,168,120,0.40);
}

/* ---------- 通用工具 ---------- */
.divider-dash { border-top: 1.5px dashed var(--border-mid); }
.text-ink     { color: var(--ink); }
.text-ink2    { color: var(--ink2); }
.text-ink3    { color: var(--ink3); }
.bg-paper     { background: var(--paper); }
.bg-paper2    { background: var(--paper2); }

/* ---------- 装饰水彩晕 ---------- */
.watercolor-blob {
  position:absolute; pointer-events:none; z-index:0;
  filter: blur(40px); opacity: .35;
  border-radius: 50%;
}

/* ---------- Hero 区块 ---------- */
.hero-banner {
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(240,168,120,0.18) 0%, rgba(126,175,196,0.10) 60%, rgba(20,30,42,0) 100%),
    rgba(255,255,255,0.04);
  border-radius: 26px;
  border: 1.5px solid var(--border-soft);
  position: relative; overflow: hidden;
  box-shadow: 0 8px 28px -10px rgba(0,0,0,0.45);
}

/* ---------- 头像 ---------- */
.avatar {
  border-radius: 999px;
  border: 2.5px solid rgba(255,255,255,0.18);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.4);
  object-fit: cover;
}

/* ---------- 响应式辅助 ---------- */
@media (max-width: 768px) {
  .sidebar-mobile-hidden { display:none; }
}

/* ========================================================================
   覆盖 · 兼容旧浅色内联样式
   （在不修改每个 HTML 的前提下，强制把残留浅色映射到深色主题）
   ====================================================================== */

/* 文字颜色 */
[style*="color:#3D2817"], [style*="color: #3D2817"] { color: #FFF6E0 !important; }
[style*="color:#5C4033"], [style*="color: #5C4033"] { color: #F5E6CA !important; }
[style*="color:#8B7355"], [style*="color: #8B7355"] { color: #A89A82 !important; }
[style*="color:#6B5235"], [style*="color: #6B5235"] { color: #E8B280 !important; }
[style*="color:#A89070"], [style*="color: #A89070"] { color: #A89A82 !important; }

/* 强调色（轻微提亮以适配深色背景） */
[style*="color:#5E94A8"], [style*="color: #5E94A8"] { color: #7EBFD4 !important; }
[style*="color:#88B5C7"], [style*="color: #88B5C7"] { color: #A8D5E2 !important; }
[style*="color:#7A9968"], [style*="color: #7A9968"] { color: #A8CC8A !important; }
[style*="color:#9DBA8C"], [style*="color: #9DBA8C"] { color: #C5DCB0 !important; }
[style*="color:#B07A2C"], [style*="color: #B07A2C"] { color: #F0C878 !important; }
[style*="color:#C97380"], [style*="color: #C97380"] { color: #E8A4B0 !important; }
[style*="color:#D88A5A"], [style*="color: #D88A5A"] { color: #F0A878 !important; }
[style*="color:#7A5C9E"], [style*="color: #7A5C9E"] { color: #B49AD0 !important; }
[style*="color:#C97373"], [style*="color: #C97373"] { color: #E89A9A !important; }
[style*="color:#B95757"], [style*="color: #B95757"] { color: #E89A9A !important; }