:root {
      --bg: #0f0f0f;
      --sidebar: #0f0f0f;
      --panel: #181818;
      --hover: #272727;
      --divider: #2a2a2a;
      --text: #f1f1f1;
      --muted: #aaaaaa;
      --accent: #ff0000;
      --link: #3ea6ff;
    }

    html, body {
      background: var(--bg);
      color: var(--text);
      margin: 0;
      font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }

    .app {
      display: grid;
      grid-template-columns: 240px 1fr;
      grid-template-rows: 56px 1fr;
      grid-template-areas:
        "sidebar header"
        "sidebar main";
      height: 100dvh;
    }

    header {
      grid-area: header;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 0 16px;
      border-bottom: 1px solid var(--divider);
      position: sticky;
      top: 0;
      background: var(--bg);
      z-index: 3;
    }

    header .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      letter-spacing: .2px;
    }

    header .brand .dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--accent);
      display: inline-block;
    }

    header input[type="search"]{
      width: min(680px, 55%);
      background: var(--panel);
      border: 1px solid var(--divider);
      color: var(--text);
      border-radius: 24px;
      padding: 10px 14px;
      outline: none;
    }

    aside {
      grid-area: sidebar;
      background: var(--sidebar);
      border-right: 1px solid var(--divider);
      padding: 12px 8px 20px 8px;
      overflow-y: auto;
    }

    .logo {
      display: flex;
      justify-content: center;
      margin-bottom: 16px;
    }
    .logo img {
      width: 120px;
      height: auto;
    }

    .nav-section { margin: 10px 0 16px; }
    .nav-title {
      font-size: 12px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .08em;
      padding: 8px 12px;
    }

    nav a {
      display: grid;
      grid-template-columns: 24px 1fr;
      align-items: center;
      gap: 14px;
      color: var(--text);
      text-decoration: none;
      padding: 10px 12px;
      border-radius: 10px;
    }
    nav a:hover { background: var(--hover); }
    nav a.active { background: var(--hover); font-weight: 600; }
    nav a .icon { width: 22px; height: 22px; display: inline-grid; place-items: center; }
    nav a .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    main {
      grid-area: main;
      overflow-y: auto;
      padding: 20px min(3vw, 24px) 40px;
    }

    .grid {
      display: grid;
      gap: 16px;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .card {
      background: var(--panel);
      border: 1px solid var(--divider);
      border-radius: 12px;
      overflow: hidden;
    }

    .thumb { aspect-ratio: 16/9; background: #000; display: block; width: 100%; }
    .thumb iframe, .thumb video { width: 100%; height: 100%; border: 0; display: block; }

    .meta { padding: 10px 12px 14px; }
    .title {
      font-size: 15px;
      font-weight: 600;
      margin: 0 0 6px 0;
      line-height: 1.3;
    }
    .title a { color: var(--text); text-decoration: none; }
    .title a:hover { color: var(--link); }
    .desc { color: var(--muted); font-size: 13px; }

    @media (max-width: 840px) {
      .app {
        grid-template-columns: 72px 1fr;
      }
      .nav-title { display:none; }
      nav a .label { display: none; }
    }