:root {
  --bg: #090910;
  --surface: #11121a;
  --surface-2: #171823;
  --surface-3: #20202d;
  --line: #292a39;
  --text: #f3f1f8;
  --muted: #9694a7;
  --purple: #a77af4;
  --purple-2: #cbb4ff;
  --purple-dark: #302149;
  --green: #84d9ad;
  --danger: #f08b9a;
  --side: 238px;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(ellipse at 78% -10%, rgba(83,47,130,.14), transparent 42%), var(--bg); color: var(--text); font-family: "DM Sans", Inter, system-ui, sans-serif; font-size: 14px; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; }
.sidebar { width: var(--side); position: fixed; inset: 0 auto 0 0; z-index: 25; display: flex; flex-direction: column; padding: 27px 17px 18px; background: rgba(13,14,21,.96); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 10px 32px; }
.brand strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.6px; }
.brand small { display: block; margin-top: 4px; color: #88869a; font-size: 8px; letter-spacing: 1.2px; font-weight: 700; }
.brand-mark { width: 31px; height: 31px; flex: 0 0 31px; position: relative; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg,#b58aff,#6340a6); box-shadow: 0 7px 22px #8c5cdb33; }
.brand-mark:before, .brand-mark:after, .brand-mark span { content: ""; position: absolute; border: 2px solid #fff; border-radius: 50%; }
.brand-mark:before { width: 17px; height: 17px; opacity: .96; }
.brand-mark:after { width: 8px; height: 8px; opacity: .65; }
.nav-label { padding: 0 11px 9px; color: #77768a; font-size: 9px; font-weight: 800; letter-spacing: 1.25px; }
.nav-spaced { margin-top: 27px; }
.nav-main { display: grid; gap: 5px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; border: 1px solid transparent; border-radius: 10px; padding: 11px 12px; background: transparent; color: #aaa8b8; text-align: left; font-size: 12px; font-weight: 600; transition: .16s; }
.nav-item:hover { color: var(--text); background: #1a1925; }
.nav-item.active { color: #e6d9ff; border-color: #47335f; background: linear-gradient(100deg,#302149,#211a30); box-shadow: inset 2px 0 var(--purple); }
.nav-icon { width: 17px; color: #bda1f8; font-size: 17px; text-align: center; line-height: 1; }
.sidebar-bottom { margin-top: auto; }
.side-user { display: flex; align-items: center; gap: 9px; padding: 13px 7px 15px; border-top: 1px solid var(--line); }
.avatar, .mini-avatar { width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg,#8d64cf,#312843); color: white; font-size: 13px; font-weight: 800; flex: 0 0 auto; }
.side-user-copy { min-width: 0; flex: 1; }
.side-user-copy strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.side-user-copy small { display: block; margin-top: 3px; font-size: 9px; color: var(--muted); }
.icon-button { border: 0; background: #242332; color: #d9c8ff; width: 29px; height: 29px; border-radius: 8px; }
.settings-link { margin-top: 4px; }
.main-area { min-height: 100vh; margin-left: var(--side); }
.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 43px; border-bottom: 1px solid rgba(48,48,62,.7); background: rgba(9,9,16,.56); }
.topbar-heading { min-width: 0; }
.eyebrow { color: #ac8ce9; font-size: 9px; font-weight: 800; letter-spacing: 1.55px; }
.topbar-title { margin-top: 4px; font-size: 17px; font-weight: 800; letter-spacing: -.45px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.build-badge { padding: 7px 9px; border: 1px solid #4d3a69; border-radius: 999px; background: #20192c; color: #d0b7ff; font-size: 8px; font-weight: 800; letter-spacing: .7px; white-space: nowrap; }
.mobile-brand { display: none; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.mobile-brand .brand-mark { width: 27px; height: 27px; flex-basis: 27px; }
.page { max-width: 1420px; margin: 0 auto; padding: 34px 43px 80px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.page-head h1 { margin: 7px 0 5px; font-size: 29px; letter-spacing: -1.2px; }
.page-head p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.6; font-size: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; border: 1px solid #9d75e8; border-radius: 10px; padding: 0 16px; background: linear-gradient(130deg,#a477ed,#7751bd); color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 7px 20px #7444b51c; transition: .17s; }
.button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.button:disabled { opacity: .52; cursor: not-allowed; transform: none; }
.button-quiet { border-color: var(--line); background: #171722; color: #d7d3e2; box-shadow: none; }
.button-outline { background: transparent; box-shadow: none; }
.text-link { border: 0; padding: 5px 0; background: transparent; color: #c7aaff; font-size: 11px; font-weight: 800; }
.text-link:hover { color: white; }
.hero { min-height: 310px; position: relative; overflow: hidden; display: flex; align-items: center; padding: 42px 46px; border: 1px solid #45335e; border-radius: 21px; background: radial-gradient(ellipse at 82% 45%,#56377b 0%,#2b2042 30%,#171522 69%,#12131c 100%); box-shadow: 0 25px 65px #0003; }
.hero:before { content: ""; position: absolute; width: 295px; height: 295px; right: 9%; top: 7px; border-radius: 50%; border: 1px solid #d0b9ff25; box-shadow: 0 0 0 23px #d0b9ff09,0 0 0 48px #d0b9ff06,0 0 90px #b98dff25; }
.hero:after { content: "♫"; position: absolute; right: 14%; top: 31px; font-size: 210px; line-height: 1; color: #d9c6ff1b; transform: rotate(-12deg); }
.hero-content { position: relative; z-index: 1; max-width: 620px; }
.hero-kicker { color: #d2baff; font-size: 9px; font-weight: 800; letter-spacing: 1.9px; }
.hero h1 { margin: 14px 0 11px; font-size: clamp(36px,4.2vw,52px); letter-spacing: -2.6px; line-height: 1.02; }
.hero p { max-width: 530px; margin: 0 0 20px; color: #c3bdcf; font-size: 12px; line-height: 1.7; }
.hero-note { position: absolute; z-index: 1; right: 25px; bottom: 20px; color: #d6c8f151; font-size: 8px; font-weight: 800; letter-spacing: 1.6px; }
.hero-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 10px; }
.catalog-search { width: min(720px,100%); display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid #444055; border-radius: 12px; background: #11111a; }
.hero-search { max-width: 570px; border-color: #8a6ab4; background: #100f18d9; }
.search-symbol { padding-left: 8px; color: #c5a7ff; font-size: 22px; }
.search-input { min-width: 0; flex: 1; padding: 9px 3px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }
.search-input::placeholder { color: #77768a; }
.catalog-helper { margin: 12px 0 22px; color: var(--muted); font-size: 10px; }
.stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin: 19px 0 33px; }
.stat { padding: 17px 19px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg,#161721,#11121a); }
.stat-label { color: #a9a6b8; font-size: 10px; font-weight: 700; }
.stat-value { margin-top: 8px; color: #e6d8ff; font-size: 25px; font-weight: 800; letter-spacing: -.7px; }
.stat-sub { margin-top: 3px; color: #77768a; font-size: 9px; }
.section { margin-top: 34px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.section-heading h2 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.55px; }
.panel { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg,#151620,#11121a); }
.three-cols { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.three-cols h3 { margin: 11px 0 7px; font-size: 13px; }
.helper-text { color: var(--muted); font-size: 10px; line-height: 1.6; }
.album-grid, .catalog-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
.album-card { min-width: 0; padding: 10px; border: 1px solid #292a39; border-radius: 14px; background: linear-gradient(160deg,#171823,#101119); cursor: pointer; transition: .18s; }
.album-card:hover, .album-card:focus { outline: none; border-color: #7654ab; transform: translateY(-3px); box-shadow: 0 13px 30px #0004; }
.cover-wrap { aspect-ratio: 1/1; overflow: hidden; display: grid; place-items: center; border-radius: 9px; background: radial-gradient(circle at 30% 25%,#382b52,#191925 67%); }
.cover-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-fallback { display: grid; gap: 7px; place-items: center; width: 100%; height: 100%; color: #d4bfff; background: radial-gradient(circle at 25% 20%,#563b7d,#201a30 65%,#12121a); }
.cover-fallback span { font-size: 34px; font-weight: 800; letter-spacing: -2px; }
.cover-fallback small { color: #ad9ac9; font-size: 7px; font-weight: 800; letter-spacing: 1px; }
.card-title { overflow: hidden; margin: 10px 2px 3px; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.card-artist { overflow: hidden; margin: 0 2px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin: 10px 2px 0; color: #a99bc6; font-size: 9px; }
.card-meta strong { color: #e1d1ff; font-size: 11px; white-space: nowrap; }
.card-meta strong small { color: var(--muted); font-size: 8px; font-weight: 500; }
.card-score-label { margin: 6px 2px 0; color: #a29caf; font-size: 8px; }
.card-open { display: flex; justify-content: space-between; margin: 11px 2px 1px; padding-top: 9px; border-top: 1px solid #2a2937; color: #c9b0f5; font-size: 9px; font-weight: 800; }
.empty { padding: 42px 20px; border: 1px dashed #393649; border-radius: 14px; background: #11121a70; text-align: center; }
.empty-icon { margin-bottom: 9px; color: #bda2ff; font-size: 30px; }
.empty h3 { margin: 0 0 7px; font-size: 16px; }
.empty p { max-width: 530px; margin: 0 auto 17px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.rank-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.rank-tabs button { padding: 9px 13px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #aaa8b8; font-size: 10px; }
.rank-tabs button.active { border-color: #5a427f; background: #302248; color: #e8dcff; }
.rank-list { display: grid; gap: 8px; }
.rank-row { display: grid; grid-template-columns: 30px 52px minmax(0,1fr) 76px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #292a38; border-radius: 12px; background: #14151f; cursor: pointer; }
.rank-row:hover { border-color: #7152ad; }
.rank-number { color: #b99cff; font-size: 15px; font-weight: 800; }
.rank-row .cover-wrap { width: 52px; }
.rank-info { min-width: 0; }
.rank-info strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rank-info small { color: var(--muted); font-size: 10px; }
.rank-score { color: #d5c2ff; font-size: 16px; font-weight: 800; text-align: right; }
.rank-score small { display: block; color: var(--muted); font-size: 9px; font-weight: 500; }
.album-layout { display: grid; grid-template-columns: 255px minmax(0,1fr); gap: 27px; align-items: start; }
.album-poster .cover-wrap { width: 100%; max-width: 255px; border: 1px solid #343042; box-shadow: 0 18px 45px #0005; }
.album-heading { padding-top: 5px; }
.album-heading h1 { margin: 10px 0 5px; font-size: clamp(28px,3.3vw,41px); letter-spacing: -1.5px; }
.album-heading .artist { color: #c0b2df; font-size: 15px; }
.album-details { margin-top: 9px; color: var(--muted); font-size: 10px; }
.score-pair { display: flex; flex-wrap: wrap; gap: 23px; margin: 23px 0; }
.score-box strong { display: block; color: #d4c1ff; font-size: 27px; letter-spacing: -1px; }
.score-box span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.back-link { margin: 0 0 18px; padding: 0; border: 0; background: transparent; color: #c4a6fa; font-size: 10px; font-weight: 700; }
.track-list { display: grid; }
.track-row { display: grid; grid-template-columns: 28px minmax(0,1fr) 110px; align-items: center; gap: 11px; padding: 12px 2px; border-bottom: 1px solid #292a38; }
.track-row:last-child { border-bottom: 0; }
.track-number { color: #79788c; font-size: 10px; }
.track-main { min-width: 0; }
.track-title { font-size: 11px; font-weight: 700; }
.track-sub { margin-top: 4px; color: #7e7d90; font-size: 8px; }
.track-rating-pair { display: flex; justify-content: flex-end; gap: 14px; color: #d4c1ff; font-size: 11px; font-weight: 800; }
.track-rating-pair span { min-width: 34px; text-align: right; }
.track-rating-pair small { display: block; color: #77768a; font-size: 8px; font-weight: 500; }
.community-reviews { display: grid; gap: 12px; }
.community-review { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg,#151620,#11121a); }
.review-card-head { display: flex; align-items: center; gap: 10px; }
.review-author { flex: 1; min-width: 0; }
.review-author strong { display: block; font-size: 11px; }
.review-author small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.review-score { color: #dfceff; font-size: 17px; font-weight: 800; text-align: right; }
.review-score small { display: block; color: var(--muted); font-size: 8px; font-weight: 500; }
.review-comment { margin: 13px 0 0; color: #c5c1d0; font-size: 11px; line-height: 1.7; white-space: pre-wrap; }
.review-comment.muted { color: #77768a; font-style: italic; }
.track-review-details { margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--line); }
.track-review-details summary { color: #c2a5f2; cursor: pointer; font-size: 10px; font-weight: 700; }
.track-review-compact { display: grid; gap: 8px; margin-top: 12px; }
.track-review-compact > div { display: grid; grid-template-columns: minmax(0,1fr) 48px; gap: 6px 12px; font-size: 10px; }
.track-review-compact > div > span { color: #ded9e9; }
.track-review-compact strong { color: #d3bdff; text-align: right; }
.track-review-compact strong small { color: var(--muted); font-size: 8px; font-weight: 500; }
.track-review-compact p { grid-column: 1 / -1; margin: 0; color: var(--muted); line-height: 1.5; }
.review-form { display: grid; gap: 17px; }
.review-summary { display: flex; align-items: center; gap: 14px; }
.review-summary .cover-wrap { width: 84px; flex: 0 0 84px; }
.review-summary h2 { margin: 0 0 5px; font-size: 17px; }
.review-summary p { margin: 0; color: var(--muted); font-size: 10px; }
.field-group { display: grid; gap: 7px; }
.field-group label { color: #c8c3d5; font-size: 9px; font-weight: 800; letter-spacing: .6px; }
.field, .search-input { color: var(--text); }
.field { width: 100%; padding: 11px 12px; border: 1px solid #343544; border-radius: 10px; outline: none; background: #151620; transition: .15s; }
.field:focus { border-color: #8b62d7; box-shadow: 0 0 0 3px #9862ff1f; }
.field::placeholder { color: #777789; }
.field-readonly { color: #aaa; }
textarea.field { min-height: 90px; resize: vertical; line-height: 1.6; }
.score-input { display: flex; align-items: center; gap: 8px; max-width: 190px; }
.score-input span { color: var(--muted); font-size: 10px; }
.score-input.compact { max-width: 106px; }
.score-input.compact input { padding: 9px 7px; text-align: center; }
.review-track-list { display: grid; }
.track-review-input { display: grid; grid-template-columns: 26px minmax(0,1fr) 104px; align-items: start; gap: 10px; padding: 13px 0; border-bottom: 1px solid #292a38; }
.track-review-input:last-child { border-bottom: 0; }
.track-review-input > .track-number { padding-top: 10px; }
.track-input-main { min-width: 0; display: grid; gap: 7px; }
.track-input-main label { padding-top: 7px; font-size: 11px; font-weight: 700; }
.track-comment-input { min-height: 57px !important; font-size: 10px; }
.community-note, .modal-message { padding: 12px 13px; border: 1px solid #373647; border-radius: 10px; background: #191a27; color: #aaa6b8; font-size: 10px; line-height: 1.6; }
.form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.profile-head { display: flex; align-items: center; gap: 18px; padding: 23px; }
.profile-avatar { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(140deg,#7958c4,#272339); font-size: 26px; font-weight: 800; }
.profile-head h1 { margin: 0 0 4px; font-size: 24px; }
.profile-head p { margin: 0; color: var(--muted); font-size: 11px; }
.profile-stats { display: flex; gap: 25px; margin-top: 12px; }
.profile-stats strong { display: block; font-size: 17px; }
.profile-stats span { color: var(--muted); font-size: 9px; }
.settings-panel { display: grid; gap: 15px; max-width: 720px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; overflow-y: auto; padding: 18px; background: #05050acc; backdrop-filter: blur(7px); }
.modal { width: min(470px,100%); max-height: 92vh; overflow: auto; padding: 23px; border: 1px solid #3b354b; border-radius: 18px; background: #141520; box-shadow: 0 25px 90px #0009; }
.modal-wide { width: min(680px,100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.modal-head h2 { margin: 5px 0 0; font-size: 20px; }
.close-button { width: 31px; height: 31px; border: 0; border-radius: 8px; background: #252533; color: #c9c4d8; font-size: 19px; }
.modal-tabs { display: flex; gap: 5px; margin: 17px 0; }
.modal-tabs button { flex: 1; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #191a25; color: #aaa8b8; font-size: 10px; }
.modal-tabs button.active { border-color: #63459b; background: #302248; color: #e9ddff; }
.modal-form { display: grid; gap: 13px; margin-top: 15px; }
.file-field { padding: 9px; color: #aaa7b6; font-size: 10px; }
.tracklist-textarea { min-height: 180px !important; font-family: "DM Sans",sans-serif; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.divider { height: 1px; margin: 6px 0; background: var(--line); }
.footnote { margin-top: 18px; color: #77768a; font-size: 9px; line-height: 1.6; }
.loading { padding: 24px 2px; color: var(--muted); font-size: 11px; }
.hidden { display: none !important; }
.toast-root { position: fixed; right: 20px; bottom: 20px; z-index: 100; }
.toast { max-width: min(460px,calc(100vw - 40px)); padding: 12px 16px; border: 1px solid #66518e; border-radius: 10px; background: #242235; color: #f4edff; box-shadow: 0 12px 35px #0008; font-size: 11px; line-height: 1.5; }
.toast-error { border-color: #a95169; background: #301a27; }
.mobile-nav { display: none; }
@media (max-width: 1200px) { .album-grid,.catalog-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .page { padding-left: 30px; padding-right: 30px; } .topbar { padding: 0 30px; } }
@media (max-width: 900px) { :root { --side: 205px; } .album-grid,.catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .album-layout { grid-template-columns: 200px minmax(0,1fr); } .hero { padding: 35px 30px; } }
@media (max-width: 680px) {
  .sidebar { display: none; }
  .main-area { margin-left: 0; padding-bottom: 72px; }
  .topbar { height: 66px; gap: 9px; padding: 0 14px; }
  .mobile-brand { display: flex; }
  .topbar-heading { display: none; }
  .topbar-actions { margin-left: auto; gap: 6px; }
  .build-badge { display: none; }
  .topbar-actions .button { min-height: 34px; padding: 0 10px; font-size: 9px; }
  .page { padding: 23px 14px 85px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-head h1 { font-size: 26px; }
  .page-head > .button { align-self: stretch; }
  .hero { min-height: 350px; padding: 28px 20px; }
  .hero:before { right: -95px; opacity: .5; }
  .hero:after { right: -43px; opacity: .5; }
  .hero h1 { font-size: 38px; }
  .hero p { max-width: 95%; }
  .hero-note { right: 16px; bottom: 13px; }
  .hero-search { max-width: 100%; }
  .hero-search .button { padding: 0 10px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats .stat:last-child { grid-column: 1 / -1; }
  .album-grid,.catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .three-cols,.two-cols { grid-template-columns: 1fr; }
  .album-layout { grid-template-columns: 1fr; gap: 17px; }
  .album-poster .cover-wrap { width: 165px; }
  .album-heading h1 { font-size: 31px; }
  .score-pair { gap: 17px; margin: 17px 0; }
  .score-box strong { font-size: 23px; }
  .track-review-input { grid-template-columns: 19px minmax(0,1fr) 79px; gap: 7px; }
  .score-input.compact { max-width: 79px; }
  .score-input.compact input { padding: 9px 4px; font-size: 11px; }
  .rank-row { grid-template-columns: 22px 43px minmax(0,1fr) 55px; gap: 8px; padding: 8px; }
  .rank-row .cover-wrap { width: 43px; }
  .rank-score { font-size: 14px; }
  .profile-head { align-items: flex-start; padding: 16px; }
  .profile-stats { gap: 14px; }
  .catalog-search { gap: 6px; }
  .catalog-search .button { padding: 0 10px; font-size: 9px; }
  .mobile-nav { position: fixed; inset: auto 0 0; z-index: 30; display: flex; height: 66px; align-items: center; justify-content: space-around; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(13,14,21,.97); backdrop-filter: blur(16px); }
  .mobile-nav button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 5px; border: 0; background: none; color: #89899b; font-size: 8px; }
  .mobile-nav button span { font-size: 17px; }
  .mobile-nav button.active { color: #c9adff; }
}

/* RateMyMusic V4 — profils et communauté */
.user-avatar { width: 38px; height: 38px; flex: 0 0 auto; display:inline-grid; place-items:center; overflow:hidden; border-radius:50%; background:linear-gradient(140deg,#7958c4,#272339); color:#fff; font-size:18px; font-weight:800; }
.user-avatar img { width:100%; height:100%; object-fit:cover; }
.user-avatar.profile-avatar-image { width:92px; height:92px; font-size:35px; }
.user-avatar.settings-avatar { width:56px; height:56px; font-size:23px; }
.profile-head-v4 { align-items:center; }
.profile-main { min-width:0; flex:1; }
.profile-bio { max-width:720px; margin:8px 0 0 !important; line-height:1.6; white-space:pre-wrap; }
.profile-bio.muted { color:var(--muted); font-style:italic; }
.profile-head-v4 .profile-stats { flex-wrap:wrap; }
.favorites-grid .cover-wrap { border:1px solid #43345f; }
.histogram-panel { min-width:0; padding:18px; }
.histogram { height:150px; display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:5px; align-items:end; margin-top:12px; }
.histogram-col { height:100%; display:grid; grid-template-rows:18px minmax(0,1fr) 18px; min-width:0; text-align:center; }
.histogram-count { color:#aaa1bf; font-size:8px; }
.histogram-bar-wrap { display:flex; align-items:end; height:100%; border-bottom:1px solid #3a3948; }
.histogram-bar { width:100%; min-height:0; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#a66aff,#6240a8); box-shadow:0 0 14px #8954d533; }
.histogram-label { padding-top:5px; color:var(--muted); font-size:8px; }
.histogram-axis { display:flex; justify-content:space-between; color:#77768a; font-size:8px; letter-spacing:.5px; }
.member-tabs { margin:18px 0 0; flex-wrap:wrap; }
.member-panel { padding:18px; }
.member-list { display:grid; gap:9px; margin-top:16px; }
.member-card { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#151620; }
.member-copy { flex:1; min-width:0; }
.member-copy strong,.member-copy small { display:block; }
.member-copy strong { font-size:11px; }
.member-copy small { margin-top:3px; color:var(--muted); font-size:9px; }
.member-copy p { margin:5px 0 0; color:#aaa6b8; font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.button-small { min-height:32px; padding:0 10px; font-size:9px; }
.settings-profile-preview { display:flex; align-items:center; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.settings-profile-preview strong,.settings-profile-preview small { display:block; }
.settings-profile-preview strong { font-size:13px; }
.settings-profile-preview small { color:var(--muted); font-size:9px; margin-top:3px; }
.favorite-selects { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.author-link { display:block; border:0; padding:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.author-link:hover strong { color:#c8aaff; }
@media(max-width:680px) { .member-card { flex-wrap:wrap; } .member-copy { min-width:calc(100% - 64px); } .member-card .button { flex:1; } .profile-head-v4 { flex-direction:column; align-items:flex-start; } .user-avatar.profile-avatar-image { width:76px;height:76px; } .favorite-selects { grid-template-columns:1fr; } .histogram-panel { padding:12px; } .histogram { gap:2px; } }

.review-avatar { width:34px; height:34px; font-size:14px; }
.checkbox-line { display:flex; align-items:center; gap:8px; color:#aaa6b8; font-size:10px; }
.checkbox-line input { accent-color:#9565ed; }

/* RateMyMusic V5 — social, activity, notifications and watchlist */
.sidebar { overflow-y:auto; }
.notification-trigger { position:relative; width:38px; height:38px; display:inline-grid; place-items:center; border:1px solid var(--line); border-radius:11px; background:#171722; color:#d7c2ff; font-size:19px; transition:.16s; }
.notification-trigger:hover { border-color:#7958ad; background:#211a30; transform:translateY(-1px); }
.notification-count { position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; display:grid; place-items:center; padding:0 4px; border:2px solid var(--bg); border-radius:99px; background:#a765f2; color:white; font-size:8px; font-weight:800; }
.notification-count.hidden { display:none; }
.profile-stats { align-items:stretch; }
.profile-stat-button { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; border:0; padding:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.profile-stat-button strong { display:block; color:var(--text); font-size:17px; }
.profile-stat-button span { color:var(--muted); font-size:9px; }
.profile-stat-button:hover strong,.profile-stat-button:hover span { color:#d3baff; }
.histogram-col { cursor:default; transform-origin:bottom center; transition:transform .16s ease,filter .16s ease; outline:none; }
.histogram-col:hover,.histogram-col:focus-visible { transform:translateY(-4px) scale(1.035); filter:brightness(1.28); }
.histogram-col:hover .histogram-bar,.histogram-col:focus-visible .histogram-bar { box-shadow:0 0 18px #a66aff88; }
.review-album-link { width:100%; display:flex; align-items:center; gap:11px; margin-bottom:13px; padding:0 0 12px; border:0; border-bottom:1px solid var(--line); background:transparent; color:inherit; text-align:left; cursor:pointer; }
.review-album-cover { width:46px; flex:0 0 46px; }
.review-album-link > span:nth-child(2) { min-width:0; flex:1; }
.review-album-link strong,.review-album-link small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.review-album-link strong { font-size:11px; }
.review-album-link small { margin-top:3px; color:var(--muted); font-size:9px; }
.review-album-arrow { color:#b995f5; }
.review-social-bar { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:14px; padding-top:11px; border-top:1px solid var(--line); }
.review-like-button { display:inline-flex; align-items:center; gap:5px; border:0; padding:4px 0; background:transparent; color:#aaa6b8; font-size:12px; font-weight:800; }
.review-like-button span { color:#d8d1e7; }
.review-like-button small { font-size:9px; font-weight:600; }
.review-like-button:hover,.review-like-button.is-liked { color:#f18bb6; }
.review-comment-total { color:var(--muted); font-size:9px; }
.review-delete-link { margin-left:auto; color:#e891a2; font-size:9px; }
.danger-link { color:#ed91a2; }
.review-comments-list { display:grid; gap:9px; margin-top:10px; padding:11px 0; border-top:1px solid #292a39; }
.review-comment-item { display:flex; align-items:flex-start; gap:8px; }
.comment-avatar { width:25px; height:25px; font-size:11px; }
.review-comment-item > div { min-width:0; flex:1; }
.review-comment-item strong { font-size:9px; }
.review-comment-item p { margin:2px 0; color:#c7c2d2; font-size:10px; line-height:1.5; white-space:pre-wrap; }
.review-comment-item small { color:#77768a; font-size:8px; }
.review-comment-form { display:flex; align-items:flex-end; gap:8px; margin-top:10px; }
.review-comment-form textarea { min-height:38px !important; max-height:100px; flex:1; padding:9px 10px; font-size:10px; resize:vertical; }
.review-comment-form button { flex:0 0 auto; }
.album-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.watchlist-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.watchlist-card { min-width:0; display:grid; align-content:start; gap:8px; }
.watchlist-card .button { width:100%; }
.activity-feed { display:grid; gap:13px; }
.notification-list { display:grid; gap:8px; }
.notification-item { width:100%; display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(140deg,#151620,#11121a); color:var(--text); text-align:left; cursor:pointer; transition:.15s; }
.notification-item:hover { border-color:#70509e; transform:translateY(-1px); }
.notification-item.unread { border-color:#594078; background:linear-gradient(140deg,#211a30,#151620); }
.notification-avatar { width:39px; height:39px; }
.notification-copy { min-width:0; flex:1; font-size:10px; line-height:1.6; }
.notification-copy small { display:block; margin-top:4px; color:var(--muted); font-size:8px; }
.unread-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#b47aff; box-shadow:0 0 12px #a66aff88; }
.member-panel .member-list { margin-top:12px; }
@media(max-width:1200px) { .watchlist-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:900px) { .watchlist-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:680px) {
  .topbar-actions { gap:5px; }
  .notification-trigger { width:33px; height:33px; font-size:16px; }
  .watchlist-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .review-delete-link { margin-left:0; }
  .review-social-bar { gap:10px; }
  .profile-stat-button strong { font-size:15px; }
  .profile-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mobile-nav { overflow-x:auto; justify-content:flex-start; }
  .mobile-nav button { min-width:16.66%; flex:1 0 16.66%; }
}

/* RateMyMusic V5.1 — couleurs cohérentes des notes sur 10 */
.score-number { transition: color .16s ease, text-shadow .16s ease; }
.score-number.score-neutral { color: #c9c5d4 !important; }
.score-number.score-red { color: #ff6f79 !important; text-shadow: 0 0 13px #ff586522; }
.score-number.score-orange { color: #ffa45e !important; text-shadow: 0 0 13px #ff9b3d22; }
.score-number.score-yellow { color: #f0d36a !important; text-shadow: 0 0 13px #f0d36a20; }
.score-number.score-green-light { color: #b5e68c !important; text-shadow: 0 0 13px #a9e87922; }
.score-number.score-green-dark { color: #51d18d !important; text-shadow: 0 0 13px #35c77b22; }
.score-number.score-blue { color: #72b4ff !important; text-shadow: 0 0 13px #72b4ff25; }
.score-number.score-purple { color: #c28aff !important; text-shadow: 0 0 15px #a66aff40; }
.score-number small { color: var(--muted) !important; text-shadow: none; }

/* La couleur reste lisible sur les champs du formulaire de review. */
.score-field.score-red { color: #ff8790; border-color: #9f4651; background: #24171d; }
.score-field.score-orange { color: #ffb477; border-color: #95603e; background: #241c18; }
.score-field.score-yellow { color: #f4df8a; border-color: #8c783d; background: #242116; }
.score-field.score-green-light { color: #c5efa2; border-color: #648b4b; background: #1c241a; }
.score-field.score-green-dark { color: #70dda1; border-color: #36764e; background: #17251d; }
.score-field.score-blue { color: #8bc3ff; border-color: #426c9a; background: #17202a; }
.score-field.score-purple { color: #d2a9ff; border-color: #7850a9; background: #21192d; }
.score-field.score-neutral { color: var(--text); }
.score-field:focus { box-shadow: 0 0 0 3px #9862ff1f; }

/* Les histogrammes reprennent la même palette que les notes. */
.histogram-bar.score-red { background: linear-gradient(180deg,#ff8790,#b94351); }
.histogram-bar.score-orange { background: linear-gradient(180deg,#ffb477,#c76b37); }
.histogram-bar.score-yellow { background: linear-gradient(180deg,#f4df8a,#b59a38); }
.histogram-bar.score-green-light { background: linear-gradient(180deg,#c5efa2,#77aa53); }
.histogram-bar.score-green-dark { background: linear-gradient(180deg,#70dda1,#268454); }
.histogram-bar.score-blue { background: linear-gradient(180deg,#8bc3ff,#447ac0); }
.histogram-bar.score-purple { background: linear-gradient(180deg,#d2a9ff,#8050bd); }


/* RateMyMusic V6 — sorties musicales, interludes et modération */
.release-type-tabs,.admin-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 18px}
.release-type-tabs button,.admin-tabs button{border:1px solid var(--line);border-radius:9px;padding:9px 14px;background:#171722;color:#b9b5c7;font-size:10px;font-weight:800}
.release-type-tabs button.active,.admin-tabs button.active{border-color:#7252a6;background:#302149;color:#f0e7ff}
.admin-tabs button span{margin-left:5px;color:#a98adf}
.admin-warning{display:grid;gap:5px;margin:0 0 16px;padding:14px 16px;border:1px solid #77553a;border-radius:12px;background:#241b17;color:#f1c59c;font-size:11px;line-height:1.6}
.admin-warning span{color:#c7a98e}
.admin-list{display:grid;gap:7px}
.admin-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#151620}
.admin-row-copy{display:grid;gap:4px;min-width:0}
.admin-row-copy strong{font-size:11px;overflow-wrap:anywhere}
.admin-row-copy small{font-size:9px;color:var(--muted);overflow-wrap:anywhere}
.button-danger{border-color:#78414c;background:#3a2029;color:#ffdce1;box-shadow:none}
.interlude-pill{display:inline-flex;vertical-align:middle;margin-left:6px;padding:3px 6px;border:1px solid #6c5a86;border-radius:999px;background:#292239;color:#cebaff;font-size:8px;font-weight:800;letter-spacing:.5px}
.interlude-note{display:block;text-align:right;color:#bfa8e6;font-size:8px}
.interlude-own-comment{margin:5px 0 0;color:#bfa8e6;font-size:9px;line-height:1.5}
.track-review-input.is-interlude{grid-template-columns:26px minmax(0,1fr) 130px}
.interlude-aside{align-self:center;color:#a99abc;font-size:9px;text-align:right}
.track-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.track-preview-heading strong{color:#c8c2d5;font-size:9px;letter-spacing:.8px}
.track-interlude-options{display:grid;gap:5px;margin-top:4px}
.interlude-option{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#14151f;color:#d7d3e2;font-size:10px}
.checkbox-control{display:flex;align-items:center;gap:6px;color:#bfa8e6;font-size:9px;white-space:nowrap}
.checkbox-control input{accent-color:#a77af4}
@media(max-width:680px){.track-review-input.is-interlude{grid-template-columns:24px minmax(0,1fr)}.interlude-aside{grid-column:2;text-align:left}.admin-row{align-items:flex-start}.admin-row .button{flex:0 0 auto}.release-type-tabs button{flex:1}}

/* RateMyMusic V7 — première écoute / réécoute et morceaux marquants */
.track-row { grid-template-columns: 28px minmax(0,1fr) 152px; }
.track-rating-pair { gap: 7px; }
.track-rating-pair span { min-width: 32px; }
.review-session-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0 10px; }
.review-session-action { display:flex; align-items:center; gap:11px; width:100%; min-height:70px; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(145deg,#171823,#12131b); color:var(--text); text-align:left; cursor:pointer; transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease,background .18s ease; }
.review-session-action:hover { transform:translateY(-2px); }
.review-session-action.first-listen { border-color:#6d5839; background:linear-gradient(145deg,#292216,#171720 78%); }
.review-session-action.first-listen:hover { border-color:#b18a4c; box-shadow:0 8px 24px #c69a3b16; }
.review-session-action.rewatch { border-color:#514273; background:linear-gradient(145deg,#211a32,#15151f 78%); }
.review-session-action.rewatch:hover { border-color:#916bd0; box-shadow:0 8px 24px #9468e31a; }
.review-session-icon { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:11px; font-size:20px; }
.first-listen .review-session-icon { background:#5a4728; color:#f4d38c; }
.rewatch .review-session-icon { background:#40305e; color:#d3b5ff; }
.review-session-action > span:nth-child(2) { display:grid; gap:4px; flex:1; }
.review-session-action strong { font-size:11px; }
.review-session-action small { color:var(--muted); font-size:9px; }
.review-session-status { color:#d4c4f1; font-size:10px; font-weight:800; white-space:nowrap; }
.listening-badge { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; padding:5px 9px; border:1px solid #665338; border-radius:999px; background:#2b2418; color:#f1d69a; font-size:8px; font-weight:900; letter-spacing:.45px; text-transform:uppercase; white-space:nowrap; }
.listening-badge.rewatch { border-color:#65518b; background:#282039; color:#d7c0ff; }
.review-session-selector { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 15px; border:1px solid #6d5839; border-radius:13px; background:linear-gradient(120deg,#292216,#171720 76%); }
.review-session-selector.rewatch { border-color:#514273; background:linear-gradient(120deg,#211a32,#15151f 76%); }
.review-repeat-toggle { display:flex; align-items:center; gap:11px; min-width:0; cursor:pointer; }
.review-repeat-toggle input { position:absolute; opacity:0; width:1px; height:1px; }
.review-repeat-check { display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px; border:1px solid #9c7c49; border-radius:7px; background:#201c17; color:transparent; font-size:15px; transition:.15s; }
.review-repeat-toggle input:checked + .review-repeat-check { border-color:#a982e5; background:#4a3568; color:#fff; }
.review-repeat-toggle input:checked + .review-repeat-check::after { content:'✓'; }
.review-repeat-copy { display:grid; gap:3px; }
.review-repeat-copy strong { color:#eee8f8; font-size:10px; }
.review-repeat-copy small { color:var(--muted); font-size:9px; line-height:1.4; }
.community-review.first-listen { border-left:3px solid #9e7b43; background:linear-gradient(145deg,#211d17,#15151d 52%,#11121a); }
.community-review.rewatch { border-left:3px solid #7356a8; background:linear-gradient(145deg,#201a2b,#15151f 52%,#11121a); }
.review-track-highlights { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.track-highlight { display:flex; align-items:center; gap:9px; min-width:0; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:#11131b; }
.track-highlight.best { border-color:#66552f; background:linear-gradient(120deg,#292216,#191821); }
.track-highlight.low { border-color:#65414b; background:linear-gradient(120deg,#281a20,#191821); }
.track-highlight-icon { font-size:17px; flex:0 0 auto; }
.track-highlight-copy { display:grid; gap:3px; min-width:0; flex:1; }
.track-highlight-copy small { color:var(--muted); font-size:7px; font-weight:900; letter-spacing:.55px; }
.track-highlight-copy strong { overflow:hidden; color:#eeeaf5; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.track-highlight > strong { font-size:12px; }
@media(max-width:680px) {
  .review-session-actions { grid-template-columns:1fr; }
  .review-session-selector { align-items:flex-start; flex-direction:column; }
  .review-track-highlights { grid-template-columns:1fr; }
  .track-row { grid-template-columns:22px minmax(0,1fr) 132px; gap:7px; }
  .track-rating-pair { gap:4px; }
  .track-rating-pair span { min-width:29px; font-size:10px; }
  .listening-badge { font-size:7px; padding:4px 6px; }
  .review-card-head { flex-wrap:wrap; }
  .review-score { margin-left:auto; }
}