/* ========================================
   主题：竹林 (Forest)
   特色：自然绿调 · 落叶飘飞 · 有机圆角 · 温暖质感
   ======================================== */

:root {
    --bg:          #f4f7f0;
    --bg-alt:      #ebf0e5;
    --surface:     #ffffff;
    --line:        #d8e0cf;
    --line-strong: #c0cab4;
    --pink:        #5a9e3f;
    --pink-deep:   #4a7c2f;
    --pink-hover:  #6bb04a;
    --pink-tint:   #eef5e8;
    --text:        #2d3a1f;
    --text-mid:    #5a6b48;
    --text-soft:   #8a9a78;
    --ok:          #4a8c2f;
    --warn:        #c9a020;
    --danger:      #c75050;
    --lilac:       rgba(140, 200, 100, 0.12);
    --lilac-deep:  rgba(140, 200, 100, 0.25);
    --mint:        #d8eed0;
    --cream:       #f5f0e0;
    --sky:         #d8e8f0;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --shadow:       0 4px 12px rgba(90, 110, 60, 0.06);
    --shadow-hover: 0 8px 24px rgba(90, 158, 63, 0.1);
    --ease: cubic-bezier(.4,0,.2,1);
    --dur: .35s;
    --font: "Inter", -apple-system, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 自然渐变 — 仿佛阳光穿透树叶 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 45% at 10% 8%,   rgba(140, 200, 100, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 88% 15%,  rgba(218, 240, 200, 0.3) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 80% 85%,  rgba(180, 210, 150, 0.2) 0%, transparent 58%),
        radial-gradient(ellipse 45% 35% at 18% 90%,  rgba(245, 240, 224, 0.35) 0%, transparent 55%);
}

/* 导航栏 — 自然绿玻璃 */
.nav-bar {
    background: rgba(244, 247, 240, 0.78);
    backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid rgba(90, 110, 60, 0.08);
}
.nav-brand span { color: var(--pink-deep); font-weight: 500; }
.nav-links a { color: var(--text-mid); }
.nav-links a:hover { color: var(--pink); }

.user-avatar {
    background: linear-gradient(135deg, var(--pink), var(--pink-deep));
    color: #fff;
}
.admin-avatar { background: linear-gradient(135deg, var(--pink-deep), #3a6b1f); }

/* 按钮 — 自然绿 */
.btn-primary {
    background: linear-gradient(135deg, var(--pink), var(--pink-deep));
    color: #fff;
    font-weight: 500;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--pink-hover), var(--pink));
    box-shadow: 0 4px 16px rgba(90, 158, 63, 0.3);
}
.btn-outline {
    border-color: var(--line-strong);
    color: var(--text-mid);
}
.btn-outline:hover {
    border-color: var(--pink);
    color: var(--pink);
    background: var(--pink-tint);
}

/* 卡片 — 有机白 + 大圆角 */
.card {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    transition: box-shadow var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--shadow-hover); }
.card-title { color: var(--pink-deep); }

/* 表格 */
.data-table thead th { background: rgba(90, 158, 63, 0.06); border-bottom-color: var(--line-strong); }
.data-table tbody tr:hover td { background: var(--pink-tint); }
.table-wrap {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
}

/* 侧边栏 — 自然绿玻璃 */
.sidebar {
    background: rgba(244, 247, 240, 0.85);
    backdrop-filter: blur(20px) saturate(140%);
    border-right: 1px solid rgba(90, 110, 60, 0.08);
}
.sidebar-brand span { color: var(--pink-deep); }
.sidebar-nav .nav-item { color: var(--text-soft); }
.sidebar-nav .nav-item::before { background: linear-gradient(180deg, var(--pink), var(--pink-deep)); }
.sidebar-nav .nav-item:hover {
    color: var(--pink);
    background: linear-gradient(90deg, var(--pink-tint), transparent);
}
.sidebar-nav .nav-item.active {
    color: var(--pink-deep);
    background: linear-gradient(90deg, var(--pink-tint), rgba(238, 245, 232, 0.3));
}
.sidebar-footer { border-top: 1px solid var(--line); }
.sidebar-footer a { color: var(--danger); }

/* 后台头部 */
.admin-header {
    background: rgba(244, 247, 240, 0.72);
    backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid rgba(90, 110, 60, 0.06);
}
.breadcrumb a { color: var(--pink); }
.page-title { color: var(--text); }

/* 输入框 */
.form-control {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--line);
    color: var(--text);
}
.form-control:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(90, 158, 63, 0.12);
}

/* Badge */
.badge-pink { background: var(--pink-tint); color: var(--pink-deep); }
.badge-ok { background: var(--mint); color: var(--ok); }

/* Tab */
.tab-btn.active { border-bottom-color: var(--pink); }
.tab-bar { background: rgba(244, 247, 240, 0.6); }

/* 分页 */
.page-link { background: var(--surface); border-color: var(--line); color: var(--text-mid); }
a.page-link:hover { border-color: var(--pink); background: var(--pink-tint); }
.page-link.active { background: linear-gradient(135deg, var(--pink), var(--pink-deep)); color: #fff; }

/* 页脚 */
.site-footer { background: rgba(235, 240, 229, 0.9); border-top: 1px solid var(--line); }
.footer-text { color: var(--text-soft); }
.footer-links a { color: var(--text-soft); }

/* 模态 */
.modal-overlay { background: rgba(90, 110, 60, 0.2); }
.modal-box { background: var(--surface); border: 1px solid var(--line); }

/* Toast */
.toast { background: var(--surface); border: 1px solid var(--line); }