/* ============================================================
   102号烧烤委员会 — 浅色日系主题
   注入方式: nginx sub_filter → <link> in </head>
   ============================================================ */

/* --- 0. CSS 变量覆盖 --- */
:root {
  /* 主色 */
  --bbq-miku:        #39C5BB;
  --bbq-miku-light:  #7FDBDA;
  --bbq-miku-bg:     #E8F8F7;
  --bbq-fire:        #FF6B35;
  --bbq-fire-light:  #FF9F73;
  --bbq-ember:       #E85D26;

  /* 背景 */
  --bbq-page-bg:     #F5F0EB;
  --bbq-card-bg:     #FFFFFF;
  --bbq-sidebar-bg:  #2B2D42;

  /* 文字 */
  --bbq-text:        #2B2D42;
  --bbq-text-sub:    #6B7280;
  --bbq-border:      #E8DED5;

  /* 阴影 */
  --bbq-shadow:      0 2px 12px rgba(43, 45, 66, 0.06);
  --bbq-shadow-hover: 0 4px 20px rgba(57, 197, 187, 0.15);
}

/* --- 1. 全局基底 --- */
body {
  background: var(--bbq-page-bg) !important;
  color: var(--bbq-text) !important;
  font-family: "Noto Sans SC", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* --- 2. 顶栏 --- */
.semi-navigation-header,
header.semi-layout-header,
.semi-layout-header {
  background: var(--bbq-card-bg) !important;
  border-bottom: 1px solid var(--bbq-border) !important;
  box-shadow: var(--bbq-shadow) !important;
}

/* --- 3. 侧边栏 --- */
.semi-layout-sider,
.semi-navigation {
  background: var(--bbq-sidebar-bg) !important;
}

.semi-navigation .semi-navigation-item {
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  transition: all 0.2s ease !important;
}

.semi-navigation .semi-navigation-item:hover {
  background: rgba(57, 197, 187, 0.15) !important;
  color: var(--bbq-miku) !important;
}

.semi-navigation .semi-navigation-item-selected,
.semi-navigation .semi-navigation-item.semi-navigation-item-selected {
  background: var(--bbq-miku) !important;
  color: #fff !important;
}

/* --- 4. 卡片 --- */
.semi-card {
  background: var(--bbq-card-bg) !important;
  border: 1px solid var(--bbq-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--bbq-shadow) !important;
  transition: box-shadow 0.2s ease !important;
}

.semi-card:hover {
  box-shadow: var(--bbq-shadow-hover) !important;
}

/* --- 5. 按钮 --- */
/* 主按钮 → 初音绿 */
.semi-button.semi-button-primary {
  background: var(--bbq-miku) !important;
  border-color: var(--bbq-miku) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.semi-button.semi-button-primary:hover {
  background: #2DB5AB !important;
  border-color: #2DB5AB !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(57, 197, 187, 0.3) !important;
}

/* 警告/危险按钮 → 炭火橙 */
.semi-button.semi-button-danger,
.semi-button.semi-button-warning {
  background: var(--bbq-fire) !important;
  border-color: var(--bbq-fire) !important;
  border-radius: 8px !important;
}

.semi-button.semi-button-danger:hover,
.semi-button.semi-button-warning:hover {
  background: var(--bbq-ember) !important;
}

/* 次级按钮 */
.semi-button.semi-button-light,
.semi-button.semi-button-tertiary {
  border-radius: 8px !important;
  color: var(--bbq-miku) !important;
}

/* --- 6. 输入框 --- */
.semi-input-wrapper,
.semi-select {
  border-radius: 8px !important;
  border-color: var(--bbq-border) !important;
}

.semi-input-wrapper:focus-within,
.semi-select-focus {
  border-color: var(--bbq-miku) !important;
  box-shadow: 0 0 0 2px rgba(57, 197, 187, 0.2) !important;
}

/* --- 7. 表格 --- */
.semi-table {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.semi-table-thead > .semi-table-row > .semi-table-row-head {
  background: var(--bbq-miku-bg) !important;
  color: var(--bbq-text) !important;
  font-weight: 600 !important;
}

.semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
  background: rgba(57, 197, 187, 0.04) !important;
}

/* --- 8. 标签/徽章 --- */
.semi-tag {
  border-radius: 6px !important;
}

.semi-tag-green,
.semi-tag-teal {
  background: var(--bbq-miku-bg) !important;
  color: var(--bbq-miku) !important;
}

/* --- 9. 模态框 --- */
.semi-modal-content {
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* --- 10. 滚动条 --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bbq-miku-light);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bbq-miku);
}

/* --- 11. 页脚自定义 --- */
.bbq-footer {
  text-align: center;
  padding: 16px 0;
  color: var(--bbq-text-sub);
  font-size: 13px;
}

.bbq-footer a {
  color: var(--bbq-miku);
  text-decoration: none;
}

.bbq-footer a:hover {
  text-decoration: underline;
}

/* --- 12. 登录页定制 --- */
.bbq-login-bg {
  min-height: 100vh;
  background: linear-gradient(160deg, #F5F0EB 0%, #E8F8F7 50%, #FFF0E8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bbq-login-card {
  background: var(--bbq-card-bg);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  padding: 48px 40px;
  max-width: 420px;
  width: 100%;
  position: relative;
}

.bbq-login-card::before {
  content: "🍢";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 48px;
  filter: drop-shadow(0 4px 8px rgba(255, 107, 53, 0.3));
}

/* --- 13. Logo 文字（Logo 图片就绪后可移除） --- */
.bbq-logo-text {
  font-size: 20px;
  font-weight: 700;
  color: var(--bbq-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bbq-logo-text .bbq-accent {
  color: var(--bbq-fire);
}

/* --- 14. 公告栏美化 --- */
.semi-banner {
  border-radius: 12px !important;
  border-left: 4px solid var(--bbq-miku) !important;
}

/* --- 15. 加载动画 --- */
@keyframes bbq-grill-flip {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

.bbq-loading-skewer {
  display: inline-block;
  font-size: 32px;
  animation: bbq-grill-flip 1.5s ease-in-out infinite;
}

/* --- 16. 微动效 --- */
@keyframes bbq-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.bbq-float {
  animation: bbq-float 3s ease-in-out infinite;
}

/* --- 17. 响应式微调 --- */
@media (max-width: 768px) {
  .bbq-login-card {
    margin: 16px;
    padding: 32px 24px;
  }
}