/* =====================================================
   CLOUD.CSS — Cloud sub-pages: Photos, Video, Music
   ===================================================== */

/* ---- Sidebar Sub-nav (collapsible) ---- */
.sidebar-subnav {
  overflow:hidden; max-height:0;
  transition:max-height 0.28s ease;
  display:flex; flex-direction:column; gap:2px;
  margin-left:0.5rem;
}
.sidebar-subnav.open {
  max-height:260px;
  margin-top:2px;
  margin-bottom:4px;
}

.sidebar-sublink {
  display:flex; align-items:center; gap:0.65rem;
  padding:0.5rem 0.85rem; border-radius:var(--radius-sm);
  font-size:0.85rem; font-weight:700;
  color:var(--sidebar-text);
  background:transparent; border:2px solid transparent; width:100%;
  cursor:pointer; transition:all 0.12s var(--ease-bounce);
  text-align:left; box-sizing:border-box;
}
@media (hover: hover) { .sidebar-sublink:hover { color:var(--txt-inverse); background:rgba(255,255,255,0.08); } }
.sidebar-sublink.active {
  color:var(--yellow);
  background:rgba(245,200,66,0.15);
  border-color:rgba(245,200,66,0.3);
}
.sidebar-sublink svg, .sidebar-sublink i { width:15px; height:15px; flex-shrink:0; }
.sidebar-sublink-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--sidebar-muted); flex-shrink:0;
}
.sidebar-sublink.active .sidebar-sublink-dot { background:var(--yellow); }


/* ---- Photos Page ---- */
.photos-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:1rem;
}
.photo-card {
  background:var(--surface); border:var(--border-thick);
  border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform 0.16s var(--ease-bounce), box-shadow 0.16s;
}
@media (hover: hover) { .photo-card:hover { transform:translate(-3px,-3px); box-shadow:var(--shadow-md); } }
.photo-thumb {
  width:100%; aspect-ratio:4/3; object-fit:cover;
  display:block; background:var(--surface-alt);
  border-bottom:var(--border);
}
.photo-info {
  padding:0.65rem 0.75rem;
  display:flex; align-items:center; justify-content:space-between;
}
.photo-name { font-size:0.8rem; font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.photo-size { font-family:var(--mono); font-size:0.7rem; color:var(--txt-muted); }

.photo-empty, .video-empty, .music-empty {
  text-align:center; padding:4rem 1rem;
  color:var(--txt-muted); display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.photo-empty i, .video-empty i, .music-empty i { width:56px; height:56px; color:var(--txt-muted); }
.photo-empty h3, .video-empty h3, .music-empty h3 { font-size:1.1rem; color:var(--txt-secondary); }
.photo-empty p, .video-empty p, .music-empty p { font-size:0.85rem; }

/* ---- Videos Page ---- */
.videos-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:1.15rem;
}
.video-card {
  background:var(--surface); border:var(--border-thick);
  border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform 0.16s var(--ease-bounce), box-shadow 0.16s;
}
@media (hover: hover) { .video-card:hover { transform:translate(-3px,-3px); box-shadow:var(--shadow-md); } }
.video-thumb-wrap {
  position:relative; width:100%; aspect-ratio:16/9;
  background:#111; border-bottom:var(--border);
  display:flex; align-items:center; justify-content:center;
}
.video-play-overlay {
  width:56px; height:56px;
  background:var(--yellow); border:var(--border-thick);
  border-radius:50%; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.15s var(--ease-bounce);
}
@media (hover: hover) { .video-card:hover .video-play-overlay { transform:scale(1.1); } }
.video-card-info { padding:0.85rem; }
.video-card-name { font-size:0.88rem; font-weight:800; color:var(--ink); margin-bottom:0.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.video-card-meta { font-family:var(--mono); font-size:0.72rem; color:var(--txt-muted); }

/* ---- Music Page ---- */
.music-header-card {
  background:var(--surface-deep); border:var(--border-thick);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  padding:1.5rem; margin-bottom:1.5rem;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.music-art {
  width:90px; height:90px; flex-shrink:0;
  background:var(--yellow); border:var(--border-thick);
  box-shadow:var(--shadow-md); border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem;
}
.music-now-title { font-size:1.15rem; font-weight:900; color:var(--txt-inverse); margin-bottom:0.25rem; }
.music-now-sub { font-size:0.82rem; color:rgba(255,255,255,0.5); font-family:var(--mono); }
.music-controls { display:flex; align-items:center; gap:0.65rem; margin-top:1rem; }

.music-list { display:flex; flex-direction:column; gap:0; }
.music-track {
  display:flex; align-items:center; gap:1rem;
  padding:0.75rem 1rem;
  background:var(--surface); border:var(--border-thick);
  border-radius:var(--radius-sm); margin-bottom:0.5rem;
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform 0.14s var(--ease-bounce), box-shadow 0.14s, background 0.12s;
}
@media (hover: hover) { .music-track:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-md); background:var(--yellow-lt); } }
.music-track.playing { background:var(--yellow); border-color:var(--ink); }
.music-track-num { font-family:var(--mono); font-size:0.82rem; color:var(--txt-muted); width:28px; text-align:center; flex-shrink:0; }
.music-track.playing .music-track-num { color:var(--ink); }
.music-track-ico {
  width:36px; height:36px; border-radius:var(--radius-sm);
  background:var(--cyan-lt); border:var(--border);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.music-track.playing .music-track-ico { background:var(--ink); color:var(--yellow); border-color:var(--ink); }
.music-track-name { font-weight:800; font-size:0.88rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-track-size { font-family:var(--mono); font-size:0.75rem; color:var(--txt-muted); }

/* ---- Equalizer animation on playing track ---- */
.eq-bar {
  display:inline-flex; align-items:flex-end; gap:2px; height:16px;
}
.eq-bar span {
  width:3px; background:var(--ink); border-radius:1px;
  animation:eqBounce 0.6s ease-in-out infinite alternate;
}
.eq-bar span:nth-child(1) { animation-duration:0.5s; height:8px; }
.eq-bar span:nth-child(2) { animation-duration:0.7s; height:14px; }
.eq-bar span:nth-child(3) { animation-duration:0.4s; height:10px; }
@keyframes eqBounce {
  from { transform:scaleY(0.3); }
  to   { transform:scaleY(1); }
}

/* ---- Cloud breadcrumb tabs ---- */
.cloud-tabs {
  display:flex; gap:0; margin-bottom:1.5rem;
  background:var(--surface); border:var(--border-thick);
  border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.cloud-tab {
  flex:1; display:flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.75rem 1rem; font-size:0.85rem; font-weight:800;
  border-right:var(--border); cursor:pointer;
  transition:background 0.12s; color:var(--txt-secondary);
}
.cloud-tab:last-child { border-right:none; }
@media (hover: hover) { .cloud-tab:hover { background:var(--yellow-lt); color:var(--ink); } }
.cloud-tab.active { background:var(--yellow); color:var(--ink); }
.cloud-tab i { width:16px; height:16px; }

@media(max-width:640px) {
  .cloud-tab span { display:none; }
  .cloud-tab { flex:none; width:48px; }
}