:root, [data-theme="light"] {
  --c-bg: #ffffff;
  --c-card: #ffffff;
  --c-subtle: #eff3fc;
  --c-hover: #f2f5fc;
  --c-elevated: #ffffff;
  --c-border: #e1e8f5;
  --c-border-strong: #cdd8ec;
  --c-text: #000000;
  --c-text-2: #333333;
  --c-text-3: #6a7ca0;
  --c-accent: #0053e2;
  --c-accent-2: #0044bf;
  --c-accent-soft: #e8f1fe;
  --c-amber: #f5b40c;
  --c-amber-2: #d99b00;
  --c-like: #f4427e;
  --c-repost: #00ba7c;
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: none;
  --scroll: #cdd8ec;
}

[data-theme="dark"] {
  --c-bg: #0b1a38;
  --c-card: #102347;
  --c-subtle: #16294d;
  --c-hover: #15264c;
  --c-elevated: #102347;
  --c-border: #233a63;
  --c-border-strong: #31497a;
  --c-text: #eef3fd;
  --c-text-2: #9fb0d0;
  --c-text-3: #6a7ca0;
  --c-accent: #0053e2;
  --c-accent-2: #3c7bf4;
  --c-accent-soft: #10213d;
  --c-amber: #f5b40c;
  --c-amber-2: #ffc63a;
  --c-like: #f4427e;
  --c-repost: #00ba7c;
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: none;
  --scroll: #31497a;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--scroll);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

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

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

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

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

@keyframes pop {
  0% { transform: scale(.7); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

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

textarea::placeholder, input::placeholder {
  color: var(--c-text-3);
}

.sc-placeholder {
  border: none !important;
  background: #f3f2f0 !important;
  border-radius: 0 !important;
}

/* Page transitions only in the center column content container */
.swvt-page-transition {
  animation: pageIn .28s ease;
}

/* Custom interactive switches */
.toggle-switch-track {
  border: none;
  cursor: pointer;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  position: relative;
  transition: 0.18s;
  flex-shrink: 0;
}
.toggle-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  transition: 0.18s;
}

/* Skeletons */
.skeleton-bg {
  background: linear-gradient(90deg, var(--c-subtle) 25%, var(--c-hover) 37%, var(--c-subtle) 63%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* Video grid */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 16px;
  padding: 20px;
}
@media (max-width: 1080px) {
  .videos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 700px) {
  .videos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #swvt-nav-left {
    display: none !important;
  }
  #swvt-sidebar-right {
    display: none !important;
  }
  #swvt-top-bar-mobile {
    display: flex !important;
  }
  #swvt-bottom-nav-mobile {
    display: flex !important;
  }
  #swvt-fab {
    display: flex !important;
  }
}

/* Logo visibility by theme */
[data-theme="light"] .swvt-logo-light {
  display: block !important;
}
[data-theme="light"] .swvt-logo-dark {
  display: none !important;
}
[data-theme="dark"] .swvt-logo-light {
  display: none !important;
}
[data-theme="dark"] .swvt-logo-dark {
  display: block !important;
}

/* Video grid card sizing & in-place expansion */
.swvt-video-grid-card-wrapper {
  width: 100%;
  min-width: 0; /* prevents columns from stretching due to long text */
  overflow: hidden;
  transition: grid-column 0.3s ease, margin 0.3s ease;
}

.swvt-video-grid-item {
  width: 100%;
}

.swvt-video-tile {
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
}

.swvt-video-grid-card-wrapper.expanded {
  grid-column: 1 / -1; /* spans full grid width */
  margin: 10px 0 25px;
}

.swvt-video-grid-card-wrapper.expanded .swvt-video-card-expanded {
  display: flex !important;
}

.swvt-video-grid-card-wrapper.expanded .swvt-video-card-collapsed {
  display: none !important;
}

.swvt-videos-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 6px 20px 32px;
}

.swvt-videos-load-more-btn {
  min-width: 180px;
  border: 1px solid color-mix(in srgb, var(--c-accent) 18%, var(--c-border-strong));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 78%, var(--c-accent-soft)), var(--c-bg));
  color: var(--c-accent);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 13px 24px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-bg) 70%, transparent);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.swvt-videos-load-more-btn:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent-soft) 90%, var(--c-bg)), color-mix(in srgb, var(--c-accent-soft) 52%, var(--c-bg)));
  border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border-strong));
  color: var(--c-accent-2);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--c-accent) 10%, transparent);
}

.swvt-videos-load-more-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-bg) 70%, transparent);
}

.swvt-videos-load-more-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent);
}

.swvt-composer-image-preview {
  margin: 6px 0 12px;
}

.swvt-composer-image-preview-inner {
  position: relative;
  width: min(100%, 420px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-subtle);
}

.swvt-composer-image-preview-img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

.swvt-composer-image-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(11, 26, 56, 0.7);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}