/* tbar — 主要樣式表 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --primary:       #2e7fcf;
  --primary-hover: #1d6bb5;
  --primary-light: rgba(46,127,207,0.09);
  --primary-glow:  rgba(46,127,207,0.18);
  --bg:    #f8fafc;
  --bg2:   #ffffff;
  --bg3:   #f1f5f9;
  --bg4:   #e8edf3;
  --border:  rgba(46,127,207,0.22);
  --border2: rgba(0,0,0,0.08);
  --text:  #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --accent:  #e07030;
  --accent2: #16a34a;
  --accent3: #7c3aed;
  --danger:  #dc2626;
  --warning: #d97706;
  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 2px 6px rgba(15,23,42,0.05);
  --shadow:    0 4px 14px rgba(15,23,42,0.07);
  --shadow-md: 0 6px 18px rgba(15,23,42,0.09);
  --shadow-lg: 0 14px 36px rgba(15,23,42,0.12);
  --shadow-xl: 0 24px 60px rgba(15,23,42,0.18);
  --ease:      cubic-bezier(.4,0,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; overflow-x:hidden; scroll-padding-top:76px; }

::selection { background:var(--primary-glow); color:var(--text); }
::-moz-selection { background:var(--primary-glow); color:var(--text); }

body {
  font-family:'Noto Sans TC', sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow-x:hidden;
  width:100%;
  padding-top:60px; /* 補償固定 topbar 高度 */
}

a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:none; }

img { max-width:100%; height:auto; display:block; }

/* ── 佈局（Reddit 風：全寬，sidebar 貼左、widget 貼右） ── */
.layout {
  display:grid;
  grid-template-columns:270px minmax(0,1fr) 316px;
  width:100%;
  min-height:calc(100vh - 60px);
  gap:0;
}
.layout main {
  /* padding-top:14px 對齊左 sidebar / 右 widget 的上緣，避免出現空隙 */
  padding:14px 20px 40px;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.layout main > * {
  width:100%;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
/* layout-wide：發文/申請開版/登入 等無 sidebar 頁面，內容置中 */
.layout-wide {
  max-width:1240px;
  margin:0 auto;
  padding:24px 20px;
}

/* ── 頂部導覽列（Reddit 風，固定不滾動） ── */
.topbar {
  position:fixed;
  top:0; left:0; right:0;
  width:100%;
  z-index:100;
  background:var(--bg2);
  border-bottom:1px solid var(--border2);
  height:60px;
  display:flex;
  align-items:center;
}
.topbar-inner {
  width:100%;
  padding:0 16px 0 20px;
  display:flex;
  align-items:center;
  gap:14px;
}
.topbar-logo {
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
  text-decoration:none;
  transition:transform 0.18s var(--ease);
}
.topbar-logo:hover { text-decoration:none; transform:translateY(-1px); }
.topbar-logo .logo-mark {
  width:34px; height:34px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--primary), #6ea8e0);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px;
  box-shadow:0 4px 12px rgba(46,127,207,0.32), inset 0 -2px 4px rgba(0,0,0,0.08);
  flex-shrink:0;
}
.topbar-logo .logo-text {
  display:flex; flex-direction:column;
  line-height:1.05;
}
.topbar-logo .logo-en {
  font-size:17px; font-weight:900;
  letter-spacing:-0.025em;
  background:linear-gradient(135deg, #0f172a 20%, var(--primary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.topbar-logo .logo-tw {
  font-size:10px; font-weight:600;
  color:var(--text3);
  letter-spacing:0.16em;
  margin-top:2px;
}
.topbar-search-wrap {
  flex:1;
  display:flex;
  justify-content:center;
}
.topbar-search {
  width:100%;
  max-width:640px;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg3);
  border:1px solid transparent;
  border-radius:99px;
  padding:10px 18px;
  font-size:14px;
  color:var(--text3);
  transition:background 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.topbar-search:hover { background:var(--bg4); }
.topbar-search:focus-within {
  background:var(--bg2);
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}
.topbar-search i { color:var(--text3); font-size:14px; }
.topbar-search input {
  border:none;
  background:transparent;
  outline:none;
  font-size:14px;
  color:var(--text);
  width:100%;
  font-family:inherit;
}
.topbar-actions {
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}

/* topbar 圓形圖示按鈕（通知 / 訊息 等） */
.topbar-icon-btn {
  width:40px; height:40px;
  border-radius:50%;
  background:transparent;
  border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  color:var(--text2);
  cursor:pointer;
  text-decoration:none;
  position:relative;
  transition:background 0.15s var(--ease), color 0.15s var(--ease);
}
.topbar-icon-btn:hover { background:rgba(15,23,42,0.06); color:var(--text); text-decoration:none; }
.topbar-icon-btn:active { transform:scale(0.94); }
.topbar-icon-btn .topbar-badge {
  position:absolute;
  top:6px; right:6px;
  min-width:16px; height:16px;
  border-radius:99px;
  background:var(--danger);
  color:#fff;
  font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px;
  border:2px solid var(--bg2);
  font-family:'JetBrains Mono', monospace;
}

/* topbar 建立貼文 pill */
.topbar-create-btn {
  display:inline-flex; align-items:center; gap:6px;
  height:36px;
  padding:0 14px 0 12px;
  border-radius:99px;
  background:transparent;
  color:var(--text);
  font-size:14px; font-weight:600;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:background 0.15s var(--ease);
}
.topbar-create-btn:hover { background:rgba(15,23,42,0.06); color:var(--text); text-decoration:none; }
.topbar-create-btn i { font-size:16px; }

/* topbar 建立按鈕的小 dropdown（手機板使用） */
.topbar-create-wrap { position:relative; }
.topbar-create-menu {
  position:absolute;
  top:calc(100% + 8px); right:0;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:14px;
  box-shadow:var(--shadow-lg);
  padding:6px;
  min-width:200px;
  z-index:120;
  display:none;
  animation:scaleIn 0.18s var(--ease-out);
}
.topbar-create-menu.show { display:block; }

/* 頭像 dropdown */
.topbar-user {
  position:relative;
  margin-left:4px;
}
.topbar-user-btn {
  width:40px; height:40px;
  border-radius:50%;
  border:none;
  padding:0;
  background:transparent;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition:transform 0.15s var(--ease);
}
.topbar-user-btn:hover { transform:scale(1.04); }
.topbar-user-btn img,
.topbar-user-btn .topbar-user-avatar {
  width:32px; height:32px;
  border-radius:50%;
  object-fit:cover;
  background:var(--primary-light);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary);
  font-size:13px; font-weight:700;
  border:1px solid var(--border2);
}
.topbar-user-btn::after {
  /* 在線小圓點 */
  content:'';
  position:absolute;
  bottom:4px; right:4px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--accent2);
  border:2px solid var(--bg2);
}
.topbar-menu {
  position:absolute;
  top:calc(100% + 8px); right:0;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:14px;
  box-shadow:var(--shadow-lg);
  padding:6px;
  min-width:240px;
  z-index:120;
  display:none;
  animation:scaleIn 0.18s var(--ease-out);
}
.topbar-menu.show { display:block; }
.topbar-menu-header {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px 12px;
  border-bottom:1px solid var(--border2);
  margin-bottom:6px;
}
.topbar-menu-header img,
.topbar-menu-header .post-avatar-placeholder {
  width:40px; height:40px;
  border-radius:50%;
  flex-shrink:0;
}
.topbar-menu-name { font-size:14px; font-weight:700; color:var(--text); line-height:1.2; }
.topbar-menu-role { font-size:12px; color:var(--text3); margin-top:2px; }
.topbar-menu-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  background:transparent;
  border:none;
  width:100%;
  font-family:inherit;
  transition:background 0.15s var(--ease);
}
.topbar-menu-item:hover { background:rgba(15,23,42,0.05); color:var(--text); text-decoration:none; }
.topbar-menu-item i {
  width:18px; text-align:center;
  font-size:15px; color:var(--text3);
}
.topbar-menu-item.danger { color:var(--danger); }
.topbar-menu-item.danger i { color:var(--danger); }
.topbar-menu-divider { height:1px; background:var(--border2); margin:4px 6px; }

/* ── 左側邊欄（貼左邊全高） ── */
.sidebar {
  position:sticky;
  top:60px;
  height:calc(100vh - 60px);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--bg2);
  border-right:1px solid var(--border2);
  /* padding-top:8px 讓第一項「首頁」緊貼 header；左右 12px 維持原樣 */
  padding:8px 12px 14px;
  scrollbar-width:thin;
}
.sidebar > nav { display:block; }
.sidebar > nav > .sidebar-nav-item:first-child { margin-top:0; }
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background:rgba(15,23,42,0.2); }
.sidebar-nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 12px;
  border-radius:10px;
  font-size:14px;
  color:var(--text);
  text-decoration:none;
  margin-bottom:1px;
  transition:background 0.18s, color 0.18s;
  font-weight:500;
  line-height:1.2;
}
.sidebar-nav-item:hover {
  background:rgba(15,23,42,0.04);
  color:var(--text);
  text-decoration:none;
}
.sidebar-nav-item:active { transform:scale(0.98); }
.sidebar-nav-item.active {
  background:rgba(15,23,42,0.07);
  color:var(--text);
  font-weight:700;
}
.sidebar-nav-item.active .sidebar-icon { color:var(--text); }
.sidebar-nav-item:focus-visible { outline:none; box-shadow:0 0 0 2px var(--primary-glow); }
.sidebar-icon { font-size:17px; width:22px; text-align:center; flex-shrink:0; color:var(--text2); }
.sidebar-board-icon {
  width:22px; height:22px; border-radius:50%;
  background:var(--primary-light);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size:10px; color:var(--primary);
  object-fit:cover;
}
.sidebar-board-icon img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.sidebar-divider { height:1px; background:var(--border2); margin:12px 6px; }
.sidebar-section-title {
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--text3);
  font-weight:600;
  padding:4px 12px 6px;
  text-transform:uppercase;
}

/* Reddit 風可摺疊分組 */
.sidebar-group {
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border2);
}
.sidebar-group:first-of-type { border-top:none; padding-top:0; margin-top:8px; }
.sidebar-group-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px;
  font-size:12px;
  letter-spacing:0;
  color:var(--text3);
  font-weight:500;
  text-transform:none;
  cursor:pointer;
  border-radius:8px;
  user-select:none;
  transition:background 0.15s var(--ease), color 0.15s var(--ease);
}
.sidebar-group-header:hover { background:rgba(15,23,42,0.04); color:var(--text2); }
.sidebar-group-header > span { line-height:1.2; }
.sidebar-group-header i.fa-chevron-down {
  font-size:11px;
  color:var(--text3);
  transition:transform 0.22s var(--ease);
}
.sidebar-group.collapsed .sidebar-group-header i.fa-chevron-down { transform:rotate(-90deg); }
.sidebar-group-items {
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:max-height 0.28s var(--ease), opacity 0.18s var(--ease);
  max-height:600px;
  padding-top:2px;
}
.sidebar-group.collapsed .sidebar-group-items {
  max-height:0;
  opacity:0;
  pointer-events:none;
  padding-top:0;
}

/* ── 右側 Widget（貼右邊，黏在頂部，內容長才捲動） ── */
.widget {
  position:sticky;
  top:60px;
  align-self:start;
  max-height:calc(100vh - 60px);
  overflow-y:auto;
  overscroll-behavior:contain;
  /* padding-top:12px 與左 sidebar、中 main 大致對齊在 header 下緣 */
  padding:12px 16px 24px;
  scrollbar-width:thin;
}
.widget::-webkit-scrollbar { width:6px; }
.widget::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
.widget::-webkit-scrollbar-thumb:hover { background:rgba(15,23,42,0.2); }
.widget-card {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:10px;
  box-shadow:var(--shadow-xs);
}
.widget-title {
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
  color:var(--text);
  margin-bottom:10px;
  text-transform:none;
  padding:0;
}
.widget-title i { font-size:12px; }
.widget-title-left { display:flex; align-items:center; gap:6px; }
.widget-title-action {
  font-size:11px;
  color:var(--text3);
  text-decoration:none;
  cursor:pointer;
  font-weight:500;
}
.widget-title-action:hover { color:var(--primary); text-decoration:none; }

/* widget 內的「文章型」清單項 */
.widget-post-item {
  display:block;
  padding:9px 10px;
  margin:0 -10px;
  border-radius:10px;
  text-decoration:none;
  transition:background 0.15s var(--ease);
}
.widget-post-item:hover { background:rgba(15,23,42,0.04); text-decoration:none; }
.widget-post-meta {
  display:flex; align-items:center; gap:5px;
  font-size:11px; color:var(--text3);
  margin-bottom:4px;
}
.widget-post-meta .dot { color:var(--border); font-size:8px; }
.widget-post-board-icon {
  width:16px; height:16px; border-radius:50%;
  background:var(--primary-light);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; color:var(--primary);
  flex-shrink:0;
}
.widget-post-board-icon img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.widget-post-board-name { color:var(--text2); font-weight:600; }
.widget-post-title {
  font-size:13px; color:var(--text); font-weight:500;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:4px;
}
.widget-post-stats { font-size:11px; color:var(--text3); display:flex; gap:10px; }

/* ── 卡片 ── */
.card {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow-xs);
  transition:border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.card:hover {
  border-color:var(--border);
  box-shadow:var(--shadow-sm);
}
.card.card-interactive:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

/* ── 文章列表卡片 ── */
.post-card {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:18px;
  padding:18px 20px;
  margin-bottom:12px;
  box-shadow:var(--shadow-xs);
  transition:background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
  animation:fadeInUp 0.3s var(--ease-out) both;
}
.post-card:hover {
  border-color:var(--border);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}

/* Reddit 風內聯卡頭：板塊小圖 · 板塊名 · 時間 · @作者 */
.post-card-top {
  display:flex; align-items:center;
  gap:8px;
  margin-bottom:10px;
  font-size:12px;
  color:var(--text3);
  flex-wrap:wrap;
}
.post-board-link {
  display:inline-flex; align-items:center;
  gap:6px;
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  border-radius:99px;
  padding:2px 4px 2px 2px;
  margin:-2px 0 -2px -4px;
  transition:background 0.15s var(--ease);
}
.post-board-link:hover { background:rgba(15,23,42,0.06); text-decoration:none; color:var(--text); }
.post-board-avatar {
  width:24px; height:24px;
  border-radius:50%;
  object-fit:cover;
  background:var(--primary-light);
  border:1px solid var(--border2);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--primary);
}
.post-meta-sep {
  color:var(--text3);
  font-size:9px;
  user-select:none;
}
.post-time, .post-author {
  font-size:12px;
  color:var(--text3);
  text-decoration:none;
  line-height:1.4;
}
.post-author { color:var(--text2); font-weight:500; }
.post-author:hover { color:var(--primary); text-decoration:none; }
.post-card-head-actions {
  margin-left:auto;
  display:inline-flex; align-items:center;
  gap:4px;
  flex-shrink:0;
}
.post-join-btn {
  display:inline-flex; align-items:center;
  gap:4px;
  height:28px;
  padding:0 14px;
  border-radius:99px;
  font-size:12px; font-weight:700;
  background:var(--primary);
  color:#fff;
  border:none;
  cursor:pointer;
  font-family:inherit;
  transition:background 0.15s var(--ease), transform 0.12s var(--ease);
}
.post-join-btn:hover { background:var(--primary-hover); }
.post-join-btn:active { transform:translateY(1px); }
.post-join-btn.joined {
  background:transparent;
  color:var(--text);
  border:1px solid var(--border2);
}
.post-join-btn.joined:hover { background:rgba(15,23,42,0.06); }
.post-more-wrap { position:relative; }
.post-more-btn {
  width:28px; height:28px;
  border-radius:50%;
  background:transparent;
  border:none;
  color:var(--text2);
  font-size:14px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background 0.15s var(--ease);
}
.post-more-btn:hover { background:rgba(15,23,42,0.06); color:var(--text); }

/* ⋯ 選單浮層 */
.post-menu {
  position:absolute;
  top:calc(100% + 6px); right:0;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:14px;
  box-shadow:var(--shadow-lg);
  padding:6px;
  min-width:200px;
  z-index:50;
  display:none;
}
.post-menu.show { display:block; animation:scaleIn 0.18s var(--ease-out); }
.post-menu-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px;
  border-radius:8px;
  font-size:13.5px;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  background:transparent;
  border:none;
  width:100%;
  font-family:inherit;
  text-align:left;
  transition:background 0.15s var(--ease);
}
.post-menu-item:hover { background:rgba(15,23,42,0.05); color:var(--text); text-decoration:none; }
.post-menu-item i { width:16px; text-align:center; color:var(--text3); font-size:14px; }
.post-menu-item.danger { color:var(--danger); }
.post-menu-item.danger i { color:var(--danger); }
.post-menu-divider { height:1px; background:var(--border2); margin:4px 6px; }

/* 舊用法保留（profile 等可能還在用 avatar 寫入頭部） */
.post-avatar {
  width:24px; height:24px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  background:var(--primary-light);
  border:1px solid var(--border2);
}
.post-avatar-placeholder {
  width:24px; height:24px;
  border-radius:50%;
  background:var(--primary-light);
  border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--primary); font-weight:700;
  flex-shrink:0;
}

.post-title {
  font-size:15px;
  font-weight:600;
  color:var(--text);
  margin-bottom:6px;
  line-height:1.45;
  text-decoration:none;
  display:block;
  letter-spacing:-0.005em;
}
.post-title:hover { color:var(--text); text-decoration:none; }
/* 取消標題後，整段內文變成可點擊連結 */
.post-body-link { display:block; text-decoration:none; color:inherit; }
.post-body-link:hover { text-decoration:none; color:inherit; }
.post-body-link:hover .post-body { color:var(--text); }
.post-body {
  font-size:14px;
  color:var(--text2);
  line-height:1.6;
  margin-bottom:10px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-imgs {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:6px;
  margin-bottom:10px;
}
.post-img {
  width:100%; height:240px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid var(--border2);
  background:var(--bg3);
}

.post-actions {
  display:flex;
  align-items:center;
  gap:4px;
  padding-top:6px;
  border-top:none;
  margin-left:-8px;
}
.post-action-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--text2);
  background:none; border:none;
  cursor:pointer;
  padding:8px 12px;
  border-radius:99px;
  transition:background 0.15s, color 0.15s;
  min-height:36px;
  font-family:inherit;
  text-decoration:none;
}
.post-action-btn i { font-size:16px; }
.post-action-btn:hover { background:var(--primary-light); color:var(--primary); text-decoration:none; }
.post-action-btn:active { transform:scale(0.94); }
.post-action-btn.like-btn:hover { background:var(--primary-light); color:var(--primary); }
.post-action-btn.bookmark-btn:hover { background:var(--primary-light); color:var(--primary); }
.post-action-btn:focus-visible { outline:none; box-shadow:0 0 0 2px var(--primary-glow); }
.post-action-btn.liked { color:var(--primary); }
.post-action-btn.liked i { font-weight:900; }
.post-action-btn.bookmarked { color:var(--primary); }
.post-action-btn.bookmarked i { font-weight:900; }

/* ── 焚燒模式 badge ── */
.burn-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(220,38,38,0.1);
  border:1px solid rgba(220,38,38,0.25);
  border-radius:99px; padding:2px 8px;
  font-size:11px; color:var(--danger); font-weight:600;
}

/* ── 置頂 badge ── */
.pinned-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(46,127,207,0.1);
  border:1px solid var(--border);
  border-radius:99px; padding:2px 8px;
  font-size:11px; color:var(--primary); font-weight:600;
}

/* 置頂的 post-card 整張視覺上強調 */
.post-card.pinned-post {
  border-color:rgba(46,127,207,0.35);
  background:linear-gradient(180deg, rgba(46,127,207,0.04), transparent 40%);
}
.feed-shell .post-card.pinned-post {
  background:linear-gradient(180deg, rgba(46,127,207,0.04), transparent 40%);
}

/* 版規卡 */
.board-rules-card {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:18px;
  padding:16px 20px;
  margin-bottom:14px;
  box-shadow:var(--shadow-xs);
}
.board-rules-title {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:var(--text);
  margin-bottom:10px;
}
.board-rules-title i { color:var(--primary); }
.board-rules-body {
  font-size:13.5px; color:var(--text2);
  line-height:1.65;
  white-space:pre-line;
}

/* ── 按鈕 ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:0 18px;
  height:40px;
  border-radius:10px;
  font-size:14px; font-weight:600;
  font-family:inherit;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.12s var(--ease);
  text-decoration:none;
  box-sizing:border-box;
  white-space:nowrap;
  line-height:1;
  position:relative;
}
.btn:active { transform:translateY(1px); }
.btn:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px var(--primary-glow);
}
.btn:disabled, .btn[disabled] {
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}
.btn-primary {
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 1px 2px rgba(46,127,207,0.18);
}
.btn-primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); text-decoration:none; color:#fff; box-shadow:0 4px 12px rgba(46,127,207,0.28); }
.btn-outline {
  background:var(--bg2);
  border-color:rgba(15,23,42,0.16);
  color:var(--text);
}
.btn-outline:hover { background:var(--text); border-color:var(--text); text-decoration:none; color:#fff; }
.btn-danger {
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}
.btn-danger:hover { background:#b91c1c; border-color:#b91c1c; text-decoration:none; color:#fff; }
.btn-sm { padding:0 14px; height:34px; font-size:13px; border-radius:8px; }
.btn-xs { padding:0 10px; height:28px; font-size:12px; border-radius:6px; }

/* ── 表單 ── */
.form-group { margin-bottom:18px; }
.form-label {
  display:block;
  font-size:13px; font-weight:600;
  color:var(--text);
  margin-bottom:6px;
}
.form-hint { font-size:12px; color:var(--text3); margin-top:4px; }
.form-control {
  width:100%;
  padding:10px 14px;
  border:1.5px solid var(--border2);
  border-radius:var(--radius-sm);
  font-size:14px;
  font-family:inherit;
  color:var(--text);
  background:var(--bg2);
  outline:none;
  transition:border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.form-control:hover { border-color:rgba(15,23,42,0.18); }
.form-control:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}
.form-control::placeholder { color:var(--text3); }
.form-control:disabled { background:var(--bg3); color:var(--text3); cursor:not-allowed; }
textarea.form-control { resize:vertical; min-height:100px; }
select.form-control { cursor:pointer; }

.form-toggle {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--border2);
}
.form-toggle:last-child { border-bottom:none; }
.toggle-label { font-size:14px; color:var(--text2); }
.toggle-desc  { font-size:12px; color:var(--text3); margin-top:2px; }
.toggle-switch {
  width:44px; height:26px;
  border-radius:99px;
  background:var(--bg4);
  border:none; cursor:pointer;
  position:relative;
  transition:background 0.2s var(--ease);
  flex-shrink:0;
}
.toggle-switch:hover { background:#dde3eb; }
.toggle-switch.on { background:var(--primary); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.04); }
.toggle-switch.on:hover { background:var(--primary-hover); }
.toggle-switch::after {
  content:'';
  position:absolute;
  width:20px; height:20px;
  border-radius:50%;
  background:#fff;
  top:3px; left:3px;
  transition:left 0.22s var(--ease-out), width 0.18s var(--ease), transform 0.18s var(--ease);
  box-shadow:0 2px 4px rgba(0,0,0,0.18), 0 1px 1px rgba(0,0,0,0.08);
}
.toggle-switch.on::after { left:21px; }
.toggle-switch:active::after { width:24px; }
.toggle-switch.on:active::after { left:17px; }
.toggle-switch:focus-visible { outline:none; box-shadow:0 0 0 3px var(--primary-glow); }

/* ── board_settings：封面圖 / icon 上傳器 ── */
.board-img-uploader { display:flex; flex-direction:column; gap:8px; }
.board-img-preview {
  width:100%;
  background:var(--bg3);
  border:1px dashed var(--border2);
  border-radius:12px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.board-img-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.board-img-preview-cover { aspect-ratio:4 / 1; min-height:120px; }
.board-img-preview-icon  { width:120px; height:120px; border-radius:50%; align-self:flex-start; }
.board-img-preview-icon img { border-radius:50%; }
.board-img-placeholder {
  color:var(--text3); font-size:13px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:18px;
}
.board-img-placeholder i { font-size:24px; }
.board-img-actions { display:flex; gap:8px; flex-wrap:wrap; }
.board-img-actions .btn { cursor:pointer; }
.board-img-actions label.btn { display:inline-flex; align-items:center; gap:6px; }

/* ── 標籤/徽章 ── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:99px;
  font-size:11px; font-weight:600;
}
.badge-blue   { background:var(--primary-light); color:var(--primary); border:1px solid var(--border); }
.badge-green  { background:rgba(22,163,74,0.12); color:var(--accent2); border:1px solid rgba(22,163,74,0.2); }
.badge-orange { background:rgba(224,112,48,0.12); color:var(--accent); border:1px solid rgba(224,112,48,0.2); }
.badge-red    { background:rgba(220,38,38,0.12); color:var(--danger); border:1px solid rgba(220,38,38,0.2); }
.badge-purple { background:rgba(124,58,237,0.12); color:var(--accent3); border:1px solid rgba(124,58,237,0.2); }
.badge-gray   { background:var(--bg4); color:var(--text3); border:1px solid var(--border2); }

/* ── 分頁 ── */
.pagination {
  display:flex; align-items:center; justify-content:center;
  gap:6px; padding:24px 0;
}
.page-btn {
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  font-size:13px; font-weight:500;
  color:var(--text2);
  border:1px solid var(--border2);
  background:var(--bg2);
  text-decoration:none;
  transition:all 0.15s;
}
.page-btn:hover  { background:var(--bg3); text-decoration:none; color:var(--text); }
.page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.page-btn.disabled { opacity:0.4; pointer-events:none; }

/* ── Toast 通知 ── */
#toast-container {
  position:fixed;
  bottom:24px; right:24px;
  z-index:9999;
  display:flex; flex-direction:column; gap:8px;
}
.toast {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:12px;
  padding:13px 16px 13px 14px;
  font-size:13px;
  color:var(--text);
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:10px;
  animation:slideInRight 0.32s var(--ease-out);
  min-width:240px; max-width:380px;
  font-weight:500;
  backdrop-filter:saturate(180%);
}
.toast::before {
  content:'';
  flex-shrink:0;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--text3);
}
.toast.success { border-left:0; }
.toast.success::before { background:var(--accent2); box-shadow:0 0 0 4px rgba(22,163,74,0.18); }
.toast.error   { border-left:0; }
.toast.error::before { background:var(--danger); box-shadow:0 0 0 4px rgba(220,38,38,0.18); }
.toast.info    { border-left:0; }
.toast.info::before { background:var(--primary); box-shadow:0 0 0 4px rgba(46,127,207,0.18); }

/* ── Modal ── */
.modal-backdrop {
  position:fixed; inset:0;
  background:rgba(15,23,42,0.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  animation:fadeIn 0.2s var(--ease) both;
}
.modal {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:var(--radius-lg);
  padding:28px;
  width:100%; max-width:480px;
  box-shadow:var(--shadow-xl);
  animation:scaleIn 0.26s var(--ease-out);
}
.modal-title { font-size:18px; font-weight:700; margin-bottom:16px; letter-spacing:-0.01em; }
.modal-actions { display:flex; gap:10px; margin-top:20px; justify-content:flex-end; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ── Report Modal — 回報內容選項 ── */
.report-reasons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.report-reason {
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border:1.5px solid var(--border2);
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  color:var(--text2);
  background:var(--bg);
  transition:all 0.15s ease;
  user-select:none;
}
.report-reason:hover {
  border-color:var(--primary);
  background:var(--primary-light);
  color:var(--primary);
}
.report-reason input[type="radio"] {
  accent-color:var(--danger);
  flex-shrink:0;
}
.report-reason input[type="radio"]:checked + span {
  color:var(--danger);
  font-weight:600;
}
.report-reason:has(input[type="radio"]:checked) {
  border-color:var(--danger);
  background:rgba(220, 38, 38, 0.06);
}
.report-reason span { display:flex; align-items:center; gap:6px; }
.report-reason i { color:var(--text3); font-size:13px; }
.report-reason:has(input[type="radio"]:checked) i { color:var(--danger); }

@media (max-width: 480px) {
  .report-reasons { grid-template-columns:1fr; }
}

/* ── Skeleton Loading ── */
.skeleton {
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);
  background-size:200% 100%;
  animation:skeleton-shine 1.4s linear infinite;
  border-radius:8px;
}
.skeleton-card {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:10px;
  box-shadow:var(--shadow-xs);
}
.skeleton-line { height:12px; margin-bottom:8px; }
.skeleton-line.short { width:40%; }
.skeleton-line.medium { width:65%; }
.skeleton-line.long { width:90%; }
.skeleton-avatar { width:38px; height:38px; border-radius:50%; }

/* ── Feed Stream（Reddit 風：拆白卡、posts 各自獨立） ── */
.feed-shell {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}
/* feed-shell-head 改為 sort-bar 風格（保留舊 class 相容性） */
.feed-shell-head,
.sort-bar {
  position:sticky;
  top:60px;
  z-index:20;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(248,250,252,0.88);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  padding:8px 4px;
  margin-bottom:4px;
  border-bottom:1px solid var(--border2);
}
.sort-bar-spacer { flex:1; }
.sort-dropdown {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent;
  border:1px solid transparent;
  color:var(--text);
  font-size:14px; font-weight:600;
  font-family:inherit;
  padding:6px 12px;
  border-radius:99px;
  cursor:pointer;
  transition:background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.sort-dropdown:hover { background:rgba(15,23,42,0.06); }
.sort-dropdown.open { background:rgba(15,23,42,0.06); border-color:var(--border2); }
.sort-dropdown i.fa-chevron-down { font-size:10px; color:var(--text3); }
.sort-dropdown-menu {
  position:absolute;
  top:calc(100% + 4px); left:0;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:14px;
  box-shadow:var(--shadow-lg);
  padding:6px;
  min-width:180px;
  z-index:50;
  display:none;
  animation:scaleIn 0.18s var(--ease-out);
}
.sort-dropdown-menu.show { display:block; }
.sort-dropdown-wrap { position:relative; }
.sort-dropdown-item {
  display:flex; align-items:center; gap:8px;
  padding:9px 12px;
  border-radius:10px;
  font-size:14px; color:var(--text);
  cursor:pointer;
  text-decoration:none;
  transition:background 0.15s var(--ease);
}
.sort-dropdown-item:hover { background:rgba(15,23,42,0.05); text-decoration:none; color:var(--text); }
.sort-dropdown-item.active { background:var(--primary-light); color:var(--primary); font-weight:600; }
.sort-dropdown-item i { width:16px; text-align:center; color:var(--text3); }
.sort-dropdown-item.active i { color:var(--primary); }
.sort-dropdown-divider { height:1px; background:var(--border2); margin:4px 6px; }

/* tabs 還是會被當作 sort 控制元件出現在 sort-bar 內，但不再需要置中 */
.feed-shell-head .tabs,
.sort-bar .tabs {
  border:none;
  margin:0;
  gap:0;
}
.feed-shell-head .tab-btn,
.sort-bar .tab-btn {
  padding:7px 14px;
  font-size:14px;
  border:none;
  border-radius:99px;
  margin:0;
  color:var(--text2);
}
.feed-shell-head .tab-btn:hover,
.sort-bar .tab-btn:hover { background:rgba(15,23,42,0.06); color:var(--text); }
.feed-shell-head .tab-btn.active,
.sort-bar .tab-btn.active {
  background:var(--primary);
  color:#fff;
  font-weight:600;
}

/* feed-shell 內 post-card 還原為獨立卡，與站外用法一致 */
.feed-shell .post-card {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:18px;
  padding:18px 20px;
  margin:0;
  box-shadow:var(--shadow-xs);
  transition:background 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.feed-shell .post-card:hover {
  background:var(--bg2);
  border-color:var(--border);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}
.feed-shell .pagination { padding:18px 0 0; margin:0; border:none; background:transparent; }
.feed-shell .ad-wrap { margin:0; padding:0; border:none; }
.feed-shell .callout { margin:0; }

/* ── Threads 風回覆 Modal ── */
.threads-modal-backdrop {
  position:fixed; inset:0;
  background:rgba(15,23,42,0.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:1100;
  display:none;
  align-items:flex-start; justify-content:center;
  padding:80px 16px 24px;
  overflow-y:auto;
  animation:fadeIn 0.18s var(--ease) both;
}
.threads-modal-backdrop.show { display:flex; }
.threads-modal {
  background:var(--bg2);
  border-radius:24px;
  width:100%; max-width:620px;
  box-shadow:var(--shadow-xl);
  overflow:hidden;
  animation:scaleIn 0.26s var(--ease-out);
  display:flex; flex-direction:column;
  max-height:calc(100vh - 120px);
}
.threads-modal-header {
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--border2);
  flex-shrink:0;
}
.threads-modal-cancel {
  justify-self:start;
  background:none; border:none;
  font-family:inherit;
  font-size:15px; font-weight:500;
  color:var(--text);
  cursor:pointer;
  padding:4px 0;
  border-radius:6px;
  transition:opacity 0.15s var(--ease);
}
.threads-modal-cancel:hover { opacity:0.6; }
.threads-modal-title {
  justify-self:center;
  font-size:15px; font-weight:700;
  color:var(--text);
  letter-spacing:-0.005em;
}
.threads-modal-more {
  justify-self:end;
  background:none; border:none;
  width:32px; height:32px;
  border-radius:50%;
  font-size:18px; color:var(--text2);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.15s var(--ease);
}
.threads-modal-more:hover { background:rgba(15,23,42,0.06); }

.threads-modal-body {
  padding:18px 20px 8px;
  overflow-y:auto;
  flex:1;
  position:relative;
}

/* 來源留言 + 連線視覺 */
.threads-reply-source {
  display:flex; gap:12px;
  padding-bottom:8px;
  position:relative;
}
.threads-reply-avatar-col {
  display:flex; flex-direction:column; align-items:center;
  flex-shrink:0;
  width:38px;
}
.threads-reply-avatar-col img,
.threads-reply-avatar-col .placeholder {
  width:38px; height:38px;
  border-radius:50%;
  object-fit:cover;
  background:var(--primary-light);
  border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--primary); font-weight:700;
  flex-shrink:0;
}
.threads-reply-avatar-col .thread-line {
  flex:1;
  width:2px;
  background:var(--border2);
  margin-top:6px;
  min-height:24px;
}
.threads-reply-body {
  flex:1; min-width:0;
  padding-bottom:14px;
}
.threads-reply-head {
  display:flex; align-items:baseline; gap:8px;
  margin-bottom:4px;
}
.threads-reply-name { font-size:14px; font-weight:600; color:var(--text); }
.threads-reply-time { font-size:13px; color:var(--text3); }
.threads-reply-target {
  font-size:13px; color:var(--text3);
  margin-bottom:6px;
}
.threads-reply-target strong { color:var(--text2); font-weight:600; }
.threads-reply-text {
  font-size:14px; color:var(--text);
  line-height:1.55;
  word-wrap:break-word;
  white-space:pre-wrap;
}

/* 我的 composer 區 */
.threads-reply-composer {
  display:flex; gap:12px;
  padding-top:4px;
  padding-bottom:18px;
}
.threads-reply-composer-body { flex:1; min-width:0; }
.threads-reply-composer-name {
  font-size:14px; font-weight:600; color:var(--text);
  margin-bottom:2px;
}
.threads-reply-textarea {
  width:100%;
  border:none; outline:none; background:transparent;
  font-family:inherit;
  font-size:15px; color:var(--text);
  resize:none;
  min-height:60px;
  line-height:1.6;
  padding:4px 0;
  display:block;
}
.threads-reply-textarea::placeholder { color:var(--text3); }

.threads-modal-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px 14px;
  border-top:1px solid var(--border2);
  flex-shrink:0;
  background:var(--bg2);
}
.threads-modal-options {
  font-size:13px; color:var(--text3);
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  border-radius:99px;
  background:transparent;
  border:none;
  font-family:inherit;
  cursor:pointer;
  transition:background 0.15s var(--ease), color 0.15s var(--ease);
}
.threads-modal-options:hover { background:var(--bg3); color:var(--text); }
.threads-modal-options i { font-size:11px; }
.threads-modal-publish {
  background:var(--primary);
  color:#fff;
  border:1.5px solid var(--primary);
  padding:0 22px;
  height:38px;
  border-radius:99px;
  font-size:14px; font-weight:700;
  font-family:inherit;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 1px 2px rgba(46,127,207,0.18);
  transition:background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.12s var(--ease);
}
.threads-modal-publish:hover:not(:disabled) {
  background:var(--primary-hover);
  border-color:var(--primary-hover);
  box-shadow:0 4px 12px rgba(46,127,207,0.28);
}
.threads-modal-publish:active:not(:disabled) { transform:translateY(1px); }
.threads-modal-publish:disabled {
  background:var(--bg3);
  border-color:var(--border2);
  color:var(--text3);
  cursor:not-allowed;
  box-shadow:none;
}

@media (max-width:600px) {
  .threads-modal-backdrop { padding:0; align-items:flex-end; }
  .threads-modal {
    border-radius:20px 20px 0 0;
    max-height:92vh;
    animation:slideUp 0.28s var(--ease-out);
  }
  .threads-modal-body { padding:16px 16px 4px; }
}

/* ── 建立貼文 modal 專屬元件 ── */
.create-board-row {
  display:flex; align-items:center; gap:6px;
  font-size:14px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.create-author-name { font-weight:600; color:var(--text); }
.create-board-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 14px 4px 12px;
  background:var(--bg2);
  border:1.5px solid var(--border2);
  border-radius:99px;
  font-size:13px;
  color:var(--text2);
  font-weight:600;
  cursor:pointer;
  position:relative;
  transition:border-color 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.create-board-pill:hover {
  border-color:var(--primary);
  background:var(--primary-light);
  color:var(--primary);
}
.create-board-pill.selected {
  background:var(--primary-light);
  border-color:var(--primary);
  color:var(--primary);
}
.create-board-pill i.fa-chevron-down { font-size:9px; color:inherit; opacity:0.7; }
.create-board-pill select {
  position:absolute; inset:0;
  opacity:0;
  cursor:pointer;
  width:100%; height:100%;
  font-size:16px;
}
.create-title-input {
  width:100%;
  border:none; outline:none; background:transparent;
  font-family:inherit;
  font-size:17px; font-weight:600;
  color:var(--text);
  padding:6px 0 4px;
  line-height:1.3;
  letter-spacing:-0.005em;
}
.create-title-input::placeholder { color:var(--text3); font-weight:500; }
.create-body-input {
  width:100%;
  border:none; outline:none; background:transparent;
  font-family:inherit;
  font-size:15px;
  color:var(--text);
  resize:none;
  min-height:80px;
  line-height:1.6;
  padding:4px 0;
  display:block;
}
.create-body-input::placeholder { color:var(--text3); }
.create-body-input { min-height:120px; }

/* 建立貼文 modal：未加入任何版塊的空態 */
.create-empty-state {
  text-align:center;
  padding:32px 18px 12px;
}
.create-empty-icon {
  width:56px; height:56px;
  border-radius:50%;
  background:var(--primary-light);
  color:var(--primary);
  font-size:24px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.create-empty-title {
  font-size:16px; font-weight:700; color:var(--text);
  margin-bottom:6px;
}
.create-empty-desc {
  font-size:13px; color:var(--text2); line-height:1.6;
  margin-bottom:18px;
}
.create-empty-actions {
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}

/* 「只能發到已加入版塊」提示條 */
.create-join-hint { margin:0 18px 4px; font-size:13px; }

/* create modal 內的緊湊圖片區 */
.create-upload-zone {
  display:flex; gap:8px;
  margin-top:12px;
  padding:0;
  background:transparent;
  border:none;
  align-items:flex-start;
}
.create-upload-zone .img-slot {
  width:74px; height:74px;
  border-radius:12px;
  border:1.5px dashed var(--border2);
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  cursor:pointer;
  flex-shrink:0;
  transition:border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.create-upload-zone .img-slot:hover { border-color:var(--primary); background:var(--primary-light); }
.create-upload-zone .img-slot.filled { border-style:solid; border-color:var(--border2); cursor:default; }
.create-upload-zone .img-slot.filled:hover { border-color:var(--border2); background:var(--bg); }
.create-upload-zone .img-slot img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.create-upload-zone .img-slot .upload-hint {
  font-size:16px;
  color:var(--text3);
  display:flex; align-items:center; justify-content:center;
}
.create-upload-zone .img-slot:hover .upload-hint { color:var(--primary); }
.create-upload-zone.drag-over .img-slot:not(.filled) {
  border-color:var(--primary);
  background:var(--primary-light);
}

.threads-modal-toolbar {
  display:flex; align-items:center; gap:4px;
  padding:8px 0;
  margin-left:50px;
}
.threads-modal-toolbar button {
  width:30px; height:30px;
  border-radius:50%;
  background:transparent;
  border:none;
  color:var(--text3);
  font-size:15px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.15s var(--ease), color 0.15s var(--ease);
}
.threads-modal-toolbar button:hover:not(:disabled) { background:rgba(15,23,42,0.06); color:var(--text); }
.threads-modal-toolbar button:disabled { opacity:0.4; cursor:not-allowed; }

/* footer 左側「完整編輯」連結改寫成 link 樣 */
a.threads-modal-options {
  color:var(--text3);
  text-decoration:none;
}
a.threads-modal-options:hover { color:var(--text); background:rgba(15,23,42,0.04); text-decoration:none; }

/* ── 文章詳細頁 article-shell ── */
.article-shell {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:24px;
  box-shadow:var(--shadow-sm);
  margin-bottom:16px;
  overflow:hidden;
}
.article-shell-body { padding:24px 26px; }

.breadcrumb {
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--text3);
  margin-bottom:14px;
  flex-wrap:wrap;
}
.breadcrumb a { color:var(--text3); transition:color 0.15s; }
.breadcrumb a:hover { color:var(--text); }
.breadcrumb-sep { color:var(--border); font-size:11px; }

.article-header {
  display:flex; align-items:center; gap:12px;
  flex-wrap:wrap;            /* 中欄寬度不足時，actions 自動換到下一排 */
  margin-bottom:16px;
}
.article-header-avatar,
.article-header-avatar.post-avatar-placeholder {
  width:44px; height:44px;
  border-radius:50%;
  object-fit:cover;
  background:var(--primary-light);
  border:1px solid var(--border2);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--primary); font-weight:700;
}
/* meta 給 flex-basis:220px：寬螢幕和 actions 並排；窄到無法塞下時 actions 會 wrap 到下一排 */
.article-header-meta { flex:1 1 220px; min-width:0; }
.article-header-name { font-size:15px; font-weight:600; color:var(--text); line-height:1.3; word-break:break-word; }
.article-header-sub {
  font-size:13px; color:var(--text3); margin-top:2px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.article-header-sub a { color:var(--text3); }
.article-header-sub a:hover { color:var(--primary); }
.article-header-actions { display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; margin-left:auto; }

.article-title {
  font-size:clamp(20px, 3.4vw, 26px);
  font-weight:700;
  line-height:1.35;
  margin-bottom:14px;
  letter-spacing:-0.01em;
  word-break:break-word;
}
.article-content {
  font-size:16px;
  color:var(--text);
  line-height:1.85;
  margin-bottom:20px;
  white-space:pre-line;
  word-wrap:break-word;
}
.article-images {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:8px;
  margin-bottom:20px;
}
.article-images img {
  width:100%;
  max-height:420px;
  border-radius:14px;
  object-fit:cover;
  cursor:zoom-in;
  border:1px solid var(--border2);
  transition:transform 0.22s var(--ease);
}
.article-images img:hover { transform:scale(1.01); }

.article-actions {
  display:flex; align-items:center; gap:4px;
  padding:14px 0 4px;
  border-top:1px solid var(--border2);
  margin-left:-8px;
}
.article-actions .post-action-btn {
  font-size:14px;
  height:38px;
  padding:0 14px;
}
.article-actions .post-action-btn i { font-size:17px; }

/* ── 留言區（Threads 風樹狀） ── */
.comments-shell {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:24px;
  box-shadow:var(--shadow-sm);
  padding:22px 26px;
  margin-bottom:16px;
}
.comments-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}
.comments-title {
  font-size:17px; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:8px;
  letter-spacing:-0.005em;
}
.comments-count {
  background:var(--bg3); color:var(--text2);
  font-size:12px; font-weight:600;
  padding:2px 10px; border-radius:99px;
}

.comment-composer {
  display:flex; gap:12px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border2);
  margin-bottom:14px;
}
.comment-composer .comment-avatar { width:38px; height:38px; }
.comment-composer-input { flex:1; min-width:0; }
.comment-composer textarea {
  width:100%;
  border:none;
  outline:none;
  resize:none;
  font-family:inherit;
  font-size:15px;
  color:var(--text);
  background:transparent;
  padding:8px 0;
  min-height:42px;
  line-height:1.5;
}
.comment-composer textarea::placeholder { color:var(--text3); }
.comment-composer-actions {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:6px;
}
.comment-composer-extras { font-size:13px; color:var(--text3); }

/* 留言 thread */
.comment-list { display:flex; flex-direction:column; }
.comment-thread {
  position:relative;
  padding-bottom:14px;
}
.comment-thread + .comment-thread {
  padding-top:14px;
  border-top:1px solid var(--border2);
}
.comment-thread.has-replies::before {
  content:'';
  position:absolute;
  left:19px;
  top:46px;
  bottom:14px;
  width:2px;
  background:var(--border2);
  border-radius:1px;
}
.comment-thread + .comment-thread.has-replies::before { top:60px; }

.comment-item {
  display:flex; gap:12px;
  position:relative;
}
.comment-item .comment-avatar {
  width:38px; height:38px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  background:var(--primary-light);
  border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--primary); font-weight:700;
}
.comment-body { flex:1; min-width:0; }
.comment-header {
  display:flex; align-items:center; gap:8px;
  margin-bottom:4px;
}
.comment-name { font-size:14px; font-weight:600; color:var(--text); }
.comment-time { font-size:12px; color:var(--text3); }
.comment-text {
  font-size:14px; color:var(--text); line-height:1.6;
  word-wrap:break-word;
}
.comment-actions {
  display:flex; align-items:center; gap:2px;
  margin-top:4px;
  margin-left:-8px;
}
.comment-actions .post-action-btn {
  height:30px; padding:0 10px; font-size:12px;
}
.comment-actions .post-action-btn i { font-size:13px; }

.comment-replies {
  margin-top:10px;
  padding-left:50px;
  display:flex; flex-direction:column; gap:12px;
}
.comment-replies .comment-item .comment-avatar {
  width:30px; height:30px;
  font-size:12px;
}
.comment-replies .comment-name { font-size:13px; }
.comment-replies .comment-text { font-size:13.5px; }

.comment-reply-form {
  display:flex; gap:10px;
  padding:8px 0;
  margin-top:8px;
  border-top:1px dashed var(--border2);
}

/* widget 空狀態 */
.widget-empty {
  text-align:center;
  padding:8px 0 4px;
}
.widget-empty-icon {
  width:44px; height:44px;
  border-radius:50%;
  background:var(--bg3);
  margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--text3);
}
.widget-empty-text {
  font-size:13px; color:var(--text2);
  margin-bottom:12px;
}
.widget-empty-btn { width:100%; }

/* feed-shell 空狀態 */
.feed-empty {
  padding:64px 24px;
  text-align:center;
  color:var(--text3);
}
.feed-empty-icon {
  width:72px; height:72px;
  border-radius:50%;
  background:var(--bg3);
  margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; color:var(--text3);
}
.feed-empty-title {
  font-size:17px; font-weight:700; color:var(--text);
  margin-bottom:6px;
}
.feed-empty-desc {
  font-size:14px; color:var(--text2);
  margin-bottom:18px;
  line-height:1.6;
}
.feed-empty-actions { display:inline-flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ── 內嵌寫作框（composer） ── */
.composer-row {
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:99px;
  box-shadow:var(--shadow-xs);
  margin-bottom:10px;
  transition:border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.composer-row:hover { border-color:var(--border); box-shadow:var(--shadow-sm); }
.composer-avatar,
.composer-avatar.post-avatar-placeholder {
  width:38px; height:38px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  background:var(--primary-light);
  border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--primary); font-weight:700;
}
.composer-input {
  flex:1; min-width:0;
  font-size:15px; color:var(--text3);
  cursor:text;
  padding:4px 0;
}
.composer-publish {
  border:1.5px solid var(--border2);
  background:var(--bg2);
  border-radius:99px;
  padding:7px 18px;
  font-size:14px; font-weight:600;
  color:var(--text);
  text-decoration:none;
  transition:background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; font-family:inherit;
}
.composer-publish:hover {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  box-shadow:0 4px 12px rgba(46,127,207,0.25);
  text-decoration:none;
}

/* ── 浮動發文 FAB ── */
.fab-compose {
  position:fixed;
  bottom:24px; right:24px;
  width:52px; height:52px;
  border-radius:16px;
  background:var(--bg2);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
  text-decoration:none;
  border:1px solid var(--border2);
  box-shadow:0 4px 14px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.04);
  z-index:90;
  transition:transform 0.18s, box-shadow 0.18s, background 0.18s, color 0.18s;
}
.fab-compose:hover {
  transform:translateY(-1px);
  background:var(--text);
  color:#fff;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(15,23,42,0.14);
}

/* ── 頁面標題列（板塊頁等用，feed-shell 外的場景） ── */
.section-title {
  font-size:18px; font-weight:700; color:var(--text);
  margin:4px 4px 12px;
  letter-spacing:-0.01em;
}

/* ── Callout 提示框 ── */
.callout {
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 16px; border-radius:var(--radius-sm);
  font-size:13px; line-height:1.6;
  margin-bottom:14px;
}
.callout-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.callout.info   { background:rgba(46,127,207,0.09); border:1px solid rgba(46,127,207,0.22); color:var(--text2); }
.callout.warn   { background:rgba(217,119,6,0.09);  border:1px solid rgba(217,119,6,0.22);  color:var(--text2); }
.callout.danger { background:rgba(220,38,38,0.09);  border:1px solid rgba(220,38,38,0.22);  color:var(--text2); }
.callout.success{ background:rgba(22,163,74,0.09);  border:1px solid rgba(22,163,74,0.22);  color:var(--text2); }

/* ── 主內容區撐滿，讓 footer 自然置底 ── */
.site-main { flex:1; }

/* ── 站底（footer + slogan） ── */
.site-footer {
  text-align:center;
  padding:36px 20px 28px;
  margin-top:48px;
  border-top:1px solid var(--border2);
  background:linear-gradient(180deg, transparent, rgba(46,127,207,0.03));
}
.site-footer-slogan {
  font-size:14px;
  color:var(--text2);
  letter-spacing:0.02em;
  margin-bottom:10px;
}
.site-footer-slogan strong {
  background:linear-gradient(135deg, var(--primary), var(--accent3));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:700;
}
.site-footer-line {
  font-size:12px;
  color:var(--text3);
}
.site-footer-line a { color:var(--text3); }
.site-footer-line a:hover { color:var(--primary); }

/* ── 廣告容器 ── */
.ad-wrap {
  margin:20px 0;
  text-align:center;
}

/* ── 熱門吧列表（Reddit 風） ── */
.hot-board-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  margin:0 -10px;
  border-radius:10px;
  font-size:13px;
  color:var(--text);
  text-decoration:none;
  transition:background 0.15s var(--ease);
}
.hot-board-item:hover { background:rgba(15,23,42,0.04); text-decoration:none; color:var(--text); }
.hot-num {
  font-size:13px; color:var(--text3); font-weight:600;
  width:18px; text-align:center;
  font-family:'JetBrains Mono',monospace;
  flex-shrink:0;
}
.hot-icon {
  width:30px; height:30px; border-radius:50%;
  object-fit:cover;
  background:var(--primary-light);
  flex-shrink:0;
  border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
}
.hot-name {
  flex:1; min-width:0;
  color:var(--text); font-weight:600;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hot-count {
  font-size:11px; color:var(--text3);
  font-family:'JetBrains Mono',monospace;
  background:var(--bg3);
  padding:2px 7px; border-radius:99px;
  flex-shrink:0;
}

/* profile 「我管理的版塊」每列：name link + 齒輪 link 並排，避免 a 嵌 a */
.my-board-row { transition:background 0.15s var(--ease); }
.my-board-row:hover { background:rgba(15,23,42,0.04); }
.my-board-row .hot-name { flex:1; min-width:0; }
.my-board-row .hot-name:hover { color:var(--primary); }
.my-board-gear {
  flex-shrink:0;
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:var(--text3);
  font-size:13px;
  text-decoration:none;
  transition:background 0.15s var(--ease), color 0.15s var(--ease);
}
.my-board-gear:hover { background:rgba(15,23,42,0.08); color:var(--text); text-decoration:none; }

/* ═════════ profile.php 「我的板塊」Hub（主內容區，手機亦可見） ═════════ */
.my-boards-hub {
  display:flex; flex-direction:column;
  gap:14px;
  margin-bottom:16px;
}
.boards-section {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:16px;
  padding:14px 16px 16px;
  box-shadow:var(--shadow-xs);
}
/* 「我管理的版塊」: 主色強調 */
.boards-section-manage {
  border-left:4px solid var(--primary);
  background:linear-gradient(180deg, rgba(46,127,207,0.04), var(--bg2) 60%);
}
.boards-section-manage .boards-section-title i { color:var(--primary); }
/* 「我加入的版塊」: 紫色強調 */
.boards-section-joined { border-left:4px solid var(--accent3); }
.boards-section-joined .boards-section-title i { color:var(--accent3); }
/* 「我的開版申請」: 橘色強調 */
.boards-section-applies { border-left:4px solid var(--accent); }
.boards-section-applies .boards-section-title i { color:var(--accent); }

.boards-section-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  margin-bottom:10px;
}
.boards-section-title {
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--text);
  letter-spacing:-0.005em;
}
.boards-section-title i { font-size:13px; }
.boards-section-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:99px;
  background:var(--bg3);
  font-size:11px; font-weight:600; color:var(--text2);
  font-family:'JetBrains Mono', monospace;
}
.boards-section-action {
  font-size:12px; font-weight:600; color:var(--primary);
  text-decoration:none; padding:4px 10px; border-radius:99px;
  background:rgba(46,127,207,0.08);
  transition:background 0.15s var(--ease);
}
.boards-section-action:hover { background:rgba(46,127,207,0.16); color:var(--primary); text-decoration:none; }

/* 板塊卡片網格（自動換行） */
.boards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:8px;
}
.board-card {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  transition:background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
  min-width:0;
}
.board-card:hover {
  background:var(--bg3);
  border-color:var(--border);
  text-decoration:none;
  color:var(--text);
  transform:translateY(-1px);
}
/* 管理卡：a 嵌 a 用 div 容器 + .board-card-main 內連結 + .board-card-edit-btn */
.board-card-manage {
  background:rgba(46,127,207,0.04);
  border-color:rgba(46,127,207,0.18);
}
.board-card-manage:hover { background:rgba(46,127,207,0.09); }
.board-card-main {
  display:flex; align-items:center; gap:10px;
  flex:1; min-width:0;
  text-decoration:none; color:inherit;
}
.board-card-main:hover { text-decoration:none; color:inherit; }
.board-card-icon {
  width:36px; height:36px; flex-shrink:0;
  border-radius:50%;
  background:var(--primary-light);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary); font-size:14px;
  border:1px solid var(--border2);
  object-fit:cover;
}
.board-card-icon-img { padding:0; }
.board-card-body { min-width:0; flex:1; }
.board-card-name {
  font-size:14px; font-weight:700; color:var(--text);
  line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.board-card-meta {
  font-size:11px; color:var(--text3);
  margin-top:2px;
}
.board-card-edit-btn {
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px;
  border-radius:99px;
  background:var(--primary);
  color:#fff !important;
  font-size:12px; font-weight:600;
  text-decoration:none;
  transition:background 0.15s var(--ease), transform 0.15s var(--ease);
}
.board-card-edit-btn:hover { background:#1d6cb8; transform:scale(1.03); text-decoration:none; color:#fff !important; }
.board-card-edit-btn i { font-size:11px; }

/* 空態 */
.boards-empty {
  display:flex; flex-direction:column; align-items:center;
  padding:18px 12px 6px;
  text-align:center;
}
.boards-empty-icon {
  font-size:28px;
  color:var(--text3);
  margin-bottom:8px;
}
.boards-empty-title {
  font-size:13px; color:var(--text2);
  margin-bottom:12px;
}

/* 開版申請 row */
.boards-applies-list { display:flex; flex-direction:column; gap:8px; }
.apply-row {
  display:flex; gap:10px;
  padding:10px 12px;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:12px;
}
.apply-row.status-0 { background:rgba(224,112,48,0.04); border-color:rgba(224,112,48,0.2); }
.apply-row.status-1 { background:rgba(22,163,74,0.04);  border-color:rgba(22,163,74,0.2);  }
.apply-row.status-2 { background:rgba(220,38,38,0.04);  border-color:rgba(220,38,38,0.2);  }
.apply-row-icon {
  width:32px; height:32px; flex-shrink:0;
  border-radius:50%;
  background:var(--bg3);
  display:flex; align-items:center; justify-content:center;
  color:var(--text3); font-size:13px;
}
.apply-row.status-0 .apply-row-icon { color:var(--accent); }
.apply-row.status-1 .apply-row-icon { color:var(--accent2); }
.apply-row.status-2 .apply-row-icon { color:var(--danger); }
.apply-row-body { flex:1; min-width:0; }
.apply-row-name { font-size:14px; font-weight:600; color:var(--text); line-height:1.3; }
.apply-row-name a { color:inherit; text-decoration:none; }
.apply-row-name a:hover { color:var(--primary); }
.apply-row-meta { font-size:11px; color:var(--text3); margin-top:3px; }
.apply-row-note { font-size:12px; color:var(--danger); margin-top:4px; }

@media (max-width:480px) {
  .boards-grid { grid-template-columns:1fr; }
  .boards-section { padding:12px 14px 14px; }
  .board-card-edit-btn span { display:none; }
  .board-card-edit-btn { padding:6px 8px; }
}

/* ── 搜尋頁 ── */
.search-hero {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:20px;
  padding:18px 20px;
  box-shadow:var(--shadow-sm);
  margin-bottom:18px;
}
.search-input-wrap {
  display:flex; align-items:center; gap:10px;
  background:var(--bg3);
  border:1.5px solid transparent;
  border-radius:99px;
  padding:6px 8px 6px 18px;
  transition:border-color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.search-input-wrap:focus-within {
  background:var(--bg2);
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}
.search-input-wrap input {
  flex:1; min-width:0;
  border:none; outline:none; background:transparent;
  font-size:15px; color:var(--text);
  font-family:inherit;
}
.search-input-wrap i { color:var(--text3); font-size:15px; }

.search-section-title {
  font-size:13px; font-weight:600; letter-spacing:0.04em;
  color:var(--text3); text-transform:uppercase;
  margin:18px 4px 10px;
  display:flex; align-items:center; gap:8px;
}
.search-section-title .count {
  background:var(--bg3); color:var(--text2);
  font-size:11px; padding:2px 8px; border-radius:99px;
  text-transform:none; letter-spacing:0;
}

.search-board-card {
  display:flex; align-items:center; gap:14px;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:16px;
  padding:14px 18px;
  margin-bottom:8px;
  box-shadow:var(--shadow-xs);
  text-decoration:none;
  transition:border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.search-board-card:hover { border-color:var(--border); transform:translateY(-1px); box-shadow:var(--shadow-sm); text-decoration:none; }
.search-board-icon {
  width:44px; height:44px; border-radius:12px;
  background:var(--primary-light);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.search-board-icon img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
.search-board-info { flex:1; min-width:0; }
.search-board-name { font-size:15px; font-weight:600; color:var(--text); margin-bottom:2px; }
.search-board-desc { font-size:12px; color:var(--text3); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-board-stat { font-size:12px; color:var(--text3); flex-shrink:0; }
.search-board-stat strong { color:var(--text2); font-weight:600; }

mark.search-highlight { background:rgba(255,235,59,0.45); color:var(--text); padding:0 2px; border-radius:3px; }

/* ── Reddit 風發文頁（write-page） ── */
.write-page {
  max-width:740px;
  margin:0 auto;
  padding:24px 20px 80px;
}
.write-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:18px;
  gap:14px;
}
.write-page-title {
  font-size:28px; font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.2;
}
.write-header-aside {
  font-size:13px; color:var(--text3);
  display:flex; align-items:center; gap:14px;
}
.write-header-aside a { color:var(--text3); }
.write-header-aside a:hover { color:var(--primary); }

/* 版塊選擇 pill（白底淡藍框，統一品牌色） */
.write-board-selector {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--bg2);
  color:var(--text);
  padding:5px 18px 5px 6px;
  border-radius:99px;
  font-size:14px; font-weight:600;
  cursor:pointer;
  position:relative;
  margin-bottom:20px;
  border:1.5px solid var(--border2);
  transition:border-color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.write-board-selector:hover {
  border-color:var(--primary);
  background:var(--primary-light);
}
.write-board-selector:focus-within {
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}
.write-board-selector::after {
  content:'\f078';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  font-size:10px;
  margin-left:4px;
  color:var(--text3);
}
.write-board-selector select {
  position:absolute; inset:0;
  opacity:0;
  cursor:pointer;
  font-size:16px;
  width:100%; height:100%;
}
.write-board-selector-icon {
  width:30px; height:30px;
  border-radius:50%;
  background:var(--primary-light);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:var(--primary); font-size:13px;
}

/* 內容區塊（標題、內文等） */
.write-block {
  background:var(--bg2);
  border:1.5px solid var(--border2);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:12px;
  transition:border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  position:relative;
}
.write-block:focus-within {
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}
.write-block-label {
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--text3);
  margin-bottom:6px;
}
.write-block-label .required { color:var(--danger); margin-left:2px; }
.write-block-counter {
  font-size:12px; color:var(--text3);
  font-variant-numeric:tabular-nums;
}
.write-block-counter.warn { color:var(--warning); }
.write-block-counter.danger { color:var(--danger); }

.write-title-input {
  width:100%;
  border:none; outline:none; background:transparent;
  font-family:inherit;
  font-size:17px; font-weight:500;
  color:var(--text);
  padding:0;
  line-height:1.4;
}
.write-title-input::placeholder { color:var(--text3); font-weight:400; }

.write-body-input {
  width:100%;
  border:none; outline:none; background:transparent;
  font-family:inherit;
  font-size:15px;
  color:var(--text);
  resize:vertical;
  min-height:160px;
  line-height:1.7;
  padding:0;
}
.write-body-input::placeholder { color:var(--text3); }

/* 副區塊容器（圖片 / 可見度 / 焚燒 ……） */
.write-section {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:10px;
}
.write-section-title {
  font-size:13px; font-weight:600; color:var(--text);
  margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.write-section-title i { color:var(--text3); }

/* 內嵌選項列（visibility 等） */
.write-inline-options {
  display:flex; gap:8px; flex-wrap:wrap;
}
.write-inline-option {
  flex:1; min-width:140px;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border:1.5px solid var(--border2);
  border-radius:12px;
  cursor:pointer;
  background:var(--bg2);
  font-size:13px;
  transition:border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.write-inline-option:hover { border-color:rgba(15,23,42,0.16); }
.write-inline-option input[type=radio] {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.write-inline-option-icon {
  width:34px; height:34px;
  border-radius:50%;
  background:var(--bg3);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  color:var(--text2);
  flex-shrink:0;
  transition:background 0.15s var(--ease), color 0.15s var(--ease);
}
.write-inline-option:has(input[type=radio]:checked) {
  border-color:var(--primary);
  background:var(--primary-light);
}
.write-inline-option:has(input[type=radio]:checked) .write-inline-option-icon {
  background:var(--primary);
  color:#fff;
}
.write-inline-option-title { font-weight:600; color:var(--text); display:block; }
.write-inline-option-desc { font-size:11px; color:var(--text3); margin-top:2px; }

/* 開關列（焚燒 / 匿名 / 同意 等） */
.write-toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
  font-size:14px;
  cursor:pointer;
}
.write-toggle-row + .write-toggle-row { border-top:1px solid var(--border2); }
.write-toggle-label { display:flex; align-items:center; gap:10px; color:var(--text); }
.write-toggle-label i { color:var(--text3); font-size:16px; width:18px; text-align:center; }
.write-toggle-desc { display:block; font-size:12px; color:var(--text3); margin-top:2px; }

/* 底部 actions */
.write-actions-bar {
  display:flex; gap:10px; justify-content:flex-end;
  padding-top:16px;
  margin-top:18px;
  border-top:1px solid var(--border2);
}

/* ── 表單頁通用 form-shell ── */
.form-shell {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:24px;
  padding:32px 32px 28px;
  box-shadow:var(--shadow-sm);
}
.form-shell-title {
  font-size:24px; font-weight:700;
  letter-spacing:-0.015em;
  margin-bottom:6px;
  display:flex; align-items:center; gap:10px;
}
.form-shell-subtitle {
  font-size:14px; color:var(--text2);
  margin-bottom:24px;
  line-height:1.6;
}
.form-actions-bar {
  display:flex; gap:10px; justify-content:flex-end;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--border2);
}

/* 圖片上傳區 */
.upload-zone {
  border:2px dashed var(--border2);
  border-radius:14px;
  padding:18px;
  display:flex; gap:12px; flex-wrap:wrap;
  background:var(--bg);
  transition:border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.upload-zone:hover { border-color:var(--primary); background:rgba(46,127,207,0.04); }
.upload-zone.drag-over { border-color:var(--primary); background:var(--primary-light); }
.img-slot {
  width:108px; height:88px;
  border-radius:12px;
  border:1.5px dashed var(--border2);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  background:var(--bg2);
  cursor:pointer;
  transition:border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.18s var(--ease);
}
.img-slot:hover { border-color:var(--primary); background:rgba(46,127,207,0.04); transform:translateY(-1px); }
.img-slot.filled { border-style:solid; border-color:var(--border2); cursor:default; }
.img-slot.filled:hover { transform:none; }
.upload-hint {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:12px; color:var(--text3);
}
.upload-hint i { font-size:20px; color:var(--text3); }
.remove-img-btn {
  position:absolute; top:6px; right:6px;
  background:rgba(0,0,0,0.6);
  color:#fff; border:none;
  border-radius:50%;
  width:22px; height:22px;
  cursor:pointer;
  font-size:11px;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.15s var(--ease);
}
.remove-img-btn:hover { background:rgba(220,38,38,0.9); }

/* 可見度 / 雙軌制等 選項卡 */
.choice-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
}
.choice-card {
  border:1.5px solid var(--border2);
  border-radius:14px;
  padding:14px;
  cursor:pointer;
  background:var(--bg2);
  transition:border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
  position:relative;
}
.choice-card:hover { border-color:rgba(15,23,42,0.18); transform:translateY(-1px); box-shadow:var(--shadow-xs); }
.choice-card input[type=radio] { position:absolute; opacity:0; pointer-events:none; }
.choice-card.selected,
.choice-card:has(input[type=radio]:checked) {
  border-color:var(--primary);
  background:var(--primary-light);
  box-shadow:0 0 0 3px var(--primary-glow);
}
.choice-card-title {
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--text);
  margin-bottom:4px;
}
.choice-card-desc { font-size:12px; color:var(--text3); line-height:1.5; }

/* 登入頁 ── */
.login-wrap {
  min-height:calc(100vh - 60px);
  display:flex; align-items:center; justify-content:center;
  padding:40px 16px;
  background:
    radial-gradient(circle at 20% 10%, rgba(46,127,207,0.10), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(124,58,237,0.08), transparent 45%);
  position:relative;
}
.login-card {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:24px;
  padding:44px 36px 32px;
  width:100%; max-width:440px;
  box-shadow:var(--shadow-lg);
  text-align:center;
  position:relative;
  z-index:1;
  animation:scaleIn 0.36s var(--ease-out);
}
.login-logo {
  width:64px; height:64px;
  border-radius:18px;
  margin:0 auto 18px;
  background:linear-gradient(135deg, var(--primary), #6ea8e0);
  display:flex; align-items:center; justify-content:center;
  font-size:30px; color:#fff;
  box-shadow:0 12px 28px rgba(46,127,207,0.32), inset 0 -2px 6px rgba(0,0,0,0.08);
}
.login-title {
  font-size:24px; font-weight:800;
  margin-bottom:8px;
  letter-spacing:-0.015em;
}
.login-subtitle {
  font-size:14px; color:var(--text2);
  margin-bottom:28px;
  line-height:1.6;
}
.login-google-btn {
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%;
  height:48px;
  border:1.5px solid var(--border2);
  background:var(--bg2);
  color:var(--text);
  font-size:15px; font-weight:600;
  border-radius:12px;
  text-decoration:none;
  transition:background 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.12s var(--ease);
  cursor:pointer;
}
.login-google-btn:hover {
  background:var(--bg);
  border-color:rgba(15,23,42,0.22);
  box-shadow:var(--shadow-sm);
  color:var(--text);
  text-decoration:none;
}
.login-google-btn:active { transform:translateY(1px); }
.login-divider {
  display:flex; align-items:center; gap:12px;
  margin:24px 0 18px;
  color:var(--text3);
  font-size:11px;
  letter-spacing:0.06em;
}
.login-divider::before, .login-divider::after {
  content:'';
  flex:1; height:1px;
  background:var(--border2);
}
.login-foot {
  font-size:12px; color:var(--text3);
  margin-top:20px;
  line-height:1.6;
}
.login-foot a { color:var(--text2); }
.login-foot a:hover { color:var(--primary); }

/* ── 個人主頁 profile-shell ── */
.profile-shell {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:24px;
  padding:24px 26px 20px;
  box-shadow:var(--shadow-sm);
  margin-bottom:16px;
}
.profile-head {
  display:flex; align-items:flex-start; gap:18px;
}
.profile-avatar,
.profile-avatar.post-avatar-placeholder {
  width:84px; height:84px;
  border-radius:50%;
  object-fit:cover;
  background:var(--primary-light);
  border:2px solid var(--bg2);
  box-shadow:var(--shadow-xs);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; color:var(--primary); font-weight:700;
}
.profile-info { flex:1; min-width:0; }
.profile-name {
  font-size:24px; font-weight:700;
  letter-spacing:-0.015em;
  margin-bottom:2px;
  line-height:1.2;
  word-break:break-word;
}
.profile-email {
  font-size:13px; color:var(--text3);
  margin-bottom:8px;
  word-break:break-all;
}
.profile-bio {
  font-size:14px; color:var(--text); line-height:1.55;
  margin-bottom:10px;
  word-wrap:break-word;
}
.profile-badges {
  display:flex; gap:6px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.profile-badges .badge {
  white-space:nowrap;
  flex-shrink:0;
}
.profile-actions { flex-shrink:0; }

.profile-stats {
  display:flex; gap:24px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border2);
  font-size:13px;
  flex-wrap:wrap;
}
.profile-stat { color:var(--text3); display:flex; align-items:baseline; gap:5px; }
.profile-stat strong { color:var(--text); font-weight:700; font-size:16px; }

/* profile-shell 手機版 */
@media (max-width:640px) {
  .profile-shell { padding:20px 18px 16px; border-radius:18px; }
  .profile-head { gap:14px; flex-wrap:wrap; }
  .profile-avatar,
  .profile-avatar.post-avatar-placeholder {
    width:64px; height:64px;
    font-size:24px;
  }
  .profile-name { font-size:19px; line-height:1.25; }
  .profile-email { font-size:12px; }
  .profile-bio { font-size:13px; }
  .profile-badges .badge { font-size:10px; }
  /* 編輯資料按鈕 → 換行到第二排，全寬 */
  .profile-actions {
    order:99;
    flex-basis:100%;
    margin-top:4px;
  }
  .profile-actions .btn {
    width:100%;
    justify-content:center;
  }
  .profile-stats { gap:14px; padding-top:14px; margin-top:14px; }
  .profile-stat strong { font-size:15px; }
}

/* 通知卡 */
.notif-list { display:flex; flex-direction:column; gap:8px; }
.notif-card {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:14px;
  padding:14px 16px;
  display:flex; gap:12px;
  box-shadow:var(--shadow-xs);
  transition:border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}
.notif-card:hover { border-color:var(--border); transform:translateY(-1px); }
.notif-card.unread { background:rgba(46,127,207,0.05); border-color:rgba(46,127,207,0.25); }
.notif-icon {
  width:36px; height:36px;
  border-radius:50%;
  background:var(--bg3);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--text2);
  flex-shrink:0;
}
.notif-card.unread .notif-icon { background:var(--primary-light); color:var(--primary); }
.notif-body { flex:1; min-width:0; }
.notif-title { font-size:14px; font-weight:500; color:var(--text); line-height:1.45; }
.notif-card.unread .notif-title { font-weight:700; }
.notif-meta { font-size:12px; color:var(--text3); margin-top:4px; display:flex; gap:8px; align-items:center; }
.notif-actions { margin-top:8px; }
.notif-dot {
  width:8px; height:8px;
  border-radius:50%;
  background:var(--primary);
  flex-shrink:0;
  margin-top:6px;
}

/* ── 版塊頁 board-shell（封面 + 資訊區） ── */
.board-shell {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  margin-bottom:16px;
}
.board-cover {
  height:180px;
  background:linear-gradient(135deg, var(--primary-light), var(--bg4));
  overflow:hidden;
  position:relative;
}
.board-cover img { width:100%; height:100%; object-fit:cover; }
.board-info {
  padding:20px 24px 22px;
}
.board-info-top {
  display:flex; align-items:flex-end; gap:16px;
  margin-bottom:14px;
}
.board-avatar {
  width:72px; height:72px;
  border-radius:18px;
  object-fit:cover;
  border:4px solid var(--bg2);
  margin-top:-46px;
  background:var(--bg2);
  box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.board-info-text { flex:1; min-width:0; padding-bottom:4px; }
.board-name {
  font-size:22px; font-weight:700;
  margin:0 0 4px;
  letter-spacing:-0.01em;
  line-height:1.25;
}
.board-desc {
  font-size:14px; color:var(--text2); line-height:1.55;
  margin:0;
}
.board-stats {
  display:flex; gap:18px;
  margin-bottom:14px;
  flex-wrap:wrap;
  font-size:13px;
}
.board-stat { color:var(--text3); display:flex; align-items:center; gap:5px; }
.board-stat strong { color:var(--text); font-weight:700; font-size:14px; }
.board-meta-tags {
  display:flex; gap:6px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.board-actions {
  display:flex; gap:8px; flex-wrap:wrap;
  padding-top:14px;
  border-top:1px solid var(--border2);
}

/* ── 留言區 ── */
.comment-list { margin-top:24px; }
.comment-item {
  display:flex; gap:12px;
  padding:14px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.comment-item:last-child { border-bottom:none; }
.comment-avatar {
  width:32px; height:32px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  background:var(--primary-light);
}
.comment-body    { flex:1; min-width:0; }
.comment-header  { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.comment-name    { font-size:13px; font-weight:600; }
.comment-time    { font-size:11px; color:var(--text3); }
.comment-text    { font-size:14px; color:var(--text2); line-height:1.6; }
.comment-actions { display:flex; gap:10px; margin-top:6px; }
.comment-reply-indent { margin-left:44px; }

/* ── 表格 ── */
.tbar-table { width:100%; border-collapse:collapse; }
.tbar-table th {
  text-align:left; padding:10px 14px;
  font-size:12px; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--text3); font-weight:600;
  background:var(--bg3);
  border-bottom:1px solid var(--border2);
}
.tbar-table td {
  padding:12px 14px; font-size:13px;
  color:var(--text2);
  border-bottom:1px solid var(--border2);
  vertical-align:middle;
}
.tbar-table tr:last-child td { border-bottom:none; }
.tbar-table tr:hover td { background:var(--bg3); }

/* ── 標籤頁 ── */
.tabs {
  display:flex; gap:2px;
  border-bottom:1px solid var(--border2);
  margin-bottom:16px;
}
.tab-btn {
  padding:12px 18px;
  font-size:14px; font-weight:500;
  color:var(--text3);
  background:none; border:none; cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color 0.18s, border-color 0.18s;
  font-family:inherit;
  display:inline-flex; align-items:center; gap:6px;
}
.tab-btn:hover { color:var(--text2); }
.tab-btn.active { color:var(--text); border-bottom-color:var(--text); font-weight:600; }

/* ── 動畫 ── */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.92) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes slideInRight {
  from { opacity:0; transform:translateX(24px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes skeleton-shine {
  to { background-position:-200% 0; }
}
@keyframes like-pop {
  0%   { transform:scale(1); }
  35%  { transform:scale(1.45); }
  60%  { transform:scale(0.92); }
  100% { transform:scale(1); }
}
@keyframes badge-pulse {
  0%, 100% { box-shadow:0 0 0 0 var(--primary-glow); }
  50%      { box-shadow:0 0 0 6px transparent; }
}
@keyframes spin {
  to { transform:rotate(360deg); }
}
.like-pop { animation:like-pop 0.42s var(--ease-out); }
.spin     { animation:spin 0.8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ── 手機選單按鈕 / 抽屜 ── */
.mobile-menu-btn,
.mobile-search-btn,
.mobile-widget-btn {
  display:none;
  background:none; border:none;
  width:40px; height:40px;
  border-radius:8px;
  font-size:18px;
  color:var(--text2);
  cursor:pointer;
  align-items:center; justify-content:center;
  padding:0;
  flex-shrink:0;
  position:relative;
}
.mobile-menu-btn:hover,
.mobile-search-btn:hover,
.mobile-widget-btn:hover { background:var(--bg3); }
.mobile-widget-btn .widget-dot {
  position:absolute;
  top:8px; right:8px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
}

.mobile-backdrop {
  position:fixed; inset:0;
  background:rgba(15,23,42,0.45);
  backdrop-filter:blur(2px);
  z-index:200;
  opacity:0; visibility:hidden;
  transition:opacity 0.22s ease, visibility 0.22s ease;
}
.mobile-backdrop.show { opacity:1; visibility:visible; }

.mobile-drawer {
  position:fixed;
  top:0; left:0;
  width:280px; max-width:85vw;
  height:100vh;
  background:var(--bg2);
  z-index:300;
  box-shadow:2px 0 24px rgba(15,23,42,0.18);
  transform:translateX(-100%);
  transition:transform 0.26s cubic-bezier(.4,0,.2,1), visibility 0s linear 0.26s;
  display:flex; flex-direction:column;
  overflow-y:auto;
  visibility:hidden;
}
.mobile-drawer.open {
  transform:translateX(0);
  visibility:visible;
  transition:transform 0.26s cubic-bezier(.4,0,.2,1), visibility 0s;
}

.mobile-drawer-right {
  position:fixed;
  top:0; right:0; left:auto;
  width:300px; max-width:85vw;
  height:100vh;
  background:var(--bg);
  z-index:300;
  box-shadow:-2px 0 24px rgba(15,23,42,0.18);
  transform:translateX(100%);
  transition:transform 0.26s cubic-bezier(.4,0,.2,1), visibility 0s linear 0.26s;
  display:flex; flex-direction:column;
  overflow-y:auto;
  visibility:hidden;
}
.mobile-drawer-right.open {
  transform:translateX(0);
  visibility:visible;
  transition:transform 0.26s cubic-bezier(.4,0,.2,1), visibility 0s;
}
#mobile-widget-body { padding:12px; }
#mobile-widget-body .widget-card { margin-bottom:12px; }
#mobile-widget-body .widget-card:last-child { margin-bottom:0; }
.mobile-drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border2);
  flex-shrink:0;
}
.mobile-drawer-logo {
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.mobile-drawer-logo .logo-mark {
  width:32px; height:32px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--primary), #6ea8e0);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:15px;
  box-shadow:0 4px 10px rgba(46,127,207,0.28);
}
.mobile-drawer-logo .logo-text { display:flex; flex-direction:column; line-height:1.05; }
.mobile-drawer-logo .logo-en {
  font-size:16px; font-weight:900;
  letter-spacing:-0.025em;
  background:linear-gradient(135deg,#0f172a 20%,var(--primary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.mobile-drawer-logo .logo-tw {
  font-size:10px; font-weight:600;
  color:var(--text3);
  letter-spacing:0.14em;
  margin-top:2px;
}
.mobile-drawer-close {
  background:none; border:none;
  width:36px; height:36px;
  border-radius:8px;
  font-size:18px; color:var(--text2);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.mobile-drawer-close:hover { background:var(--bg3); }
.mobile-drawer-body { padding:12px; flex:1; }
.mobile-drawer-user {
  display:flex; align-items:center; gap:10px;
  padding:12px;
  background:var(--bg3);
  border-radius:var(--radius-sm);
  margin-bottom:12px;
}
.mobile-drawer-user img,
.mobile-drawer-user .post-avatar-placeholder {
  width:38px; height:38px;
  border-radius:50%;
  flex-shrink:0;
}
.mobile-drawer-user-name { font-size:14px; font-weight:600; color:var(--text); }
.mobile-drawer-user-role { font-size:11px; color:var(--text3); }

/* ── 手機搜尋遮罩 ── */
.mobile-search-overlay {
  position:fixed; inset:0;
  background:rgba(248,250,252,0.98);
  backdrop-filter:blur(8px);
  z-index:350;
  opacity:0; visibility:hidden;
  transition:opacity 0.18s ease, visibility 0.18s ease;
  padding:14px 16px;
  display:flex; flex-direction:column;
}
.mobile-search-overlay.show { opacity:1; visibility:visible; }
.mobile-search-bar {
  display:flex; align-items:center; gap:8px;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:99px;
  padding:8px 14px;
}
.mobile-search-bar input {
  flex:1;
  border:none; outline:none; background:transparent;
  font-size:16px; color:var(--text);
  font-family:inherit;
}
.mobile-search-cancel {
  background:none; border:none;
  font-size:14px; color:var(--primary);
  cursor:pointer; padding:6px 8px;
  font-family:inherit;
}

/* 開啟抽屜時鎖住背景捲動 */
body.no-scroll { overflow:hidden; }

/* ── 響應式 ── */
@media (max-width:1024px) {
  /* 平板：保留左側 sidebar，右側 widget 改用抽屜按鈕開啟 */
  .layout { grid-template-columns:240px minmax(0,1fr); }
  .layout main { padding:12px 24px 40px; }
  .widget { display:none; }
  .mobile-widget-btn { display:inline-flex; }
}

@media (max-width:768px) {
  body { font-size:14px; padding-top:54px; }
  .layout { grid-template-columns:1fr; }
  .layout main { padding:14px 12px 32px; }
  .layout-wide { padding:14px 12px; }
  .sidebar { display:none; }

  /* 頂部列：顯示漢堡 + 搜尋圖示，隱藏桌面搜尋條 */
  .topbar { height:54px; }
  .topbar-inner { gap:4px; padding:0 8px; }
  .topbar-search-wrap { display:none; }
  .mobile-menu-btn,
  .mobile-search-btn { display:inline-flex; }
  .topbar-logo { gap:8px; flex:1; min-width:0; }
  .topbar-logo .logo-mark { width:30px; height:30px; font-size:14px; border-radius:9px; }
  .topbar-logo .logo-en { font-size:15px; }
  .topbar-logo .logo-tw { font-size:9px; letter-spacing:0.12em; }
  .topbar-actions { gap:2px; }
  /* 建立 button 上的「建立」文字隱藏，只剩 + icon */
  .topbar-create-btn .label-text { display:none; }
  .topbar-create-btn { width:40px; height:40px; padding:0; border-radius:50%; justify-content:center; }
  .topbar-icon-btn { width:36px; height:36px; }
  .topbar-user-btn { width:36px; height:36px; }
  .topbar-user-btn img, .topbar-user-btn .topbar-user-avatar { width:30px; height:30px; }
  .topbar-actions .btn { padding:7px 10px; font-size:13px; }
  .topbar-actions .btn .label-text { display:none; }

  /* 卡片 / 文章卡片 padding 縮小 */
  .card { padding:16px; }
  .post-card { padding:14px 16px; margin-bottom:10px; border-radius:14px; }
  .post-card-top { gap:8px; margin-bottom:8px; flex-wrap:wrap; }
  .post-avatar, .post-avatar-placeholder { width:34px; height:34px; }
  .post-title { font-size:15px; }
  .post-body { font-size:14px; -webkit-line-clamp:4; }
  .post-img { height:180px; }
  .post-imgs { grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:4px; }
  .post-actions { gap:2px; padding-top:4px; margin-left:-6px; }
  .post-action-btn { font-size:13px; padding:7px 10px; min-height:36px; }
  .post-action-btn i { font-size:15px; }
  .post-board-tag { font-size:12px; padding:3px 9px; }

  /* feed-shell / sort-bar 在手機上 */
  .feed-shell { gap:8px; }
  .feed-shell-head, .sort-bar { top:54px; padding:6px 0; }
  .feed-shell-head .tab-btn, .sort-bar .tab-btn { padding:6px 11px; font-size:13px; }
  .feed-shell .post-card { padding:14px 16px; border-radius:14px; }
  .feed-shell .callout, .feed-shell .ad-wrap { margin:0; padding:0; }
  .composer-row { padding:10px 14px; border-radius:99px; }
  .composer-input { font-size:14px; }
  .composer-avatar { width:34px; height:34px; }

  /* FAB 縮小 */
  .fab-compose { bottom:18px; right:18px; width:54px; height:54px; border-radius:18px; font-size:20px; }

  /* 標籤頁 — 改成可橫向捲動 */
  .tabs {
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar { display:none; }
  .tab-btn { padding:8px 12px; font-size:13px; white-space:nowrap; flex-shrink:0; }

  /* 留言區：縮減縮排、頭像略小 */
  .comment-reply-indent { margin-left:24px; }
  .comment-item { gap:10px; padding:12px 0; }
  .comment-avatar { width:30px; height:30px; }
  .comment-text { font-size:13px; }

  /* 版塊資訊 */
  .board-cover { height:120px; }
  .board-name { font-size:18px; }
  .board-desc { font-size:13px; }
  .board-stats { gap:10px 14px; flex-wrap:wrap; }
  .board-stat { font-size:12px; }
  .board-avatar { width:54px; height:54px; margin-top:-24px; }
  .board-info { padding:14px; }

  /* 分頁 — 縮小按鈕 */
  .pagination { gap:4px; flex-wrap:wrap; padding:18px 0; }
  .page-btn { width:32px; height:32px; font-size:12px; }

  /* 表單 / 輸入框：font-size:16px 避免 iOS 自動放大 */
  .form-control, input.form-control, select.form-control, textarea.form-control { font-size:16px; }
  .form-group { margin-bottom:14px; }

  /* Modal 全螢幕化 */
  .modal-backdrop { padding:0; align-items:flex-end; }
  .modal {
    max-width:100%;
    width:100%;
    border-radius:var(--radius) var(--radius) 0 0;
    padding:20px;
    max-height:92vh;
    overflow-y:auto;
    animation:slideUp 0.22s ease;
  }

  /* Toast 容器：靠下中、不擋邊 */
  #toast-container { bottom:16px; right:12px; left:12px; }
  .toast { min-width:0; width:100%; max-width:100%; }

  /* 表格：橫向捲動 */
  .tbar-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* 圖片 grid（文章詳細頁）— 強制可縮放 */
  .post-card .post-imgs img { flex:1 1 0; min-width:0; }

  /* 留言發送按鈕：尺寸對齊 article-header-actions 的小 pill，不再全寬 */
  #comment-form .btn { font-size:12px; padding:0 14px; height:32px; }
}

@media (max-width:480px) {
  .topbar-logo .logo-en { font-size:14px; }
  .topbar-logo .logo-tw { display:none; }
  .layout, .layout-wide { padding:10px 10px; }
  .post-card { padding:12px 14px; }
  .post-title { font-size:14px; }
  .post-img { height:140px; }
  .post-imgs { grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); }
  .post-action-btn { font-size:13px; padding:7px 10px; }
  .post-actions { gap:0; }
  .card { padding:14px; }
  .board-cover { height:96px; }
  .board-avatar { width:48px; height:48px; margin-top:-20px; }
  .board-name { font-size:16px; }
  .board-stats { gap:8px 12px; }
  .modal { padding:16px; }
  .modal-title { font-size:16px; }

  /* 文章詳細頁區塊內字級 */
  .breadcrumb-mobile { font-size:11px; }
}

@keyframes slideUp {
  from { transform:translateY(20px); opacity:0; }
  to   { transform:translateY(0); opacity:1; }
}

/* ── 各 shell 手機版補強（v=20260522d） ── */
@media (max-width:768px) {
  /* article-shell */
  .article-shell { border-radius:18px; }
  .article-shell-body { padding:18px 16px; }
  /* 手機版：avatar + meta 一排，actions 強制換行成獨立一排（之前缺 flex-wrap 導致 meta 被擠成 1 字寬） */
  .article-header { gap:10px; flex-wrap:wrap; align-items:flex-start; }
  .article-header-avatar,
  .article-header-avatar.post-avatar-placeholder { width:38px; height:38px; font-size:14px; }
  .article-header-meta { flex:1 1 0; min-width:0; }
  .article-header-name { font-size:14px; word-break:break-word; }
  .article-header-sub { font-size:12px; gap:6px; }
  .article-header-actions {
    gap:4px;
    flex-basis:100%; width:100%;
    margin-top:8px;
    order:3;
  }
  .article-header-actions .btn { font-size:12px; padding:0 12px; height:32px; }
  .article-title { margin-bottom:10px; }
  .article-content { font-size:15px; line-height:1.75; }
  .article-images { grid-template-columns:1fr; gap:6px; }
  .article-images img { max-height:340px; }
  .article-actions { gap:0; }
  .article-actions .post-action-btn { padding:0 10px; font-size:13px; }

  /* comments-shell */
  .comments-shell { border-radius:18px; padding:16px 16px; }
  .comments-head { margin-bottom:12px; }
  .comments-title { font-size:15px; }
  .comment-composer { gap:10px; padding-bottom:14px; }
  .comment-composer .comment-avatar { width:32px; height:32px; }
  .comment-thread.has-replies::before { left:15px; top:40px; }
  .comment-item .comment-avatar { width:32px; height:32px; font-size:12px; }
  .comment-replies { padding-left:36px; gap:10px; }
  .comment-replies .comment-item .comment-avatar { width:26px; height:26px; font-size:11px; }
  .comment-text { font-size:13.5px; }

  /* board-shell */
  .board-shell { border-radius:18px; }
  .board-cover { height:120px; }
  .board-info { padding:14px 16px 16px; }
  .board-info-top { gap:12px; margin-bottom:12px; }
  .board-avatar { width:56px; height:56px; margin-top:-32px; border-radius:14px; border-width:3px; }
  .board-name { font-size:18px; }
  .board-desc { font-size:13px; }
  .board-stats { gap:10px 14px; margin-bottom:12px; font-size:12px; }
  .board-stat strong { font-size:13px; }
  .board-actions { gap:6px; padding-top:12px; }
  .board-actions .btn { font-size:13px; padding:0 14px; height:36px; }

  /* form-shell（post_write / apply_board） */
  .form-shell { padding:20px 18px 18px; border-radius:18px; }
  .form-shell-title { font-size:20px; }
  .form-shell-subtitle { font-size:13px; margin-bottom:18px; }
  .form-actions-bar { padding-top:14px; margin-top:14px; gap:8px; }
  .form-actions-bar .btn { flex:1; justify-content:center; }

  /* write-page（post_write Reddit 風） */
  .write-page { padding:16px 14px 60px; }
  .write-header { margin-bottom:14px; }
  .write-page-title { font-size:22px; }
  .write-board-selector { font-size:13px; margin-bottom:14px; }
  .write-block { padding:12px 14px; border-radius:14px; }
  .write-title-input { font-size:16px; }
  .write-body-input { font-size:14.5px; min-height:140px; }
  .write-section { padding:12px 14px; border-radius:12px; }
  .write-inline-options { gap:6px; }
  .write-inline-option { padding:10px 12px; min-width:100px; }
  .write-inline-option-icon { width:30px; height:30px; font-size:13px; }

  /* create-modal 圖片 slot 縮小 */
  .create-upload-zone { gap:6px; margin-top:10px; }
  .create-upload-zone .img-slot { width:72px; height:72px; }

  /* threads-modal 內 reply / create composer body */
  .threads-reply-composer { gap:10px; }
  .threads-reply-avatar-col { width:32px; }
  .threads-reply-avatar-col img,
  .threads-reply-avatar-col .placeholder { width:32px; height:32px; font-size:12px; }
  .threads-reply-composer-body .create-board-row { font-size:13px; }
  .create-board-pill { font-size:12px; padding:3px 10px 3px 8px; }

  /* search-hero */
  .search-hero { padding:14px 14px; border-radius:14px; }
  .search-input-wrap { padding:5px 6px 5px 14px; }
  .search-input-wrap input { font-size:14px; }
  .search-section-title { margin:14px 4px 8px; font-size:12px; }
  .search-board-card { padding:12px 14px; gap:12px; }
  .search-board-icon { width:38px; height:38px; }
  .search-board-name { font-size:14px; }

  /* login-card */
  .login-wrap { padding:24px 14px; min-height:calc(100vh - 54px); }
  .login-card { padding:32px 24px 24px; border-radius:18px; }
  .login-logo { width:54px; height:54px; font-size:24px; border-radius:14px; margin-bottom:14px; }
  .login-title { font-size:20px; }
  .login-subtitle { font-size:13px; margin-bottom:20px; }
  .login-google-btn { height:46px; font-size:14px; }

  /* notif card */
  .notif-card { padding:12px 14px; gap:10px; border-radius:12px; }
  .notif-icon { width:32px; height:32px; font-size:13px; }
  .notif-title { font-size:13.5px; }
}

@media (max-width:480px) {
  /* article 再縮 */
  .article-shell-body { padding:16px 14px; }
  .article-title { font-size:18px; }
  .article-content { font-size:14.5px; line-height:1.7; }
  .comments-shell { padding:14px 14px; }
  .comment-replies { padding-left:30px; }

  /* board 再縮 */
  .board-info { padding:12px 14px 14px; }
  .board-cover { height:96px; }
  .board-avatar { width:48px; height:48px; margin-top:-26px; }
  .board-name { font-size:17px; }

  /* write 再縮 */
  .write-page { padding:14px 12px 60px; }
  .write-page-title { font-size:20px; }
  .write-block { padding:10px 12px; }
  .create-upload-zone .img-slot { width:64px; height:64px; }
  .create-upload-zone .img-slot .upload-hint { font-size:16px; }

  /* form-shell 再縮 */
  .form-shell { padding:16px 14px 14px; }
  .form-shell-title { font-size:18px; }

  /* topbar 細節 */
  body { padding-top:52px; }
  .topbar { height:52px; }
  .topbar-inner { gap:2px; padding:0 6px; }
  .topbar-logo .logo-mark { width:28px; height:28px; font-size:13px; }
  .topbar-search-wrap { display:none; }
  .topbar-icon-btn { width:34px; height:34px; font-size:16px; }
  .topbar-create-btn { width:34px; height:34px; font-size:14px; }
  .topbar-user-btn { width:34px; height:34px; }
  .topbar-user-btn img, .topbar-user-btn .topbar-user-avatar { width:28px; height:28px; font-size:11px; }

  /* sidebar drawer 寬度縮一點 */
  .mobile-drawer { width:260px; }

  /* threads-modal toolbar */
  .threads-modal-toolbar { margin-left:42px; }
}