:root {
  color-scheme: dark;
  --bg: #0f0f0f;
  --surface: #272727;
  --surface-hover: #3f3f3f;
  --line: #303030;
  --text: #f1f1f1;
  --muted: #aaa;
  --sidebar: 240px;
  --topbar: 56px;
  font-family: Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.topbar {
  align-items: center;
  background: rgba(15, 15, 15, .98);
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(300px, 680px) minmax(190px, 1fr);
  height: var(--topbar);
  left: 0;
  padding: 0 16px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 20;
}

.topbar__start, .topbar__actions, .brand, .search { align-items: center; display: flex; }
.topbar__start { gap: 14px; }
.topbar__actions { gap: 8px; justify-content: flex-end; }
.icon-button { align-items: center; background: transparent; border: 0; border-radius: 50%; cursor: pointer; display: inline-flex; height: 40px; justify-content: center; min-width: 40px; padding: 8px; }
.icon-button:hover { background: var(--surface); }
.icon-button svg { height: 24px; width: 24px; }

.brand { gap: 4px; position: relative; }
.brand__mark { display: inline-flex; height: 20px; width: 28px; }
.brand__mark svg { height: 20px; width: 28px; fill: #f03; stroke: none; }
.brand__mark .brand__play { fill: #fff; }
.brand__name { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 20px; letter-spacing: -.45px; transform: scaleX(.82); transform-origin: left center; width: 72px; }
.brand sup { color: var(--muted); font-size: 10px; left: 108px; position: absolute; top: 2px; }

.search { gap: 16px; justify-content: center; padding-left: 24px; }
.search__field { display: flex; flex: 1; min-width: 0; position: relative; }
.search input { background: #121212; border: 1px solid var(--line); border-radius: 22px 0 0 22px; color: var(--text); height: 40px; outline: 0; padding: 0 44px 0 16px; width: 100%; }
.search input:focus { border-color: #1c62b9; box-shadow: inset 1px 0 #1c62b9; }
.search__keyboard { background: transparent; border: 0; color: #aaa; cursor: pointer; font-size: 15px; height: 38px; position: absolute; right: 4px; }
.search__submit { align-items: center; background: #222; border: 1px solid var(--line); border-left: 0; border-radius: 0 22px 22px 0; cursor: pointer; display: flex; height: 40px; justify-content: center; margin-left: -16px; min-width: 64px; }
.search__submit:hover { background: #303030; }
.search__submit svg { height: 24px; width: 24px; }
.search__voice { background: #272727; margin-left: 0; }

.create-button { background: var(--surface); border: 0; border-radius: 20px; cursor: pointer; font-weight: 600; height: 36px; padding: 0 14px 0 10px; }
.create-button:hover { background: var(--surface-hover); }
.create-button span { font-size: 23px; font-weight: 300; margin-right: 5px; vertical-align: -2px; }
.notification-button { position: relative; }
.badge { background: #c00; border: 2px solid var(--bg); border-radius: 10px; font-size: 11px; line-height: 16px; min-width: 18px; padding: 0 3px; position: absolute; right: 0; top: 3px; }
.avatar { align-items: center; border: 0; border-radius: 50%; display: inline-flex; flex: 0 0 auto; font-size: 14px; height: 32px; justify-content: center; width: 32px; }
.avatar--user { background: linear-gradient(145deg, #26a69a, #00796b); cursor: pointer; margin: 0 6px; }
.avatar--cyan { background: #167d8c; }.avatar--violet { background: #6844aa; }.avatar--orange { background: #ad4f1c; }

.sidebar { background: var(--bg); bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; padding: 12px 12px 20px; position: fixed; top: var(--topbar); width: var(--sidebar); z-index: 15; }
.sidebar::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
.nav-section { border-bottom: 1px solid var(--line); padding: 0 0 12px; margin-bottom: 12px; }
.nav-section h2 { font-size: 16px; margin: 8px 12px; }
.nav-item { align-items: center; border-radius: 10px; display: flex; gap: 24px; height: 40px; overflow: hidden; padding: 0 12px; white-space: nowrap; }
.nav-item:hover, .nav-item.is-active { background: var(--surface); }
.nav-item.is-active { font-weight: 600; }
.nav-item svg { flex: 0 0 auto; height: 24px; width: 24px; }
.nav-item svg .icon-fill { fill: currentColor; stroke: none; }
.nav-item i { background: #3ea6ff; border-radius: 50%; height: 4px; margin-left: auto; width: 4px; }
.nav-item--heading { font-size: 16px; gap: 10px; }
.nav-item--heading b { font-size: 25px; font-weight: 300; }
.sidebar__footer { color: #aaa; font-size: 13px; font-weight: 600; line-height: 1.35; padding: 0 12px; }
.sidebar__footer p { margin: 12px 0; }
.sidebar__footer small { color: #717171; font-weight: 400; }

.main { margin-left: var(--sidebar); padding: calc(var(--topbar) + 56px) 24px 48px; transition: margin .2s ease; }
.chips-wrap { background: rgba(15,15,15,.98); height: 56px; left: var(--sidebar); padding: 8px 24px; position: fixed; right: 0; top: var(--topbar); transition: left .2s ease; z-index: 14; }
.chips { display: flex; gap: 12px; height: 40px; overflow-x: auto; scroll-behavior: smooth; }
.chip { background: var(--surface); border: 0; border-radius: 8px; cursor: pointer; flex: 0 0 auto; font-size: 14px; font-weight: 600; height: 32px; padding: 0 13px; transition: background .15s; }
.chip:hover { background: var(--surface-hover); }
.chip.is-active { background: #f1f1f1; color: #0f0f0f; }
.chip-scroll { background: var(--bg); border: 0; cursor: pointer; display: none; font-size: 28px; height: 40px; position: absolute; top: 6px; width: 44px; z-index: 2; }
.chip-scroll--left { left: 8px; }.chip-scroll--right { right: 8px; }

.video-grid { display: grid; gap: 40px 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.video-card { cursor: pointer; min-width: 0; }
.thumbnail { aspect-ratio: 16/9; background: #242424; border-radius: 12px; overflow: hidden; position: relative; transition: border-radius .2s; }
.video-card:hover .thumbnail { border-radius: 0; }
.thumbnail img { display: block; height: 100%; object-fit: cover; transition: transform .35s ease; width: 100%; }
.video-card:hover .thumbnail img { transform: scale(1.025); }
.thumbnail::after { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.3)); bottom: 0; content: ''; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; }
.duration { background: rgba(0,0,0,.82); border-radius: 4px; bottom: 6px; font-size: 12px; font-weight: 600; line-height: 18px; padding: 0 4px; position: absolute; right: 6px; z-index: 1; }
.live-badge { background: #f03; border-radius: 3px; bottom: 6px; font-size: 12px; font-weight: 700; left: 6px; padding: 3px 5px; position: absolute; z-index: 1; }
.video-card__body { display: grid; gap: 12px; grid-template-columns: 36px minmax(0,1fr) 24px; padding-top: 12px; }
.video-card__avatar { background: var(--avatar, #555); border-radius: 50%; display: grid; font-weight: 700; height: 36px; place-items: center; width: 36px; }
.video-card h3 { display: -webkit-box; font-size: 16px; line-height: 22px; margin: 0 0 5px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.meta { color: var(--muted); line-height: 19px; }
.verified { border: 1px solid #777; border-radius: 50%; display: inline-grid; font-size: 8px; height: 13px; margin-left: 3px; place-items: center; vertical-align: 1px; width: 13px; }
.more-button { background: transparent; border: 0; border-radius: 50%; cursor: pointer; font-size: 25px; height: 36px; opacity: 0; width: 24px; }
.video-card:hover .more-button, .more-button:focus { opacity: 1; }
.no-results { color: var(--muted); font-size: 18px; grid-column: 1/-1; padding: 80px 0; text-align: center; }

.shorts { border-top: 4px solid var(--line); margin-top: 48px; padding: 24px 0 40px; }
.section-title { align-items: center; display: flex; gap: 10px; margin-bottom: 20px; }
.section-title h2 { font-size: 22px; margin: 0; }
.section-title .icon-button { margin-left: auto; font-size: 30px; font-weight: 200; }
.shorts-logo { background: #f03; border-radius: 6px 2px 6px 2px; display: grid; font-size: 12px; font-style: italic; font-weight: 900; height: 24px; place-items: center; transform: skew(-8deg); width: 18px; }
.shorts-grid { display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.short-card { cursor: pointer; min-width: 0; }
.short-card__image { aspect-ratio: 9/16; background: #222; border-radius: 12px; overflow: hidden; position: relative; }
.short-card img { height: 100%; object-fit: cover; width: 100%; }
.short-card h3 { display: -webkit-box; font-size: 15px; line-height: 20px; margin: 10px 0 4px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.short-card p { color: var(--muted); margin: 0; }

.toast { background: #f1f1f1; border-radius: 4px; bottom: 24px; color: #0f0f0f; left: 50%; max-width: calc(100% - 32px); opacity: 0; padding: 12px 18px; pointer-events: none; position: fixed; transform: translate(-50%, 18px); transition: .2s; z-index: 50; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.mobile-nav { display: none; }

body.sidebar-collapsed { --sidebar: 72px; }
body.sidebar-collapsed .sidebar { padding-left: 4px; padding-right: 4px; }
body.sidebar-collapsed .nav-section { border: 0; }
body.sidebar-collapsed .nav-item { flex-direction: column; font-size: 10px; gap: 5px; height: 74px; justify-content: center; padding: 0 2px; }
body.sidebar-collapsed .nav-section:nth-child(2) .nav-item:not(:first-child), body.sidebar-collapsed .nav-item--heading, body.sidebar-collapsed .sidebar__wide-only { display: none; }

@media (min-width: 1350px) { .video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  body { --sidebar: 72px; }
  .sidebar { padding-left: 4px; padding-right: 4px; }
  .nav-section { border: 0; }
  .nav-item { flex-direction: column; font-size: 10px; gap: 5px; height: 74px; justify-content: center; padding: 0 2px; }
  .nav-section:nth-child(2) .nav-item:not(:first-child), .nav-item--heading, .sidebar__wide-only { display: none; }
  .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .topbar { grid-template-columns: auto 1fr auto; padding: 0 10px; }
  .topbar__start { gap: 4px; }
  .topbar__start > .icon-button { display: none; }
  .topbar__actions .create-button { display: none; }
  .search { justify-content: flex-end; padding-left: 4px; }
  .search__field { display: none; }
  .search__submit { background: transparent; border: 0; border-radius: 50%; margin: 0; min-width: 40px; }
  .search__voice { display: none; }
  .sidebar { display: none; }
  .main { margin-left: 0; padding-left: 12px; padding-right: 12px; padding-bottom: 80px; }
  .chips-wrap { left: 0; padding-left: 12px; padding-right: 0; }
  .video-grid { gap: 28px 12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .shorts-grid { grid-template-columns: repeat(3, minmax(0,1fr)); overflow: hidden; }
  .mobile-nav { align-items: center; background: rgba(15,15,15,.98); border-top: 1px solid var(--line); bottom: 0; display: grid; grid-template-columns: repeat(5,1fr); height: 58px; left: 0; position: fixed; right: 0; z-index: 30; }
  .mobile-nav a, .mobile-nav button { align-items: center; background: transparent; border: 0; display: flex; flex-direction: column; font-size: 10px; gap: 2px; justify-content: center; }
  .mobile-nav svg { height: 23px; width: 23px; }
  .mobile-create { border: 1px solid #aaa; border-radius: 50%; display: grid; font-size: 27px; font-weight: 200; height: 35px; line-height: 30px; place-items: center; width: 35px; }
  .avatar--tiny { background: #00796b; height: 23px; width: 23px; }
}

@media (max-width: 560px) {
  .brand__name { font-size: 18px; width: 66px; }
  .brand sup { left: 99px; }
  .topbar__actions { gap: 0; }
  .avatar--user { margin-right: 0; }
  .main { padding-left: 0; padding-right: 0; }
  .chips-wrap { padding-left: 8px; }
  .video-grid { display: block; }
  .video-card { margin-bottom: 28px; }
  .thumbnail { border-radius: 0; }
  .video-card__body { padding-left: 12px; padding-right: 8px; }
  .shorts { padding-left: 12px; }
  .shorts-grid { grid-auto-columns: 42%; grid-template-columns: none; grid-auto-flow: column; overflow-x: auto; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }