/* Frontend CSS for XTFU feeds (Grid / Timeline / Media / Filters) */

.xtfu-feed{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px 14px;
}

.xtfu-layout-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 1024px){
  .xtfu-layout-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .xtfu-layout-grid{ grid-template-columns: 1fr; }
}

.xtfu-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
}
.xtfu-tweet{
  border-bottom:1px solid #eee;
  padding:10px 0;
}
.xtfu-tweet:last-child{ border-bottom:none; }

.xtfu-meta{
  font-size:12px;
  color:#6b7280;
  margin-bottom:6px;
}
.xtfu-text{ color:#111827; line-height:1.55; }

.xtfu-loading{ color:#6b7280; }
.xtfu-error{ color:#b91c1c; }

/* Dark scheme */
@media (prefers-color-scheme: dark){
  .xtfu-feed, .xtfu-card{ background:#15202b; border-color:#2f3b44; }
  .xtfu-meta{ color:#9aa7b0; }
  .xtfu-text{ color:#e6ecf0; }
}

/* ===== Glass/Blur Premium Theme ===== */
:root{
  --xtfu-glass-bg: rgba(255,255,255,.55);
  --xtfu-glass-brd: rgba(255,255,255,.35);
  --xtfu-glass-txt: #0f172a;
  --xtfu-gap: 12px;
  --xtfu-radius: 16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --xtfu-glass-bg: rgba(21,32,43,.55);
    --xtfu-glass-brd: rgba(255,255,255,.08);
    --xtfu-glass-txt: #e6ecf0;
  }
}

.xtfu-theme-glass .xtfu-card,
.xtfu-theme-glass.xtfu-feed{
  background: var(--xtfu-glass-bg);
  border: 1px solid var(--xtfu-glass-brd);
  color: var(--xtfu-glass-txt);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--xtfu-radius);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

.xtfu-theme-glass.xtfu-layout-grid{
  gap: var(--xtfu-gap);
}

.xtfu-theme-soft .xtfu-card{ background:#f8fafc; border-color:#e2e8f0; }
@media (prefers-color-scheme: dark){
  .xtfu-theme-soft .xtfu-card{ background:#0f1419; border-color:#2f3b44; }
}

/* Skeleton loader */
.xtfu-skeleton{
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.02), rgba(0,0,0,.06));
  background-size: 200% 100%;
  animation: xTFUShimmer 1.2s infinite;
}
@keyframes xTFUShimmer{
  0%{ background-position: 200% 0 }
  100%{ background-position: -200% 0 }
}

/* Load more button */
.xtfu-loadmore{
  display:block;
  width:100%;
  margin-top:12px;
  text-align:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
}
@media (prefers-color-scheme: dark){
  .xtfu-loadmore{ background:#15202b; border-color:#2f3b44; color:#e6ecf0; }
}

/* Notices / Upsell */
.xtfu-notice{
  border:1px dashed #eab308;
  padding:10px 12px;
  border-radius:12px;
  margin-bottom:10px;
  font-size:14px;
}

/* Neon premium */
.xtfu-theme-neon .xtfu-card,
.xtfu-theme-neon.xtfu-feed{
  background: linear-gradient(160deg, rgba(29,155,240,.12), rgba(244,63,94,.08)), var(--xtfu-glass-bg);
  border:1px solid rgba(29,155,240,.25);
  box-shadow: 0 10px 30px rgba(29,155,240,.15);
}
.xtfu-theme-neon .xtfu-meta{ color:#0ea5e9; }

/* Masonry (columns) */
.xtfu-layout-masonry{ column-count: 3; column-gap: 12px; }
@media(max-width:1024px){ .xtfu-layout-masonry{ column-count: 2; } }
@media(max-width:640px){ .xtfu-layout-masonry{ column-count: 1; } }
.xtfu-layout-masonry .xtfu-card{ break-inside: avoid; margin-bottom: 12px; }

/* Slider (scroll-snap) */
.xtfu-layout-slider{ display:flex; overflow-x:auto; gap:12px; scroll-snap-type:x mandatory; padding-bottom:8px; }
.xtfu-layout-slider .xtfu-card{ min-width: 320px; scroll-snap-align: start; }

/* Stories bar */
.xtfu-stories{ display:flex; gap:10px; padding:6px 4px 10px; margin-bottom:8px; overflow:auto; }
.xtfu-story{ width:56px; height:56px; border-radius:999px; display:grid; place-items:center; font-weight:700; color:#fff;
  background: conic-gradient(from 0deg, var(--xtfu-brand), #f43f5e, #f59e0b, #10b981, var(--xtfu-brand));
  padding:2px; }
.xtfu-story > span{ width:100%; height:100%; border-radius:999px; background:rgba(0,0,0,.35); display:grid; place-items:center; }

/* Lightbox */
.xtfu-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; z-index:99999; }
.xtfu-lightbox img{ max-width:90vw; max-height:90vh; border-radius:12px; }
.xtfu-lightbox.is-open{ display:flex; }

/* Tabs (frontend) */
.xtfu-front-tabs{ display:flex; gap:8px; margin:6px 0 10px; }
.xtfu-front-tabs .xtfu-tab{ padding:6px 10px; border:1px solid #e5e7eb; background:#fff; border-radius:10px; cursor:pointer }
.xtfu-front-tabs .xtfu-tab.is-active{ background:var(--xtfu-brand); color:#fff; border-color:var(--xtfu-brand) }
@media (prefers-color-scheme: dark){
  .xtfu-front-tabs .xtfu-tab{ background:#15202b; border-color:#2f3b44; color:#e6ecf0 }
  .xtfu-front-tabs .xtfu-tab.is-active{ background:var(--xtfu-brand); border-color:var(--xtfu-brand); color:#fff }
}

/* Slider arrows */
.xtfu-slider-nav{ position:relative; }
.xtfu-slider-btn{ position:absolute; top:40%; transform:translateY(-50%); border:none; border-radius:999px; width:36px; height:36px; display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.15); }
.xtfu-slider-btn.prev{ left:6px; } .xtfu-slider-btn.next{ right:6px; }

/* Slider track container */
.xtfu-slider-nav{ position:relative; }
.xtfu-slider-track{ display:flex; gap:12px; overflow:hidden; padding-bottom:8px; }
.xtfu-slider-nav .xtfu-slider-btn{ background:#fff; }
@media (prefers-color-scheme: dark){
  .xtfu-slider-nav .xtfu-slider-btn{ background:#0f1419; color:#e6ecf0; }
}

/* Accent usage */
.xtfu-theme-neon .xtfu-meta{ color: var(--xtfu-secondary); }
.xtfu-badge{ background: var(--xtfu-secondary); color:#fff; padding:2px 6px; border-radius:999px; font-size:11px }

/* Dots for slider */
.xtfu-dots{ display:flex; gap:6px; justify-content:center; margin:6px 0 0 }
.xtfu-dot{ width:8px; height:8px; border-radius:999px; background:rgba(0,0,0,.18) }
@media (prefers-color-scheme: dark){ .xtfu-dot{ background:rgba(255,255,255,.25) } }
.xtfu-dot.is-active{ background: var(--xtfu-accent); }

/* Actions bar */
.xtfu-card{ position:relative; }
.xtfu-actions{ position:absolute; top:8px; right:8px; display:flex; gap:6px; opacity:0; transition:opacity .15s ease; }
.xtfu-card:hover .xtfu-actions{ opacity:1; }
.xtfu-action{ border:1px solid var(--xtfu-border); background:rgba(255,255,255,.85); padding:4px 6px; border-radius:8px; font-size:12px; cursor:pointer }
@media (prefers-color-scheme: dark){ .xtfu-action{ background:rgba(15,20,25,.85); color:#e6ecf0 } }
.xtfu-action.is-bookmarked{ border-color: var(--xtfu-accent); box-shadow: 0 0 0 2px rgba(244,63,94,.2); }

.xtfu-card.is-focus{ outline:2px solid var(--xtfu-accent); outline-offset: 2px; }

.xtfu-hl-bar{display:flex;gap:8px;margin-bottom:8px}
.xtfu-hl-bar button{border:1px solid var(--xtfu-border);padding:6px 10px;border-radius:999px;background:var(--xtfu-card)}
.xtfu-hl-bar .is-active{background:var(--xtfu-brand);color:#fff;border-color:var(--xtfu-brand)}

/* Thread view */
.xtfu-thread{border-left:2px solid rgba(125,125,125,.3); padding-left:10px; margin-left:8px}
.xtfu-reply{margin-left:8px; padding-left:10px; border-left:1px dashed rgba(125,125,125,.25)}