/* Layout: NAV | DETAILS | MAIN */
    .layout{
      min-height: 100%;
      display: grid;
      grid-template-columns: var(--nav-w) var(--detail-w) 1fr;
    }
    /* Start collapsed: hide details column */
    .layout.detail-hidden{
      grid-template-columns: var(--nav-w) 0 1fr;
    }

    /* Left nav panel */
    aside.nav{
      background: var(--panel-bg);
      backdrop-filter: blur(6px);
      border-right: 1px solid var(--panel-border);
      box-shadow: var(--shadow);
      padding: 14px;

      overflow-y: auto;
      overflow-x: visible;

      z-index: 5;
    }

    .brand{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:10px;
      margin-bottom: 10px;
    }
    .brand h1{
      margin: 0;
      font-size: 18px;
      letter-spacing: 1px;
    }
    .badge{
      font-size: 12px;
      color: var(--muted);
      border: 1px solid var(--panel-border);
      background: rgba(0,0,0,0.25);
      padding: 4px 8px;
      border-radius: 999px;
    }

    .nav-links{
      display:flex;
      gap:10px;
      margin: 8px 0 14px 0;
      flex-wrap: wrap;
    }
    .nav-links a{
      color: var(--text);
      text-decoration: none;
      font-size: 13px;
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px solid var(--panel-border);
      background: rgba(255,255,255,0.06);
    }
    .nav-links a:hover{ background: rgba(255,255,255,0.10); }

    .nav-section{ margin-top: 12px; }

    .nav-section-title{
      font-weight: 700;
      cursor: pointer;
      user-select:none;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--panel-border);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
    }
    .nav-section-title:hover{ background: rgba(255,255,255,0.10); }
    .nav-section-title .meta{
      font-weight: 600;
      font-size: 12px;
      color: var(--muted);
    }

    .nav-list{ margin-top: 10px; padding: 0; }
    .nav-list.is-collapsed{ display:none; }

    .filter-row{ display:flex; gap:8px; margin-bottom: 10px; }
    .filter-row input{
      width: 100%;
      padding: 10px 10px;
      border-radius: 12px;
      border: 1px solid var(--input-border);
      background: var(--input-bg);
      color: var(--text);
      outline: none;
    }
    .filter-row input::placeholder{ color: rgba(255,255,255,0.55); }

    .nav-item{
      display:block;
      padding: 9px 10px;
      margin: 6px 0;
      border-radius: 12px;
      border: 1px solid var(--panel-border);
      background: var(--item-bg);
      color: var(--text);
      text-decoration:none;
      cursor: pointer;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .nav-item:hover{ background: var(--item-bg-hover); }
    .nav-item.is-active{
      background: rgba(255,255,255,0.18);
      border-color: rgba(255,255,255,0.22);
    }
	/* Limit Artists list to ~5 visible rows, with its own scroll */
	#artistsItems{
	  max-height: calc(5 * 46px);  /* ~5 rows; tweak 46px if you change padding/margins */
	  overflow-y: auto;
	  overflow-x: hidden;
	  padding-right: 6px;          /* keeps text from sitting under the scrollbar */
	}
	#datesItems{
	  max-height: calc(5 * 46px);
	  overflow-y: auto;
	  overflow-x: hidden;
	  padding-right: 6px;
	}

	#songsItems{
	  max-height: calc(5 * 46px);
	  overflow-y: auto;
	  overflow-x: hidden;
	  padding-right: 6px;
	}
	
	
    /* Details panel (reserved column) */
    #detailPanel{
      background: rgba(0,0,0,0.55);
      border-right: 1px solid var(--panel-border);
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);

  	  align-self: start;                 /* ensure it hugs the top */
  	  max-height: min(520px, calc(100vh - 30px));
  	  overflow: auto;                    /* only scroll when taller than max-height */
  	  border-radius: 18px;               /* optional, matches your screenshot vibe */  
	  margin: 14px 14px 0 14px;

     overflow: auto;
      padding: 14px;

      display: none; /* shown via .show */
      z-index: 6;
    }
    #detailPanel.show{ display:block; }

    .flyout-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding: 10px 10px 10px 10px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      margin-bottom: 12px;
    }
    .flyout-title{
      font-weight: 800;
      letter-spacing: 0.2px;
      line-height: 1.2;
    }
    .flyout-sub{
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
    }
    .flyout-close{
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.16);
      color: var(--text);
      border-radius: 10px;
      padding: 6px 10px;
      cursor: pointer;
    }
    .flyout-close:hover{ background: rgba(255,255,255,0.16); }

    .flyout-body{ padding: 0 4px; }

    .song-list{ margin: 0; padding: 0; list-style: none; }
    .song{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding: 9px 10px;
      margin: 8px 0;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.07);
      cursor: pointer;
    }
    .song:hover{ background: rgba(255,255,255,0.12); }
    .song .name{
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 340px;
    }
    .song .count{
      color: var(--muted);
      font-size: 12px;
      flex: none;
    }

    /* Main content area */
    main{ position: relative; padding: 26px; }

    .hero{
      max-width: 920px;
      background: rgba(0,0,0,0.35);
      border: 1px solid var(--panel-border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px 18px;
    }
    .hero h2{ margin: 0 0 8px 0; font-size: 22px; }
    .hero p{ margin: 0; color: var(--muted); line-height: 1.4; }

    /* Mobile */
    @media (max-width: 980px){
      .layout{
        grid-template-columns: 1fr;
      }
      .layout.detail-hidden{
        grid-template-columns: 1fr;
      }
      aside.nav{
        border-right: 0;
        border-bottom: 1px solid var(--panel-border);
      }
      #detailPanel{
        border-right: 0;
        border-bottom: 1px solid var(--panel-border);
      }
    }