:root {
  --bg-color: #eef3f8;
  --sidebar-color: #000000;
  --card-bg: #1c1c1e;
  --text-main: #ffffff;
  --text-muted: #aaaaaa;
  --accent-red: #ff0055;
  --pill-bg: rgba(255, 255, 255, 0.1);
  --pill-hover: rgba(255, 255, 255, 0.2);
  --line: rgba(255, 255, 255, 0.1);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(225, 48, 108, 0.12), transparent 22%),
    radial-gradient(circle at top right, rgba(29, 161, 242, 0.12), transparent 18%),
    linear-gradient(180deg, #f8fbff 0%, var(--bg-color) 100%);
  color: var(--text-main);
  padding: 24px 24px 24px 280px;
  overflow-x: hidden;
}

a {
  color: inherit;
}

.civic-side-nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: 260px;
  height: 100vh;
  background: #ffffff;
  border-right: 1px solid #f1f5f9;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  z-index: 40;
}

.nav-brand-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 12px;
  margin-bottom: 28px;
}

.brand-app-name {
  font-size: 1.22rem;
  font-weight: 800;
  color: #0f172a;
  text-decoration: none;
  letter-spacing: -0.5px;
  line-height: 1.1;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.brand-lightning-art {
  display: block;
  width: 200px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  transform: translateX(0px);
  user-select: none;
  -webkit-user-select: none;
}

.nav-links-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-pill-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  color: #475569;
  text-decoration: none;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-box {
  font-size: 1.25rem;
  width: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease;
}

.nav-pill-row:hover {
  background: #f8fafc;
  color: #0f172a;
}

.nav-pill-row:hover .icon-box {
  transform: scale(1.1);
}

.nav-pill-row:active {
  transform: scale(0.97);
}

.active-pill {
  background: #f1f5f9;
  color: #4f46e5;
}

.active-pill .icon-box {
  color: #4f46e5;
}

.oversight-highlight:hover {
  background: #fff1f2;
  color: #e11d48;
}

.nav-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 12px 14px;
}

.create-btn-pill {
  background: #f0fdf4;
  color: #16a34a;
}

.create-btn-pill:hover {
  background: #dcfce7;
  color: #15803d;
}

.nav-user-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #f8fafc;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.nav-user-profile-card:hover {
  background: #f1f5f9;
}

.avatar-ring {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
}

.user-info-text {
  display: flex;
  flex-direction: column;
}

.user-display-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}

.user-role-tag {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 500;
}

button,
input {
  font: inherit;
}

/* Master Layout Framework */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Sidebar - Inspired by YouTube Navigation */
.sidebar {
  width: 240px;
  background-color: var(--sidebar-color);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  gap: 18px;
}

.logo {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 0, 85, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.logo-text {
  display: grid;
  gap: 2px;
}

.logo-text strong {
  line-height: 1.1;
}

.logo-text small {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.2;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--text-main);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
  transition: background 0.2s ease;
}

.nav-item:hover,
.nav-item.active {
  background-color: var(--pill-bg);
}

.nav-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-icon svg {
  width: 20px;
  height: 20px;
}

.sidebar-card {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 16px;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-card-label,
.eyebrow {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sidebar-card strong {
  font-size: 1rem;
  line-height: 1.35;
}

.sidebar-card p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Main Dashboard Engine */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: visible;
  min-width: 0;
}

.top-bar {
  height: 60px;
  padding: 10px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background-color: rgba(15, 15, 15, 0.8);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.top-bar h1 {
  margin: 4px 0 0;
  font-size: clamp(1.15rem, 1.4vw, 1.7rem);
  line-height: 1.1;
}

.feed-status {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.search-shell {
  width: min(100%, 560px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.search-icon {
  display: inline-grid;
  place-items: center;
  color: var(--text-muted);
}

.search-icon svg {
  width: 20px;
  height: 20px;
}

.search-input {
  width: 100%;
  max-width: 400px;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 16px;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  outline: none;
}

.search-input::placeholder {
  color: var(--text-muted);
}

/* Hybrid Feed Layout (YouTube Rows x Instagram Elements) */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 40px;
}

.hybrid-card {
  background: #ffffff;
  color: #111827;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  /* Prelaunch polish: infinite scroll can grow this grid to hundreds of cards - content-visibility
     lets the browser skip layout/paint work for cards far off-screen without changing what's
     rendered or its layout once visible. contain-intrinsic-size is only a placeholder-size hint
     used before a card is first measured, not a fixed height. */
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

.hybrid-card:hover {
  transform: translateY(-4px);
}

.hybrid-card .creator-name,
.hybrid-card .summary,
.hybrid-card .view-line,
.hybrid-card .source-label {
  color: #5f6b7a;
}

.hybrid-card .tag-chip {
  color: #4b5563;
  border-color: #e5e7eb;
}

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.feed-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.feed-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duration-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* Dynamic Progress Bar Layout */
.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-red);
  transition: width 0.1s linear;
}

/* Post Meta & Instagram Toolbar
   .card-details is a column containing the metadata row, followed by the Source and Photo-by
   attribution lines. The metadata row keeps the verified source avatar channel link separate from
   the article link while preserving the existing card geometry. */
.card-details {
  display: flex;
  flex-direction: column;
  padding: 16px;
  min-height: 210px;
}

.card-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.card-meta-row > .card-link {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--accent-red);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 0, 85, 0.18));
  font-weight: 800;
  color: #fff;
}

.source-avatar {
  font-size: 0.68rem;
  letter-spacing: -0.04em;
}

.source-avatar--logo { background: #ffffff; border-color: #dbe2ec; overflow: hidden; }
.source-avatar--logo .source-avatar-fallback { display: none; }
.source-logo-image { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.source-avatar-link {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  text-decoration: none;
}
.source-avatar-link:hover { transform: translateY(-1px); }
.source-avatar-link:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}
.source-avatar-link .avatar { width: 40px; height: 40px; }
.source-youtube-badge {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  z-index: 2;
  display: block;
  width: 28px;
  height: 20px;
  transform: translateX(-50%);
  padding: 0;
  border-radius: 4px;
  background: #ffffff;
  object-fit: contain;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
  box-sizing: border-box;
}
.meta-data {
  flex: 1;
  min-width: 0;
}

.category-label {
  margin: 0 0 6px;
  color: #ff6b97;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.video-title {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.creator-name {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.summary {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.view-line {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-chip,
.source-label {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.tag-chip {
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.action-toolbar {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.action-pill {
  background: #f3f4f6;
  border: none;
  color: #111827;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}

.action-pill:hover {
  background: #e5e7eb;
}

.card-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 0 16px 16px;
}

.card-reaction-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.source-attribution {
  display: block;
  width: auto;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Source and Photo-by remain direct children of .card-details below the metadata row. The
   52px left offset keeps both attribution lines aligned with the metadata text column. */
.card-details > .source-attribution {
  margin-top: 6px;
  margin-left: 52px;
}

.source-attribution:hover {
  color: #2563eb;
  text-decoration: underline;
}

.feed-image-attribution {
  margin: 0;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

/* Photo attribution is a sibling of .source-attribution (see makeCard()/updateCardImageDom()
   in instatube.js), so it stays directly under Source and aligned with the metadata column. */
.card-details > .feed-image-attribution {
  margin-top: 8px;
  margin-left: 52px;
}

.feed-image-attribution a {
  color: #4f46e5;
  text-decoration: none;
}

.feed-image-attribution a:hover {
  text-decoration: underline;
}

/* The photographer name is the only unbounded-length piece of this line (the outlet-supplied
   name from Pexels) - now that this attribution sits in the narrower .card-actions column
   (moved out of the card's main <a> to fix the nested-anchor bug), an unusually long name could
   otherwise wrap onto enough lines to push past the card's fixed height. Truncating just this
   one anchor with an ellipsis keeps the line to its original single-row height for any name
   length; ordinary short photographer names (the overwhelming majority) are unaffected since
   they never approach this width. */
.feed-image-attribution a:first-of-type {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-image-attribution-label {
  color: inherit;
}

.news-reaction-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.news-reaction-actions .action-item-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
}

.news-reaction-btn {
  min-height: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 1.35rem;
  color: #111827;
  transition: transform 0.1s ease, color 0.2s ease;
  display: flex;
  align-items: center;
}

.news-reaction-btn:active {
  transform: scale(0.9);
}

.news-reaction-btn:hover {
  color: #64748b;
}

.news-reaction-btn .reaction-icon {
  display: block;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.news-reaction-btn.reaction-pop {
  animation: news-reaction-pop 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes news-reaction-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  75% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

.news-reaction-actions .action-counter {
  font-size: 0.85rem;
  font-weight: 600;
  color: #cbd5e1;
  user-select: none;
}

.news-reaction-btn.liked {
  color: #ed4956;
}

.news-reaction-btn.heartbreak-btn {
  color: #111827;
  transition: color 0.2s ease;
}

.news-reaction-btn.heartbreak-btn.heartbroken-active {
  color: #ed4956;
}

.watch-later-btn {
  min-height: 34px;
}

.watch-later-btn.is-saved {
  color: #7be7b1;
  border-color: rgba(123, 231, 177, 0.34);
  background: rgba(123, 231, 177, 0.1);
}

.card-link {
  display: block;
  min-width: 0;
  text-decoration: none;
}

.watch-later-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  justify-items: end;
  background: rgba(0, 0, 0, 0.68);
}

.watch-later-drawer[hidden] {
  display: none;
}

.watch-later-panel {
  width: min(440px, 100%);
  height: 100%;
  overflow: auto;
  padding: 24px;
  background: #16181c;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.3);
}

.watch-later-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.watch-later-head h2 {
  margin: 5px 0 0;
}

.watch-later-close {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1.4rem;
}

.watch-later-list {
  display: grid;
  gap: 14px;
}

.watch-later-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.watch-later-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  text-decoration: none;
}

.watch-later-thumb {
  width: 78px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 9px;
  object-fit: cover;
  background: #272b35;
}

.watch-later-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.watch-later-copy strong {
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-later-copy small,
.watch-later-empty p {
  color: var(--text-muted);
}

.watch-later-remove {
  border: 0;
  background: transparent;
  color: #ff8aa8;
  cursor: pointer;
  font-size: 0.72rem;
}

.watch-later-empty {
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 16px;
}

.watch-later-empty p {
  margin-bottom: 0;
  line-height: 1.5;
}

.feed-empty {
  padding: 18px;
  border-radius: 22px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
}

.modal-backdrop {
  display: none;
}

.modal-backdrop.is-open {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  z-index: 50;
}

.modal-window {
  width: min(1180px, 100%);
  max-height: min(92vh, 980px);
  overflow: auto;
  border-radius: 24px;
  background: #111214;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow);
}

.modal-left-panel,
.modal-right-panel {
  min-width: 0;
}

.is-hidden {
  display: none !important;
}

@media (max-width: 1120px) {
  .app-layout {
    flex-direction: column;
    height: auto;
    width: 100%;
    min-height: 100vh;
  }

  .sidebar {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .main-content {
    overflow-y: visible;
  }

  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

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

  .top-bar {
    height: auto;
    padding: 14px 18px;
    flex-direction: column;
    align-items: stretch;
  }

  .search-shell {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 640px) {
  body {
    padding: 16px 16px 16px 88px;
  }

  .video-grid {
    padding: 16px;
    gap: 16px;
  }

  .sidebar,
  .hybrid-card {
    border-radius: 16px;
  }

  .sidebar {
    padding: 16px;
  }

  .logo {
    margin-bottom: 18px;
  }
}