:root {
  --bg-all: #f8f9fa;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f9fa;
  --bg-input: #ffffff;
  --text-main: #212529;
  --text-sub: #6c757d;
  --primary: #667eea;
  --primary-dark: #764ba2;
  --radius-lg: 15px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,.12);
  --gap: 16px;
  --font-zh: "微軟正黑體", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-all);
  color: var(--text-main);
  font-family: var(--font-zh);
  line-height: 1.6;
}

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

button {
  font-family: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ===== Layout Base (Bootstrap Compatible) ===== */
.layout {
  min-height: 100vh;
}

/* 優化滾動條 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 動畫效果 */
.post-card-modern {
  animation: fadeInUp 0.5s ease-out;
}

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

/* 按鈕懸停效果 */
.btn:hover {
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* 互動按鈕動畫 */
.btn-like:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* 輪播改進 */
.carousel-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* 分享彈窗改進 */
.share-overlay {
  backdrop-filter: blur(10px);
}

.share-modal {
  border-radius: var(--radius-lg);
  border: none;
}

/* 載入動畫 */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0,0,0,.1);
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 移除舊版樣式，避免衝突 */

/* 搜尋欄往右移一些：靠右對齊並縮小左右邊距 */
header.topbar .search-inline{
  flex: 1 1 360px;            /* 基準 360px */
  max-width: 560px;
  display: flex; justify-content: flex-end; /* 向右對齊 */
  margin: 0 8px 0 auto;       /* 往右推一點 */
}
header.topbar .search-inline input{
  width: 100%;
  padding: 10px 16px;
  font-size: 1rem;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: var(--radius-lg);
  background: var(--bg-input);
  outline: none;
  max-width: 420px;           /* 讓輸入框不要太寬 */
}
header.topbar .search-inline input:focus{
  border-color: #9c45ff;
  box-shadow: 0 0 0 2px rgba(156,69,255,.2);
}

/* 導覽連結 */
header.topbar nav{
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
}
header.topbar .brand-area img{width:40px;height:40px;border-radius:50%;}
header.topbar nav a{margin-left:16px;font-size:.95rem;color:#9c45ff;}
header.topbar nav a:hover{text-decoration:underline;}

/* ===== Bootstrap Layout Override (removed conflicting grid layout) ===== */
/* Removed old grid layout that conflicts with Bootstrap */

/* ===== 貼文卡 ===== */
.post-card{background:var(--bg-card);padding:24px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.post-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.post-header img.avatar{width:48px;height:48px;border-radius:50%;}
.post-user-info{display:flex;flex-direction:column;line-height:1.1;}
.post-username{font-weight:bold;font-size:1.05rem;}
.post-timestamp{font-size:.8rem;color:var(--text-sub);}
.post-text{margin:12px 0;font-size:1rem;word-break:break-word;}

/* 單圖/影片容器共用 */
.post-media-single{max-width:600px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;}
.post-media-single video{width:100%;display:block;}

/* 輪播 */
.carousel-wrapper{position:relative;max-width:600px;margin:0 auto;overflow:hidden;}
.carousel-wrapper .carousel-track{display:flex;transition:transform .4s ease;}
.carousel-wrapper .carousel-track img{width:600px;max-width:100%;flex:0 0 100%;object-fit:cover;aspect-ratio:4/3;}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.8);border:none;padding:4px 8px;border-radius:var(--radius-sm);cursor:pointer;font-size:1.25rem;line-height:1;}
.carousel-btn:hover{background:#fff;}
.carousel-btn.prev{left:4px;}
.carousel-btn.next{right:4px;}
.carousel-indicators{display:flex;justify-content:center;gap:4px;margin-top:8px;}
.carousel-indicators button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(0,0,0,.15);cursor:pointer;padding:0;}
.carousel-indicators button.active{background:rgba(0,0,0,.6);}

/* 互動列 */
.post-actions{display:flex;align-items:center;gap:16px;margin-top:16px;font-size:.95rem;}
.post-actions button{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;font-size:.95rem;border:none;border-radius:var(--radius-sm);cursor:pointer;background:rgba(0,0,0,.05);}
.post-actions button:hover{background:rgba(0,0,0,.12);}
.post-actions button.hearted{color:#e0245e;background:rgba(224,36,94,.15);}

/* 留言 */
.comments-wrapper{margin-top:20px;background:rgba(255,255,255,.45);padding:16px;border-radius:var(--radius-lg);}
.comment-item{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;}
.comment-item img{width:28px;height:28px;border-radius:50%;margin-top:2px;}
.comment-bubble{flex:1;background:var(--bg-input);padding:8px 12px;border-radius:var(--radius-sm);position:relative;}
.comment-author{font-weight:bold;font-size:.9rem;margin-bottom:2px;}
.comment-text{font-size:.9rem;}
.comment-footer{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-sub);margin-top:4px;}
.comment-footer button{border:none;background:none;padding:0;margin:0;cursor:pointer;font-size:.8rem;display:inline-flex;align-items:center;gap:2px;color:inherit;}
.comment-footer button.liked{color:#e89b00;font-weight:bold;}
.reply-thread{margin-left:48px;margin-top:8px;display:grid;gap:8px;}
.add-comment{display:flex;align-items:center;gap:8px;margin-top:12px;}
.add-comment input[type="text"]{flex:1;padding:8px 12px;border:1px solid rgba(0,0,0,.15);border-radius:var(--radius-sm);font-size:.95rem;background:var(--bg-input);}
.add-comment button.send{padding:8px 16px;background:#ffb454;border:none;border-radius:var(--radius-sm);cursor:pointer;font-weight:bold;}
.add-comment button.send:hover{background:#ff9900;}

/* 分享彈窗 */
.share-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.4);z-index:1000;padding:16px;}
.share-overlay.active{display:flex;}
.share-modal{max-width:90vw;width:480px;max-height:90vh;overflow-y:auto;background:var(--bg-card);padding:24px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);}
.share-modal h3{margin-top:0;}
.share-preview{width:100%;margin-bottom:16px;border-radius:var(--radius-sm);overflow:hidden;}
.share-channels{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;}
.share-channels button{flex:0 0 auto;padding:8px 12px;border:none;border-radius:var(--radius-sm);background:rgba(0,0,0,.05);cursor:pointer;font-size:.9rem;}
.share-channels button:hover{background:rgba(0,0,0,.12);}
.share-close{position:absolute;top:8px;right:12px;border:none;background:none;font-size:1.25rem;cursor:pointer;}
.repost-info{font-size:.85rem;color:var(--text-sub);margin-bottom:4px;display:flex;align-items:center;gap:4px;}

/* RWD - Bootstrap Compatible */
@media (max-width:768px){
  .post-header img.avatar{width:40px;height:40px;}
  header.topbar .search-inline{margin: 8px 4px 0 auto; flex: 1 1 100%;}
  header.topbar{flex-wrap:wrap; row-gap: 8px;}
}

/* ===== 使用者主頁樣式 ===== */
.profile-card{
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--gap);
}
.profile-banner{
  height: 180px;
  background: #ddd center/cover no-repeat;
  position: relative;
}
.profile-avatar{
  width: 96px; height: 96px; border-radius: 50%;
  position: absolute; left: 24px; bottom: -48px;
  border: 4px solid var(--bg-card);
  background: #fff;
  object-fit: cover;
}
.profile-meta{
  padding: 56px 24px 16px 24px; /* 預留頭像高度 */
}
.profile-name{ font-weight: bold; font-size: 1.25rem; }
.profile-handle{ color: var(--text-sub); font-size: .95rem; }
.profile-stats{ display:flex; gap:16px; margin-top:8px; color:var(--text-sub); font-size:.95rem; }
.profile-stats b{ color: var(--text-main); }
.profile-actions{ margin-top:12px; display:flex; gap:8px; }
.profile-actions .btn{
  border:none; cursor:pointer; padding:8px 12px; border-radius: var(--radius-sm);
  background: rgba(0,0,0,.05);
}
.profile-actions .btn:hover{ background: rgba(0,0,0,.12); }
.profile-back{
  display:inline-flex; align-items:center; gap:6px;
  margin: 0 0 12px 0; font-size:.95rem; cursor:pointer;
  color:#9c45ff; background:none; border:none; padding:0;
}
.profile-back:hover{ text-decoration: underline; }

@media (max-width:768px){
  .profile-banner{ height: 140px; }
  .profile-avatar{ width: 80px; height: 80px; bottom: -40px; }
  .profile-meta{ padding-top: 48px; }
}