/* ═══════════════════════════════════════════════════════════════════
   GaleriTube — YouTube Dark Mode (100% accurate)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens (mimic youtube CSS vars) ────────────────────────── */
:root {
  /* Background */
  --yt-base-bg:       #0f0f0f;
  --yt-raised-bg:     #212121;
  --yt-menu-bg:       #282828;
  --yt-hover-bg:      rgba(255,255,255,.1);
  --yt-hover-bg2:     rgba(255,255,255,.05);

  /* Text */
  --yt-text-1:        #f1f1f1;
  --yt-text-2:        #aaaaaa;
  --yt-text-3:        #717171;

  /* Brand */
  --yt-red:           #ff0000;
  --yt-blue:          #3ea6ff;
  --yt-green:         #2dc653;
  --yt-amber:         #f5a623;

  /* Border */
  --yt-border:        rgba(255,255,255,.1);

  /* Layout */
  --topbar-h:         56px;
  --sidebar-w:        240px;
  --sidebar-mini-w:   72px;
  --thumb-r:          12px;
  --chip-r:           8px;
  --radius:           10px;

  /* Legacy compat (referenced in inline EJS styles) */
  --bg-color:         #0f0f0f;
  --bg-card:          #212121;
  --text-primary:     #f1f1f1;
  --text-secondary:   #aaaaaa;
  --text3:            #717171;
  --brand-color:      #3ea6ff;
  --danger-color:     #ff4e45;
  --hover-color:      rgba(255,255,255,.1);
  --font-family:      'Roboto', sans-serif;
  --sidebar-width:    240px;
  --border:           rgba(255,255,255,.1);
  --green:            #2dc653;
  --amber:            #f5a623;
  --thumb-max-h:      clamp(135px, 14vw, 210px);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--yt-base-bg);
  color: var(--yt-text-1);
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
img, video { display: block; }

/* ════════════════════════════════════════════════════════════════
   TOPBAR  (56px, matches YouTube exactly)
════════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  background: var(--yt-base-bg);
  display: flex;
  align-items: center;
  padding: 0 16px 0 16px;
  gap: 0;
  z-index: 100;
}

/* ── Start: hamburger + logo ─── */
.tb-start {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
  /* YouTube logo area is ~235px so it aligns with the sidebar */
  width: 232px;
  padding-right: 16px;
}

/* Icon button (hamburger, bell, etc.) */
.ic-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: none; border: none;
  color: var(--yt-text-1);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s;
  flex-shrink: 0;
}
.ic-btn:hover { background: var(--yt-hover-bg); }

/* Logo */
.yt-logo {
  display: flex; align-items: center; gap: 5px;
  font-size: 20px; font-weight: 700;
  letter-spacing: -.5px;
  user-select: none;
  white-space: nowrap;
}
.yt-logo-mark {
  color: var(--yt-red);
  font-size: 20px;
  display: flex; align-items: center;
}
.yt-logo-word { color: var(--yt-text-1); font-size: 20px; font-weight: 700; }
.yt-logo-id {
  font-size: 10px; font-weight: 700;
  color: var(--yt-text-2);
  vertical-align: super; margin-left: 1px; letter-spacing: 0;
}

/* ── Center: search ──────────────── */
.tb-center {
  flex: 1;
  display: flex; align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 728px;
}
.srch-wrap {
  display: flex; align-items: stretch;
  flex: 1; max-width: 600px;
  height: 40px;
  border: 1px solid #303030;
  border-radius: 40px;
  overflow: hidden;
  background: #121212;
  transition: border-color .1s;
}
.srch-wrap:focus-within { border-color: var(--yt-blue); }
.srch-box { flex: 1; display: flex; align-items: center; }
.srch-input {
  width: 100%; height: 100%;
  background: transparent; border: none; outline: none;
  color: var(--yt-text-1); font-size: 16px;
  padding: 0 16px;
  font-family: var(--font-family);
}
.srch-input::placeholder { color: var(--yt-text-3); }
.srch-btn {
  width: 64px; flex-shrink: 0;
  background: #222222; border: none;
  border-left: 1px solid #303030;
  color: var(--yt-text-1); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .1s;
  border-radius: 0 40px 40px 0;
}
.srch-btn:hover { background: #303030; }
.mic-btn {
  width: 40px; height: 40px;
  background: var(--yt-raised-bg); border: none;
  border-radius: 50%; color: var(--yt-text-1);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .1s;
}
.mic-btn:hover { background: #3a3a3a; }

/* ── End: actions ───────────────── */
.tb-end {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto; flex-shrink: 0;
}
.create-btn {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none;
  color: var(--yt-text-1); font-size: 14px; font-weight: 500;
  padding: 8px 12px; border-radius: 20px;
  transition: background .1s; white-space: nowrap;
}
.create-btn:hover { background: var(--yt-hover-bg); }
.create-btn i { font-size: 16px; }
.notif-wrap { position: relative; display: flex; align-items: center; }
.notif-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yt-red); border: 2px solid var(--yt-base-bg);
  pointer-events: none;
}
.avatar-circle {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg,#3ea6ff,#7b61ff);
  color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; flex-shrink: 0;
}
.auth-btn {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--yt-blue);
  color: var(--yt-blue); padding: 8px 16px; border-radius: 20px;
  font-weight: 500; font-size: 14px; cursor: pointer;
  white-space: nowrap; transition: background .1s;
}
.auth-btn:hover { background: rgba(62,166,255,.1); }

/* ════════════════════════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  top: var(--topbar-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--yt-base-bg);
  overflow-y: auto; overflow-x: hidden;
  z-index: 90;
  padding: 12px 0;
  /* Custom scrollbar */
  scrollbar-width: thin; scrollbar-color: #3d3d3d transparent;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: #3d3d3d; border-radius: 2px; }
.sidebar.collapsed { transform: translateX(-100%); }

/* Items */
.sb-group { padding: 4px 0; }
.sb-label {
  font-size: 14px; font-weight: 500;
  color: var(--yt-text-2);
  padding: 16px 24px 6px;
}
.sb-sep { height: 1px; background: var(--yt-border); margin: 8px 0; }

.sb-item {
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px; height: 40px;
  border-radius: 10px; margin: 0 12px;
  font-size: 14px; font-weight: 400; color: var(--yt-text-1);
  cursor: pointer; background: none; border: none;
  width: calc(100% - 24px);
  text-align: left; text-decoration: none;
  transition: background .1s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-item:hover { background: var(--yt-hover-bg); }
.sb-item.active { background: var(--yt-hover-bg); font-weight: 600; }
.sb-item .si { font-size: 17px; flex-shrink: 0; width: 24px; text-align: center; }
.sl { overflow: hidden; text-overflow: ellipsis; }

/* Mobile sidebar header */
.sb-header {
  display: none; align-items: center; gap: 4px;
  padding: 4px 12px 4px 4px;
  border-bottom: 1px solid var(--yt-border); margin-bottom: 4px;
}
.sb-header-logo { display: flex; align-items: center; gap: 5px; font-size: 18px; font-weight: 700; }
.sb-close-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: none; border: none; color: var(--yt-text-2);
  font-size: 18px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .1s;
}
.sb-close-btn:hover { background: var(--yt-hover-bg); color: var(--yt-text-1); }

/* Sidebar overlay */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 89; opacity: 0; transition: opacity .25s;
}
.sidebar-overlay.visible { display: block; opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   APP LAYOUT
════════════════════════════════════════════════════════════════ */
.app-main, .main-content {
  margin-top: var(--topbar-h);
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--topbar-h));
  transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}

/* ════════════════════════════════════════════════════════════════
   CHIPS BAR (YouTube category filter)
════════════════════════════════════════════════════════════════ */
.chips-bar {
  position: sticky; top: var(--topbar-h); z-index: 80;
  background: var(--yt-base-bg);
  /* Subtle bottom shadow to separate from content */
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.chips-scroll {
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  padding: 0 24px;
}
.chips-scroll::-webkit-scrollbar { display: none; }
.chips {
  display: flex; gap: 12px; padding: 12px 0;
  white-space: nowrap;
}
/* YouTube chips: dark inactive, white active */
.chip {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 12px;
  border-radius: var(--chip-r);
  font-size: 14px; font-weight: 500;
  background: var(--yt-raised-bg);
  color: var(--yt-text-1);
  cursor: pointer; user-select: none;
  text-decoration: none; white-space: nowrap; border: none;
  transition: background .1s;
}
.chip:hover { background: #3d3d3d; }
/* Active chip: white bg, black text — exact YouTube */
.chip.active {
  background: var(--yt-text-1);
  color: var(--yt-base-bg);
}

/* ════════════════════════════════════════════════════════════════
   HOME CONTENT
════════════════════════════════════════════════════════════════ */
.home-content { padding: 16px 24px 80px; }

/* Folder header row */
.folder-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.folder-header-left { display: flex; align-items: center; gap: 12px; }
.fh-ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: var(--yt-text-1); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fh-name { font-size: 16px; font-weight: 600; text-transform: capitalize; }
.fh-count { font-size: 12px; color: var(--yt-text-2); margin-top: 2px; }

/* Delete folder button */
.del-folder-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid rgba(248,113,113,.35);
  color: #f87171; padding: 7px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .1s;
}
.del-folder-btn:hover { background: rgba(248,113,113,.1); }

/* ════════════════════════════════════════════════════════════════
   FILTER / SORT / VIEW BAR
════════════════════════════════════════════════════════════════ */
.fsbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 14px; padding: 8px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 16px;
}
.fs-filters { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.fs-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 12px;
  border-radius: var(--chip-r);
  font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.06); color: #aaa;
  cursor: pointer; border: none; outline: none;
  letter-spacing: .3px; text-transform: uppercase; white-space: nowrap;
  transition: background .12s, color .12s;
}
.fs-chip:hover { background: rgba(255,255,255,.1); color: #e0e0e0; }
.fs-chip.active { background: var(--yt-text-1); color: var(--yt-base-bg); }
.fs-chip.active.green { background: rgba(45,198,83,.18); color: #2dc653; border: 1px solid rgba(45,198,83,.35); }
.fs-chip.active.amber { background: rgba(245,166,35,.18); color: #f5a623; border: 1px solid rgba(245,166,35,.35); }
.fs-chip.active.vid   { background: rgba(127,90,255,.18); color: #7f5aff; border: 1px solid rgba(127,90,255,.35); }
.fs-chip.active.img   { background: rgba(255,90,160,.18); color: #ff5aa0; border: 1px solid rgba(255,90,160,.35); }
.fs-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; flex-shrink: 0; }

.fs-right { display: flex; align-items: center; gap: 8px; }
.fs-sort-wrap {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.06); border-radius: 8px;
  padding: 0 4px 0 10px; border: 1px solid rgba(255,255,255,.08);
}
.fs-sort-ico { font-size: 12px; color: #888; flex-shrink: 0; }
.fs-sort {
  background: none; border: none; color: #ccc;
  font-size: 12px; font-weight: 600; font-family: inherit;
  padding: 6px 4px; cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none; min-width: 130px;
}
.fs-sort option { background: #1e1e1e; color: #f1f1f1; }
.fs-caret { font-size: 10px; color: #666; pointer-events: none; padding-right: 4px; }
.fs-view {
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,.05); border-radius: 8px;
  padding: 2px; border: 1px solid rgba(255,255,255,.07);
}
.fs-vbtn {
  background: none; border: none; color: #666;
  padding: 5px 8px; border-radius: 6px; font-size: 13px; cursor: pointer;
  transition: background .1s, color .1s;
}
.fs-vbtn:hover { color: #ccc; }
.fs-vbtn.active { background: rgba(62,166,255,.2); color: var(--yt-blue); }
.fs-count { font-size: 11px; color: #555; margin-left: auto; white-space: nowrap; }
.fs-count span { color: #999; font-weight: 600; }
.fs-empty { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 12px; color: #555; text-align: center; }
.fs-empty.visible { display: flex; }
.fs-empty-ico { font-size: 40px; opacity: .4; }
.fs-empty-txt { font-size: 15px; font-weight: 500; color: #666; }
.fs-empty-sub { font-size: 13px; color: #444; }

/* ════════════════════════════════════════════════════════════════
   VIDEO GRID
════════════════════════════════════════════════════════════════ */
.grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 400px));
  gap: 40px 16px;
  justify-content: start;
}

/* ── v-card ─────────────────────────────────────────────────── */
.v-card {
  display: flex; flex-direction: column;
  cursor: pointer; max-width: 400px; width: 100%;
  text-decoration: none; color: inherit; outline: none;
  /* No gap between thumb and meta — YouTube doesn't */
}
.v-card:focus-visible .v-thumb-wrap { outline: 2px solid var(--yt-blue); }

/* ── Thumbnail ──────────────────────────────────────────────── */
.v-thumb-wrap {
  position: relative;
  width: min(100%, calc(var(--thumb-max-h) * 16 / 9));
  aspect-ratio: 16 / 9;
  max-height: var(--thumb-max-h);
  background: var(--yt-raised-bg);
  border-radius: var(--thumb-r);
  overflow: hidden;
  /* YouTube: scale up slightly on hover */
  transition: border-radius .2s;
}
.v-card:hover .v-thumb-wrap { border-radius: 0; }
.v-thumb-img, .v-thumb-vid {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; max-width: 100%; max-height: 100%;
}

/* Duration pill — bottom right */
.v-dur {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,.88); color: #fff;
  font-size: 12px; font-weight: 500;
  padding: 3px 6px; border-radius: 4px;
  pointer-events: none; z-index: 3;
}

/* Hover play overlay */
.v-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: background .15s, opacity .15s; z-index: 5;
}
.v-card:hover .v-overlay { background: rgba(0,0,0,.25); opacity: 1; }
.v-play {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; padding-left: 3px;
  transition: transform .15s, background .15s;
}
.v-card:hover .v-play { transform: scale(1.1); background: rgba(0,0,0,.85); }

/* Action buttons (delete/download) — appear on hover */
.v-actions {
  position: absolute; top: 6px; right: 6px;
  display: flex; gap: 4px;
  opacity: 0; transition: opacity .15s; z-index: 10;
}
.v-card:hover .v-actions { opacity: 1; }
.v-act {
  width: 30px; height: 30px; border-radius: 6px;
  background: rgba(0,0,0,.75); border: none;
  color: #ddd; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
  text-decoration: none; backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.1);
}
.v-act:hover { background: rgba(0,0,0,.9); color: #fff; }

/* ── Meta row (YouTube card bottom) ────────────────────────── */
.v-meta {
  display: flex; align-items: flex-start;
  gap: 12px; padding: 12px 0 0; /* space from thumb */
}
/* Channel avatar circle */
.v-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg,#3ea6ff,#7b61ff);
  color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px; user-select: none;
}
.v-info { flex: 1; min-width: 0; }
/* Title: YouTube uses 14px, 500, 2-line clamp */
.v-title {
  font-size: 14px; font-weight: 500; line-height: 1.4;
  color: var(--yt-text-1); margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Channel name */
.v-ch {
  font-size: 13px; color: var(--yt-text-2);
  margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 5px;
}
/* Meta (size · time) */
.v-stats { display: flex; gap: 4px; flex-wrap: wrap; font-size: 13px; color: var(--yt-text-2); }
.v-stats span + span::before { content: '·'; margin-right: 4px; }
/* Kebab menu button */
.v-kebab {
  background: none; border: none;
  color: var(--yt-text-2); font-size: 15px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, background .1s;
  flex-shrink: 0; margin-top: 2px;
}
.v-card:hover .v-kebab { opacity: 1; }
.v-kebab:hover { background: var(--yt-hover-bg); color: var(--yt-text-1); }

/* ── Small grid mode ─────────────────────────────────────────── */
.grid-wrap.grid-sm {
  grid-template-columns: repeat(auto-fill, minmax(160px, 260px));
  gap: 28px 12px; justify-content: start;
}
.grid-wrap.grid-sm .v-card { max-width: 260px; }
.grid-wrap.grid-sm .v-thumb-wrap { --thumb-max-h: 148px; }
.grid-wrap.grid-sm .v-title { font-size: 12px; }
.grid-wrap.grid-sm .v-stats { font-size: 10px; }
.grid-wrap.grid-sm .v-ch { font-size: 11px; }

/* ── List mode ───────────────────────────────────────────────── */
.grid-wrap.list-mode { display: flex !important; flex-direction: column; gap: 4px; }
.grid-wrap.list-mode .v-card {
  flex-direction: row; gap: 0; max-width: 100%;
  border-radius: 10px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.055);
  overflow: hidden; height: 80px;
}
.grid-wrap.list-mode .v-card:hover { background: rgba(255,255,255,.065); }
.grid-wrap.list-mode .v-thumb-wrap {
  width: 142px; min-width: 142px; max-width: 142px;
  height: 80px; min-height: 80px; max-height: 80px;
  flex-shrink: 0; border-radius: 0; aspect-ratio: unset;
}
.grid-wrap.list-mode .v-meta { flex: 1; padding: 0 16px; align-items: center; gap: 14px; }
.grid-wrap.list-mode .v-av { display: none; }
.grid-wrap.list-mode .v-info { flex: 1; min-width: 0; }
.grid-wrap.list-mode .v-title { -webkit-line-clamp: unset; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.grid-wrap.list-mode .v-dur { display: none; }
.grid-wrap.list-mode .v-overlay { display: none; }
.grid-wrap.list-mode .v-actions { position: static; opacity: 1; background: none; flex-direction: row; align-items: center; gap: 4px; padding-right: 12px; }
.grid-wrap.list-mode .v-mini-progress { width: 142px; height: 2px; bottom: 0; top: auto; left: 0; }

/* Card hide/reveal animation */
.v-card.fs-hidden { display: none; }
.v-card.fs-reveal { animation: fsReveal .22s ease both; }
@keyframes fsReveal { from{opacity:0;transform:scale(.97) translateY(4px)} to{opacity:1;transform:none} }

/* Empty state */
.empty-state {
  grid-column: 1/-1;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 80px 20px; gap: 16px; text-align: center;
  color: var(--yt-text-3);
}
.e-ico { font-size: 64px; opacity: .25; margin-bottom: 4px; }
.empty-state h3 { font-size: 18px; font-weight: 500; color: var(--yt-text-2); }
.empty-state p  { font-size: 14px; color: var(--yt-text-3); }

/* ════════════════════════════════════════════════════════════════
   CDN / STATUS BADGES  (inside thumbnail)
════════════════════════════════════════════════════════════════ */
.cdn-badge {
  position: absolute; top: 6px; left: 6px;
  font-size: 9px; font-weight: 700; padding: 2px 6px;
  border-radius: 4px; letter-spacing: .4px; text-transform: uppercase; z-index: 3;
}
.cdn-badge.cdn  { background: rgba(45,198,83,.18); color: #2dc653; border: 1px solid rgba(45,198,83,.3); }
.cdn-badge.wait { background: rgba(245,166,35,.18); color: #f5a623; border: 1px solid rgba(245,166,35,.3); }
.cdn-badge.proc { background: rgba(62,166,255,.18); color: #3ea6ff; border: 1px solid rgba(62,166,255,.3); animation: blink 1.4s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Skeleton shimmer */
.thumb-skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #1a1a1a 25%, #262626 50%, #1a1a1a 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; z-index: 2; transition: opacity .3s;
}
.thumb-skeleton.hidden { opacity: 0; pointer-events: none; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Fade-in */
.v-thumb-img, .v-thumb-vid { opacity: 0; transition: opacity .35s; }
.v-thumb-img.loaded, .v-thumb-vid.loaded { opacity: 1; }

/* Mini progress bar */
.v-mini-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.1); z-index: 4; display: none; }
.v-mini-progress.visible { display: block; }
.v-mini-progress-fill { height: 100%; background: linear-gradient(90deg,#3ea6ff,#7b61ff); transition: width .5s cubic-bezier(.4,0,.2,1); }

/* Long press ring */
.lp-ring-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 10; opacity: 0; }
.lp-ring-wrap.active { opacity: 1; }
.lp-ring { width: 60px; height: 60px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: rgba(255,255,255,.9); }
.lp-ring-wrap.active .lp-ring { animation: lpSpin .55s linear forwards; }
@keyframes lpSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ════════════════════════════════════════════════════════════════
   PAGINATION
════════════════════════════════════════════════════════════════ */
.pagination-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 32px 0 8px; flex-wrap: wrap;
}
.page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 6px;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  color: #aaa; text-decoration: none;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  transition: background .1s, color .1s; cursor: pointer; user-select: none;
}
.page-btn:hover:not(.disabled):not(.active) { background: rgba(255,255,255,.1); color: #e0e0e0; }
.page-btn.active { background: rgba(62,166,255,.22); color: var(--yt-blue); border-color: rgba(62,166,255,.4); pointer-events: none; }
.page-btn.disabled { opacity: .3; pointer-events: none; }
.page-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 36px; color: #555; font-size: 14px; letter-spacing: 2px; user-select: none; }
.pag-info { font-size: 11px; color: #444; margin: 0 6px; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════
   ACTION BUTTONS (w-btn)  — used in watch + forms
════════════════════════════════════════════════════════════════ */
.w-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px;
  border-radius: 18px;  /* YouTube uses pill shape for buttons */
  background: rgba(255,255,255,.1); color: var(--yt-text-1);
  font-size: 14px; font-weight: 500;
  border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .1s; font-family: inherit;
}
.w-btn:hover { background: rgba(255,255,255,.18); }
.w-btn.primary { background: var(--yt-blue); color: #000; font-weight: 600; }
.w-btn.primary:hover { filter: brightness(1.1); }
.w-btn.red, .w-btn.subscribe {
  background: var(--yt-text-1); color: var(--yt-base-bg); font-weight: 600;
}
.w-btn.red:hover, .w-btn.subscribe:hover { background: rgba(241,241,241,.9); }
.w-btn.danger { background: rgba(248,113,113,.1); color: #f87171; }
.w-btn.danger:hover { background: rgba(248,113,113,.18); }
.w-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
/* Theater / icon-only */
.theater-btn { padding: 0 14px; }

/* ════════════════════════════════════════════════════════════════
   WATCH PAGE
════════════════════════════════════════════════════════════════ */
.watch-wrap {
  display: grid;
  grid-template-columns: minmax(0,1fr) 402px;
  gap: 24px;
  max-width: 1480px;
  margin: calc(var(--topbar-h) + 24px) auto 40px;
  padding: 0 24px;
}
.watch-primary { min-width: 0; }
.watch-secondary { width: 402px; flex-shrink: 0; min-width: 0; }

/* Player */
.player-box {
  width: 100%; aspect-ratio: 16/9;
  background: #000; border-radius: var(--thumb-r);
  overflow: hidden; position: relative; outline: none;
}
.player-box:focus { box-shadow: 0 0 0 2px var(--yt-blue); }
.player-box video,
.player-box img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Title */
.watch-title {
  font-size: 20px; font-weight: 700; line-height: 1.4;
  color: var(--yt-text-1); margin: 12px 0 8px;
}

/* Action row: like · dislike · share · save · more */
.watch-action-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--yt-border);
  margin-bottom: 12px;
}
/* Like/Dislike pill group — exact YouTube */
.like-dislike-wrap {
  display: flex; align-items: center;
  background: rgba(255,255,255,.1); border-radius: 18px;
  overflow: hidden; height: 36px;
}
.ld-btn {
  display: flex; align-items: center; gap: 6px;
  height: 100%; padding: 0 16px;
  background: none; border: none; color: var(--yt-text-1);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .1s; font-family: inherit;
  white-space: nowrap;
}
.ld-btn:hover { background: rgba(255,255,255,.18); }
.ld-btn i { font-size: 16px; }
.ld-sep { width: 1px; height: 24px; background: rgba(255,255,255,.2); flex-shrink: 0; }

/* Meta row (views · date · status) */
.watch-meta-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px; font-size: 14px; font-weight: 500;
  color: var(--yt-text-2); padding-bottom: 12px;
}
.watch-meta-row span { display: flex; align-items: center; gap: 5px; }
.watch-meta-row .dot { color: var(--yt-text-3); padding: 0 2px; }

/* Channel row */
.channel-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--yt-border);
  margin-bottom: 12px;
}
.channel-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#3ea6ff,#7b61ff);
  color: #fff; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; user-select: none; cursor: pointer;
}
.channel-info { flex: 1; min-width: 0; }
.channel-name { font-size: 15px; font-weight: 600; color: var(--yt-text-1); }
.channel-sub-count { font-size: 12px; color: var(--yt-text-2); }

/* Action sub-bar */
.watch-sub-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--yt-border); margin-bottom: 12px;
}
.w-stats { font-size: 13px; color: var(--yt-text-2); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.w-action-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Description box — expandable */
.watch-desc-box {
  background: rgba(255,255,255,.06);
  border-radius: var(--radius); padding: 12px 16px;
  font-size: 14px; color: var(--yt-text-2); line-height: 1.8;
  cursor: pointer; transition: background .1s;
  margin-bottom: 16px;
}
.watch-desc-box:hover { background: rgba(255,255,255,.08); }
.watch-desc-box.expanded { cursor: auto; }
.watch-desc-box.expanded:hover { background: rgba(255,255,255,.06); }
.watch-desc-box strong { color: var(--yt-text-1); font-weight: 500; }
.desc-expand-hint { font-size: 13px; font-weight: 600; color: var(--yt-text-1); margin-top: 8px; }

/* Theater mode */
body.theater .watch-wrap { max-width: 100vw; padding: 0; display: block; }
body.theater .watch-secondary { display: none; }
body.theater .player-box { border-radius: 0; height: 82vh; aspect-ratio: unset; }
body.theater .topbar { opacity: 0; transition: opacity .3s; pointer-events: none; }
body.theater:hover .topbar { opacity: 1; pointer-events: auto; }

/* Keyboard shortcut toast */
#kb-toast {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.9);
  background: rgba(0,0,0,.75); color: #fff;
  padding: 10px 20px; border-radius: 8px;
  font-size: 15px; font-weight: 600;
  pointer-events: none; opacity: 0;
  transition: opacity .15s, transform .15s; z-index: 20;
}
#kb-toast.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* Keyboard shortcuts panel */
.shortcuts-hint {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--yt-menu-bg); border: 1px solid var(--yt-border);
  border-radius: 12px; padding: 16px 20px;
  font-size: 12px; color: var(--yt-text-2);
  z-index: 100; opacity: 0; pointer-events: none;
  transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.shortcuts-hint.visible { opacity: 1; pointer-events: auto; transform: none; }
.shortcuts-hint h4 { color: var(--yt-text-1); margin: 0 0 10px; font-size: 13px; }
.sc-row { display: flex; justify-content: space-between; gap: 20px; margin: 4px 0; }
.sc-key { background: #2a2a2a; border: 1px solid #444; border-radius: 4px; padding: 2px 7px; font-family: monospace; font-size: 11px; color: #ccc; }

/* Auto-next bar */
#autonext-bar {
  display: none; position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent,rgba(0,0,0,.85));
  padding: 40px 20px 18px;
  align-items: center; justify-content: space-between; z-index: 15;
}
#autonext-bar.visible { display: flex; }
#autonext-info { color: #fff; font-size: 13px; }
#autonext-info strong { display: block; font-size: 15px; margin-bottom: 4px; }
#autonext-timer { font-size: 42px; font-weight: 700; color: #fff; width: 54px; text-align: center; font-variant-numeric: tabular-nums; }
#autonext-cancel { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 7px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; transition: background .1s; }
#autonext-cancel:hover { background: rgba(255,255,255,.25); }

/* Processing overlay */
#processing-state {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px; padding: 32px;
  background: radial-gradient(ellipse at center,#1a1a2e 0%,#0f0f0f 100%);
  color: #fff; box-sizing: border-box; min-height: 260px;
}
.proc-icon-wrap { position: relative; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.proc-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--yt-blue); animation: spin 1.1s linear infinite; }
.proc-icon { font-size: 30px; color: var(--yt-blue); }
@keyframes spin { to{transform:rotate(360deg)} }
.proc-title { font-size: 15px; font-weight: 600; text-align: center; }
.proc-sub { font-size: 13px; color: #777; text-align: center; line-height: 1.6; }
.proc-sub strong { color: var(--yt-blue); }
.prog-track { width: min(80%,360px); background: #2a2a2a; border-radius: 99px; height: 5px; overflow: hidden; }
.prog-fill { height: 100%; background: linear-gradient(90deg,var(--yt-blue),#7b61ff); border-radius: 99px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.prog-details { display: flex; gap: 16px; font-size: 12px; color: #555; }
.prog-details span { color: #aaa; }
.status-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.badge-queued     { background: rgba(245,166,35,.12); color: var(--yt-amber); }
.badge-processing { background: rgba(62,166,255,.12); color: var(--yt-blue); }
.badge-ready      { background: rgba(45,198,83,.12); color: var(--yt-green); }
.dot-pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.4s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.6)} }

/* Watch secondary sidebar */
.ws-title {
  font-size: 16px; font-weight: 600;
  color: var(--yt-text-1); margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--yt-border);
}
.cc-card {
  display: flex; gap: 8px; padding: 8px;
  border-radius: 10px; text-decoration: none; color: inherit;
  transition: background .1s; margin-bottom: 2px; cursor: pointer;
}
.cc-card:hover { background: var(--yt-raised-bg); }
.cc-card.is-next { border: 1px solid rgba(62,166,255,.3); background: rgba(62,166,255,.05); }
.cc-thumb {
  position: relative; flex-shrink: 0;
  width: 168px; min-width: 168px; max-width: 168px;
  height: 94px; min-height: 94px; max-height: 94px;
  border-radius: 8px; overflow: hidden; background: #111;
}
.cc-thumb img, .cc-thumb video { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; display: block; }
.cc-dur { position: absolute; bottom: 4px; right: 5px; background: rgba(0,0,0,.78); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 5px; border-radius: 3px; }
.cc-info { flex: 1; min-width: 0; }
.cc-title { font-size: 14px; color: var(--yt-text-1); font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 5px; }
.cc-ch { font-size: 13px; color: var(--yt-text-2); }
.cc-progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.2); }
.cc-progress-fill { height: 100%; background: var(--yt-red); border-radius: 0 1px 1px 0; }

/* Watch breadcrumb */
.watch-breadcrumb { font-size: 14px; color: var(--yt-text-2); }
.watch-breadcrumb a { color: var(--yt-text-2); transition: color .1s; }
.watch-breadcrumb a:hover { color: var(--yt-text-1); }

/* ════════════════════════════════════════════════════════════════
   VIDEO PREVIEW MODAL (Long Press)
════════════════════════════════════════════════════════════════ */
.vpreview-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity .25s;
}
.vpreview-overlay.open { pointer-events: all; opacity: 1; }
.vpreview-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(10px); }
.vpreview-sheet {
  position: relative; z-index: 1; width: min(92vw,780px);
  background: #141414; border-radius: 16px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07);
  transform: scale(.92) translateY(20px); transition: transform .28s cubic-bezier(.34,1.56,.64,1);
  display: flex; flex-direction: column; max-height: 90vh;
}
.vpreview-overlay.open .vpreview-sheet { transform: scale(1) translateY(0); }
.vpreview-topbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.vpreview-type-badge { font-size: 9px; font-weight: 800; letter-spacing: .6px; padding: 3px 7px; border-radius: 4px; text-transform: uppercase; background: rgba(62,166,255,.18); color: #3ea6ff; border: 1px solid rgba(62,166,255,.3); flex-shrink: 0; }
.vpreview-title { flex: 1; font-size: 14px; font-weight: 500; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vpreview-close { background: rgba(255,255,255,.08); border: none; color: #999; font-size: 14px; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .1s, color .1s; flex-shrink: 0; }
.vpreview-close:hover { background: rgba(255,255,255,.15); color: #fff; }
.vpreview-player { position: relative; background: #000; aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0; }
.vpreview-player video, .vpreview-player img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vpreview-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); }
.vpreview-spinner-ring { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.1); border-top-color: var(--yt-blue); animation: spin .8s linear infinite; }
.vpreview-meta { padding: 12px 16px 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.vpreview-stat { font-size: 11px; color: #666; display: flex; align-items: center; gap: 5px; }
.vpreview-stat i { color: #444; }
.vpreview-actions { display: flex; gap: 8px; padding: 10px 16px 16px; border-top: 1px solid rgba(255,255,255,.06); }
.vprev-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; border: none; outline: none; transition: background .1s, transform .12s; }
.vprev-btn:hover { transform: translateY(-1px); }
.vprev-btn.primary { background: linear-gradient(135deg,#3ea6ff,#7b61ff); color: #fff; }
.vprev-btn.secondary { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); color: #ccc; }
.vprev-btn.secondary:hover { background: rgba(255,255,255,.12); }

/* ════════════════════════════════════════════════════════════════
   MODAL (Upload / New Folder)
════════════════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.75); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.modal-backdrop.open { display: flex; }
.yt-modal {
  width: 100%; max-width: 480px;
  background: #1e1e1e; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.6);
  max-height: 90vh; display: flex; flex-direction: column;
}
.m-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--yt-border); flex-shrink: 0; }
.m-head-t { font-size: 16px; font-weight: 600; color: var(--yt-text-1); }
.m-tabs { display: flex; border-bottom: 1px solid var(--yt-border); flex-shrink: 0; }
.m-tab { flex: 1; background: none; border: none; color: var(--yt-text-3); font-size: 14px; font-weight: 500; padding: 14px 12px; cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; justify-content: center; gap: 7px; font-family: inherit; transition: color .1s, border-bottom-color .1s; }
.m-tab:hover { color: var(--yt-text-1); }
.m-tab.act { color: var(--yt-blue); border-bottom-color: var(--yt-blue); }
.m-panel { display: none; padding: 20px; overflow-y: auto; }
.m-panel.act { display: block; }
.m-field { margin-bottom: 18px; }
.m-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--yt-text-2); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.m-input, .m-sel { width: 100%; background: #141414; border: 1px solid rgba(255,255,255,.12); color: var(--yt-text-1); padding: 11px 14px; border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; transition: border-color .1s; }
.m-input:focus, .m-sel:focus { border-color: var(--yt-blue); }
.m-input::placeholder { color: var(--yt-text-3); }
.m-sel { appearance: none; cursor: pointer; }
.m-sel option { background: #1e1e1e; }
.drop-zone { border: 2px dashed rgba(255,255,255,.15); border-radius: 12px; padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color .1s, background .1s; background: rgba(255,255,255,.02); }
.drop-zone:hover { border-color: var(--yt-blue); background: rgba(62,166,255,.04); }
.drop-zone input[type="file"] { display: none; }
.dz-ico { font-size: 36px; color: var(--yt-blue); margin-bottom: 10px; opacity: .8; }
.dz-title { font-size: 15px; font-weight: 500; color: var(--yt-text-1); margin-bottom: 4px; }
.dz-sub { font-size: 12px; color: var(--yt-text-3); }
.dz-selected { margin-top: 10px; font-size: 13px; color: var(--yt-blue); font-weight: 500; }
.m-foot { display: flex; gap: 10px; justify-content: flex-end; padding-top: 8px; }
.m-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; transition: filter .1s, background .1s; }
.m-cancel { background: rgba(255,255,255,.1); color: var(--yt-text-2); }
.m-cancel:hover { background: rgba(255,255,255,.18); }
.m-submit { background: var(--yt-blue); color: #000; }
.m-submit:hover { filter: brightness(1.1); }
.m-submit-red { background: var(--yt-text-1); color: var(--yt-base-bg); }
.m-submit-red:hover { filter: brightness(.95); }
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap .m-input { padding-right: 44px; }
.pw-eye { position: absolute; right: 10px; background: none; border: none; color: var(--yt-text-3); cursor: pointer; padding: 6px; font-size: 15px; transition: color .1s; }
.pw-eye:hover { color: var(--yt-text-1); }

/* ════════════════════════════════════════════════════════════════
   LOGIN PAGE
════════════════════════════════════════════════════════════════ */
.login-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px 16px;
  background: radial-gradient(ellipse at 50% 0%,rgba(255,0,0,.06) 0%,transparent 60%), var(--yt-base-bg);
}
.login-logo-wrap { margin-bottom: 28px; display: flex; align-items: center; justify-content: center; }
.login-logo-wrap .yt-logo { font-size: 28px; }
.login-logo-wrap .yt-logo-mark { font-size: 26px; }
.login-card {
  width: 100%; max-width: 400px;
  background: var(--yt-menu-bg);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 36px 32px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.login-card h2 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.login-sub { font-size: 14px; color: var(--yt-text-3); margin-bottom: 24px; }
.login-err {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,0,0,.1); border: 1px solid rgba(255,0,0,.25);
  color: #ff7b74; font-size: 13px;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 16px;
}
.login-btn {
  width: 100%; background: var(--yt-blue); color: #000;
  border: none; border-radius: 20px; padding: 13px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: filter .1s; margin-top: 8px; font-family: inherit;
}
.login-btn:hover { filter: brightness(1.1); }
.login-footer { margin-top: 20px; font-size: 12px; color: var(--yt-text-3); text-align: center; }

/* ════════════════════════════════════════════════════════════════
   BOTTOM NAV (mobile)
════════════════════════════════════════════════════════════════ */
.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  height: 56px; background: rgba(15,15,15,.97);
  backdrop-filter: blur(16px); border-top: 1px solid var(--yt-border);
  z-index: 100; align-items: center; justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom,0px);
}
.bn-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 12px; border-radius: 12px;
  font-size: 10px; font-weight: 600; letter-spacing: .3px;
  color: var(--yt-text-3); cursor: pointer; background: none; border: none;
  transition: color .1s; text-decoration: none; min-width: 52px;
}
.bn-item i { font-size: 20px; line-height: 1; }
.bn-item.active { color: var(--yt-text-1); }
.bn-item:active { background: rgba(255,255,255,.06); }
.bn-create { background: var(--yt-text-1); border-radius: 14px; color: var(--yt-base-bg) !important; padding: 8px 14px; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 1350px) {
  .watch-wrap { grid-template-columns: minmax(0,1fr) 360px; }
  .watch-secondary { width: 360px; }
}

@media (max-width: 1100px) {
  /* Mini sidebar mode (YouTube: 72px) */
  .sidebar { width: var(--sidebar-mini-w); padding: 12px 0; }
  .sidebar .sl, .sidebar .sb-label, .sidebar .sb-sep { display: none; }
  .sb-item { padding: 0; margin: 0 8px; width: calc(100% - 16px); height: 64px; flex-direction: column; gap: 4px; font-size: 10px; border-radius: 10px; align-items: center; justify-content: center; }
  .sb-item .si { width: auto; font-size: 20px; }
  .sb-item .sl { display: flex; font-size: 10px; text-align: center; }
  .app-main, .main-content { margin-left: var(--sidebar-mini-w); }
  .watch-wrap { grid-template-columns: minmax(0,1fr) 320px; }
  .watch-secondary { width: 320px; }
  .tb-start { width: 100px; }
}

@media (max-width: 900px) {
  /* Sidebar → slide-in drawer */
  .sidebar {
    transform: translateX(-100%); width: min(var(--sidebar-w),80vw);
    top: 0; padding-top: 0; border-right: none;
    border-radius: 0 16px 16px 0; background: #181818;
    overflow-y: auto; overscroll-behavior: contain; box-shadow: none;
    transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s;
    padding-bottom: env(safe-area-inset-bottom,0px);
  }
  .sidebar .sl { display: block; font-size: 14px; }
  .sidebar .sb-label { display: block; font-size: 14px; }
  .sidebar .sb-sep { display: block; }
  .sidebar .sb-item { flex-direction: row; height: 40px; gap: 16px; padding: 0 24px; margin: 0 12px; width: calc(100% - 24px); font-size: 14px; border-radius: 10px; }
  .sidebar .sb-item .si { font-size: 17px; width: 24px; }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 32px rgba(0,0,0,.7); }
  .sb-header { display: flex; }
  .app-main, .main-content { margin-left: 0; }
  .bottom-nav { display: flex; }
  .app-main, .main-content { padding-bottom: calc(56px + env(safe-area-inset-bottom,8px)); }
  .watch-wrap { grid-template-columns: 1fr; padding: 0 12px; margin-top: calc(var(--topbar-h) + 8px); }
  .watch-secondary { width: 100%; }
  .cc-thumb { width: 120px; min-width: 120px; max-width: 120px; height: 68px; min-height: 68px; max-height: 68px; }
  .tb-start { width: auto; padding-right: 8px; }
  .create-btn span { display: none; }
  .home-content { padding: 12px 14px 80px; }
  .chips-scroll { padding: 0 14px; }
}

@media (max-width: 600px) {
  .grid-wrap { grid-template-columns: 1fr 1fr; gap: 24px 10px; }
  .v-title { font-size: 12px; }
  .v-ch, .v-stats { font-size: 11px; }
  .v-av { width: 28px; height: 28px; font-size: 12px; }
  .tb-center { display: none; }
  .watch-title { font-size: 17px; }
  .login-card { padding: 28px 20px 24px; }
}