body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #000000;
      color: white;
    }
    .video-list {
      display: flex;
      flex-direction: column;
      padding-bottom: 80px;
    }
    .video-item {
      margin-bottom: 16px;
    }
    .thumbnail {
      position: relative;
    }
    .thumbnail img {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9; /* konsisten */
      object-fit: cover;
      display: block;
      max-height: 220px; /* smaller main thumbnails */
    }
    .time {
      position: absolute;
      bottom: 6px;
      right: 6px;
      background: rgba(0,0,0,0.85);
      padding: 2px 6px;
      font-size: 12px;
      border-radius: 3px;
    }
    .details {
      display: flex;
      padding: 10px;
    }
    .channel-logo img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 10px;
      object-fit: cover; /* ensure image fills the circle */
      object-position: center; /* center the subject */
      display: block;
      background: rgba(255,255,255,0.03); /* subtle fallback */
    }
    .info {
      flex: 1;
    }
    .video-link { color: inherit; text-decoration: none; display: block }
    .title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 4px;
      line-height: 1.4em;
    }
    .meta {
      font-size: 12px;
      color: #aaa;
    }
    .more {
      font-size: 20px;
      color: #aaa;
      align-self: flex-start;
      background: transparent; /* remove default button background */
      border: 0;
      padding: 4px; /* keep tappable area */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
    }
    .more:focus,
    .more:focus-visible {
      outline: 2px solid rgba(62,166,255,0.18);
      outline-offset: 2px;
    }
    .more-icon { width: 18px; height: 18px; display: block; }

    /* Shorts */
    .shorts-section {
      padding: 10px;
    }
    .shorts-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .shorts-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .see-shorts {
      background: transparent;
      border: none;
      color: #cce6ff;
      font-size: 13px;
      cursor: pointer;
      padding: 6px 8px;
      border-radius: 6px;
    }
    .see-shorts:hover { background: rgba(204,230,255,0.04); }
    .shorts-list {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      scroll-snap-type: x mandatory; /* enable snap */
      -webkit-overflow-scrolling: touch;
      padding-bottom: 6px;
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
    }
    .shorts-list::-webkit-scrollbar { display: none; } /* Chrome, Safari */
    .short-item {
      /* Make exactly 5 items fit the container (account for 4 gaps of 10px = 40px) */
      flex: 0 0 calc((100% - 40px) / 5);
      scroll-snap-align: start; /* snap each item to start */
      max-width: 160px; /* cap width so thumbnails appear smaller on very wide screens */
    }
    .short-item {
      position: relative; /* container for title overlay */
    }

    .short-item img {
      width: 100%;
      aspect-ratio: 9 / 16; /* konsisten shorts */
      border-radius: 8px;
      object-fit: cover;
      display: block;
      max-height: 220px; /* default cap for shorts */
    }

    /* Title overlay inside the thumbnail */
    .short-item .title {
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 8px;
      margin: 0;
      color: #ffffff;
      font-size: 12px;
      line-height: 1.2em;
      font-weight: 600;
      text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  display: -webkit-box;
  -webkit-line-clamp: 2; /* show max 2 lines */
  line-clamp: 2;
  -webkit-box-orient: vertical;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
      padding: 6px 8px;
      border-radius: 6px;
      backdrop-filter: blur(2px);
    }

    /* Responsive: fewer items per view on smaller screens */
    @media (max-width: 1200px) {
      .short-item { flex: 0 0 calc((100% - 30px) / 4); max-width: 140px; } /* 4 items, 3 gaps */
    }
    @media (max-width: 900px) {
      .short-item { flex: 0 0 calc((100% - 20px) / 3); max-width: 120px; } /* 3 items, 2 gaps */
      .short-item img { max-height: 180px; }
    }
    @media (max-width: 600px) {
      .short-item { flex: 0 0 calc((100% - 10px) / 2);} /* 2 items, 1 gap */
      .short-item img { max-height: 220px; }
    }
    @media (max-width: 360px) {
      .short-item { flex: 0 0 100%; } /* 1 item */
      .short-item img { max-height: none; }
    }
    .short-item .title {
      font-size: 12px;
      margin-top: 5px;
    }

    /* Ads */
    .ad-label {
      font-size: 12px;
      color: #ffd700;
      margin-bottom: 4px;
    }
    .ad-action {
      margin-top: 6px;
    }
    .ad-btn {
      background: #3ea6ff;
      color: white;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 3px;
      text-decoration: none;
    }

    /* Fixed header (always visible) moved out of the top-container */
    .app-header.fixed {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1300;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
      -webkit-backdrop-filter: blur(8px) saturate(120%);
      backdrop-filter: blur(8px) saturate(120%);
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }

    /* Top container (search + categories) scrolls with page content */
    .top-container {
      position: relative; /* no longer fixed - it will scroll away */
      top: auto;
      left: auto;
      right: auto;
      margin-top: 56px; /* ensure top-container sits below the fixed header */
      z-index: 1100;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 8px 10px 6px 10px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
      -webkit-backdrop-filter: blur(8px) saturate(120%);
      backdrop-filter: blur(8px) saturate(120%);
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }

    /* Header row */
    .app-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      overflow: hidden;
      background: rgba(255,255,255,0.03);
    }
    .avatar img {height: 100%; object-fit: cover; display:block }
    .logo img { height: 36px; display: block; object-fit: contain }
  .header-action { display:flex; align-items:center; padding:4px; background: transparent; border: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
  .header-icon { width:24px; height:24px; display:block; object-fit:contain }
    .user-meta {
      display: flex;
      flex-direction: column;
      font-size: 13px;
    }
    .user-meta .name { font-weight: 700; font-size: 14px }
    .user-meta .uid { font-size: 12px; color: #cfcfcf }

    /* Coin card compact */
    .coin-card {
      display:flex;
      align-items:center;
      gap:8px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      padding: 6px 10px;
      border-radius: 12px;
      border: 1px solid #ffffff1f;
    }
    .coin-card img { width: 24px; height: 24px; object-fit: contain; display:block }
    .coin-card .amount { font-weight: 700; font-size: 18px }

    /* Search + categories row */
    .top-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
    }
    .search-wrapper { flex: 1; display:flex; align-items:center }
    .search-input {
      width: 100%;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.05);
      background: rgba(255, 255, 255, 0.05);
      color: white;
      font-size: 13px;
    }
    .search-input::placeholder { color: #bfbfbf }
    .top-bar .categories {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
    }
    .top-bar .categories::-webkit-scrollbar { display: none; }
    .cat {
      white-space: nowrap;
      border: none;
      background: rgba(255,255,255,0.05);
      color: white;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      cursor: pointer;
    }
    .cat.active { background: rgba(62,166,255,0.18); color: #cce6ff }
    .cat:focus { outline: 2px solid rgba(62,166,255,0.18); }

  /* push content down a bit from the top of the top-container */
  .video-list { padding-top: 8px; padding-bottom: 96px; }

    /* Bottom navigation */
    /* Bottom nav: full width, flush to bottom (mepet bawah) */
    .bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: rgba(12,12,12,0.95);
      border-top: 1px solid rgba(255,255,255,0.03);
      border-radius: 0;
      z-index: 1200;
      backdrop-filter: blur(6px);
      padding: 6px 0;
    }
    /* Use anchors for bottom-nav items so markup is consistent and accessible */
    .bottom-nav a,
    .bottom-nav .mid-btn {
      background: transparent;
      border: none;
      color: #bfbfbf;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:2px;
      font-size:11px;
      cursor: pointer;
      padding: 4px 6px;
      min-width: 56px;
      text-decoration: none;
    }
    /* central add button styling (mid button is still an anchor but kept centered)
       keep it visually a bit tighter */
    .bottom-nav .mid-btn {
      min-width: 0;
      padding: 0;
      margin: 0 6px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:row; /* icon only */
    }
    .nav-icon.large { width: 36px; height: 36px; }
    .bottom-nav .bottom-nav-item.active,
    .bottom-nav .mid-btn.active { color: #ff3b30 }
    /* Try to tint monochrome SVG icons when active. This works best with single-color SVGs. */
    .bottom-nav .bottom-nav-item.active .nav-icon,
    .bottom-nav .mid-btn.active .nav-icon {
      /* approximate red tint via filter */
      filter: invert(21%) sepia(91%) saturate(6400%) hue-rotate(346deg) brightness(95%) contrast(101%);
    }
  .nav-icon { width: 24px; height: 24px; display: inline-block; }

  /* Sidebar / Drawer styles */
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1400;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
  }
  .drawer-backdrop.visible { opacity: 1; visibility: visible; }

  .drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 86vw;
    background: #171717;
    color: #fff;
    z-index: 1401;
    transform: translateX(-100%);
    transition: transform 260ms cubic-bezier(.2,.8,.2,1);
    display: flex;
    flex-direction: column;
    padding: 10px 6px;
    box-shadow: 4px 0 18px rgba(0,0,0,0.6);
    -webkit-overflow-scrolling: touch;
  }
  .drawer.open { transform: translateX(0); }

  .drawer .drawer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
  }
  .drawer .drawer-header img.logo { height: 32px; display:block }
  .drawer .drawer-title { font-weight:700; font-size:16px; }

  .drawer .drawer-menu {
    flex: 1;
    overflow: auto;
    padding: 8px 2px 12px 2px;
  }
  .drawer .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    color: #e6e6e6;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    background: transparent; /* ensure no default link background */
    text-decoration: none; /* remove underline */
  }
  /* make sure inner label doesn't get underlined on some browsers */
  .drawer .menu-item .label { text-decoration: none; color: inherit }
  /* keep a visible focus ring for keyboard users but no underline */
  .drawer .menu-item:focus,
  .drawer .menu-item:focus-visible {
    outline: 2px solid rgba(62,166,255,0.18);
    outline-offset: 2px;
  }
  .drawer .menu-item:hover { background: rgba(255,255,255,0.02); }
  .drawer .menu-item .icon { width: 22px; height: 22px; flex-shrink: 0; display:inline-block }
  .drawer .menu-item .label { flex: 1 }

  .drawer .section-sep { height: 1px; background: rgba(255,255,255,0.03); margin: 8px 4px; }

  .drawer .drawer-footer {
    padding: 8px 10px;
    font-size: 12px;
    color: #9a9a9a;
  }

  /* Make sure the drawer content doesn't overlap the fixed header when opened */
  @media (max-width: 420px) {
    .drawer { width: 86vw; }
  }