/* Base */
:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #2b2f33;
  --muted: #6b7280;
  --primary: #4f46e5;
  --border: #e5e7eb;
}

html[data-theme="dark"] {
  --bg: #0f1115;
  --card: #171923;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --primary: #8b5cf6;
  --border: #272a37;
}

* { box-sizing: border-box; }
body.bg { 
  margin:0; 
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; 
  background: var(--bg); 
  color: var(--text); 
}

/* 預留空間避免內容被固定的 header 遮住 */
body {
  padding-top: 120px; /* 根據標題+選單高度調整 */
}

.container { width: min(1100px, 92%); margin: 20px auto; }
.container.narrow { width: min(800px, 92%); }

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  text-align:center;
  padding: 10px 0 0;
  background: var(--bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.menu { 
  display:flex; 
  gap:10px; 
  justify-content:center; 
  align-items:center; 
  flex-wrap:wrap; 
  padding:10px; 
  background: var(--bg);
}

.menu a, .menu button { 
  text-decoration:none; 
  color:var(--text); 
  padding:8px 12px; 
  border-radius:999px; 
  border:1px solid var(--border); 
  background:var(--card); 
}
.menu .admin-link { margin-left:6px; }
.menu button { cursor:pointer; }

.site-title { 
  font-size:2em; 
  margin: 10px 0 20px; 
}

/* Cards */
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius:16px; box-shadow: 0 6px 16px rgba(0,0,0,.04); padding:16px; }
.card .cover { width:100%; height:180px; object-fit:cover; border-radius:12px; border:1px solid var(--border); }

.post-card h2 { margin:8px 0; }
.post-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tag { background:#eef2ff; color:#3730a3; padding:2px 10px; border-radius:999px; font-size:.85em; border:1px solid var(--border); }
.pin { background:#fff7ed; color:#9a3412; }

/* Forms & table */
label { display:block; margin:10px 0; }
input[type="text"], input[type="password"], input[type="number"], select, textarea { width:100%; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); }
button, .button { padding:10px 14px; border-radius:10px; border:1px solid var(--primary); background:var(--primary); color:white; text-decoration:none; cursor:pointer; }
.button.secondary { background: transparent; color: var(--primary); }
.alert { background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca; padding:10px; border-radius:10px; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:8px; text-align:left; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.row { display:flex; gap:12px; }
.half { flex:1; }

/* Footer */
.site-footer { text-align:center; padding: 30px 12px; color: var(--muted); font-size:.95em; }
.muted { color: var(--muted); }

/* Back to top */
#backToTop { position: fixed; right: 16px; bottom: 16px; background: var(--primary); color: white; padding: 10px 12px; border-radius: 999px; text-decoration: none; display: inline-flex; align-items:center; justify-content:center; opacity: .9; }
#backToTop:hover { opacity: 1; }

/* Admin bar */
.adminbar { background: transparent; padding:10px; }
.adminbar nav { display:flex; gap:10px; justify-content:center; }
.adminbar a { text-decoration:none; color:var(--text); padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:var(--card); }

/* CKEditor content minimal reset */
.ckcontent img { max-width: 100%; height: auto; }
.ckcontent iframe { width:100%; min-height:360px; border:0; }

@media (max-width:600px){
  .cards { grid-template-columns: 1fr; }
}