/* Private Member feedback chat */
.member-feedback-button { position: relative; border-color: rgba(181,117,255,.42); background: rgba(181,117,255,.09); color: #d9b8ff; }
.member-feedback-button:hover { background: rgba(181,117,255,.16); box-shadow: 0 0 18px rgba(181,117,255,.14); }
.member-feedback-count,
.member-feedback-row-badge { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; color: #fff; border: 2px solid #171a22; border-radius: 999px; background: #ff3f5f; box-shadow: 0 5px 15px rgba(255,63,95,.4); font-size: 11px; font-weight: 900; }
.member-feedback-count { position: absolute; top: -9px; right: -8px; }
.member-feedback-count[hidden] { display: none; }
.member-feedback-row-badge { position: absolute; z-index: 7; top: 7px; right: 7px; }
.member-row.is-afk .member-feedback-row-badge { right: 40px; }
.member-feedback-modal { display: none; position: fixed; z-index: 4300; inset: 0; align-items: center; justify-content: center; padding: 20px; background: rgba(2,5,10,.84); backdrop-filter: blur(8px); }
.member-feedback-modal.open { display: flex; }
.member-feedback-dialog { position: relative; width: min(940px, 96vw); max-height: 92vh; overflow: auto; padding: 26px; border: 1px solid rgba(181,117,255,.32); border-radius: 22px; background: linear-gradient(150deg, rgba(25,27,38,.99), rgba(10,13,21,.99)); box-shadow: 0 30px 90px rgba(0,0,0,.65); }
.member-feedback-close { position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.06); cursor: pointer; font-size: 24px; }
.member-feedback-head h2 { margin: 4px 45px 7px 0; }
.member-feedback-head p { margin: 0; color: var(--muted); }
.member-feedback-login,
.member-feedback-new { display: grid; gap: 12px; margin-top: 20px; padding: 18px; border: 1px solid rgba(181,117,255,.22); border-radius: 16px; background: rgba(181,117,255,.05); }
.member-feedback-login[hidden], .member-feedback-workspace[hidden] { display: none; }
.member-feedback-login { grid-template-columns: 1fr 1fr auto; align-items: end; }
.member-feedback-login label, .member-feedback-form-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.member-feedback-login input, .member-feedback-form-grid input, .member-feedback-form-grid select, .member-feedback-form-grid textarea, .member-feedback-reply textarea, .admin-feedback-compose textarea, .admin-feedback-compose select { width: 100%; padding: 11px 12px; color: var(--text); border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(0,0,0,.24); font: inherit; }
.member-feedback-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.member-feedback-form-grid .wide { grid-column: 1 / -1; }
.member-feedback-form-grid textarea, .member-feedback-reply textarea, .admin-feedback-compose textarea { resize: vertical; }
.member-feedback-status { min-height: 20px; margin: 10px 0; color: #d9b8ff; font-size: 13px; font-weight: 800; }
.member-feedback-threads, .admin-feedback-list { display: grid; gap: 18px; }
.member-feedback-thread, .admin-feedback-thread { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(255,255,255,.025); }
.member-feedback-thread > header, .admin-feedback-thread > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 15px 17px; border-bottom: 1px solid rgba(255,255,255,.09); }
.member-feedback-thread header h3, .admin-feedback-thread header h3 { margin: 3px 0; }
.member-feedback-thread header small, .admin-feedback-thread header small { color: #caa1fa; text-transform: uppercase; }
.member-feedback-thread header > span, .admin-feedback-thread header > b { padding: 5px 9px; border-radius: 999px; background: rgba(181,117,255,.12); color: #d9b8ff; font-size: 11px; text-transform: uppercase; }
.member-feedback-transcript, .admin-feedback-transcript { display: grid; gap: 10px; padding: 16px; }
.member-feedback-message, .admin-feedback-message { max-width: 82%; padding: 11px 13px; border-radius: 14px; background: rgba(31,241,255,.08); }
.member-feedback-message.from-developer, .admin-feedback-message.from-developer { justify-self: end; background: rgba(181,117,255,.13); }
.member-feedback-message > div, .admin-feedback-message > div { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 6px; }
.member-feedback-message time, .admin-feedback-message time { color: var(--muted); font-size: 10px; }
.member-feedback-message p, .admin-feedback-message p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.member-feedback-reply { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 0 16px 16px; align-items: end; }
.member-feedback-closed { padding: 13px 16px; color: var(--muted); border-top: 1px solid rgba(255,255,255,.08); }
.admin-feedback-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.admin-feedback-filters .active { color: #0b1015; background: #d9b8ff; }
.admin-feedback-thread > summary { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px 12px 42px; cursor: pointer; list-style: none; }
.admin-feedback-thread > summary::-webkit-details-marker { display: none; }
.admin-feedback-thread > summary::before { content: ">"; position: absolute; left: 17px; top: 50%; color: #d9b8ff; font-size: 25px; transform: translateY(-50%); transition: transform .16s ease; }
.admin-feedback-thread[open] > summary { border-bottom: 1px solid rgba(255,255,255,.09); }
.admin-feedback-thread[open] > summary::before { transform: translateY(-50%) rotate(90deg); }
.admin-feedback-summary-copy { display: grid; grid-template-columns: minmax(230px, auto) minmax(180px, 1fr) auto; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.admin-feedback-summary-copy small, .admin-feedback-summary-copy h3, .admin-feedback-summary-copy > span { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.admin-feedback-summary-copy small { color: #caa1fa; text-transform: uppercase; }
.admin-feedback-summary-copy > span { color: var(--muted); font-size: 12px; }
.admin-feedback-summary-meta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.admin-feedback-summary-meta > b { padding: 5px 9px; border-radius: 999px; background: rgba(255,63,95,.15); color: #ff8ca0; font-size: 11px; text-transform: uppercase; }
.admin-feedback-thread.unread { border-color: rgba(255,63,95,.45); box-shadow: 0 0 24px rgba(255,63,95,.08); }
.admin-feedback-thread header > div > span { color: var(--muted); font-size: 12px; }
.admin-feedback-compose { display: grid; gap: 10px; padding: 0 16px 16px; }
.admin-feedback-reply-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.admin-feedback-action-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.admin-feedback-status-control { display: grid; min-width: 160px; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.admin-feedback-action-row > button { min-height: 40px; }
.admin-feedback-reward { min-height: 40px; padding: 9px 13px; color: #10150d; border: 1px solid rgba(53,255,138,.65); border-radius: 10px; background: #35ff8a; cursor: pointer; font-weight: 900; }
.admin-feedback-reward:disabled { color: rgba(242,242,242,.55); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); cursor: default; }
.admin-feedback-page-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.admin-feedback-page-tabs button { min-height: 44px; padding: 10px 14px; color: #b8c6dc; border: 1px solid rgba(31,241,255,.2); border-radius: 12px; background: rgba(9,20,37,.72); cursor: pointer; font: inherit; font-weight: 900; }
.admin-feedback-page-tabs button.active { color: #fff; border-color: rgba(181,117,255,.72); background: rgba(181,117,255,.13); box-shadow: inset 0 0 0 1px rgba(181,117,255,.18), 0 0 16px rgba(181,117,255,.08); }
.admin-push-status-head { margin-top: 2px; }
.admin-push-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 17px 0; }
.admin-push-summary-card { display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(255,255,255,.025); }
.admin-push-summary-card strong { font-size: 23px; }
.admin-push-summary-card span { color: var(--muted); font-size: 12px; font-weight: 850; }
.admin-push-summary-card.status-active strong { color: #35ff8a; }
.admin-push-summary-card.status-blocked strong { color: #ff5f7a; }
.admin-push-summary-card.status-expired strong { color: #ffbd59; }
.admin-push-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px); gap: 10px; margin-bottom: 14px; }
.admin-push-toolbar input, .admin-push-toolbar select { width: 100%; min-height: 42px; padding: 9px 12px; color: var(--text); border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(0,0,0,.24); font: inherit; }
.admin-push-status-list { display: grid; gap: 8px; }
.admin-push-status-row { display: grid; grid-template-columns: minmax(155px, 1fr) minmax(145px, .9fr) 125px minmax(190px, 1fr) minmax(170px, .9fr); align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.11); border-left-width: 4px; border-radius: 13px; background: rgba(255,255,255,.025); }
.admin-push-status-row.status-active { border-left-color: #35ff8a; }
.admin-push-status-row.status-blocked { border-left-color: #ff5f7a; }
.admin-push-status-row.status-expired { border-left-color: #ffbd59; }
.admin-push-status-row.status-not_activated { border-left-color: #708099; }
.admin-push-person, .admin-push-device { min-width: 0; }
.admin-push-person strong, .admin-push-person span, .admin-push-device strong, .admin-push-device span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-push-person span, .admin-push-device span, .admin-push-website span, .admin-push-status-row time span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.admin-push-website strong, .admin-push-status-row time strong { display: block; color: var(--text); font-size: 11px; }
.admin-website-statistics-tools { display: flex; gap: 8px; align-items: center; }
.admin-website-statistics-tools select { min-height: 38px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: #091425; }
.admin-website-statistics-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin: 16px 0; }
.admin-website-stat-card { display: grid; gap: 4px; min-height: 78px; padding: 14px; border: 1px solid rgba(31,241,255,.18); border-radius: 13px; background: rgba(31,241,255,.035); }
.admin-website-stat-card.song { border-color: rgba(181,117,255,.3); background: rgba(181,117,255,.06); }
.admin-website-stat-card strong { font-size: 24px; color: #fff; }
.admin-website-stat-card span { color: var(--muted); font-size: 11px; font-weight: 850; }
.admin-website-song-statistics, .admin-website-statistics-section { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.09); }
.admin-website-daily-chart { display: grid; gap: 7px; margin-top: 10px; }
.admin-website-daily-row { display: grid; grid-template-columns: 95px minmax(120px,1fr) 170px; align-items: center; gap: 10px; font-size: 11px; }
.admin-website-daily-row time { color: var(--muted); }
.admin-website-daily-row > div { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.admin-website-daily-row > div span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#17d9e6,#b575ff); }
.admin-website-daily-row strong[title] { cursor: help; }
.admin-website-daily-row strong[title] u { text-decoration: underline dotted; text-underline-offset: 3px; }
.admin-website-daily-history { margin: 12px 0 0; border-top: 1px solid rgba(255,255,255,.08); }
.admin-website-daily-history > summary { padding: 11px 0 2px; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 850; }
.admin-website-daily-history > summary span { display: inline-grid; place-items: center; min-width: 22px; margin-left: 5px; padding: 2px 7px; border-radius: 999px; background: rgba(181,117,255,.14); color: #d9b8ff; }
.admin-website-daily-history[open] > summary { color: #fff; }
.admin-website-pages { display: grid; margin-top: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; }
.admin-website-page-row { display: grid; grid-template-columns: minmax(220px,1fr) 85px 85px 120px; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.07); }
.admin-website-page-row:first-child { border-top: 0; }
.admin-website-page-row.heading { color: var(--muted); background: rgba(255,255,255,.035); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.admin-website-page-row small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.admin-website-detail { margin-top:10px; border:1px solid rgba(255,255,255,.1); border-radius:12px; overflow:hidden; }
.admin-website-detail>summary { cursor:pointer; padding:12px 14px; color:#fff; background:rgba(255,255,255,.035); font-weight:850; }
.admin-website-detail>summary span { display:inline-grid; place-items:center; min-width:22px; margin-left:6px; padding:2px 7px; border-radius:999px; background:rgba(31,241,255,.15); color:#9ff7ff; }
.admin-website-detail > summary .admin-website-group-overview { display:block; margin:6px 0 0 15px; color:var(--muted); font-size:12px; font-weight:500; line-height:1.6; overflow-wrap:anywhere; }
.admin-website-group-overview:empty { display:none !important; }
.admin-website-detail-grid { display:grid; grid-template-columns:minmax(150px,1fr) minmax(180px,1.3fr) minmax(170px,1fr) 110px; gap:10px; align-items:center; padding:10px 12px; border-top:1px solid rgba(255,255,255,.07); }
.admin-website-detail-grid.heading { color:var(--muted); font-size:10px; font-weight:850; text-transform:uppercase; }
.admin-website-detail-grid small { grid-column:1 / -1; color:var(--muted); font-size:9px; }
.admin-website-session-user { border-top:1px solid rgba(255,255,255,.07); }
.admin-website-session-user > summary { cursor:pointer; list-style-position:inside; }
.admin-website-session-user > summary.admin-website-detail-grid { border-top:0; }
.admin-website-session-user[open] > summary { background:rgba(31,241,255,.035); }
.admin-website-session-list { padding:0 12px 10px 28px; }
.admin-website-session-row { display:grid; grid-template-columns:minmax(180px,1.3fr) minmax(170px,1fr) 110px; gap:10px; align-items:center; padding:8px 10px; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); font-size:11px; }
.admin-website-session-row.heading { color:var(--muted); font-size:9px; font-weight:850; text-transform:uppercase; }
.admin-website-session-row small { grid-column:1 / -1; font-size:9px; }
.admin-website-page-detail { border-top:1px solid rgba(255,255,255,.07); }
.admin-website-page-detail:first-of-type { border-top:0; }
.admin-website-page-detail>summary { cursor:pointer; list-style-position:inside; }
.admin-website-page-detail .admin-website-page-row { border-top:0; }
.admin-website-page-detail>div { padding:0 12px 9px 28px; }
.admin-website-page-user { border-top:1px solid rgba(255,255,255,.06); color:var(--muted); }
.admin-website-page-user > summary { display:grid; grid-template-columns:minmax(160px,1fr) 90px 110px minmax(170px,1fr); gap:10px; padding:8px 10px; cursor:pointer; }
.admin-website-visit-list { display:grid; gap:4px; padding:0 10px 8px 28px; }
.admin-website-visit-list > div { display:flex; justify-content:space-between; gap:12px; padding:5px 8px; border-radius:7px; background:rgba(255,255,255,.025); font-size:10px; }
.admin-website-song-detail { border-top:1px solid rgba(255,255,255,.07); }
.admin-website-song-detail:first-child { border-top:0; }
.admin-website-song-row { display:grid; grid-template-columns:30px minmax(170px,1fr) 90px minmax(250px,1.5fr); gap:10px; align-items:center; padding:10px 12px; cursor:pointer; }
.admin-website-song-row > b { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#091425; background:#35ff8a; }
.admin-website-song-row small { color:var(--muted); }
.admin-website-song-ratings { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:0 12px 10px 52px; color:var(--muted); font-size:11px; }
.admin-website-song-ratings > b { padding:3px 7px; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:rgba(255,255,255,.035); font-size:11px; }
.admin-website-song-ratings > b.positive { color:#75f0ae; }
.admin-website-song-ratings > b.negative { color:#ff8ca0; }
.admin-push-state { width: fit-content; padding: 6px 9px; border-radius: 999px; background: rgba(112,128,153,.13); color: #c9d3e2; font-size: 11px; font-weight: 900; }
.status-active .admin-push-state { background: rgba(53,255,138,.12); color: #75f0ae; }
.status-blocked .admin-push-state { background: rgba(255,95,122,.13); color: #ff8ca0; }
.status-expired .admin-push-state { background: rgba(255,189,89,.13); color: #ffd18a; }
.member-feedback-history { margin-top: 6px; padding: 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 15px; }
.member-feedback-history > summary { color: var(--muted); cursor: pointer; font-weight: 800; }
.member-feedback-history > div { display: grid; gap: 15px; margin-top: 14px; }
.member-feedback-thread > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 10px 14px 10px 38px; border-bottom: 0; cursor: pointer; list-style: none; position: relative; }
.member-feedback-thread > summary::-webkit-details-marker { display: none; }
.member-feedback-thread > summary::before { content: ">"; position: absolute; left: 16px; top: 50%; color: #d9b8ff; font-size: 24px; transform: translateY(-50%); transition: transform .16s ease; }
.member-feedback-thread[open] > summary { border-bottom: 1px solid rgba(255,255,255,.09); }
.member-feedback-thread[open] > summary::before { transform: translateY(-50%) rotate(90deg); }
.member-feedback-thread > summary > div { min-width: 0; }
.member-feedback-thread > summary h3 { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-feedback-thread > summary small { display: block; overflow: hidden; color: #caa1fa; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.member-feedback-thread-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.member-feedback-thread-status { padding: 5px 9px; border-radius: 999px; background: rgba(181,117,255,.12); color: #d9b8ff; font-size: 11px; text-transform: uppercase; }
.member-feedback-delete { width: 28px; height: 28px; padding: 0; border: 1px solid rgba(255,89,115,.32); border-radius: 50%; background: rgba(255,89,115,.08); color: #ff8ca0; cursor: pointer; font-size: 19px; line-height: 1; }
.member-feedback-delete:hover { border-color: rgba(255,89,115,.72); background: rgba(255,89,115,.18); color: #fff; }

@media (max-width: 760px) {
    .member-feedback-login, .member-feedback-form-grid, .member-feedback-reply, .admin-feedback-reply-row { grid-template-columns: 1fr; }
    .member-feedback-form-grid .wide { grid-column: auto; }
    .member-feedback-message, .admin-feedback-message { max-width: 94%; }
    .admin-feedback-summary-copy { grid-template-columns: 1fr; gap: 3px; }
    .admin-feedback-summary-copy small, .admin-feedback-summary-copy > span { font-size: 10px; }
    .admin-feedback-summary-meta { align-self: flex-start; }
    .member-entry-actions { display: grid; grid-template-columns: 1fr; }
    .admin-push-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-push-toolbar, .admin-push-status-row { grid-template-columns: 1fr; }
    .admin-push-status-row { gap: 7px; }
    .admin-feedback-page-tabs { grid-template-columns: 1fr; }
    .admin-website-daily-row, .admin-website-page-row, .admin-website-detail-grid, .admin-website-session-row, .admin-website-page-user > summary, .admin-website-song-row { grid-template-columns: 1fr; }
    .admin-website-page-row small { grid-column: 1; }
    .admin-website-session-row small { grid-column: 1; }
    .admin-website-song-ratings { padding-left:12px; }
}

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at top left, rgba(0,229,255,0.15), transparent 28%),
        radial-gradient(circle at bottom right, rgba(157,78,221,0.18), transparent 30%),
        linear-gradient(145deg, #050816, #0b1020 60%, var(--bg));
    color: var(--text);
    font-family: Arial, sans-serif;
}