*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body { display: flex; height: 100vh; overflow: hidden; font-family: sans-serif; }

  /* Sidebar */
  aside {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ddd;
    overflow: hidden;
  }


  .back { padding: 2rem 1rem; border-top: 1px solid #d8d8d8; font-size: 1 rem; color: #000000; }

  .sidebar-top { padding: 1rem; border-bottom: 1px solid #ddd; }

  .sidebar-top h1 { font-size: 1.1rem;}

  nav { flex: 1; overflow-y: auto; }

  nav a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    cursor: pointer;
    color: #555;
    font-size: 0.9rem;
    border-left: 2px solid transparent;
  }


  nav a:hover  { color: #000; }
  nav a.active { color: #000; border-left-color: #000; font-weight: 600; }
  nav a .count { color: #aaa; font-size: 0.8rem; }

  /* Music player — lives here so it never unloads on gallery switch */
  .player { padding: 0.75rem 1rem; border-top: 1px solid #ddd; font-size: 0.85rem; color: #888; }

  /* Gallery frame */
  main { flex: 1; overflow: hidden; }
  iframe { width: 100%; height: 100%; border: none; display: block; }