/* Only the membership content. The dashboard owns the sidebar, header and player. */
.membership-screen{padding:34px 40px 48px;max-width:1040px;margin:0 auto;color:var(--text,#ededed)}
.membership-screen h1{margin:0;font-size:34px;font-weight:800;letter-spacing:-.03em}
.membership-screen h2{font-size:19px;margin:0 0 14px;letter-spacing:-.02em}
.membership-screen .heading{margin-bottom:24px}
.membership-screen .heading p{margin:8px 0 0;font-size:13.5px}
.membership-screen .muted{color:var(--muted,#8a8a8a);line-height:1.7;font-size:13.5px}
.membership-screen .member-tabs{display:flex;gap:6px;padding:5px;width:fit-content;background:#141414;border:1px solid var(--line);border-radius:12px;margin-bottom:26px}
.membership-screen button,.membership-screen .button{font:inherit;font-size:13px;font-weight:650;background:var(--accent,#ec1f28);color:#fff;border:1px solid transparent;border-radius:9px;padding:11px 16px;cursor:pointer}
.membership-screen button.secondary,.membership-screen .dialog-head button{background:#202020;border-color:var(--line);color:#cfcfcf}
.membership-screen .member-tabs button{background:transparent;color:#8a8a8a;padding:9px 18px}
.membership-screen .member-tabs button[aria-pressed="true"]{background:#292929;color:#ededed}
.membership-screen button:disabled{background:#262626;color:#858585;cursor:not-allowed;opacity:1}
.membership-screen .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.membership-screen .card{min-width:0;background:#141414;border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:24px}
.membership-screen .premium-card{border-color:rgba(236,31,40,.24);background:linear-gradient(135deg,rgba(236,31,40,.07),#141414 65%)}
.membership-screen ul{padding-left:20px;line-height:2.1;font-size:14px;color:#cfcfcf}
.membership-screen .price{font-size:30px;font-weight:750;margin:24px 0 6px;letter-spacing:-.03em}
.membership-screen .price small{font-size:14px;color:#8a8a8a;font-weight:400}
.membership-screen .status{display:inline-block;background:#252525;border-radius:6px;padding:6px 10px;font-size:12px}
.membership-screen .status.on{background:#173329;color:#8ce0b9}
.membership-screen .row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.membership-screen label{display:flex;flex-direction:column;gap:9px;font-size:13px;color:#aaa}
.membership-screen select,.membership-screen input{font:inherit;color:#ededed;background:#1b1b1b;border:1px solid var(--line-strong);border-radius:8px;padding:11px;min-width:0;max-width:100%}
.membership-screen .member-filter{max-width:300px;margin:0 0 24px}
.membership-screen .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.membership-screen .check{flex-direction:row;align-items:center;gap:10px}
.membership-screen .check input{width:18px;height:18px;accent-color:var(--accent)}
.membership-screen .actions{margin-top:18px}
.membership-screen .table-wrap{overflow-x:auto}
.membership-screen table{border-collapse:collapse;width:100%;font-size:13px}
.membership-screen td,.membership-screen th{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.membership-screen th{color:#8a8a8a;font-weight:500}
.membership-screen td button{padding:7px 11px}
.membership-screen [data-member-id="notice"]:not(:empty){background:#281b1c;border:1px solid #583235;border-radius:9px;padding:14px;color:#ffd1d3}
.membership-screen dialog{width:min(780px,96vw);max-height:94vh;overflow:auto;border:1px solid #444;background:#141414;color:#eee;border-radius:16px;padding:22px}
.membership-screen dialog::backdrop{background:#000b}
.membership-screen .dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.membership-screen .dialog-head h2{margin:0}
.membership-screen [data-member-id="coming-soon"]{max-width:420px}
.membership-screen .empty{padding:18px 0;color:#8a8a8a;font-size:13px}
.membership-screen [hidden]{display:none!important}
@media(max-width:760px){
  .membership-screen{padding:24px 18px 36px}
  .membership-screen h1{font-size:28px}
  .membership-screen .grid,.membership-screen .field-grid{grid-template-columns:1fr}
  .membership-screen .card{padding:20px}
  .membership-screen .member-tabs{width:100%}
  .membership-screen .member-tabs button{flex:1;padding:9px 12px}
  .membership-screen dialog{padding:16px}
}