/* critic shared UI system
   Loaded last on every page so all feature-specific CSS resolves to
   one consistent visual language.
*/

:root{
  --ui-bg:#111214;
  --ui-surface:#16181b;
  --ui-surface-2:#191b1f;
  --ui-surface-3:#1d2024;
  --ui-text:#f2f2f3;
  --ui-text-soft:#c8cacf;
  --ui-muted:#858990;
  --ui-muted-2:#666a71;
  --ui-border:rgba(255,255,255,.07);
  --ui-border-strong:rgba(255,255,255,.12);
  --ui-radius-xs:8px;
  --ui-radius-sm:11px;
  --ui-radius-md:15px;
  --ui-radius-lg:18px;
  --ui-radius-xl:22px;
  --ui-control-h:46px;
  --ui-top-control-h:56px;
  --ui-page-x:clamp(20px,4vw,64px);
  --ui-page-max:1380px;
  --ui-shadow-card:0 12px 30px rgba(0,0,0,.20);
  --ui-shadow-float:0 16px 42px rgba(0,0,0,.28);
}

html{
  background:var(--ui-bg);
}

body{
  background:
    radial-gradient(circle at 50% -16rem,rgba(255,255,255,.035),transparent 38rem),
    var(--ui-bg);
  color:var(--ui-text);
}

button,
input,
textarea{
  font-family:inherit;
}

button,
a,
input,
textarea{
  -webkit-tap-highlight-color:transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid rgba(255,255,255,.28);
  outline-offset:2px;
}

button:disabled{
  opacity:.48;
  cursor:default !important;
}

/* ---------- top floating controls ---------- */

.search-wrap,
.account-button{
  height:var(--ui-top-control-h) !important;
  border:1px solid var(--ui-border) !important;
  border-radius:var(--ui-radius-md) !important;
  background:rgba(20,22,25,.90) !important;
  box-shadow:0 8px 26px rgba(0,0,0,.20) !important;
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
}

.search-wrap{
  top:18px !important;
  left:18px !important;
  padding:6px !important;
  width:min(640px,calc(100vw - 370px)) !important;
}

.album-search{
  height:42px !important;
  border-radius:10px !important;
  padding-left:15px !important;
  background:#17191c !important;
  font-size:15px !important;
}

.album-search:focus{
  background:#1a1d21 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09) !important;
}

.auth-mount{
  top:18px !important;
  right:18px !important;
}

.account-button{
  min-width:0;
  padding:0 15px !important;
  gap:9px !important;
}

.account-button:hover{
  border-color:var(--ui-border-strong) !important;
  background:rgba(27,29,33,.96) !important;
}

.account-button img,
.account-avatar-fallback{
  width:28px !important;
  height:28px !important;
}

.account-verified,
.account-developer{
  width:16px !important;
  height:16px !important;
}

.account-menu{
  top:64px !important;
  min-width:196px !important;
  padding:7px !important;
  border:1px solid var(--ui-border) !important;
  border-radius:var(--ui-radius-md) !important;
  background:rgba(23,25,28,.98) !important;
  box-shadow:var(--ui-shadow-float) !important;
}

.account-menu a,
.account-menu button,
.account-menu-name{
  min-height:40px !important;
  border-radius:9px !important;
  padding:0 11px !important;
}

/* ---------- page shells ---------- */

.catalog{
  padding:
    calc(var(--ui-page-x) + 78px)
    var(--ui-page-x)
    88px !important;
}

.page,
.profile-page,
.artist-page{
  width:min(var(--ui-page-max),100%) !important;
  margin:0 auto !important;
  padding:94px var(--ui-page-x) 92px !important;
}

.settings-page{
  width:min(820px,100%) !important;
  margin:0 auto !important;
  padding:94px 20px 88px !important;
}

.back,
.profile-back,
.settings-back,
.artist-back{
  min-height:38px;
  width:max-content;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  margin:0 !important;
  padding:0 11px !important;
  border:1px solid var(--ui-border) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.018) !important;
  color:#a2a5ab !important;
  text-decoration:none !important;
  font-size:13px !important;
  line-height:1 !important;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease !important;
}

.back:hover,
.profile-back:hover,
.settings-back:hover,
.artist-back:hover{
  color:#f0f0f1 !important;
  background:rgba(255,255,255,.045) !important;
  border-color:var(--ui-border-strong) !important;
  transform:translateY(-1px) !important;
}

/* ---------- shared section language ---------- */

.panel-kicker,
.section-label,
.eyebrow,
.score-label,
.profile-section-head p,
.artist-kicker,
.artist-section-head p,
.popular-reviews-head p,
.settings-title p{
  color:#777b82 !important;
  font-size:11px !important;
  font-weight:650 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
}

.panel,
.settings-card,
.profile-review-card,
.public-review-card,
.popular-review-card,
.public-reviews-prominent{
  border:1px solid var(--ui-border) !important;
  border-radius:var(--ui-radius-lg) !important;
  background:rgba(255,255,255,.016) !important;
}

.panel,
.settings-card,
.public-reviews-prominent{
  padding:24px !important;
}

.primary-button,
.settings-card > button:not(.style-mode):not(.danger-button),
.cover-editor-save{
  min-height:var(--ui-control-h) !important;
  border-radius:12px !important;
  font-weight:650 !important;
  letter-spacing:-.012em !important;
}

input:not([type="range"]):not([type="color"]),
textarea,
.track-score-input,
.cover-editor-input{
  border:1px solid var(--ui-border) !important;
  border-radius:12px !important;
  background:#121417 !important;
  color:#ededee !important;
}

input:not([type="range"]):not([type="color"]):focus,
textarea:focus,
.track-score-input:focus,
.cover-editor-input:focus{
  border-color:rgba(255,255,255,.15) !important;
  background:#14161a !important;
}

/* ---------- home ---------- */

.popular-reviews-section{
  margin:0 0 50px !important;
}

.popular-reviews-head{
  margin-bottom:18px !important;
}

.popular-reviews-head h2,
.profile-section-head h2,
.artist-section-head h2{
  color:#f0f0f1 !important;
  font-size:28px !important;
  font-weight:650 !important;
  line-height:1 !important;
  letter-spacing:-.04em !important;
}

.popular-review-grid{
  gap:14px !important;
  align-items:stretch;
}

.popular-review-card{
  min-height:250px;
  display:flex;
  flex-direction:column;
  padding:18px !important;
}

.popular-review-user-row{
  min-height:30px;
}

.popular-review-user img,
.popular-review-avatar-fallback{
  width:30px !important;
  height:30px !important;
}

.popular-review-album{
  grid-template-columns:58px minmax(0,1fr) !important;
  gap:12px !important;
  margin-top:16px !important;
}

.popular-review-album img{
  width:58px !important;
  height:58px !important;
  border-radius:11px !important;
}

.popular-review-body{
  min-height:0 !important;
  margin:16px 0 !important;
  flex:1;
  color:#afb2b7 !important;
  font-size:13px !important;
  line-height:1.48 !important;
  -webkit-line-clamp:4 !important;
}

.popular-review-foot{
  margin-top:auto;
}

.album-grid{
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important;
  column-gap:clamp(22px,2.4vw,36px) !important;
  row-gap:42px !important;
}

.cover-shell{
  border-radius:16px !important;
  outline-color:var(--ui-border) !important;
}

.info{
  gap:12px !important;
  padding:12px 2px 0 !important;
}

.name{
  font-size:17px !important;
}

.artist{
  margin-top:5px !important;
  font-size:13px !important;
}

.rating{
  font-size:22px !important;
}

/* ---------- album page ---------- */

.page > .back{
  margin-bottom:30px !important;
}

.hero{
  grid-template-columns:minmax(300px,420px) minmax(0,1fr) !important;
  gap:clamp(40px,5vw,72px) !important;
  align-items:end !important;
}

.large-cover-shell{
  border-radius:var(--ui-radius-xl) !important;
  outline-color:var(--ui-border) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.26) !important;
}

.details{
  gap:42px !important;
  padding:6px 0 2px !important;
}

.details h1{
  margin-top:10px !important;
  font-size:clamp(46px,5.6vw,82px) !important;
  line-height:.92 !important;
}

.album-artist{
  margin-top:18px !important;
  font-size:clamp(20px,1.8vw,28px) !important;
}

.release-date{
  margin-top:9px !important;
  font-size:14px !important;
}

.favorite-button{
  min-height:38px !important;
  margin-top:18px !important;
  padding:0 12px !important;
  border-radius:10px !important;
}

.community-score{
  padding-top:22px !important;
}

.score-big{
  font-size:clamp(72px,7vw,106px) !important;
}

.album-tabs{
  margin:34px 0 16px !important;
  padding:6px !important;
  gap:6px !important;
  border:1px solid var(--ui-border) !important;
  border-radius:var(--ui-radius-md) !important;
  background:rgba(255,255,255,.015) !important;
}

.album-tab{
  min-height:40px !important;
  padding:0 14px !important;
  border-radius:10px !important;
}

.album-tab-primary{
  background:#202328 !important;
}

.public-reviews-prominent{
  margin-top:0 !important;
  margin-bottom:18px !important;
}

.public-reviews-head{
  margin-bottom:18px !important;
}

.public-reviews-prominent .public-reviews-head h2{
  margin-top:6px !important;
  font-size:28px !important;
  line-height:1 !important;
}

.review-list{
  gap:10px !important;
}

.public-review-card{
  padding:18px 20px !important;
}

.public-review-card.review-verified{
  border-color:rgba(75,167,255,.14) !important;
}

.public-review-card.review-developer{
  box-shadow:inset 3px 0 0 rgba(66,232,129,.22) !important;
}

.public-review-head{
  gap:16px !important;
}

.reviewer{
  gap:10px !important;
}

.reviewer-avatar,
.reviewer-avatar-fallback{
  width:34px !important;
  height:34px !important;
}

.reviewer-name{
  font-size:14px !important;
}

.review-score{
  font-size:24px !important;
}

.public-review-body{
  margin-top:14px !important;
  color:#b3b6bb !important;
  font-size:14px !important;
  line-height:1.52 !important;
}

.review-actions{
  margin-top:14px !important;
}

.lower-grid{
  margin-top:18px !important;
  grid-template-columns:minmax(0,1fr) minmax(360px,.92fr) !important;
  gap:18px !important;
}

.interaction{
  gap:18px !important;
}

.panel-head,
.track-head{
  margin-bottom:20px !important;
}

.panel h2,
.track-panel h2{
  font-size:22px !important;
}

textarea{
  min-height:150px !important;
  padding:15px 16px !important;
  font-size:15px !important;
}

.track-panel{
  max-height:760px !important;
}

.track-item{
  min-height:44px !important;
}

.track-title{
  font-size:14px !important;
}

.your-review{
  margin-top:18px !important;
}

.review-card{
  padding:20px !important;
  border-radius:var(--ui-radius-lg) !important;
}

.track-breakdown-modal,
.cover-editor-modal,
.username-modal{
  border-radius:var(--ui-radius-lg) !important;
  border-color:var(--ui-border) !important;
  background:#15171a !important;
}

/* ---------- profile ---------- */

.profile-page > .profile-back{
  margin-bottom:30px !important;
}

.profile-hero{
  width:100% !important;
  grid-template-columns:190px minmax(0,1fr) !important;
  gap:38px !important;
  margin-top:0 !important;
  padding:34px 38px !important;
  border-radius:var(--ui-radius-xl) !important;
  background:rgba(255,255,255,.016) !important;
  box-shadow:none !important;
}

.profile-avatar-wrap{
  width:190px !important;
  height:190px !important;
  box-shadow:0 16px 38px rgba(0,0,0,.28) !important;
}

.profile-name-line{
  gap:9px !important;
}

.profile-name-line h1{
  font-size:clamp(44px,4.4vw,60px) !important;
}

.profile-verified,
.profile-developer{
  width:27px !important;
  height:27px !important;
}

.profile-bio{
  max-width:760px !important;
  margin-top:15px !important;
  font-size:16px !important;
  line-height:1.5 !important;
}

.profile-meta{
  margin-top:10px !important;
}

.profile-settings-link{
  min-height:38px;
  display:inline-flex !important;
  align-items:center;
  margin-top:17px !important;
  padding:0 12px !important;
  border-radius:10px !important;
}

.profile-section{
  padding-top:48px !important;
}

.profile-section + .profile-section{
  margin-top:0 !important;
}

.profile-section-head{
  margin-bottom:20px !important;
}

.profile-section-head > span{
  font-size:12px !important;
}

.profile-review-list{
  gap:14px !important;
}

.profile-review-card{
  min-height:250px;
  display:flex;
  flex-direction:column;
  padding:18px !important;
}

.profile-review-album{
  grid-template-columns:60px minmax(0,1fr) !important;
  gap:12px !important;
}

.profile-review-album img{
  width:60px !important;
  height:60px !important;
  border-radius:11px !important;
}

.profile-review-card > p{
  min-height:0 !important;
  flex:1;
  margin-top:14px !important;
  font-size:14px !important;
  line-height:1.5 !important;
}

.profile-review-actions{
  margin-top:15px !important;
}

.profile-album-grid{
  grid-template-columns:repeat(auto-fill,minmax(185px,1fr)) !important;
  gap:34px 24px !important;
}

.profile-cover{
  border-radius:16px !important;
}

.profile-card-meta{
  padding-top:11px !important;
}

.profile-card-title{
  font-size:15px !important;
}

.profile-card-artist{
  font-size:12px !important;
}

.profile-card-score{
  font-size:22px !important;
}

/* ---------- artist ---------- */

.artist-page > .artist-back{
  margin-bottom:32px !important;
}

.artist-hero{
  width:100% !important;
  margin-top:0 !important;
  padding:0 0 38px !important;
  border-bottom:1px solid var(--ui-border) !important;
}

.artist-hero h1{
  margin-top:9px !important;
  max-width:1100px;
  font-size:clamp(52px,6vw,88px) !important;
  line-height:.9 !important;
  letter-spacing:-.06em !important;
}

.artist-details{
  margin-top:15px !important;
  font-size:13px !important;
}

.artist-discography{
  margin-top:42px !important;
}

.artist-section-head{
  margin-bottom:22px !important;
}

.artist-page .album-grid{
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important;
}

/* ---------- settings ---------- */

.settings-page > .settings-back{
  margin-bottom:34px !important;
}

.settings-page > h1{
  margin:0 0 28px !important;
  font-size:clamp(44px,6vw,58px) !important;
  line-height:.92 !important;
}

.settings-card{
  margin-top:14px !important;
  padding:24px !important;
}

.settings-title{
  align-items:center !important;
  margin-bottom:18px !important;
}

.settings-title h2{
  margin-top:6px !important;
  font-size:23px !important;
  line-height:1 !important;
}

.settings-card input:not([type="color"]){
  min-height:48px !important;
  padding:0 14px !important;
}

.settings-card textarea{
  min-height:132px !important;
  padding:14px !important;
}

.settings-help,
.settings-status{
  font-size:12px !important;
  line-height:1.45 !important;
}

.avatar-preview{
  width:56px !important;
  height:56px !important;
  border:0 !important;
}

.settings-verified{
  width:24px !important;
  height:24px !important;
}

.name-preview{
  min-height:72px !important;
  margin-bottom:14px !important;
  border-radius:12px !important;
  font-size:32px !important;
}

.style-mode-row{
  gap:8px !important;
}

.settings-card .style-mode{
  min-height:40px !important;
  height:40px !important;
  margin:0 !important;
  border-radius:10px !important;
}

.colour-row{
  gap:10px !important;
}

.colour-control{
  min-height:48px !important;
  border-radius:11px !important;
}

.danger-card{
  margin-top:28px !important;
}

/* ---------- shared review actions + badges ---------- */

.review-badge,
.verified-badge,
.developer-badge{
  object-fit:contain;
}

.review-badge{
  width:17px !important;
  height:17px !important;
}

.review-like-button,
.profile-pin-button,
.review-track-button,
.track-rate-toggle,
.track-average-side button{
  min-height:34px !important;
  border-radius:10px !important;
}

.review-like-button{
  padding:0 9px !important;
}

/* ---------- auth gate ---------- */

.auth-gate{
  background:
    radial-gradient(circle at 50% 30%,rgba(255,255,255,.035),transparent 25rem),
    var(--ui-bg) !important;
}

.auth-gate-inner{
  width:min(410px,100%) !important;
}

.auth-gate h1{
  letter-spacing:-.045em !important;
}

.google-auth-button{
  min-height:50px !important;
  border-radius:13px !important;
}

/* ---------- responsive ---------- */

@media(max-width:980px){
  .hero{
    grid-template-columns:minmax(260px,360px) minmax(0,1fr) !important;
    gap:36px !important;
  }

  .lower-grid{
    grid-template-columns:1fr !important;
  }

  .track-panel{
    max-height:none !important;
  }

  .profile-hero{
    grid-template-columns:160px minmax(0,1fr) !important;
    gap:28px !important;
  }

  .profile-avatar-wrap{
    width:160px !important;
    height:160px !important;
  }
}

@media(max-width:760px){
  .search-wrap{
    top:58px !important;
    left:10px !important;
    width:calc(100vw - 20px) !important;
    height:50px !important;
    min-width:0 !important;
    padding:5px !important;
    border-radius:13px !important;
  }

  .album-search{
    height:38px !important;
    font-size:14px !important;
  }

  .auth-mount{
    top:10px !important;
    right:10px !important;
  }

  .account-button{
    height:40px !important;
    padding:0 11px !important;
    border-radius:12px !important;
  }

  .account-button img,
  .account-avatar-fallback{
    width:22px !important;
    height:22px !important;
  }

  .catalog{
    padding:128px 16px 60px !important;
  }

  .page,
  .profile-page,
  .artist-page,
  .settings-page{
    padding:72px 16px 64px !important;
  }

  .popular-review-grid,
  .profile-review-list{
    grid-template-columns:1fr !important;
  }

  .hero{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .cover-wrap{
    width:min(100%,480px);
  }

  .album-tabs{
    overflow-x:auto;
    scrollbar-width:none;
  }

  .album-tabs::-webkit-scrollbar{
    display:none;
  }

  .album-tab{
    flex:0 0 auto;
  }

  .profile-hero{
    grid-template-columns:120px minmax(0,1fr) !important;
    gap:20px !important;
    padding:22px !important;
  }

  .profile-avatar-wrap{
    width:120px !important;
    height:120px !important;
  }

  .profile-name-line h1{
    font-size:clamp(32px,8vw,44px) !important;
  }

  .profile-verified,
  .profile-developer{
    width:21px !important;
    height:21px !important;
  }

  .profile-bio{
    font-size:14px !important;
  }

  .profile-album-grid,
  .artist-page .album-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:26px 14px !important;
  }

  .artist-hero h1{
    font-size:clamp(44px,12vw,70px) !important;
  }
}

@media(max-width:520px){
  .profile-hero{
    grid-template-columns:1fr !important;
    text-align:left;
  }

  .profile-avatar-wrap{
    width:132px !important;
    height:132px !important;
  }

  .profile-name-line{
    flex-wrap:wrap;
  }

  .popular-review-card,
  .profile-review-card,
  .public-review-card,
  .panel,
  .settings-card,
  .public-reviews-prominent{
    padding:17px !important;
  }

  .profile-album-grid,
  .artist-page .album-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
  }
}


/* ==========================================================
   v5.1 badge normalization + spacious album layout
   ========================================================== */

/* Badges use one visual scale per context. Broad avatar selectors elsewhere
   must never resize role badges. */
.account-button img.account-verified,
.account-button img.account-developer{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  border-radius:0 !important;
  object-fit:contain !important;
}

.account-menu-name img.account-verified,
.account-menu-name img.account-developer{
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  min-height:17px !important;
  border-radius:0 !important;
  object-fit:contain !important;
}

.popular-review-user img.review-badge,
.reviewer-name img.review-badge,
.profile-review-card img.review-badge{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  border-radius:0 !important;
  object-fit:contain !important;
  margin-left:4px !important;
  vertical-align:-4px !important;
}

.profile-name-line img.profile-verified,
.profile-name-line img.profile-developer{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  border-radius:0 !important;
  object-fit:contain !important;
}

#postedUsername img.verified-badge,
#postedUsername img.developer-badge{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  border-radius:0 !important;
  object-fit:contain !important;
  margin-left:4px !important;
  vertical-align:-4px !important;
}

/* The developer mark has slightly lighter visual weight than the verified
   mark, so a tiny scale correction makes them look equal without changing
   their layout box. */
.account-developer,
.developer-review-badge,
.profile-developer,
.developer-badge{
  transform:scale(1.06);
  transform-origin:center;
}

/* Role priority stays in sorting. Cards themselves do not get colored edges. */
.public-review-card.review-verified,
.public-review-card.review-developer{
  border-color:var(--ui-border) !important;
  box-shadow:none !important;
}

/* ---------- calmer album page ---------- */

.page{
  --album-section-gap:34px;
}

.page > .back{
  margin-bottom:36px !important;
}

.hero{
  grid-template-columns:minmax(300px,390px) minmax(0,1fr) !important;
  gap:clamp(48px,6vw,84px) !important;
  align-items:center !important;
  padding-bottom:10px !important;
}

.cover-wrap{
  width:100%;
}

.details{
  min-height:100%;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:54px !important;
  padding:8px 0 !important;
}

.identity{
  max-width:820px;
}

.details h1{
  max-width:900px;
  margin-top:12px !important;
  font-size:clamp(48px,5vw,76px) !important;
  line-height:.94 !important;
}

.album-artist{
  margin-top:20px !important;
}

.community-score{
  width:min(440px,100%);
  padding-top:26px !important;
  border-top:1px solid var(--ui-border);
}

.album-tabs{
  width:max-content !important;
  max-width:100%;
  margin:48px 0 28px !important;
  padding:5px !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.012) !important;
}

.album-tab{
  min-height:42px !important;
  padding:0 15px !important;
}

.album-content-grid{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(340px,.72fr);
  gap:28px;
  align-items:start;
}

.public-reviews-prominent{
  min-width:0;
  margin:0 !important;
  padding:28px !important;
}

.public-reviews-head{
  margin-bottom:24px !important;
}

.public-reviews-prominent .public-reviews-head h2{
  font-size:32px !important;
}

.review-list{
  display:grid;
  gap:14px !important;
}

.public-review-card{
  padding:21px 22px !important;
  border-radius:16px !important;
}

.public-review-head{
  align-items:center !important;
}

.reviewer-avatar,
.reviewer-avatar-fallback{
  width:38px !important;
  height:38px !important;
}

.public-review-body{
  margin-top:17px !important;
  padding-right:clamp(0px,3vw,40px);
  font-size:14px !important;
  line-height:1.58 !important;
}

.review-actions{
  margin-top:18px !important;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.045);
}

.album-user-tools{
  display:grid;
  gap:18px;
  position:sticky;
  top:92px;
}

.album-user-tools .panel{
  padding:24px !important;
}

.album-user-tools textarea{
  min-height:170px !important;
}

.album-user-tools .your-review{
  margin:0 !important;
  padding:20px;
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius-lg);
  background:rgba(255,255,255,.012);
}

.album-user-tools .review-card{
  margin-top:12px;
  padding:18px !important;
  background:rgba(255,255,255,.012);
}

.album-track-section{
  width:100%;
  max-height:none !important;
  margin-top:var(--album-section-gap) !important;
  padding:28px !important;
}

.album-track-section .track-head{
  margin-bottom:22px !important;
  padding-bottom:18px;
  border-bottom:1px solid var(--ui-border);
}

.album-track-section .track-list{
  display:grid;
  gap:0;
}

.album-track-section .track-item{
  min-height:50px !important;
  padding:0 4px;
}

.album-track-section .track-item + .track-item{
  border-top-color:rgba(255,255,255,.045) !important;
}

.album-track-section .track-title{
  font-size:14px !important;
}

.album-track-section .track-rating-panel{
  margin-top:24px !important;
  padding-top:24px !important;
}

@media(max-width:1080px){
  .album-content-grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  .album-user-tools{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .album-user-tools .your-review{
    grid-column:1/-1;
  }
}

@media(max-width:760px){
  .hero{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }

  .cover-wrap{
    width:min(100%,430px);
  }

  .details{
    gap:34px !important;
  }

  .community-score{
    width:100%;
  }

  .album-tabs{
    width:100% !important;
    margin:34px 0 20px !important;
  }

  .album-tab{
    flex:1 0 auto;
  }

  .album-user-tools{
    grid-template-columns:1fr;
  }

  .public-reviews-prominent,
  .album-track-section{
    padding:20px !important;
  }

  .profile-name-line img.profile-verified,
  .profile-name-line img.profile-developer{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
  }
}


/* ==========================================================
   v5.2 QOL + spacious layout
   ========================================================== */

/* Non-grid pages should actually use the viewport. */
.page,
.profile-page,
.artist-page{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:
    92px
    clamp(22px,2.8vw,54px)
    88px !important;
}

.settings-page{
  width:min(1240px,100%) !important;
  max-width:none !important;
  padding:
    92px
    clamp(20px,3vw,44px)
    88px !important;
}

/* ---------- album: direct vertical flow, no pointless tabs ---------- */

.page{
  --album-wide-gap:clamp(34px,4vw,58px);
}

.page > .back{
  margin-bottom:34px !important;
}

.hero{
  grid-template-columns:minmax(330px,430px) minmax(0,1fr) !important;
  gap:clamp(52px,6vw,96px) !important;
  align-items:center !important;
  padding:0 0 18px !important;
}

.cover-wrap{
  max-width:430px;
}

.details{
  gap:54px !important;
  padding:10px 0 !important;
}

.identity{
  max-width:1000px !important;
}

.details h1{
  max-width:1100px !important;
  font-size:clamp(52px,5.4vw,88px) !important;
  line-height:.92 !important;
}

.album-artist{
  font-size:clamp(21px,1.8vw,30px) !important;
}

.community-score{
  width:min(520px,100%) !important;
}

/* The user's actions come first. Review is the main action, rating is compact. */
.album-create-section{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(320px,.65fr);
  gap:24px;
  align-items:stretch;
  margin-top:50px;
}

.album-create-section > .panel{
  margin:0 !important;
  padding:28px !important;
}

.album-review-composer{
  min-height:330px;
  display:flex;
  flex-direction:column;
}

.album-review-composer .panel-head,
.album-rating-card .panel-head{
  margin-bottom:22px !important;
}

.album-review-composer textarea{
  min-height:190px !important;
  flex:1;
  padding:17px !important;
  font-size:15px !important;
  line-height:1.5 !important;
}

.album-review-composer .primary-button,
.album-rating-card .primary-button{
  margin-top:16px !important;
}

.review-composer-meta{
  display:flex;
  align-items:center;
  gap:10px;
}

.composer-delete{
  min-height:32px !important;
  margin:0 !important;
  padding:0 9px !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.018) !important;
  color:#7e8288 !important;
  font-size:11px !important;
}

.composer-delete:hover{
  color:#d6d8db !important;
  border-color:rgba(255,255,255,.12) !important;
}

.album-rating-card{
  min-height:330px;
  display:flex;
  flex-direction:column;
}

.album-rating-card .score-range{
  margin-top:auto;
}

.album-rating-card .score-preview{
  font-size:42px !important;
}

.album-rating-card .status,
.album-review-composer .status{
  min-height:17px;
}

/* Tracklist directly follows the review/rating tools. */
.album-track-section{
  width:100% !important;
  max-height:none !important;
  margin-top:var(--album-wide-gap) !important;
  padding:30px !important;
}

.album-track-section .track-head{
  margin-bottom:20px !important;
  padding-bottom:18px !important;
  border-bottom:1px solid var(--ui-border);
}

.album-track-section .track-item{
  min-height:52px !important;
  padding:0 6px !important;
}

.album-track-section .track-title{
  font-size:14px !important;
}

.album-track-section .track-rating-panel{
  margin-top:26px !important;
  padding-top:26px !important;
}

/* Community reviews are content, not a competing control panel. */
.album-community-section{
  width:100% !important;
  margin-top:var(--album-wide-gap) !important;
  padding:30px !important;
}

.album-community-section .public-reviews-head{
  margin-bottom:22px !important;
}

.album-community-section .public-reviews-head h2{
  margin-top:6px !important;
  font-size:32px !important;
}

.album-community-section .review-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px !important;
}

.album-community-section .public-review-card{
  min-height:205px;
  display:flex;
  flex-direction:column;
  padding:20px !important;
}

.album-community-section .public-review-body{
  flex:1;
  margin-top:16px !important;
  padding-right:0 !important;
}

.album-community-section .review-actions{
  margin-top:18px !important;
}

/* ---------- profile ---------- */

.profile-hero{
  width:100% !important;
  max-width:none !important;
}

.profile-section{
  width:100%;
}

.profile-review-list{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.profile-album-grid{
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) !important;
}

/* ---------- artist ---------- */

.artist-hero{
  max-width:none !important;
}

.artist-discography{
  width:100%;
}

/* ---------- settings ---------- */

.settings-page{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 18px;
  align-items:start;
}

.settings-page > .settings-back,
.settings-page > h1{
  grid-column:1/-1;
}

.settings-page > .settings-back{
  margin-bottom:18px !important;
}

.settings-page > h1{
  margin-bottom:10px !important;
}

.settings-card{
  margin:0 !important;
  min-height:100%;
}

.settings-card.danger-card{
  grid-column:1/-1;
  min-height:0;
}

/* ---------- remove visual noise ---------- */

.album-tabs{
  display:none !important;
}

.public-review-card.review-verified,
.public-review-card.review-developer{
  box-shadow:none !important;
  border-color:var(--ui-border) !important;
}

/* Keep badge sizing predictable. */
.account-button img.account-verified,
.account-button img.account-developer{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  border-radius:0 !important;
}

.popular-review-user img.review-badge,
.reviewer-name img.review-badge{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  border-radius:0 !important;
}

.profile-name-line img.profile-verified,
.profile-name-line img.profile-developer{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  border-radius:0 !important;
}

@media(max-width:1180px){
  .album-create-section{
    grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  }

  .album-community-section .review-list{
    grid-template-columns:1fr;
  }

  .profile-review-list{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:900px){
  .hero{
    grid-template-columns:minmax(260px,360px) minmax(0,1fr) !important;
    gap:36px !important;
  }

  .album-create-section{
    grid-template-columns:1fr;
  }

  .album-rating-card{
    min-height:250px;
  }

  .settings-page{
    grid-template-columns:1fr;
  }

  .settings-page > .settings-back,
  .settings-page > h1,
  .settings-card.danger-card{
    grid-column:1;
  }
}

@media(max-width:760px){
  .page,
  .profile-page,
  .artist-page,
  .settings-page{
    padding:
      72px
      16px
      64px !important;
  }

  .hero{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }

  .cover-wrap{
    width:min(100%,430px);
  }

  .album-create-section{
    margin-top:36px;
    gap:16px;
  }

  .album-create-section > .panel,
  .album-track-section,
  .album-community-section{
    padding:20px !important;
  }

  .album-review-composer{
    min-height:300px;
  }

  .album-community-section .review-list,
  .profile-review-list{
    grid-template-columns:1fr !important;
  }

  .review-composer-meta{
    align-items:flex-end;
    flex-direction:column;
    gap:5px;
  }
}


/* ==========================================================
   v5.3 restore useful album side column
   ========================================================== */

.album-main-layout{
  display:grid;
  grid-template-columns:minmax(0,1.48fr) minmax(360px,.72fr);
  gap:30px;
  align-items:start;
  margin-top:50px;
}

.album-main-column,
.album-side-column{
  min-width:0;
  display:grid;
  gap:24px;
}

.album-review-composer{
  min-height:340px !important;
  display:flex !important;
  flex-direction:column;
  padding:28px !important;
}

.album-review-composer textarea{
  min-height:200px !important;
  flex:1;
  padding:17px !important;
  font-size:15px !important;
  line-height:1.52 !important;
}

.album-review-composer .primary-button{
  margin-top:16px !important;
}

.album-community-section{
  width:100% !important;
  margin:0 !important;
  padding:28px !important;
}

.album-community-section .review-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
}

.album-community-section .public-review-card{
  min-height:190px !important;
}

.album-side-column{
  align-content:start;
}

.album-rating-card{
  min-height:280px !important;
  display:flex !important;
  flex-direction:column;
  padding:26px !important;
}

.album-rating-card .score-range{
  margin-top:auto;
}

.album-rating-card .primary-button{
  margin-top:18px !important;
}

.album-track-section{
  width:100% !important;
  max-height:none !important;
  margin:0 !important;
  padding:24px !important;
}

.album-track-section .track-head{
  margin-bottom:18px !important;
  padding-bottom:16px !important;
}

.album-track-section .track-item{
  min-height:48px !important;
  padding:0 3px !important;
}

.album-track-section .track-num{
  width:24px;
}

.album-track-section .track-title{
  font-size:13px !important;
}

.album-track-section .track-time{
  font-size:11px !important;
}

.album-track-section .track-community{
  font-size:12px !important;
}

.album-track-section .track-rating-panel{
  margin-top:22px !important;
  padding-top:22px !important;
}

.album-track-section .track-rating-row{
  min-height:46px !important;
}

.album-track-section .track-score-input{
  width:58px !important;
}

/* There are intentionally no section-navigation pills. */
.album-tabs{
  display:none !important;
}

/* Full page width, but keep readable content density. */
.page{
  padding-left:clamp(24px,2.7vw,52px) !important;
  padding-right:clamp(24px,2.7vw,52px) !important;
}

@media(max-width:1100px){
  .album-main-layout{
    grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);
    gap:20px;
  }

  .album-review-composer{
    min-height:310px !important;
  }
}

@media(max-width:900px){
  .album-main-layout{
    grid-template-columns:1fr;
    gap:20px;
  }

  .album-main-column{
    order:1;
  }

  .album-side-column{
    order:2;
    grid-template-columns:1fr;
  }

  .album-rating-card{
    min-height:240px !important;
  }
}

@media(max-width:760px){
  .album-main-layout{
    margin-top:36px;
  }

  .album-review-composer,
  .album-community-section,
  .album-rating-card,
  .album-track-section{
    padding:20px !important;
  }
}


/* ==========================================================
   v5.4 inline track ratings
   ========================================================== */

.track-inline-tools{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  margin:-4px 0 14px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:11px;
  background:rgba(255,255,255,.014);
}

.track-inline-tools[hidden]{
  display:none !important;
}

.track-inline-average{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-right:auto;
}

.track-inline-average span{
  color:#6f737a;
  font-size:11px;
}

.track-inline-average strong{
  color:#ececee;
  font-size:20px;
  line-height:1;
}

.track-inline-tools > button{
  min-height:32px;
  padding:0 9px;
  border:1px solid var(--ui-border);
  border-radius:9px;
  background:rgba(255,255,255,.02);
  color:#94989f;
  cursor:pointer;
  font:600 11px/1 inherit;
}

.track-inline-tools > button:hover:not(:disabled){
  color:#ececee;
  border-color:var(--ui-border-strong);
}

.track-inline-tools .status{
  min-width:0;
  margin:0 0 0 2px;
  font-size:10px;
  white-space:nowrap;
}

.track-column-labels{
  min-height:25px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 72px 58px;
  gap:10px;
  align-items:center;
  padding:0 3px 5px;
  color:#5f636a;
  font-size:9px;
  font-weight:650;
  letter-spacing:.07em;
  text-align:right;
  text-transform:uppercase;
}

.track-column-labels[hidden]{
  display:none !important;
}

.album-track-section .track-item{
  display:grid !important;
  grid-template-columns:28px minmax(0,1fr) 72px 58px !important;
  gap:10px !important;
  align-items:center !important;
}

.album-track-section .track-community-score,
.album-track-section .track-community-empty,
.album-track-section .track-my-score,
.album-track-section .track-my-empty,
.album-track-section .track-time{
  justify-self:end;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.album-track-section .track-community-score,
.album-track-section .track-my-score{
  color:rgb(var(--score,110 110 110));
  font-size:13px;
  font-weight:700;
}

.album-track-section .track-community-empty,
.album-track-section .track-my-empty{
  color:#4e5259;
  font-size:12px;
}

.album-track-section .track-score-inline{
  justify-self:end;
  width:58px !important;
  height:32px !important;
  padding:0 7px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:9px !important;
  background:#101215 !important;
  color:#f0f0f1 !important;
  text-align:center;
  font:650 12px/1 inherit !important;
  appearance:textfield;
}

.album-track-section .track-score-inline::-webkit-inner-spin-button,
.album-track-section .track-score-inline::-webkit-outer-spin-button{
  margin:0;
  appearance:none;
}

.album-track-section .track-score-inline:focus{
  border-color:rgba(255,255,255,.2) !important;
  background:#15171a !important;
}

@media(max-width:520px){
  .track-column-labels,
  .album-track-section .track-item{
    grid-template-columns:24px minmax(0,1fr) 58px 52px !important;
    gap:7px !important;
  }

  .track-column-labels{
    font-size:8px;
  }

  .album-track-section .track-community-score,
  .album-track-section .track-my-score{
    font-size:12px;
  }

  .album-track-section .track-score-inline{
    width:52px !important;
  }
}


/* ==========================================================
   public release polish
   ========================================================== */

::selection{
  background:rgba(255,255,255,.18);
  color:#fff;
}

html{
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
}

.album,
.profile-album,
.popular-review-card,
.profile-review-card,
.public-review-card,
.settings-card,
.panel{
  backface-visibility:hidden;
}

.album .cover-shell,
.profile-cover{
  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    border-color 170ms ease;
}

.album:hover .cover-shell{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.27);
}

.album-title-link,
.artist-link,
.profile-album,
.popular-review-album,
.popular-review-user,
.reviewer{
  text-underline-offset:3px;
}

.album-search::-webkit-search-cancel-button{
  display:none;
}

input::placeholder,
textarea::placeholder{
  color:#575b62;
  opacity:1;
}

.empty-state,
.reviews-empty,
.profile-empty{
  color:#666a71;
}

.status:empty{
  min-height:0 !important;
  margin-top:0 !important;
}

.skeleton .cover-shell,
.sk-line{
  position:relative;
  overflow:hidden;
}

.skeleton .cover-shell::after,
.sk-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.045),
    transparent
  );
  transform:translateX(-100%);
  animation:critic-skeleton 1.35s ease-in-out infinite;
}

@keyframes critic-skeleton{
  to{transform:translateX(100%)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .skeleton .cover-shell::after,
  .sk-line::after{
    animation:none;
  }
}


/* ==========================================================
   v6 release fixes
   ========================================================== */

/* Pinned state is communicated by the label/button only, not card edges. */
.profile-review-card.profile-review-pinned{
  border-color:var(--ui-border) !important;
  box-shadow:none !important;
}

/* Search uses the same single outlined shell as the account button. */
.search-wrap{
  padding:0 !important;
  overflow:hidden;
}

.album-search{
  height:54px !important;
  border:0 !important;
  border-radius:14px !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 54px 0 16px !important;
}

.album-search:hover,
.album-search:focus{
  background:rgba(255,255,255,.012) !important;
  box-shadow:none !important;
}

.search-state{
  right:17px !important;
}

@media(max-width:760px){
  .search-wrap{
    padding:0 !important;
  }

  .album-search{
    height:48px !important;
    border-radius:12px !important;
  }
}