/* =========================================
   1. 核心變數 (Dark Tech Theme)
========================================= */
:root {
  --primary: #00d4ff;        /* 科技藍 */
  --primary-hover: #33eaff;
  --accent: #ffd700;         /* 金黃 */
  --success: #00e676;        /* 亮綠 */
  --danger: #ff5252;         /* 紅色 */
  --warning: #ffc107;        /* 橘黃 */
  --text-main: #ffffff;
  --text-sec: rgba(255, 255, 255, 0.7);
  --bg-grad: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-grad);
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  color: var(--text-main);
  line-height: 1.6;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* =========================================
   2. 導覽列
========================================= */
nav {
  background: rgba(15, 32, 39, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.8rem 0;
}

.nav-c {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-btns { display: flex; gap: 8px; align-items: center; }

/* =========================================
   3. 按鈕樣式
========================================= */
.btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* 專案按鈕 */
.btn-project {
  background: rgba(0, 212, 255, 0.15);
  border: 1px solid var(--primary);
  color: var(--primary);
}
.btn-project:hover, .btn-project.active {
  background: var(--primary);
  color: #000;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
}

/* 升級按鈕 (金) */
.btn-g {
  background: linear-gradient(135deg, #ffd700, #ffab00);
  color: #000;
  font-weight: 700;
}
.btn-g:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3); }

/* 一般按鈕 (透底) */
.btn-o {
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-main);
}
.btn-o:hover { border-color: var(--primary); color: var(--primary); }

/* 實心按鈕 (藍) */
.btn-p {
  background: var(--primary);
  color: #000;
  font-weight: 600;
}
.btn-p:hover { background: #33eaff; }

/* 綠色成功按鈕 (新增：給下載測試檔用) */
.btn-success {
  background: var(--success);
  color: #000;
  font-weight: 600;
  border: none;
}
.btn-success:hover {
  background: #00c853;
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}

/* =========================================
   4. Hero 區塊
========================================= */
.hero { text-align: center; padding: 3rem 1rem; }

.hero h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #fff, var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.author-badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 3px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--text-sec);
  margin-bottom: 1rem;
  background: rgba(255,255,255,0.05);
}

.stats { display: flex; justify-content: center; gap: 2rem; margin-top: 1.5rem; }
.stat-num { font-size: 1.5rem; font-weight: 700; color: var(--primary); display: block; }
.stat-label { font-size: 0.75rem; color: var(--text-sec); }

/* 專案狀態列 */
.project-status {
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 12px 20px;
  margin-bottom: 20px;
  display: none;
  justify-content: space-between;
  align-items: center;
}
.project-status.show { display: flex; }
.ps-title { color: var(--primary); font-weight: 700; margin-right: 10px; }
.ps-meta { color: var(--text-sec); font-size: 0.85rem; }

/* =========================================
   5. 搜尋與 Tabs
========================================= */
.search { max-width: 500px; margin: 0 auto 1.5rem; }
.search input {
  width: 100%; padding: 12px 20px;
  border-radius: 25px;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,0.3);
  color: #fff; font-size: 1rem; outline: none;
}
.search input:focus { border-color: var(--primary); background: rgba(0,0,0,0.5); }

.tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 2rem; }
.tab {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-sec);
  cursor: pointer;
  transition: all 0.2s;
}
.tab:hover { border-color: var(--primary); color: var(--primary); }
.tab.active { background: var(--primary); color: #000; border-color: var(--primary); font-weight: 600; }

/* 書中指令 Tab */
.tab[onclick*="book_free"] { border-color: var(--accent); color: var(--accent); }
.tab[onclick*="book_free"].active { background: var(--accent); color: #000; }

/* =========================================
   6. 卡片網格
========================================= */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 15px;
}

.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.15);
  background: rgba(255,255,255,0.08);
}

/* 書中指令標籤 */
.card.book-free { border-color: rgba(255, 215, 0, 0.5); }
.card.book-free::before {
  content: '📖 書中指令';
  position: absolute; top: 0; right: 0;
  background: var(--accent); color: #000;
  font-size: 0.6rem; padding: 2px 6px;
  border-bottom-left-radius: 6px; font-weight: bold;
}

.card-t { font-size: 1rem; font-weight: 600; margin-bottom: 8px; color: #fff; }
.card-d { font-size: 0.8rem; color: var(--text-sec); margin-bottom: 12px; min-height: 2.4em; }
.tags .tag {
  display: inline-block; padding: 2px 8px;
  background: rgba(0,0,0,0.3); border-radius: 4px;
  font-size: 0.7rem; color: var(--primary);
}

.empty { text-align: center; color: var(--text-sec); margin-top: 30px; }

/* =========================================
   7. 彈出視窗 (Modal)
========================================= */
.modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
}
.modal.show { display: flex; }

.modal-c {
  background: #1a2634;
  width: 90%; max-width: 600px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  max-height: 90vh;
}

.modal-h {
  padding: 15px 25px;
  border-bottom: 1px solid var(--glass-border);
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(0,0,0,0.2);
}
.modal-h h3 { margin: 0; font-size: 1.1rem; color: #fff; }
.modal-x { font-size: 1.5rem; cursor: pointer; color: var(--text-sec); border:none; background:none; }
.modal-x:hover { color: #fff; }

.modal-b { padding: 25px; overflow-y: auto; color: var(--text-main); }

.modal-f {
  padding: 15px 25px;
  border-top: 1px solid var(--glass-border);
  background: rgba(0,0,0,0.2);
  text-align: right;
  display: flex; gap: 10px; justify-content: flex-end;
}

/* Modal 元件 */
.warning-box {
  background: rgba(255, 193, 7, 0.15);
  border: 1px solid var(--warning);
  color: var(--warning);
  padding: 12px; border-radius: 8px;
  font-size: 0.85rem; margin-bottom: 20px;
}
.data-input, .form-field input, .form-field select {
  width: 100%; padding: 10px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border);
  border-radius: 6px; color: #fff; box-sizing: border-box;
  font-size: 1rem;
}
.data-input:focus, .form-field input:focus, .form-field select:focus { 
  outline: none; border-color: var(--primary); 
}
.prompt-box {
  background: #000; border: 1px solid var(--glass-border);
  padding: 15px; border-radius: 8px; color: var(--success);
  font-family: monospace; font-size: 0.85rem; white-space: pre-wrap;
}

/* =========================================
   8. 使用手冊頁 (Manual) 專用
========================================= */
.manual-container {
  max-width: 800px; margin: 40px auto;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 50px;
  color: #fff; line-height: 1.8;
}
.manual-container h1 { color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 15px; }
.manual-container h2 { color: var(--accent); margin-top: 50px; margin-bottom: 20px; font-size: 1.4rem; }
.manual-container h3 { color: #fff; margin-top: 30px; font-weight: 600; }
.manual-container p, .manual-container li { color: rgba(255,255,255,0.9); margin-bottom: 10px; }
.highlight-box {
  background: rgba(0, 212, 255, 0.1);
  border-left: 4px solid var(--primary);
  padding: 15px; margin: 20px 0; border-radius: 4px;
}
.error-box {
  background: rgba(255, 82, 82, 0.1);
  border: 1px solid var(--danger);
  padding: 15px; margin: 20px 0; border-radius: 8px;
}
.step-num {
  display: inline-block; width: 24px; height: 24px; background: var(--primary); color: #000;
  border-radius: 50%; text-align: center; line-height: 24px; font-weight: bold; margin-right: 10px;
}
.back-link { display: inline-block; margin-bottom: 20px; color: var(--text-sec); text-decoration: none; }
.back-link:hover { color: var(--primary); }

/* =========================================
   9. 認證頁 (白底)
========================================= */
.auth-container, .payment-container {
  background: #fff; color: #333;
  border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.auth-container input, .payment-container input {
  background: #fff; border: 1px solid #ddd; color: #333;
}

/* =========================================
   10. RWD 響應式調整
========================================= */
@media (max-width: 768px) {
  .modal-c { width: 95%; max-height: 95vh; }
  .grid { grid-template-columns: 1fr; }
  .manual-container { padding: 20px; }
}