/* Shadowtone Edits — User Layout V2
   Layout/presentation only. No functional selectors, IDs or player assets are changed.
   Loaded inside the content iframe after all page-specific styles. */

:root{
  --layout-panel:#191512;
  --layout-panel-2:#211b16;
  --layout-panel-3:#2a221b;
  --layout-line:rgba(255,255,255,.075);
  --layout-line-gold:rgba(217,143,39,.24);
  --layout-gold:#d98f27;
  --layout-gold-soft:rgba(217,143,39,.10);
  --layout-green:#4ade80;
  --layout-shadow:0 18px 48px rgba(0,0,0,.22);
  --layout-shadow-soft:0 10px 28px rgba(0,0,0,.16);
}

/* =========================================================
   GLOBAL PAGE STAGE
   ========================================================= */

body{
  background:
    radial-gradient(circle at 12% -5%,rgba(217,143,39,.055),transparent 26%),
    radial-gradient(circle at 95% 18%,rgba(74,222,128,.025),transparent 22%),
    var(--bg);
}

main.wrap.section-tight{
  position:relative;
  padding-top:28px;
  padding-bottom:44px;
}

main.wrap.section-tight::before{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,143,39,.20),transparent);
  pointer-events:none;
}

.card{
  border-color:var(--layout-line);
  background:
    linear-gradient(180deg,rgba(255,255,255,.022),transparent 30%),
    var(--layout-panel);
  box-shadow:var(--layout-shadow-soft);
}

/* =========================================================
   HOME — COMMAND CENTER
   ========================================================= */

body:has(#planBanner) main.wrap.section-tight{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  max-width:1180px;
}

body:has(#planBanner) #planBanner{
  position:relative;
  overflow:hidden;
  min-height:92px;
  margin:0;
  padding:18px 20px;
  border:1px solid var(--layout-line-gold);
  border-radius:16px;
  background:
    linear-gradient(110deg,rgba(217,143,39,.14),rgba(217,143,39,.025) 46%,rgba(255,255,255,.015)),
    var(--layout-panel);
  box-shadow:var(--layout-shadow);
}

body:has(#planBanner) #planBanner::after{
  content:"MEMBER ACCESS";
  position:absolute;
  top:14px;
  right:18px;
  color:rgba(217,143,39,.30);
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  pointer-events:none;
}

body:has(#planBanner) .plan-banner-icon{
  width:44px;
  height:44px;
  border:1px solid rgba(217,143,39,.22);
  background:rgba(217,143,39,.09);
}

body:has(#planBanner) .action-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:minmax(148px,auto);
  gap:16px;
}

body:has(#planBanner) .action-card{
  position:relative;
  overflow:hidden;
  min-height:0;
  padding:22px;
  border-radius:16px;
  box-shadow:var(--layout-shadow-soft);
}

body:has(#planBanner) .action-card::after{
  position:absolute;
  right:16px;
  top:12px;
  color:rgba(255,255,255,.11);
  font-family:'JetBrains Mono',monospace;
  font-size:28px;
  font-weight:800;
  line-height:1;
}

body:has(#planBanner) .action-card:nth-child(1){
  grid-column:span 5;
  grid-row:span 2;
  justify-content:flex-end;
  min-height:312px;
  border-color:rgba(217,143,39,.30);
  background:
    radial-gradient(circle at 80% 5%,rgba(217,143,39,.16),transparent 34%),
    linear-gradient(145deg,#231b14,#171310 62%);
}

body:has(#planBanner) .action-card:nth-child(1)::after{content:"01";}
body:has(#planBanner) .action-card:nth-child(2)::after{content:"02";}
body:has(#planBanner) .action-card:nth-child(3)::after{content:"03";}

body:has(#planBanner) .action-card:nth-child(2),
body:has(#planBanner) .action-card:nth-child(3){
  grid-column:span 7;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  grid-template-rows:auto 1fr;
  align-items:center;
  column-gap:16px;
  row-gap:5px;
}

body:has(#planBanner) .action-card:nth-child(2) .action-icon,
body:has(#planBanner) .action-card:nth-child(3) .action-icon{
  grid-column:1;
  grid-row:1 / 3;
  margin:0;
}

body:has(#planBanner) .action-card:nth-child(2) h3,
body:has(#planBanner) .action-card:nth-child(3) h3{
  grid-column:2;
  grid-row:1;
  margin:0;
}

body:has(#planBanner) .action-card:nth-child(2) .action-sub,
body:has(#planBanner) .action-card:nth-child(3) .action-sub{
  grid-column:2;
  grid-row:2;
  margin:0;
  max-width:540px;
}

body:has(#planBanner) .action-card:nth-child(2) .btn,
body:has(#planBanner) .action-card:nth-child(3) .btn{
  grid-column:3;
  grid-row:1 / 3;
  width:auto;
  min-width:144px;
  margin:0;
  align-self:center;
}

body:has(#planBanner) .action-card:nth-child(1) .action-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  font-size:24px;
}

body:has(#planBanner) .action-card:nth-child(1) h3{
  max-width:310px;
  font-size:20px;
}

body:has(#planBanner) .action-card:nth-child(1) .action-sub{
  max-width:330px;
}

/* =========================================================
   BROWSE — DISCOVERY BOARD
   ========================================================= */

body:has(#localCount) main.wrap.section-tight{
  max-width:1180px;
}

body:has(#localCount) main > h1{
  margin:0 0 4px!important;
  font-size:28px;
}

body:has(#localCount) .section-heading{
  margin:0 0 18px;
  color:var(--text-muted);
}

body:has(#localCount) .genre-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:128px;
  gap:14px;
}

body:has(#localCount) .genre-tile{
  position:relative;
  justify-content:flex-end;
  overflow:hidden;
  min-width:0;
  padding:18px;
  border:1px solid var(--layout-line);
  border-left:1px solid var(--layout-line);
  border-radius:16px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),
    var(--layout-panel);
  box-shadow:var(--layout-shadow-soft);
}

body:has(#localCount) .genre-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 48%,rgba(217,143,39,.06));
  pointer-events:none;
}

body:has(#localCount) .genre-tile > i{
  position:absolute;
  top:16px;
  right:16px;
  font-size:34px!important;
  color:rgba(217,143,39,.46);
}

body:has(#localCount) .genre-tile:nth-child(1){
  grid-column:span 7;
  grid-row:span 2;
  border-color:rgba(217,143,39,.30);
  background:
    radial-gradient(circle at 82% 12%,rgba(217,143,39,.16),transparent 34%),
    linear-gradient(145deg,#241b14,#181310);
}

body:has(#localCount) .genre-tile:nth-child(1) strong{
  font-size:22px;
}

body:has(#localCount) .genre-tile:nth-child(1) > i{
  top:22px;
  right:24px;
  font-size:54px!important;
}

body:has(#localCount) .genre-tile:nth-child(2){
  grid-column:span 5;
  grid-row:span 2;
  background:
    radial-gradient(circle at 75% 15%,rgba(74,222,128,.09),transparent 35%),
    var(--layout-panel);
}

body:has(#localCount) .genre-tile:nth-child(n+3){
  grid-column:span 4;
}

body:has(#localCount) .genre-tile strong{
  position:relative;
  z-index:1;
  font-size:15px;
}

body:has(#localCount) .genre-tile .count{
  position:relative;
  z-index:1;
}

/* =========================================================
   LIBRARY COLLECTIONS — TWO-COLUMN CATALOG
   ========================================================= */

body:has(#libraryContainer) main.wrap.section-tight{
  max-width:1180px;
}

body:has(#libraryContainer) #pageTitle{
  margin:0;
  font-size:28px;
}

body:has(#libraryContainer) #pageSubtitle{
  max-width:720px;
  margin:7px 0 22px;
}

body:has(#libraryContainer) #libraryContainer,
body:has(#libraryContainer) #libraryContainer.vertical-collection-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

body:has(#libraryContainer) .vertical-collection-card,
body:has(#libraryContainer) .genre-tile{
  min-height:92px;
  border:1px solid var(--layout-line);
  border-radius:14px;
  background:
    linear-gradient(120deg,rgba(255,255,255,.025),transparent 58%),
    var(--layout-panel);
  box-shadow:var(--layout-shadow-soft);
}

body:has(#libraryContainer) .vertical-collection-card:nth-child(4n+1),
body:has(#libraryContainer) .vertical-collection-card:nth-child(4n+4){
  border-color:rgba(217,143,39,.18);
  background:
    linear-gradient(110deg,rgba(217,143,39,.055),transparent 42%),
    var(--layout-panel);
}

body:has(#libraryContainer) .vertical-collection-icon{
  width:42px;
  height:42px;
  border-radius:11px;
}

/* =========================================================
   TRACKS — DJ WORKSPACE WITH FILTER SIDEBAR
   ========================================================= */

body:has(#trackContainer) main.wrap.section-tight{
  max-width:1240px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 292px;
  grid-template-areas:
    "tracktitle download"
    "tracklist filters";
  align-items:start;
  gap:16px 18px;
}

body:has(#trackContainer) #pageTitle{
  grid-area:tracktitle;
  align-self:center;
  margin:0;
  padding:4px 0 8px;
  font-size:26px;
}

body:has(#trackContainer) #libraryDownloadButton{
  grid-area:download;
  width:100%;
  min-height:42px;
  justify-content:center;
}

body:has(#trackContainer) main > .card{
  grid-area:filters;
  position:sticky;
  top:78px;
  padding:16px;
  border-radius:15px;
  border-color:rgba(217,143,39,.15);
}

body:has(#trackContainer) .track-filter-bar{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
}

body:has(#trackContainer) .track-filter-bar .version-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
}

body:has(#trackContainer) .track-filter-bar .version-btn{
  width:100%;
  min-width:0;
  justify-content:center;
}

body:has(#trackContainer) .track-arrange-bar{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding-top:13px;
}

body:has(#trackContainer) .track-arrange-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
}

body:has(#trackContainer) .track-arrange-btn{
  width:100%;
  min-width:0;
}

body:has(#trackContainer) #trackContainer{
  grid-area:tracklist;
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
}

body:has(#trackContainer) #trackContainer > .card,
body:has(#trackContainer) .track-card{
  position:relative;
  margin:0;
  padding:13px 15px;
  border-radius:12px;
  border:1px solid var(--layout-line);
  border-left:3px solid rgba(217,143,39,.22);
  background:linear-gradient(90deg,rgba(217,143,39,.025),transparent 34%),var(--layout-panel);
  box-shadow:none;
}

body:has(#trackContainer) .track-card:hover{
  border-left-color:var(--layout-gold);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  transform:translateY(-1px);
}

body:has(#trackContainer) .track-card-layout{
  grid-template-columns:minmax(0,1fr) auto auto;
}

body:has(#trackContainer) .track-dj-badge{
  min-height:38px;
  min-width:58px;
}

/* =========================================================
   ACCOUNT DASHBOARD — ASYMMETRIC CONTROL CENTER
   ========================================================= */

body:has(#dashboardName) main.wrap.section-tight{
  max-width:1180px;
}

body:has(#dashboardName) .account-header{
  position:relative;
  min-height:150px;
  align-items:flex-end;
  padding:24px;
  margin-bottom:18px;
  overflow:hidden;
  border:1px solid rgba(217,143,39,.25);
  border-radius:18px;
  background:
    radial-gradient(circle at 84% 12%,rgba(217,143,39,.16),transparent 30%),
    linear-gradient(135deg,#251c15,#171310 65%);
  box-shadow:var(--layout-shadow);
}

body:has(#dashboardName) .account-header::before{
  content:"ACCOUNT CONTROL CENTER";
  position:absolute;
  top:18px;
  left:24px;
  color:rgba(217,143,39,.60);
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  font-weight:800;
  letter-spacing:.15em;
}

body:has(#dashboardName) .account-header h1{
  font-size:27px;
}

body:has(#dashboardName) .dashboard-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:minmax(142px,auto);
  gap:14px;
}

body:has(#dashboardName) .dashboard-card{
  min-height:0;
  padding:20px;
  border-radius:15px;
  overflow:hidden;
}

body:has(#dashboardName) .dashboard-card:nth-child(1){
  grid-column:span 5;
  grid-row:span 2;
  justify-content:flex-end;
  border-color:rgba(217,143,39,.22);
  background:
    radial-gradient(circle at 82% 12%,rgba(217,143,39,.10),transparent 34%),
    var(--layout-panel);
}

body:has(#dashboardName) .dashboard-card:nth-child(2){grid-column:span 7;}
body:has(#dashboardName) .dashboard-card:nth-child(3){grid-column:span 4;}
body:has(#dashboardName) .dashboard-card:nth-child(4){grid-column:span 3;}

body:has(#dashboardName) .dashboard-card:nth-child(2),
body:has(#dashboardName) .dashboard-card:nth-child(3),
body:has(#dashboardName) .dashboard-card:nth-child(4){
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  column-gap:14px;
}

body:has(#dashboardName) .dashboard-card:nth-child(n+2) .action-icon{
  grid-column:1;
  grid-row:1 / 3;
  width:42px;
  height:42px;
  margin:0;
}

body:has(#dashboardName) .dashboard-card:nth-child(n+2) h2,
body:has(#dashboardName) .dashboard-card:nth-child(n+2) p{
  grid-column:2;
}

body:has(#dashboardName) .dashboard-card:nth-child(n+2) .btn{
  grid-column:1 / -1;
  margin-top:10px;
}

body:has(#dashboardName) .section-heading{
  margin-top:24px!important;
  padding:0 2px;
}

body:has(#dashboardName) #recentRequests{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

body:has(#dashboardName) #recentRequests > *{
  margin:0!important;
}

/* =========================================================
   REQUEST BUILDER — STUDIO CONSOLE
   ========================================================= */

body:has(#addRequestBtn) main.wrap.section-tight{
  max-width:1220px;
}

body:has(#addRequestBtn) .request-layout{
  grid-template-columns:minmax(0,1.45fr) minmax(310px,.75fr);
  gap:18px;
  align-items:start;
}

body:has(#addRequestBtn) .request-builder,
body:has(#addRequestBtn) .request-cart{
  border-radius:17px;
}

body:has(#addRequestBtn) .request-builder{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:16px;
  padding:24px;
}

body:has(#addRequestBtn) .request-builder > h2,
body:has(#addRequestBtn) .request-builder > .price-box,
body:has(#addRequestBtn) .request-builder > #addRequestBtn{
  grid-column:1 / -1;
}

body:has(#addRequestBtn) .request-builder > label,
body:has(#addRequestBtn) .request-builder > input,
body:has(#addRequestBtn) .request-builder > textarea,
body:has(#addRequestBtn) .request-builder > .option-grid{
  min-width:0;
}

body:has(#addRequestBtn) .request-builder textarea{
  min-height:112px;
}

body:has(#addRequestBtn) .request-cart{
  position:sticky;
  top:78px;
  padding:22px;
  border-color:rgba(217,143,39,.18);
  background:
    linear-gradient(180deg,rgba(217,143,39,.045),transparent 24%),
    var(--layout-panel);
}

body:has(#addRequestBtn) .summary-box{
  background:rgba(0,0,0,.16);
}

body:has(#addRequestBtn) .price-box{
  border-color:rgba(217,143,39,.16);
  background:rgba(217,143,39,.045);
}

/* =========================================================
   PROFILE — TWO-COLUMN ACCOUNT FORM
   ========================================================= */

body:has(#saveProfile) main.wrap.section-tight{
  max-width:980px;
  padding-top:36px;
}

body:has(#saveProfile) main > .card{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 18px;
  padding:26px;
  border-radius:18px;
  border-color:rgba(217,143,39,.17);
  background:
    radial-gradient(circle at 92% 4%,rgba(217,143,39,.08),transparent 28%),
    var(--layout-panel);
}

body:has(#saveProfile) main > .card > h1{
  grid-column:1 / -1;
  margin:0 0 24px;
  padding-bottom:18px;
  border-bottom:1px solid var(--layout-line);
}

body:has(#saveProfile) main > .card > .form-group:nth-of-type(3){
  grid-column:1 / -1;
}

body:has(#saveProfile) .profile-actions{
  grid-column:1 / -1;
  margin-top:12px;
  padding:18px;
  border:1px solid var(--layout-line);
  border-radius:13px;
  background:rgba(255,255,255,.02);
}

/* =========================================================
   NOTIFICATIONS — INBOX BOARD
   ========================================================= */

body:has(#notificationsContainer) main.wrap.section-tight{
  max-width:1080px;
}

body:has(#notificationsContainer) .account-header{
  padding:20px 22px;
  margin-bottom:14px;
  border:1px solid var(--layout-line);
  border-radius:16px;
  background:
    linear-gradient(110deg,rgba(217,143,39,.06),transparent 46%),
    var(--layout-panel);
}

body:has(#notificationsContainer) #notificationsContainer{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

body:has(#notificationsContainer) #notificationsContainer > *{
  margin:0!important;
  border-radius:13px!important;
  box-shadow:var(--layout-shadow-soft);
}

/* =========================================================
   MY REQUESTS / DOWNLOAD QUEUE — MANAGEMENT BOARDS
   ========================================================= */

body:has(#requestsContainer) main.wrap.section-tight,
body:has(#downloadQueue) main.wrap.section-tight,
body:has(#downloadQueueContainer) main.wrap.section-tight{
  max-width:1120px;
}

body:has(#requestsContainer) #requestsContainer,
body:has(#downloadQueue) #downloadQueue,
body:has(#downloadQueueContainer) #downloadQueueContainer{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

body:has(#requestsContainer) .request-item{
  height:100%;
  margin:0;
  padding:16px;
  border-radius:13px;
  box-shadow:var(--layout-shadow-soft);
}

/* =========================================================
   SUBSCRIPTION — PREMIUM PRICING STAGE
   ========================================================= */

body:has(#premiumPlanButton) .subscription-page,
body:has(#subscribeButton) .subscription-page,
body:has(.subscription-plans) .subscription-page{
  max-width:1160px;
  padding-top:34px;
}

body:has(.subscription-plans) .subscription-hero{
  position:relative;
  max-width:none;
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  margin:0 0 18px;
  padding:26px;
  overflow:hidden;
  border:1px solid rgba(217,143,39,.22);
  border-radius:18px;
  background:
    radial-gradient(circle at 86% 4%,rgba(217,143,39,.17),transparent 32%),
    linear-gradient(135deg,#261d15,#171310 64%);
  text-align:left;
  box-shadow:var(--layout-shadow);
}

body:has(.subscription-plans) .subscription-hero p{
  max-width:650px;
  margin:10px 0 0;
}

body:has(.subscription-plans) .subscription-plans{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:16px;
  max-width:none;
  align-items:stretch;
}

body:has(.subscription-plans) .plan-card{
  min-height:0;
  padding:24px;
  border-radius:17px;
  box-shadow:var(--layout-shadow-soft);
}

body:has(.subscription-plans) .plan-card.premium{
  border-color:rgba(217,143,39,.35);
  background:
    radial-gradient(circle at 90% 8%,rgba(217,143,39,.10),transparent 28%),
    linear-gradient(180deg,rgba(217,143,39,.06),rgba(255,255,255,.015)),
    var(--layout-panel);
}

body:has(.subscription-plans) .feature-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 16px;
}

/* =========================================================
   PLAYLISTS — CURATION WORKSPACE
   ========================================================= */

body:has(.playlist-list) main.wrap.section-tight{
  max-width:1180px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  grid-template-areas:
    "playlisthead playlisttools"
    "playlistlist playlisttools";
  gap:18px;
  align-items:start;
}

body:has(.playlist-list) .playlist-heading{
  grid-area:playlisthead;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  margin:0;
  padding:22px;
  border:1px solid rgba(217,143,39,.20);
  border-radius:17px;
  background:
    radial-gradient(circle at 88% 10%,rgba(217,143,39,.14),transparent 31%),
    linear-gradient(135deg,#241c15,#171310 68%);
  box-shadow:var(--layout-shadow-soft);
}

body:has(.playlist-list) .playlist-heading p{
  max-width:650px;
  margin-bottom:0;
}

body:has(.playlist-list) .playlist-arrange-bar{
  grid-area:playlisttools;
  position:sticky;
  top:78px;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  margin:0;
  padding:17px;
  border:1px solid var(--layout-line);
  border-radius:15px;
  background:var(--layout-panel);
  box-shadow:var(--layout-shadow-soft);
}

body:has(.playlist-list) .playlist-arrange-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
}

body:has(.playlist-list) .playlist-sort-toggle{
  width:100%;
  min-width:0;
}

body:has(.playlist-list) .playlist-list,
body:has(.playlist-list) #playlistContainer{
  grid-area:playlistlist;
}

body:has(.playlist-list) .playlist-card{
  border-radius:15px;
  box-shadow:var(--layout-shadow-soft);
}

body:has(.playlist-list) .playlist-card-header{
  min-height:78px;
  background:linear-gradient(90deg,rgba(217,143,39,.035),transparent 46%);
}

/* =========================================================
   INFORMATION / SUPPORT / CONTACT — EDITORIAL GRID
   ========================================================= */

.info-page{
  max-width:1120px!important;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  padding-top:34px!important;
}

.info-page .info-hero{
  grid-column:1 / -1;
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  margin:0 0 4px;
  padding:24px;
  border:1px solid rgba(217,143,39,.20);
  border-radius:17px;
  background:
    radial-gradient(circle at 88% 5%,rgba(217,143,39,.12),transparent 32%),
    linear-gradient(135deg,#231b15,#171310 68%);
  box-shadow:var(--layout-shadow-soft);
}

.info-page .info-card{
  grid-column:span 4;
  height:100%;
  margin:0!important;
  padding:20px!important;
  border:1px solid var(--layout-line)!important;
  border-radius:14px!important;
  background:var(--layout-panel)!important;
  box-shadow:var(--layout-shadow-soft);
}

/* =========================================================
   AUTH / LOCKED PANELS (when rendered inside app pages)
   ========================================================= */

.guest-shell{
  padding:34px 20px;
}

.locked-panel.auth-card,
.auth-card.locked-panel{
  position:relative;
  max-width:430px;
  padding:28px;
  overflow:hidden;
  border:1px solid rgba(217,143,39,.20);
  border-radius:18px;
  background:
    radial-gradient(circle at 90% 0%,rgba(217,143,39,.10),transparent 30%),
    var(--layout-panel);
  box-shadow:var(--layout-shadow);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){
  body:has(#planBanner) .action-card:nth-child(1),
  body:has(#planBanner) .action-card:nth-child(2),
  body:has(#planBanner) .action-card:nth-child(3){
    grid-column:span 12;
    grid-row:auto;
    min-height:0;
  }

  body:has(#planBanner) .action-card:nth-child(1){
    min-height:220px;
  }

  body:has(#dashboardName) .dashboard-card:nth-child(1){
    grid-column:span 6;
    grid-row:span 2;
  }
  body:has(#dashboardName) .dashboard-card:nth-child(2),
  body:has(#dashboardName) .dashboard-card:nth-child(3),
  body:has(#dashboardName) .dashboard-card:nth-child(4){
    grid-column:span 6;
  }

  body:has(#trackContainer) main.wrap.section-tight,
  body:has(.playlist-list) main.wrap.section-tight{
    grid-template-columns:1fr;
  }

  body:has(#trackContainer) main.wrap.section-tight{
    grid-template-areas:
      "tracktitle"
      "download"
      "filters"
      "tracklist";
  }

  body:has(#trackContainer) main > .card,
  body:has(.playlist-list) .playlist-arrange-bar{
    position:static;
  }

  body:has(.playlist-list) main.wrap.section-tight{
    grid-template-areas:
      "playlisthead"
      "playlisttools"
      "playlistlist";
  }

  body:has(.subscription-plans) .subscription-plans{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:760px){
  main.wrap.section-tight::before{left:14px;right:14px;}

  body:has(#localCount) .genre-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:130px;
  }
  body:has(#localCount) .genre-tile:nth-child(1),
  body:has(#localCount) .genre-tile:nth-child(2),
  body:has(#localCount) .genre-tile:nth-child(n+3){
    grid-column:span 1;
    grid-row:auto;
  }
  body:has(#localCount) .genre-tile:nth-child(1){
    grid-column:1 / -1;
    min-height:170px;
  }

  body:has(#libraryContainer) #libraryContainer,
  body:has(#libraryContainer) #libraryContainer.vertical-collection-list,
  body:has(#dashboardName) #recentRequests,
  body:has(#notificationsContainer) #notificationsContainer,
  body:has(#requestsContainer) #requestsContainer,
  body:has(#downloadQueue) #downloadQueue,
  body:has(#downloadQueueContainer) #downloadQueueContainer{
    grid-template-columns:1fr;
  }

  body:has(#dashboardName) .dashboard-grid{
    grid-template-columns:1fr;
  }
  body:has(#dashboardName) .dashboard-card:nth-child(1),
  body:has(#dashboardName) .dashboard-card:nth-child(2),
  body:has(#dashboardName) .dashboard-card:nth-child(3),
  body:has(#dashboardName) .dashboard-card:nth-child(4){
    grid-column:auto;
    grid-row:auto;
  }

  body:has(#addRequestBtn) .request-layout{
    grid-template-columns:1fr;
  }
  body:has(#addRequestBtn) .request-builder{
    grid-template-columns:1fr;
    padding:18px;
  }
  body:has(#addRequestBtn) .request-builder > *{
    grid-column:1!important;
  }
  body:has(#addRequestBtn) .request-cart{
    position:static;
  }

  body:has(#saveProfile) main > .card{
    grid-template-columns:1fr;
    padding:20px;
  }
  body:has(#saveProfile) main > .card > *{
    grid-column:1!important;
  }

  body:has(.subscription-plans) .subscription-plans,
  body:has(.subscription-plans) .feature-list{
    grid-template-columns:1fr;
  }

  .info-page{
    grid-template-columns:1fr;
  }
  .info-page .info-hero,
  .info-page .info-card{
    grid-column:1;
  }
}

@media(max-width:560px){
  body:has(#planBanner) .action-card:nth-child(2),
  body:has(#planBanner) .action-card:nth-child(3){
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  body:has(#planBanner) .action-card:nth-child(2) .btn,
  body:has(#planBanner) .action-card:nth-child(3) .btn{
    width:100%;
    margin-top:12px;
  }

  body:has(#localCount) .genre-grid{
    grid-template-columns:1fr;
  }
  body:has(#localCount) .genre-tile:nth-child(1),
  body:has(#localCount) .genre-tile:nth-child(2),
  body:has(#localCount) .genre-tile:nth-child(n+3){
    grid-column:1;
  }

  body:has(#trackContainer) #libraryDownloadButton{
    width:100%;
  }
}