/*
 * 颜色变量
 * --------------------------------------------------
 */
:root {
  --color-primary: #EF4444;
  --color-accent: #F87171;
  --color-background: #F3F4F6;
  --color-card: #FFFFFF;
  --color-card-hover: #FFE5E5;
  --color-text: #1F2937;
  --color-text-inverse: #FFFFFF; /* 新增：白色文本 */
  --color-border: #ddd;          /* 新增：通用边框色 */
  --color-link: #3b82f6;         /* 新增：链接色 */
}

body.dark {
  --color-primary: #F87171;
  --color-accent: #EF4444;
  --color-background: #1F2937;
  --color-card: #374151;
  --color-card-hover: #4B5563;
  --color-text: #F3F4F6;
  --color-border: #4B5563;
}

/*
 * 基本样式 & Header
 * --------------------------------------------------
 */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
  margin: 0;
  padding: 0;
  transition: background-color 0.3s, color 0.3s;
}

h1 {
  color: var(--color-primary);
  font-size: 1.8rem;
  margin-top: 0;
}

#site-header {
    background-color: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    padding: 15px 0;
    transition: background-color 0.3s, border-color 0.3s;
    /* 確保 Header 固定在頂部 */
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header-inner {
    max-width: 600px; 
    margin: 0 auto;
    padding: 0 12px;
    position: relative;
    display: flex; 
    justify-content: center;
    align-items: center;
}

#site-header h1 {
    font-size: 1.6rem;
    color: var(--color-primary);
    margin: 0;
    text-align: center;
    /* 視覺平衡補償 */
    padding-left: 12px; 
}

/* 手机端菜单切换按钮 */
#menuToggle {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
    display: block; 
}

/* PC 端隱藏 */
.desktop-only {
    display: none;
}

/*
 * 核心容器 & 侧边栏布局 (Mobile-First)
 * --------------------------------------------------
 */
#page-container {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
}

#main-content-wrapper {
    max-width: 600px; 
    width: 100%;
    margin: 0 auto;
    padding: 12px 0;
    padding-top: 20px;
    transition: transform 0.3s;
}

/* 侧边导航栏 (Mobile: Foldable) */
#sidebar-nav {
    position: fixed;
    top: 55px; 
    left: -200px; 
    height: calc(100% - 55px);
    width: 180px; 
    background-color: var(--color-card);
    z-index: 40;
    transition: left 0.3s ease-in-out;
    overflow-y: auto;
    /* 🚨 關鍵修改 1：手機版，增加頂部留白 (20px)，並保留 12px 的水平邊距 */
    padding: 20px 12px 12px 12px;
    border-right: 1px solid var(--color-border);
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    display: block;
}

/* 侧边栏展开状态 */
#sidebar-nav.open {
    left: 0;
}

/* 侧边栏标题样式 (PC端可见) */
.nav-title {
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 10px;
    /* 手機版：標題在 #sidebar-nav 的 12px padding 內，此處無需 padding */
    padding-left: 0; 
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 5px;
}

#nav-list {
    list-style: none;
    /* 🚨 關鍵修改 2：水平 padding 設置為 0，讓按鈕背景可以盡可能寬 */
    padding: 0; 
    margin: 0;
}

#nav-list li {
    margin-bottom: 4px;
}

/* 侧边栏按鈕美化 - 基礎樣式 */
#nav-list a {
    display: flex; 
    align-items: center;
    gap: 8px; 
    /* 🚨 關鍵修改 3：手機版按鈕 internal padding 設為 8px */
    padding: 10px 8px; 
    text-decoration: none;
    color: var(--color-text);
    border-radius: 8px; 
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; 
    font-size: 0.95rem;
    font-weight: 500; 
}

#nav-list a:hover {
    background-color: var(--color-card-hover);
    color: var(--color-primary);
}

/* 高亮狀態：更明顯的選中效果 */
#nav-list a.active {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

/* 搜索和控制 */
.search-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.search-controls input, #search {
    flex: 1;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: var(--color-card);
    color: var(--color-text);
}
.search-controls button, #darkToggle {
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: var(--color-card);
    color: var(--color-text);
    transition: background-color 0.2s;
}
.search-controls button:hover, #darkToggle:hover {
    background-color: var(--color-card-hover);
}

.section-spacing {
    margin-bottom: 16px;
}


/*
 * 卡片布局 (Mobile-First)
 * --------------------------------------------------
 */
#group-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
}

.card {
  background-color: var(--color-card);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column; 
  gap: 8px;
  opacity: 0;
  transition: background-color 0.3s;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  justify-content: flex-start;
}

.card .top-row {
  display: flex;
  flex-direction: row; 
  align-items: center;
  gap: 12px;
  margin: 0;
}

.card .top-row img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  flex-shrink: 0;
}

.card .top-row h2 {
  font-size: 1.2rem;
  margin: 0;
  line-height: 1.3;
  flex: 1;
  min-width: 0; 
  color: var(--color-primary);
}

a.btn-primary {
  display: inline-block; 
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.2s;
  box-sizing: border-box;
  width: auto;
  margin: 0;
}

.card .info {
  background-color: var(--color-accent); 
  color: var(--color-text-inverse);
  padding: 8px;
  border-radius: 8px;
  word-break: break-word;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0; 
}


@media (min-width: 480px) {
  #group-list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px; 
  }
  .card {
    padding: 16px; 
    gap: 0;
  }
  
  .card .top-row {
    flex-direction: column;
    align-items: center;
    gap: 0; 
    margin-bottom: 8px; 
  }

  .card .top-row img {
    width: 60px;
    height: 60px;
    margin-bottom: 4px; 
  }

  .card .top-row h2 {
    margin: 0 0 8px 0; 
  }

  a.btn-primary {
    display: block;
    width: 90%; 
    padding: 8px 12px;
    margin: 0; 
  }

  .card .info {
    margin-top: auto; 
  }
}

.card:hover {
  background-color: var(--color-card-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
a.btn-primary:hover { 
  background-color: color-mix(in srgb, var(--color-primary) 90%, black);
}

/* 动画 */
@keyframes fadeInUp { 
  0%{opacity:0; transform:translateY(20px);} 
  100%{opacity:1; transform:translateY(0);} 
}
.card.show { 
  animation: fadeInUp 0.5s ease forwards; 
}


/* 赞助区块样式 */
.donate-box {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background-color 0.3s, border-color 0.3s;
}

.donate-box h2 {
  color: var(--color-primary);
  font-size: 1.4rem;
  margin: 0 0 4px 0;
}

/* 修复: 确保手机版单列且等宽 */
.donate-buttons {
  display: grid;
  grid-template-columns: 1fr; /* 手机版强制单列等宽 */
  gap: 8px;
}
@media (min-width: 480px) {
    .donate-buttons {
        /* 宽屏上才使用多列自适应 */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

.donate-btn {
  /* 🚨 统一 button/a 标签的样式 🚨 */
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s, box-shadow 0.2s;
  
  display: block; 
  text-align: center;
  width: 100%; /* 確保按鈕填滿網格單元 */
  box-sizing: border-box;
}

.donate-btn:hover {
  background-color: color-mix(in srgb, var(--color-primary) 90%, black);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}


/* 模态窗口 (弹窗) - 修复公告按钮和背景颜色 */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  padding: 12px;
  z-index: 100; 
}
.modal.show { display:flex; }

.modal-content {
  background-color: var(--color-card);
  padding: 20px;
  border-radius: 16px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
  white-space: pre-wrap;
}

/* 修复公告背景颜色 */
.modal-content pre { 
  background-color: var(--color-accent); 
  color: var(--color-text-inverse);
  padding: 12px;
  border-radius: 12px;
  line-height: 1.5;
  font-family: inherit;
  word-break: break-word;
  white-space: pre-wrap;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 修复公告按钮颜色 */
.modal-content button {
  padding: 10px;
  border-radius: 8px;
  border: none;
  background-color: var(--color-primary); 
  color: var(--color-text-inverse);
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}
.modal-content button:hover { 
  background-color: color-mix(in srgb, var(--color-primary) 90%, black);
}


/*
 * 电脑版布局优化 (屏幕宽度大于 900px 时) 
 * --------------------------------------------------
 */
@media (min-width: 900px) {
    .site-header-inner {
        max-width: 1200px; 
        padding-left: 0;
    }

    #site-header h1 {
        padding-left: 0;
    }

    #menuToggle {
        display: none;
    }
    
    .desktop-only {
        display: block;
    }

    #main-content-wrapper {
        max-width: 600px; 
        order: 2; 
        margin: 0; 
        padding: 20px 24px;
        flex-shrink: 0;
    }

    #sidebar-nav {
        position: sticky; 
        left: auto;
        top: 20px; 
        height: auto;
        width: 180px; 
        /* 🚨 關鍵修復 4：PC 端側邊欄 padding 必須為 0 水平邊距，防止外部佈局失效 */
        padding: 20px 0; 
        border-right: none;
        box-shadow: none;
        order: 1; 
        flex-shrink: 0;
    }

    .nav-title {
        display: block;
        /* 在 PC 端 #sidebar-nav 0 padding 的情況下，標題需要 12px 的左邊距 */
        padding-left: 12px; 
        border-bottom: 2px solid var(--color-border);
        padding-bottom: 5px;
    }

    #nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #nav-list li {
        margin-bottom: 4px;
    }

    /* 🚨 關鍵修改 5：PC 端按鈕 internal padding 需增加到 12px，以實現正確的視覺對齊 */
    #nav-list a {
        padding: 10px 12px;
        /* PC 端移除陰影 */
        box-shadow: none;
    }

    #nav-list a.active {
        box-shadow: none;
    }
}