/* MyTube — shared premium app UI
   Applied to every authenticated app page so Home, Library, Study,
   Progress, Playlist, Channel, Add Content and Settings share one visual system.
*/
:root{
  --premium-card:linear-gradient(145deg,#17171c,#121216);
  --premium-border:rgba(255,255,255,.10);
  --premium-border-strong:rgba(255,255,255,.16);
}
[data-theme="light"]{
  --premium-card:linear-gradient(145deg,#ffffff,#fbfbfc);
  --premium-border:rgba(0,0,0,.08);
  --premium-border-strong:rgba(0,0,0,.14);
}

body.app-page,
body:not(:has(.landing-page)):not(:has(.auth-page)){
  background:var(--bg-primary);
}

/* Shared shell */
.app-shell{background:var(--bg-primary);min-height:100vh;}
.sidebar{
  background:var(--bg-secondary);border-right:1px solid var(--border);
}
.sidebar-logo{font-size:1.18rem;font-weight:800;}
.nav-item{border-radius:14px;}
.nav-item.active{background:var(--accent-soft);color:var(--text-primary);}

.main-content{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:30px 32px 110px;
}
.page-header{margin-bottom:28px;}
.page-header h1{font-size:clamp(1.8rem,4vw,2.25rem);font-weight:800;}
.page-header p{font-size:1rem;color:var(--text-secondary);margin-top:7px;}

.card{
  display:block!important;
  background:var(--premium-card)!important;
  border:1px solid var(--premium-border)!important;
  border-radius:22px!important;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}
.card:hover{border-color:var(--premium-border-strong)!important;}

.btn-primary{box-shadow:0 8px 26px rgba(255,59,48,.24);}
.btn-secondary{background:var(--bg-card);border-color:var(--border-strong);}
.input,.select{background:var(--bg-secondary);border-color:var(--border-strong);border-radius:16px;color:var(--text-primary);}

/* Library / content */
.library-toolbar{gap:12px;margin-bottom:24px;}
.library-toolbar .btn{border-radius:18px;}
.library-controls{gap:12px;}
.tabs{background:var(--bg-card);border-color:var(--border);border-radius:18px;overflow:hidden;}
.tab{padding:10px 20px;}
.tab.active{box-shadow:0 5px 16px rgba(255,59,48,.18);}
.search-wrap .input{border-radius:18px;}
.content-grid{gap:16px;}
.content-card,.playlist-card,.channel-card{
  background:var(--premium-card)!important;
  border:1px solid var(--premium-border)!important;
  border-radius:22px!important;
}
.content-card:hover,.playlist-card:hover,.channel-card:hover{transform:translateY(-2px);}
.thumb,.playlist-thumb{border-radius:16px;}

/* Add content / channel / playlist */
.add-content-grid{gap:18px;}
.add-card{padding:26px;border-radius:22px;}
.add-card .add-icon{border-radius:16px;}
.selection-panel{border-radius:22px!important;}
.select-row{border-radius:16px;background:var(--bg-card-hover);}
.queue-item{border-radius:16px;}

/* Progress */
.progress-stat-grid{gap:16px;}
.progress-stat-card{border-radius:22px!important;padding:27px 16px;}
.chart-card{border-radius:22px!important;}
.course-list{gap:18px;}

/* Settings */
.settings-section{border-radius:22px!important;padding:25px 26px;margin-bottom:18px;}
.settings-row{border-color:var(--border);}
.theme-switcher{border-radius:16px;}

/* Study */
.study-shell{background:var(--bg-primary);}
.study-topbar{
  background:rgba(9,9,11,.94)!important;
  border-bottom:1px solid var(--border);
}
[data-theme="light"] .study-topbar{background:rgba(247,247,248,.94)!important;}
.study-layout{max-width:1180px;}
.study-main{padding:26px 24px 80px;}
.study-side{background:var(--bg-secondary);border-left-color:var(--border);}
.player{border-radius:22px;}
.focus-badge{box-shadow:0 0 0 1px rgba(255,59,48,.10);}

/* Bottom navigation — consistent on all app pages */
.bottom-nav{
  background:rgba(17,17,20,.94)!important;
  backdrop-filter:blur(18px) saturate(150%);
  border-top:1px solid var(--border)!important;
}
[data-theme="light"] .bottom-nav{background:rgba(255,255,255,.94)!important;}
.bottom-nav .nav-item.active{color:var(--accent-hover)!important;background:transparent!important;}

/* Explicitly remove the old circular header controls / bot buttons. */
.mobile-dashboard-header,
.dashboard-header-actions,
.header-icon,
.profile-avatar,
.quick-actions,
.quick-action-bar,
.quick-actions-bar{display:none!important;}

@media (max-width:860px){
  .sidebar{display:none!important;}
  .bottom-nav{display:flex!important;}
  .main-content{
    max-width:none;
    padding:20px 16px calc(var(--bottomnav-h) + 28px);
  }
  .page-header{margin-bottom:22px;}
  .page-header h1{font-size:1.78rem;}
  .page-header p{font-size:.95rem;}

  .library-toolbar{display:flex;}
  .library-toolbar .btn{flex:1;min-width:0;}
  .library-controls{display:block;}
  .library-controls .tabs{width:100%;display:flex;margin-bottom:12px;}
  .library-controls .tab{flex:1;text-align:center;padding:10px 7px;}
  .search-wrap{min-width:100%;}

  .content-grid{grid-template-columns:1fr;}
  .playlist-grid{display:block;}
  .playlist-grid .playlist-card{margin-bottom:12px;}

  .progress-stat-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .progress-stat-card{padding:22px 10px;}
  .chart-bars{height:150px;}

  .add-content-grid{grid-template-columns:1fr;}
  .add-card{padding:23px;}
  .settings-section{padding:21px 19px;}

  .study-topbar{padding:14px 16px;}
  .study-topbar .playlist-title{max-width:55%;text-align:center;line-height:1.25;}
  .study-layout{display:block;}
  .study-main{padding:18px 16px 30px;}
  .study-side{border-left:0;border-top:1px solid var(--border);position:static;max-height:none;padding:20px 16px calc(var(--bottomnav-h) + 30px);}
  .player{border-radius:20px;}
}

@media (max-width:520px){
  .main-content{padding-left:16px;padding-right:16px;}
  .card{border-radius:20px!important;}
  .bottom-nav .nav-item{font-size:.7rem;padding:5px 7px;}
}