/* Final mobile/tablet layer. This file must load after style.css. */
html { scrollbar-color: #8f3ee8 #111526; scrollbar-width: thin; }
html::-webkit-scrollbar { width: 9px; height: 7px; }
html::-webkit-scrollbar-track { background: #111526; }
html::-webkit-scrollbar-thumb {
  border: 2px solid #111526;
  border-radius: 999px;
  background: linear-gradient(180deg, #a84bf2, #df3daf);
}

@media (min-width: 901px) and (max-width: 1100px) {
  .yt-layout { grid-template-columns: 188px minmax(0, 1fr) !important; }
  .yt-sidebar { width: 188px !important; min-width: 188px !important; }
  .yt-home.discovery-home,
  .channel-dashboard-page,
  .discovery-results-page { min-width: 0; padding-inline: 18px !important; }
  .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .channel-dashboard-hero { grid-template-columns: 96px minmax(0, 1fr) !important; }
  .channel-dashboard-stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .channel-dashboard-shell { grid-template-columns: 176px minmax(0, 1fr) !important; }
  .dashboard-overview-grid,
  .dashboard-content-grid,
  .dashboard-gallery-grid { grid-template-columns: 1fr !important; }
}

@media (min-width: 901px) {
  .yt-sidebar[data-mobile-app-nav="1"] .mobile-nav-create .mobile-create-symbol {
    width: 24px !important;
    height: 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .yt-sidebar[data-mobile-app-nav="1"] .mobile-nav-create .mobile-create-symbol img {
    width: 24px !important;
    height: 24px !important;
    opacity: 1 !important;
  }
  .yt-sidebar[data-mobile-app-nav="1"] .mobile-nav-create .mobile-create-symbol b {
    display: none !important;
  }
}

@media (max-width: 900px) {
  body {
    min-width: 0 !important;
    padding-bottom: 88px !important;
    overflow-x: hidden !important;
  }

  .yt-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 65 !important;
    display: flex !important;
    min-height: 60px !important;
    padding: 8px 10px !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(9,11,23,.97) !important;
    backdrop-filter: blur(16px);
  }

  .left-top, .ft-logo { flex: 0 0 auto !important; min-width: 0 !important; }
  .ft-logo img { width: 36px !important; height: 36px !important; object-fit: contain; }
  .ft-logo span { display: none !important; }

  .mobile-search-toggle {
    order: 1;
    display: inline-grid !important;
    place-items: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 50% !important;
    background: #171a2b !important;
    color: #fff !important;
  }

  .right-top {
    display: flex !important;
    min-width: 0 !important;
    margin-left: auto !important;
    gap: 6px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .right-top > .create-btn,
  .right-top > a.create-btn[href*="upload.html"],
  .right-top > .logout-btn,
  .right-top > #sortSelect,
  .right-top > a[href*="history"],
  .right-top > a[href*="index"] { display: none !important; }

  .notify-bell,
  .furmap-return-btn,
  .top-avatar,
  .mobile-more-toggle {
    display: inline-grid !important;
    place-items: center;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  .furmap-return-btn span,
  .language-switch > span,
  .language-switch > label { display: none !important; }

  .notify-bell img,
  .furmap-return-btn img,
  .top-avatar img {
    width: 28px !important;
    height: 28px !important;
    object-fit: cover;
    border-radius: 50%;
  }

  .language-switch { min-width: 0 !important; }
  .language-switch select {
    width: 58px !important;
    min-width: 58px !important;
    min-height: 38px !important;
    padding: 7px 8px !important;
  }

  .search-wrap {
    position: fixed !important;
    top: 60px !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 68 !important;
    display: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    background: rgba(10,12,24,.98) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.48) !important;
  }
  body.mobile-search-open .search-wrap { display: flex !important; }
  .search-wrap input { min-width: 0 !important; }

  .yt-layout { display: block !important; width: 100% !important; min-width: 0 !important; }
  .yt-home.discovery-home {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 10px 26px !important;
  }

  .chips.discovery-categories,
  .hashtag-strip,
  .channel-dashboard-nav,
  .discovery-result-tabs {
    display: flex !important;
    width: calc(100% + 20px) !important;
    max-width: none !important;
    margin-inline: -10px !important;
    padding: 5px 10px 8px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .chips.discovery-categories::-webkit-scrollbar,
  .hashtag-strip::-webkit-scrollbar,
  .channel-dashboard-nav::-webkit-scrollbar,
  .discovery-result-tabs::-webkit-scrollbar { display: none; }

  .chips.discovery-categories > *,
  .hashtag-strip > *,
  .channel-dashboard-nav > *,
  .discovery-result-tabs > * { flex: 0 0 auto !important; scroll-snap-align: start; }
  .chips.discovery-categories > * { min-height: 42px !important; padding: 9px 15px !important; }
  .hashtag-strip-wrap { margin-top: 12px !important; }
  .hashtag-strip-wrap p {
    max-width: 100% !important;
    overflow-wrap: anywhere;
    line-height: 1.45 !important;
  }
  .compact-heading h2 { font-size: 17px !important; }

  .featured-video-card {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 14px !important;
  }
  .featured-meta {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    grid-template-columns: 40px minmax(0,1fr) !important;
  }
  .featured-meta h3 { font-size: 17px !important; }
  .home-stats { margin: 8px 0 12px !important; font-size: 12px !important; }

  .yt-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .yt-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(118px,43%) minmax(0,1fr) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .yt-thumb {
    min-width: 0 !important;
    aspect-ratio: 16/9 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  .yt-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .yt-info { min-width: 0 !important; padding: 3px 0 10px 10px !important; align-items: flex-start !important; }
  .yt-info > .video-avatar, .yt-text .content-hashtags { display: none !important; }
  .yt-text { min-width: 0 !important; }
  .yt-text h2 {
    display: -webkit-box !important;
    margin: 0 20px 5px 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
    font-size: 14px !important;
    line-height: 1.28 !important;
  }
  .yt-channel-name, .yt-text p {
    display: block !important;
    overflow: hidden !important;
    color: #aeb5c9 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .yt-info .dots {
    position: absolute !important;
    top: 2px !important;
    right: 0 !important;
    width: 24px !important;
    height: 32px !important;
    padding: 0 !important;
  }

  .yt-sidebar, .dashboard-mobile-nav {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    z-index: 80 !important;
    display: grid !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 6px !important;
    gap: 2px !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 17px !important;
    background: rgba(13,16,31,.96) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.56) !important;
    backdrop-filter: blur(16px);
  }
  .yt-sidebar[data-mobile-app-nav="1"] > *:not(.mobile-nav-item) { display: none !important; }
  .yt-sidebar[data-mobile-app-nav="1"] > a:not(.mobile-nav-item) { display: none !important; }
  .yt-sidebar[data-mobile-app-nav="1"] .mobile-nav-item,
  .yt-sidebar[data-mobile-app-nav="1"] a.mobile-nav-create[href*="upload.html"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #bec5d8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  .yt-sidebar[data-mobile-app-nav="1"] .mobile-nav-item .nav-icon {
    width: 23px !important;
    height: 23px !important;
    margin: 0 !important;
    object-fit: contain !important;
  }
  .yt-sidebar[data-mobile-app-nav="1"] .mobile-nav-label {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .yt-sidebar[data-mobile-app-nav="1"] .mobile-nav-home { order: 1 !important; }
  .yt-sidebar[data-mobile-app-nav="1"] .mobile-nav-arts { order: 2 !important; }
  .yt-sidebar[data-mobile-app-nav="1"] .mobile-nav-create { order: 3 !important; transform: translateY(-15px) !important; }
  .yt-sidebar[data-mobile-app-nav="1"] .mobile-nav-history { order: 4 !important; }
  .yt-sidebar[data-mobile-app-nav="1"] .mobile-nav-profile { order: 5 !important; }
  .yt-sidebar[data-mobile-app-nav="1"] .mobile-nav-item.active,
  .yt-sidebar[data-mobile-app-nav="1"] .mobile-nav-item:hover { background: rgba(153,78,242,.2) !important; color: #fff !important; }

  .mobile-create-symbol {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 50px !important;
    height: 50px !important;
    border: 2px solid rgba(207,119,255,.72) !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg,#281247,#54179e) !important;
    box-shadow: 0 8px 28px rgba(155,77,255,.4) !important;
  }
  .mobile-create-symbol img { width: 38px !important; height: 38px !important; object-fit: contain !important; opacity: .95; }
  .mobile-create-symbol b {
    position: absolute !important;
    right: 4px !important;
    bottom: 3px !important;
    display: grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #f041c4 !important;
    color: #fff !important;
    font-size: 15px !important;
  }
  .mobile-more-toggle { position: static !important; margin: 0 !important; font-size: 24px !important; }
  .mobile-more-menu { bottom: 84px !important; }
  .donation-corner { bottom: 88px !important; padding: 9px 12px !important; font-size: 11px !important; }

  .channel-dashboard-page {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 10px 28px !important;
  }
  .channel-dashboard-hero {
    display: grid !important;
    grid-template-columns: 78px minmax(0,1fr) !important;
    gap: 13px !important;
    width: 100% !important;
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .channel-dashboard-avatar { width: 78px !important; height: 78px !important; min-width: 78px !important; }
  .channel-dashboard-identity { min-width: 0 !important; }
  .channel-dashboard-identity h1 { overflow-wrap: anywhere !important; font-size: 23px !important; }
  .channel-dashboard-identity p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px !important;
  }
  .channel-dashboard-hero-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 7px !important; }
  .channel-dashboard-hero-actions a { min-height: 38px !important; padding: 8px 10px !important; font-size: 12px !important; }
  .channel-dashboard-stats {
    grid-column: 1/-1 !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  .channel-dashboard-stats > div { min-height: 64px !important; padding: 9px !important; }
  .channel-dashboard-stats strong { font-size: 22px !important; }
  .channel-dashboard-shell { display: block !important; width: 100% !important; margin-top: 12px !important; }
  .channel-dashboard-nav { margin-top: 0 !important; border: 0 !important; background: transparent !important; }
  .channel-dashboard-nav button {
    min-height: 40px !important;
    padding: 8px 13px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 999px !important;
    background: #171b2d !important;
    font-size: 12px !important;
  }
  .channel-dashboard-nav button.active {
    border-color: #d25bdd !important;
    background: linear-gradient(135deg,#7437db,#e23dbd) !important;
  }
  .channel-dashboard-content, .channel-dashboard-panel {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .channel-dashboard-panel.active { display: block !important; }
  .channel-dashboard-heading {
    align-items: flex-start !important;
    padding: 14px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 12px !important;
    background: #111629 !important;
  }
  .channel-dashboard-heading h2 { font-size: 20px !important; }
  .dashboard-quick-actions {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  .dashboard-quick-actions > * {
    min-width: 0 !important;
    min-height: 76px !important;
    padding: 10px 6px !important;
    text-align: center !important;
    font-size: 11px !important;
  }
  .dashboard-overview-grid,
  .dashboard-content-grid,
  .dashboard-gallery-grid { grid-template-columns: 1fr !important; }
  .dashboard-overview-grid > section { min-width: 0 !important; padding: 13px !important; }
  .dashboard-overview-item { grid-template-columns: 88px minmax(0,1fr) !important; }
  .dashboard-playlist-form > div, .dashboard-settings-card { grid-template-columns: 1fr !important; }

  .discovery-results-page {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 10px 90px !important;
  }
  .discovery-page-hero { padding: 18px !important; border-radius: 14px !important; }
  .hashtag-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .discovery-mixed-grid, .trend-columns { grid-template-columns: 1fr !important; }
  .trend-columns > div:last-child { grid-column: auto !important; }
  .hashtag-admin-create, .hashtag-admin-tools { grid-template-columns: 1fr !important; }
}

@media (max-width: 390px) {
  .yt-topbar, .right-top { gap: 4px !important; }
  .notify-bell, .furmap-return-btn, .top-avatar, .mobile-search-toggle, .mobile-more-toggle {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
  }
  .language-switch select { width: 53px !important; min-width: 53px !important; padding-inline: 6px !important; }
  .featured-video-card { min-height: 0 !important; }
  .yt-card { grid-template-columns: 108px minmax(0,1fr) !important; }
  .yt-sidebar .mobile-nav-item { font-size: 9px !important; }
  .channel-dashboard-hero { grid-template-columns: 64px minmax(0,1fr) !important; }
  .channel-dashboard-avatar { width: 64px !important; height: 64px !important; min-width: 64px !important; }
  .channel-dashboard-identity h1 { font-size: 20px !important; }
  .dashboard-quick-actions { grid-template-columns: 1fr !important; }
}