/* ============================================================
   TYAGI CORE — style.css  v2.0 
   Colors: Google-style (Blue/Red/Orange/Sky) — NO dark green
   Dark mode: all colors in :root vars — fully visible
   ============================================================ */

/* ── ROOT VARS ── */ 
:root {
  /* Light */
  --bg:            #f5f7fa;
  --card-bg:       #ffffff;
  --text-color:    #1a1a2e;
  --text-muted:    #354E6E;
  --border-color:  #e2e8f0;

  /* Brand colors — Google palette */
  --blue:          #1052A2;
  --blue-dark:     #1557b0;
  --red:           #AB1912;
  --orange:        #f97316;
  --sky:           #0ea5e9;
  --yellow:        #f4b400;

  /* Accent = blue by default */
  --accent:        #1a73e8;
  --accent-hover:  #1557b0;
  --accent-light:  #e8f0fe;
  --accent-text:   #1a73e8;

  /* Shadows */
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:     0 6px 24px rgba(0,0,0,0.09);
  --shadow-lg:     0 16px 48px rgba(0,0,0,0.12);

  --radius:        12px;
  --transition:    0.22s ease;
}

.dark-mode {
  --bg:            #0d1117;
  --card-bg:       #161b22;
  --text-color:    #e6edf3;
  --text-muted:    #8b949e;
  --border-color:  #30363d;
  --accent:        #58a6ff;
  --accent-hover:  #79b8ff;
  --accent-light:  #1c2d42;
  --accent-text:   #58a6ff;
  --blue:          #58a6ff;
  --red:           #f87171;
  --orange:        #fb923c;
  --sky:           #38bdf8;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {width:100%;
      max-width:1800px;
      margin:auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text-color);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; }

/* Accessibility */
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ── HEADER ── */
.tc-header-bar {
  height: 62px;
  background: var(--card-bg);
  padding: 0 5%;
  position: sticky; top:0; z-index:999;
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  height:100%; display:flex;
  align-items:center; justify-content:space-between; gap:20px;
}
.logo {
  display:flex; align-items:center; gap:8px;
  font-weight:900; font-size:1.35rem;
  text-decoration:none; flex-shrink:0;
  background: linear-gradient(135deg, #1a73e8, #AB1912, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dark-mode .logo {
  background: linear-gradient(135deg, #58a6ff, #f87171, #fb923c);
  -webkit-background-clip: text;
  background-clip: text;
}
.nav { display:flex; gap:22px; align-items:center; }
.nav a {
  font-size:14px; font-weight:600;
  color:var(--text-color);
  padding:4px 2px;
  position:relative;
  transition: color var(--transition);
}
.nav a::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:2px;
  background: var(--accent);
  transition: width var(--transition);
  border-radius:2px;
}
.nav a:hover { color:var(--accent); }
.nav a:hover::after { width:100%; }

.right-icons { display:flex; gap:10px; align-items:center; }
.icon-btn {
  width:38px; height:38px;
  background:none; border:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px;
  transition: background var(--transition);
  color: var(--text-color);
}
.icon-btn:hover { background:var(--border-color); }
.icon-btn svg {
  width:20px; height:20px; fill:none;
  stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.hamburger { display:none; }

/* ── PROGRESS BAR ── */
#reading-progress-container {
  position:fixed; top:62px; left:0;
  width:100%; height:3px; z-index:1001;
  background:transparent;
}
#reading-progress-bar {
  width:0%; height:100%;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  transition: width 0.12s linear;
  will-change: width;
}

/* ── SEARCH MODAL ── */
#searchModal {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(6px);
  display:none; justify-content:center; align-items:flex-start;
  z-index:10000; padding-top:88px;
}
.search-box {
  width:90%; max-width:620px;
  background:var(--card-bg);
  border-radius:16px; overflow:hidden;
  box-shadow: var(--shadow-lg);
  border:1px solid var(--border-color);
  animation: fadeSlide 0.18s ease;
}
@keyframes fadeSlide { from{opacity:0;transform:translateY(-14px);} to{opacity:1;transform:translateY(0);} }
.search-input-area {
  display:flex; align-items:center;
  padding:14px 18px; gap:12px;
  border-bottom:1px solid var(--border-color);
}
.search-input-area input {
  flex:1; border:none; outline:none;
  font-size:17px; font-weight:500;
  background:transparent; color:var(--text-color);
}
.search-input-area input::placeholder { color:var(--text-muted); }
.close-modal {
  background:none; border:none;
  font-size:18px; color:var(--text-muted);
  padding:5px 8px; border-radius:6px;
  transition: background var(--transition);
}
.close-modal:hover { background:var(--border-color); color:var(--text-color); }
#searchResults { max-height:380px; overflow-y:auto; padding:8px; }
.result-item {
  display:flex; gap:13px; padding:11px; border-radius:9px;
  align-items:center; border-bottom:1px solid var(--border-color);
  transition: background var(--transition); color:inherit;
}
.result-item:hover { background:var(--bg); }
.result-item img { width:58px; height:42px; border-radius:7px; object-fit:cover; flex-shrink:0; }
.result-item h4 { font-size:14px; color:var(--accent); margin-bottom:3px; }
.result-item p  { font-size:12px; color:var(--text-muted); }

/* ── MOBILE MENU ── */
.mobile-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:none; z-index:1000; }
.mobile-overlay.active { display:block; }
.mobile-menu {
  position:fixed; top:0; left:-100%;
  width:min(75%, 288px); height:100%;
  background:var(--card-bg); padding:22px 20px;
  transition:left 0.32s ease; z-index:1001; overflow-y:auto;
}
.mobile-menu.active { left:0; }
.mobile-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:26px; font-weight:900; font-size:18px;
  color:var(--accent);
}
.mobile-nav { display:flex; flex-direction:column; gap:4px; }
.mobile-nav a {
  font-weight:600; font-size:15px; color:var(--text-color);
  padding:11px 12px; border-radius:9px;
  transition: background var(--transition), color var(--transition);
}
.mobile-nav a:hover { background:var(--accent-light); color:var(--accent); }

/* ── HERO ── */
.tc-hero {
  padding:72px 5%; text-align:center;
  background: linear-gradient(135deg, #1a73e8 0%, #AB1912 40%, #f97316 70%, #0ea5e9 100%);
  background-size:300% 300%;
  animation: gradMove 10s ease infinite;
  color:#fff; position:relative; overflow:hidden;
}
@keyframes gradMove {
  0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;}
}
.tc-hero::before {
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,0.15); pointer-events:none;
}
.hero-content { position:relative; z-index:1; max-width:680px; margin:0 auto; }
.hero-badge {
  display:inline-block;
  background:rgba(255,255,255,0.22); border:1px solid rgba(255,255,255,0.45);
  padding:6px 18px; border-radius:100px;
  font-size:13px; font-weight:700; margin-bottom:20px;
}
.tc-hero h1 { font-size:clamp(28px,5vw,52px); font-weight:900; line-height:1.15; margin-bottom:14px; }
.tc-hero p  { font-size:clamp(15px,2vw,18px); margin-bottom:28px; opacity:0.92; }
.hero-btns  { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn {
  padding:12px 26px; border-radius:9px;
  font-weight:700; font-size:15px;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration:none;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary {
  background:#fff; color:#1a73e8 !important;
  box-shadow:0 4px 14px rgba(0,0,0,0.2);
}
.btn-primary:hover { box-shadow:0 6px 22px rgba(0,0,0,0.3); }
.btn-outline {
  border:2px solid rgba(255,255,255,0.8); color:#fff !important;
  background:rgba(255,255,255,0.12);
}
.btn-outline:hover { background:rgba(255,255,255,0.28); }

/* ── LAYOUT ── */
.tc-wrapper {
  display:grid; grid-template-columns:1fr 290px;
  gap:32px; padding:38px 5%; align-items:start;
}
.tc-left { min-width:0; }
.tc-sidebar {
  position:sticky; top:80px;
  max-height:calc(100vh - 100px); overflow-y:auto; scrollbar-width:none;
}
.tc-sidebar::-webkit-scrollbar { display:none; }

/* ── SIDEBAR COMPONENTS ── */
.box {
  background:var(--card-bg);
  padding:12px 15px;
  border-radius:var(--radius);
  border:1px solid var(--border-color);
  margin-bottom:14px;
  font-weight:700; font-size:14px;
  color:var(--text-color);
}
.trend-card {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; margin-bottom:13px;
  padding:5px; border-radius:9px;
  transition: transform var(--transition);
}
.trend-card:hover { transform:translateX(4px); }
.trend-thumb {
  width:62px; height:44px; object-fit:cover;
  border-radius:7px; border:1px solid var(--border-color); flex-shrink:0;
}
.trend-title {
  font-size:13px; font-weight:600; color:var(--text-color);
  line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.trend-card:hover .trend-title { color:var(--accent); }

/* Social Hub */
.tyagi-social-hub { display:flex; flex-direction:column; gap:7px; }
.hub-card {
  display:flex; align-items:center; padding:9px 11px;
  border-radius:10px; text-decoration:none !important;
  background:var(--card-bg); border:1px solid var(--border-color);
  transition: all var(--transition);
}
.hub-icon {
  width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; margin-right:10px; flex-shrink:0;
}
.hub-info { flex:1; }
.hub-name { display:block; font-weight:700; font-size:13px; color:var(--text-color); }
.hub-desc { display:block; font-size:10px; color:var(--text-muted); text-transform:uppercase; }
.hub-action {
  font-size:10px; font-weight:700; text-transform:uppercase;
  padding:4px 10px; border-radius:14px;
  background:var(--bg); color:var(--text-muted);
  border:1px solid var(--border-color);
  transition: all var(--transition);
}
.hub-card:hover .hub-action { background:var(--accent); color:#fff; border-color:var(--accent); }
.yt-main:hover   { border-color:#ff0000; } .yt-main .hub-icon   { background:#fee2e2; color:#ff0000; }
.study-card:hover{ border-color:#1a73e8; } .study-card .hub-icon{ background:#e8f0fe; color:#1a73e8; }
.ig-card:hover   { border-color:#e1306c; } .ig-card .hub-icon   { background:#fdf2f8; color:#e1306c; }
.fb-card:hover   { border-color:#1877f2; } .fb-card .hub-icon   { background:#eff6ff; color:#1877f2; }
.tg-card:hover   { border-color:#0088cc; } .tg-card .hub-icon   { background:#f0f9ff; color:#0088cc; }

/* App Cards */
.tyagi-app-container { display:flex; flex-direction:column; gap:8px; }
.app-card {
  display:flex; align-items:center; gap:10px;
  background:var(--card-bg); border:1px solid var(--border-color);
  padding:10px; border-radius:11px; transition:all var(--transition);
}
.app-card:hover { border-color:var(--blue); transform:translateY(-2px); }
.app-logo-box {
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:12px; flex-shrink:0;
}
.app-details { flex:1; }
.app-name { display:block; font-size:13px; font-weight:700; color:var(--text-color); }
.app-meta { display:block; font-size:11px; color:var(--text-muted); }
.download-btn {
  font-size:11px; font-weight:700;
  padding:6px 11px; border-radius:20px;
  background:var(--bg); color:var(--blue);
  border:1px solid var(--border-color); white-space:nowrap;
}

/* ── TOC ── */
.toc-container {
  background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:var(--radius); padding:16px 18px; margin:0 0 26px;
  border-left:3px solid var(--blue);
}
.toc-title {
  font-weight:800; font-size:12px; margin-bottom:12px;
  color:var(--text-muted); letter-spacing:1px; text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
#toc-list { padding:0; max-height:90px; overflow:hidden; transition:max-height 0.4s ease; }
#toc-list.expanded { max-height:1200px; }
#toc-list li { margin-bottom:8px; border-left:2px solid var(--border-color); padding-left:13px; }
#toc-list a {
  text-decoration:none; color:var(--text-color);
  font-size:13px; opacity:0.7; display:block;
  transition:all var(--transition);
}
#toc-list a:hover { opacity:1; color:var(--accent); transform:translateX(3px); }
.toc-see-more {
  display:block; text-align:center; padding:9px;
  cursor:pointer; color:var(--text-muted); font-weight:700; font-size:12px;
  background:none; border:none; width:100%; margin-top:4px;
  transition:color var(--transition);
}
.toc-see-more:hover { color:var(--accent); }

/* ── POST CARDS (Index) ── */
.cat-full-width-scroll {
  width:100%; border-bottom:1px solid var(--border-color);
  padding:13px 0; margin-bottom:20px;
}
.cat-inner-scroll {
  display:block; overflow-x:auto; white-space:nowrap;
  padding:0 2%; scrollbar-width:none;
}
.cat-inner-scroll::-webkit-scrollbar { display:none; }
.cat-btn {
  display:inline-block; padding:7px 18px; margin-right:8px;
  background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:50px; font-size:13px; font-weight:700;
  cursor:pointer; color:var(--text-color); transition:all var(--transition);
}
.cat-btn.active, .cat-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

.horizontal-post-card {
  display:none; background:var(--card-bg);
  border-radius:var(--radius); margin-bottom:16px;
  overflow:hidden; height:188px;
  border:1px solid var(--border-color);
  transition:all var(--transition);
}
.horizontal-post-card:hover { border-color:var(--accent); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.post-img { width:34%; min-width:120px; flex-shrink:0; }
.post-img img { width:100%; height:100%; object-fit:cover; }
.post-info { flex:1; padding:15px; display:flex; flex-direction:column; justify-content:space-between; min-width:0; }
.post-info h2 { font-size:16px; font-weight:800; line-height:1.3; margin-bottom:5px; }
.post-info h2 a { text-decoration:none; color:var(--text-color); }
.post-info h2 a:hover { color:var(--accent); }
.post-info p { font-size:13px; color:var(--text-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; }
.native-share-btn {
  background:var(--bg); color:var(--text-color);
  border:1px solid var(--border-color); padding:7px 12px;
  border-radius:7px; font-size:12px; font-weight:700;
  display:flex; align-items:center; gap:5px; transition:all var(--transition);
}
.native-share-btn:hover { background:var(--border-color); color:var(--accent); }
.read-link {
  color:#fff !important; background:var(--accent);
  font-weight:700; font-size:12px; padding:7px 13px;
  border-radius:7px; transition:background var(--transition); white-space:nowrap;
}
.read-link:hover { background:var(--accent-hover); }
.pagination-center {
  text-align:center; padding:26px 0;
  display:flex; justify-content:center; gap:8px; flex-wrap:wrap;
}
.page-btn {
  padding:8px 15px; border:1px solid var(--border-color);
  background:var(--card-bg); color:var(--text-color);
  border-radius:8px; font-weight:700; font-size:14px;
  transition:all var(--transition);
}
.page-btn.active, .page-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ── POST NAVIGATION (FIXED) ── */
.post-nav-container {
  display:flex; justify-content:space-between;
  gap:16px; margin:44px 0; flex-wrap:wrap;
}
.post-nav-link {
  flex:1; min-width:200px;
  background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:var(--radius); transition:all var(--transition);
  overflow:hidden;
}
.post-nav-link:empty { display:none; }
.post-nav-link a {
  display:block; width:100%; padding:16px 18px;
  text-decoration:none; color:var(--text-color);
}
.nav-label {
  font-size:11px; font-weight:800; color:var(--accent);
  text-transform:uppercase; letter-spacing:1.5px;
  display:block; margin-bottom:6px;
}
.nav-post-title {
  font-size:14px; font-weight:700; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--text-color);
}
.post-nav-link:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-md); }
.post-nav-link.next { text-align:right; }
.post-nav-link.prev:not(:has(a)) { display:none; }
.post-nav-link.next:not(:has(a)) { display:none; }

/* ── SHARE ── */
.share-wrapper {
  margin:36px 0; padding:26px; text-align:center;
  border-top:1px dashed var(--border-color);
}
.share-label { font-size:14px; margin-bottom:13px; color:var(--text-muted); }
.tyagi-share-btn {
  background:var(--accent); color:#fff !important; border:none;
  padding:12px 28px; border-radius:8px; font-weight:700; font-size:14px;
  display:inline-flex; align-items:center; gap:10px;
  box-shadow:0 4px 14px rgba(26,115,232,0.35);
  transition:all var(--transition);
}
.tyagi-share-btn:hover { transform:translateY(-2px); background:var(--accent-hover); box-shadow:0 6px 20px rgba(26,115,232,0.5); }

/* ── CODE ── */
pre {
  background:#0d1117; color:#e6edf3;
  padding:20px; border-radius:var(--radius);
  position:relative; overflow-x:auto;
  border:1px solid #30363d; margin:18px 0;
  font-family:'Fira Code','Courier New',monospace; font-size:14px; line-height:1.6;
}
code { font-family:'Fira Code','Courier New',monospace; font-size:13px; }
:not(pre)>code {
  background:var(--border-color); padding:2px 7px;
  border-radius:4px; font-size:13px; color:var(--red);
}
.copy-btn {
  position:absolute; top:10px; right:10px;
  background:var(--blue); color:#fff; border:none;
  padding:4px 11px; font-size:11px; font-weight:700;
  border-radius:5px; opacity:0; transition:all var(--transition);
}
pre:hover .copy-btn { opacity:1; }
.copy-btn:hover { background:var(--blue-dark); }

/* ── THEME TOGGLE ── */
.theme-wheel {
  position:fixed; bottom:80px; right:22px;
  width:48px; height:48px;
  background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:9999; box-shadow:var(--shadow-md);
  transition:all var(--transition);
}
@media(min-width:768px){ .theme-wheel { top:22px; bottom:auto; } }
.theme-wheel:hover { transform:scale(1.1); }
.wheel-icon-wrap {
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.moon-icon, .sun-icon { position:absolute; font-size:19px; transition:all 0.4s ease; }
.moon-icon { color:var(--text-color); opacity:1; transform:scale(1); }
.sun-icon  { color:var(--yellow); opacity:0; transform:scale(0) rotate(-180deg); }
.dark-mode .moon-icon { opacity:0; transform:scale(0) rotate(180deg); }
.dark-mode .sun-icon  { opacity:1; transform:scale(1) rotate(0deg); }
.wheel-spin { animation:wSpin 0.65s ease; }
@keyframes wSpin { to{transform:rotate(360deg);} }

/* ── SCROLL TOP ── */
#tyagi-top-wrap {
  position:fixed; bottom:22px; right:22px;
  height:48px; width:48px; cursor:pointer;
  border-radius:50%; z-index:9998;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:all 0.28s ease;
  background:var(--card-bg); border:1px solid var(--border-color);
  box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center;
}
#tyagi-top-wrap.active-progress { opacity:1; visibility:visible; transform:translateY(0); }
#tyagi-top-wrap:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.top-arrow-icon { font-size:15px; color:var(--accent); position:absolute; }
.tyagi-progress-svg { position:absolute; inset:0; border-radius:50%; }
.tyagi-progress-svg path { fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; }

/* ── COMMENTS ── */
#tc-root {
  max-width:800px; margin:28px auto 40px;
  border:1px solid var(--border-color); border-radius:16px;
  background:var(--card-bg); overflow:hidden;
}
.tc-comments-header {
  padding:15px 20px; border-bottom:1px solid var(--border-color);
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.tc-ps-rating { display:flex; align-items:center; gap:10px; margin-top:5px; }
.tc-avg-big { font-size:28px; font-weight:800; color:var(--text-color); }
.tc-ps-stars-wrap { display:flex; flex-direction:column; }
.tc-stars-fs { color:var(--yellow); font-size:14px; }
.tc-total-v  { font-size:11px; color:var(--text-muted); }

.tc-user-pill {
  display:flex; align-items:center; gap:8px;
  background:var(--bg); border:1px solid var(--border-color);
  padding:5px 12px; border-radius:20px;
}
.tc-pfp-small { width:26px; height:26px; border-radius:50%; object-fit:cover; }
.tc-u-name   { font-size:12px; font-weight:700; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-color); }
.tc-logout-btn { border:none; background:none; color:var(--red); font-size:11px; font-weight:700; }

.tc-user-rate-box { padding:11px; text-align:center; border-bottom:1px solid var(--border-color); }
.tc-stars-input { font-size:28px; color:var(--border-color); cursor:pointer; user-select:none; }
.tc-s { transition:color 0.15s; }
.tc-s.active { color:var(--yellow); }

.tc-editor-box { padding:15px 18px; border-bottom:1px solid var(--border-color); }
textarea {
  background:var(--bg); color:var(--text-color); width:100%; height:70px;
  padding:11px; border:1px solid var(--border-color); border-radius:9px;
  resize:vertical; font-family:inherit; font-size:14px; outline:none;
  transition:border-color var(--transition);
}
textarea:focus { border-color:var(--accent); }
.tc-post-btn {
  background:var(--blue); color:#fff; border:none;
  padding:8px 18px; border-radius:7px; font-weight:700; font-size:13px;
  transition:background var(--transition);
}
.tc-post-btn:hover { background:var(--blue-dark); }
.tc-feed { max-height:520px; overflow-y:auto; scrollbar-width:thin; }

/* COMMENT CARD — Fixed: name beside avatar, not below */
.tc-card { padding:13px 18px; border-bottom:1px solid var(--border-color); }
.tc-card.pending { opacity:0.55; border-left:3px solid var(--yellow); }
.tc-card.reply   { margin-left:40px; background:var(--bg); border-left:2px solid var(--border-color); }

.tc-card-meta {
  display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap;
}
.tc-card-pfp { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.tc-card-name { font-weight:700; font-size:14px; color:var(--text-color); }
.tc-admin-badge {
  background:var(--blue); color:#fff; font-size:9px;
  padding:2px 6px; border-radius:4px; font-weight:700;
}
.tc-card-time { font-size:11px; color:var(--text-muted); margin-left:auto; }
.tc-card-body  { font-size:14px; color:var(--text-color); line-height:1.65; padding-left:40px; }
.tc-actions {
  padding-left:40px; margin-top:8px;
  display:flex; gap:14px;
}
.tc-actions button {
  background:none; border:none; color:var(--blue);
  font-size:12px; font-weight:700; transition:color var(--transition);
}
.tc-actions button:hover { color:var(--accent); }
.tc-inline-box { padding-left:40px; margin-top:8px; }

/* ── BOTTOM SECTION ── */
.tc-bottom-section { background:var(--bg); }
.tc-ultra-final { padding:76px 5%; position:relative; overflow:hidden; }
.bg-mesh {
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(26,115,232,0.08) 1px, transparent 0);
  background-size:36px 36px;
}
.section-header { text-align:center; margin-bottom:52px; }
.badge {
  display:inline-block; background:var(--accent-light); color:var(--accent);
  padding:5px 16px; border-radius:100px; font-size:12px; font-weight:700; margin-bottom:14px;
}
.section-header h2 { font-size:clamp(22px,4vw,38px); font-weight:900; margin-bottom:12px; color:var(--text-color); }
.subtext { max-width:680px; margin:0 auto; font-size:16px; line-height:1.8; color:var(--text-muted); }
.tc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tc-feat-card {
  background:var(--card-bg); padding:36px 28px;
  border-radius:18px; border:1px solid var(--border-color);
  transition:all 0.35s ease;
}
.tc-feat-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.feat-icon { margin-bottom:20px; }
.tc-feat-card h3 { font-size:18px; font-weight:800; margin-bottom:12px; color:var(--text-color); }
.tc-feat-card p  { font-size:15px; line-height:1.8; color:var(--text-muted); }

/* ── STATIC PAGES (about/privacy/terms) ── */
.static-page { max-width:820px; margin:0 auto; padding:20px 0 40px; }
.static-page h1 { font-size:clamp(26px,4vw,40px); font-weight:900; margin-bottom:16px; color:var(--text-color); }
.static-page h2 { font-size:20px; font-weight:700; margin:32px 0 11px; color:var(--accent); }
.static-page p  { margin-bottom:13px; line-height:1.85; color:var(--text-color); opacity:0.85; }
.static-page ul { padding-left:20px; list-style:disc; margin-bottom:13px; }
.static-page li { margin-bottom:7px; color:var(--text-color); opacity:0.82; }
.static-page a  { color:var(--accent); text-decoration:underline; }

/* Lang toggle */
.lang-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:8px;
  background:var(--accent-light); color:var(--accent);
  border:1px solid var(--accent); font-weight:700; font-size:13px;
  cursor:pointer; margin-bottom:24px; transition:all var(--transition);
}
.lang-btn:hover { background:var(--accent); color:#fff; }

/* ── FOOTER ── */
.tc-footer {
  background:var(--card-bg); padding:48px 5% 24px;
  border-top:1px solid var(--border-color);
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:26px; margin-bottom:32px; }
.footer-grid h3 { font-size:16px; font-weight:800; margin-bottom:9px; color:var(--text-color); }
.footer-grid h4 { font-size:12px; font-weight:700; margin-bottom:9px; color:var(--accent); text-transform:uppercase; letter-spacing:0.5px; }
.footer-grid p, .footer-grid a { font-size:14px; color:var(--text-muted); margin-bottom:6px; display:block; transition:color var(--transition); }
.footer-grid a:hover { color:var(--accent); }
.footer-bottom { text-align:center; font-size:13px; color:var(--text-muted); border-top:1px solid var(--border-color); padding-top:18px; }

/* ── 404 ── */
.page-404 { text-align:center; padding:80px 20px; }
.page-404 .err-emoji { font-size:72px; margin-bottom:18px; }
.page-404 h1 { font-size:clamp(26px,5vw,50px); font-weight:900; margin-bottom:14px; color:var(--text-color); }
.page-404 p  { font-size:17px; color:var(--text-muted); margin-bottom:30px; }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .nav { display:none; }
  .hamburger { display:flex !important; }
  .tc-wrapper { grid-template-columns:1fr; }
  .tc-sidebar { position:static; max-height:none; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .tc-grid { grid-template-columns:1fr; }
}
@media(max-width:640px){
  .horizontal-post-card { flex-direction:column; height:auto; }
  .post-img { width:100%; height:168px; }
  .post-info { width:100%; }
  .post-nav-container { flex-direction:column; }
  .post-nav-link.next { text-align:left; }
  .footer-grid { grid-template-columns:1fr; }
  .tc-hero { padding:48px 5%; }
  .tc-wrapper { padding:24px 4%; }
}
@media(max-width:480px){
  .hero-btns { flex-direction:column; align-items:center; }
  .tc-comments-header { flex-direction:column; align-items:flex-start; }
}

/* ── NAV DISABLED ── */
.nav-disabled {
  display: block;
  padding: 16px 18px;
  color: var(--text-muted);
  cursor: default;
}
.nav-disabled .nav-label { color: var(--text-muted); opacity: 0.5; }

/* ── AUTO-GENERATED IMAGE (canvas fallback) ── */
.auto-thumb-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.auto-thumb-wrap canvas {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ── POST ARTICLE CONTENT STYLES ── */
.post-content { font-size: 16px; line-height: 1.9; color: var(--text-color); }
.post-content h2 { font-size: 22px; font-weight: 800; margin: 36px 0 14px; color: var(--text-color); border-left: 4px solid var(--accent); padding-left: 14px; }
.post-content h3 { font-size: 18px; font-weight: 700; margin: 28px 0 12px; color: var(--text-color); }
.post-content h4 { font-size: 16px; font-weight: 700; margin: 22px 0 10px; color: var(--accent); }
.post-content p  { margin-bottom: 18px; }
.post-content ul, .post-content ol { padding-left: 22px; margin-bottom: 18px; }
.post-content li { margin-bottom: 8px; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content strong { font-weight: 700; color: var(--text-color); }
.post-content em { font-style: italic; color: var(--text-muted); }
.post-content blockquote {
  border-left: 4px solid var(--orange);
  padding: 14px 18px;
  margin: 22px 0;
  background: var(--accent-light);
  border-radius: 0 10px 10px 0;
  font-style: italic;
}
.post-content table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14px; }
.post-content th { background: var(--accent); color: #fff; padding: 10px 14px; text-align: left; }
.post-content td { padding: 10px 14px; border-bottom: 1px solid var(--border-color); }
.post-content tr:hover td { background: var(--accent-light); }

/* Post hero image */
.post-hero-img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
  border: 1px solid var(--border-color);
}
.post-hero-img img,
.post-hero-img canvas {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Tip boxes */
.tip-box {
  padding: 16px 18px;
  border-radius: 10px;
  margin: 22px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.tip-box.warning { background: #fef3c7; border-left: 4px solid #f59e0b; }
.tip-box.danger  { background: #fee2e2; border-left: 4px solid var(--red); }
.tip-box.info    { background: var(--accent-light); border-left: 4px solid var(--accent); }
.tip-box.success { background: #dcfce7; border-left: 4px solid #22c55e; }
.tip-box .tip-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.tip-box .tip-text { font-size: 14px; line-height: 1.7; }
.dark-mode .tip-box.warning { background: #422006; }
.dark-mode .tip-box.danger  { background: #450a0a; }
.dark-mode .tip-box.info    { background: var(--accent-light); }
.dark-mode .tip-box.success { background: #052e16; }