/* Player-only My RadioActive design. Existing requests and audio stay owned by their modules. */
body.ra-with-dj-active .bottom-nav:not(#ra-context-nav){display:none!important}
#ra-context-nav{--nav-count:5;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;flex-shrink:0;background:#0b0c0d}
#ra-context-nav .nav-btn{min-height:66px;font-size:11px!important;line-height:1.2;gap:4px;padding:8px 2px}
#ra-context-nav .ra-context-icon{font-size:24px;line-height:1.15}
body.ra-with-dj-active .screen{padding:0 max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));min-width:0}
.ra-community.ra-with-dj{--ra-design-yellow:var(--accent,#fff000);width:100%;max-width:100%;min-width:0;color:#f6f7f9;font-family:Arial,Helvetica,system-ui,sans-serif}
.ra-with-dj *{box-sizing:border-box}
.ra-with-dj .ra-design-header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:22px 0 17px;min-width:0}
.ra-with-dj .ra-design-header>div:first-child{min-width:0;flex:1}
.ra-with-dj .ra-design-header h1{font:800 27px/1.1 Arial,Helvetica,sans-serif!important;letter-spacing:-1px;margin:5px 0!important;text-transform:none}
.ra-with-dj .ra-design-header h1 span{color:var(--ra-design-yellow)}
.ra-with-dj .ra-design-header small{font-size:8px;letter-spacing:1.4px;color:#969da7}
.ra-with-dj .ra-design-header-actions{display:flex;gap:7px;flex-shrink:0}
.ra-with-dj .ra-design-header-actions .ra-button{width:40px;height:40px;min-height:40px;padding:5px!important;margin:0;border:1px solid #34383d;border-radius:50%;font-size:20px}
.ra-with-dj .ra-design-tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid #30343a;margin-bottom:18px;max-width:100%}
.ra-with-dj .ra-design-tabs button{flex:1 0 auto;padding:13px 7px;min-height:46px;background:transparent;border:0;border-bottom:3px solid transparent;color:#aab0b9;font-size:12px;font-weight:700}
.ra-with-dj .ra-design-tabs [aria-current=page]{color:white;border-bottom-color:var(--ra-design-yellow)}
.ra-with-dj .ra-current-section{min-width:0;overflow-wrap:anywhere}
.ra-with-dj .ra-panel,.ra-with-dj .ra-person,.ra-with-dj .ra-chat-row,.ra-with-dj .ra-post{border:1px solid #2b3035;border-radius:15px;background:linear-gradient(125deg,#191c1f,#111416);padding:15px;margin:12px 0;min-width:0}
.ra-with-dj .ra-button{border-radius:9px;min-height:42px;white-space:normal;overflow-wrap:anywhere}
.ra-with-dj .ra-primary{border-radius:10px;min-height:44px}
.ra-with-dj input:not([type=checkbox]):not([type=radio]),.ra-with-dj textarea,.ra-with-dj select{min-width:0;max-width:100%;font-size:16px!important;border-radius:10px}
.ra-with-dj .ra-design-profile{display:flex;gap:14px;align-items:center;margin:6px 0 24px}
.ra-with-dj .ra-design-profile>div:last-child{min-width:0}
.ra-with-dj .ra-design-profile h2{font:700 22px/1.2 Arial,sans-serif!important;margin:0 0 6px;overflow-wrap:anywhere}
.ra-with-dj .ra-design-profile p{font-size:12px;color:#9fa6af;margin:0}
.ra-with-dj .ra-design-groups details{background:#15181b;border:1px solid #30343b;border-radius:15px;margin:12px 0;overflow:hidden}
.ra-with-dj .ra-design-groups summary{cursor:pointer;min-height:58px;padding:17px 15px;font-weight:700;font-size:14px}
.ra-with-dj .ra-design-groups summary small{float:right;color:#a2a8b1;font-size:11px;font-weight:400;padding:3px}
.ra-with-dj .ra-design-groups details>div{padding:0 14px 8px}
.ra-with-dj .ra-design-link{width:100%;display:flex;gap:10px;align-items:center;justify-content:space-between;text-align:left;background:none;border:0;border-top:1px solid #2a2e34;color:#e2e5eb;min-height:48px;font-size:13px;padding:13px 2px}
.ra-with-dj .ra-design-link span:last-child{color:var(--ra-design-yellow)}
.ra-with-dj .ra-design-hub-title{display:none}
.ra-with-dj .dj-hub-live{position:relative;isolation:isolate;min-height:285px;border:1px solid #68632d;border-radius:18px;overflow:hidden;display:flex;align-items:flex-end;padding:22px;background:radial-gradient(at 90% 10%,#685918,#161812 70%)}
.ra-with-dj .dj-hub-live>.dj-hub-avatar{position:absolute;inset:0 0 0 auto;width:70%;height:100%;border:0;border-radius:0;z-index:-2;opacity:.8}
.ra-with-dj .dj-hub-live>.dj-hub-avatar img{width:100%;height:100%;object-fit:cover;object-position:center}
.ra-with-dj .dj-hub-live::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0a0c0de8,#0a0c0d40),linear-gradient(0deg,#0a0c0d,transparent 80%);z-index:-1}
.ra-with-dj .dj-hub-live>div{width:100%;min-width:0}
.ra-with-dj .dj-hub-live h3{font:800 31px/1.05 Arial,Helvetica,sans-serif!important;letter-spacing:-1px;margin:0 0 10px;max-width:90%;color:white}
.ra-with-dj .dj-hub-live p{font-size:13px;margin:8px 0;color:#ddd}
.ra-with-dj .dj-hub-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.ra-with-dj .dj-hub-live .ra-button.primary{background:var(--ra-design-yellow);color:#0c0e0b;border-color:var(--ra-design-yellow)}
.ra-with-dj .dj-hub-row{padding:13px 0;gap:10px;min-width:0;border-bottom:1px solid #292e33;flex-wrap:wrap}
.ra-with-dj .dj-hub-row>div{flex:1;min-width:90px}
.ra-with-dj .dj-hub-row .ra-button{font-size:11px;padding:9px}
.ra-with-dj .dj-hub-empty{font-size:13px;line-height:1.6;background:#15191c;border:1px solid #30373c;border-radius:14px;padding:20px}
.ra-with-dj .ra-dj-card{display:flex;flex-direction:column;gap:0;width:100%;min-width:0}
.ra-with-dj .ra-dj-card>.dc-back{order:-6;align-self:flex-start;margin-bottom:10px}
.ra-with-dj .ra-dj-card>.dc-dj-head{order:-5;position:relative;isolation:isolate;min-height:265px;display:flex;align-items:flex-end;gap:8px;border:1px solid #625e32;border-radius:18px;padding:22px;overflow:hidden;background:radial-gradient(at 90% 0,#5e541f,#131611 70%);flex-wrap:wrap}
.ra-with-dj .ra-dj-card>.dc-dj-head::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#080b0de8,#080b0d40),linear-gradient(0deg,#080b0df5,transparent)}
.ra-with-dj .ra-dj-card>.dc-dj-head>.dc-avatar{position:absolute;inset:0 0 0 auto;width:72%;height:100%;border:0;border-radius:0;z-index:-2;opacity:.85;font-size:50px;color:#fff00066}
.ra-with-dj .ra-dj-card .dc-dj-head>.dc-avatar img{width:100%;height:100%;object-fit:cover}
.ra-with-dj .ra-dj-card .dc-dj-head>div{width:100%;min-width:0}
.ra-with-dj .ra-show-title{font:800 31px/1.08 Arial,sans-serif!important;letter-spacing:-1px;color:white;margin:0 0 10px;max-width:94%}
.ra-with-dj .ra-dj-card .dc-dj-head h2{font:500 15px/1.3 Arial,sans-serif!important;letter-spacing:0;text-transform:none;margin:6px 0 10px;color:#e3e5e8}
.ra-with-dj .ra-dj-card .dc-dj-head [data-dc-live] p{display:none}
.ra-with-dj .ra-dj-card .dc-dj-head button{min-height:42px;border-radius:8px;font-size:12px}
.ra-with-dj .dc-live{background:#f53555;color:#fff;border:0;border-radius:6px;padding:5px 9px;font-size:10px;font-weight:800;display:inline-block}
.ra-with-dj .dc-offline{color:#b9bfc6;font-size:12px}
.ra-with-dj .ra-dj-card>.dc-reaction-panel{order:-4;border:1px solid #2d3339;border-radius:15px;padding:12px;margin:14px 0;background:#15191b}
.ra-with-dj .dc-reaction-panel h3{font-size:12px!important;margin:0 0 10px;color:#bec4cd}
.ra-with-dj [data-dc-reactions]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.ra-with-dj [data-dc-reactions]>span,.ra-with-dj [data-dc-reactions]>small{grid-column:1/-1;font-size:11px;color:#9fa7af}
.ra-with-dj [data-dc-reactions] button{background:#111416;border:1px solid #3b4147;border-radius:10px;min-height:64px;padding:9px 4px;font-size:12px;color:var(--ra-design-yellow);white-space:normal}
.ra-with-dj [data-dc-reactions] button small{display:block;font-size:10px;color:#a6adb6;margin-top:5px}
.ra-with-dj .ra-dj-card>.dc-compose{order:-3;background:#171b1e;border:1px solid #333a41;border-radius:15px;padding:14px;margin:0 0 14px}
.ra-with-dj .dc-compose h3{font-size:14px!important;margin:0 0 10px}
.ra-with-dj .dc-kinds{display:flex;gap:5px;flex-wrap:wrap}
.ra-with-dj .dc-kinds button{min-height:38px;font-size:11px;padding:7px 9px;border-radius:8px}
.ra-with-dj .dc-compose textarea{width:100%;min-height:65px;background:#21262b;color:white;border:1px solid #3c444d;padding:12px;font-size:16px;border-radius:12px;margin:10px 0;resize:vertical}
.ra-with-dj .dc-compose-footer{display:flex;gap:10px;align-items:center;justify-content:space-between}
.ra-with-dj .dc-compose small{font-size:10px;color:#a4adb7;line-height:1.5}
.ra-with-dj .dc-yellow{background:var(--ra-design-yellow);color:#111;border:0;border-radius:9px;padding:10px 15px;min-height:42px}
.ra-with-dj .dc-filters{display:flex;gap:5px;overflow-x:auto;max-width:100%}
.ra-with-dj .dc-filters button{flex:1 0 auto;background:#181d21;border:1px solid #313a41;border-radius:20px;padding:9px 11px;min-height:40px;font-size:11px}
.ra-with-dj .dc-filters [aria-pressed=true],.ra-with-dj .dc-kinds [aria-pressed=true]{background:var(--ra-design-yellow);color:#111}
.ra-with-dj .dc-post{padding:15px;border-radius:15px;border:1px solid #30383e;background:linear-gradient(130deg,#1b2024,#101518);margin:12px 0;overflow-wrap:anywhere}
.ra-with-dj .dc-post-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ra-with-dj .dc-post-head strong{font-size:13px}.ra-with-dj .dc-post-head small{font-size:10px;color:#aab3bc}
.ra-with-dj .dc-post .dc-body{font-size:14px;line-height:1.6}
.ra-with-dj .dc-sync{font-size:10px;color:#88939e;padding:8px 0}.ra-with-dj .dc-status:empty{display:none}
.ra-with-dj .ra-actions{flex-wrap:wrap}.ra-with-dj img,.ra-with-dj audio,.ra-with-dj video{max-width:100%}
.ra-with-dj button:focus-visible,.ra-context-nav button:focus-visible{outline:2px solid var(--ra-design-yellow,#fff000);outline-offset:3px}
@media(max-width:350px){.ra-with-dj .ra-design-header h1{font-size:23px!important}.ra-with-dj .ra-design-header-actions .ra-button{width:36px;height:36px;min-height:36px}.ra-with-dj .ra-design-header small{font-size:7px}.ra-with-dj .ra-show-title,.ra-with-dj .dj-hub-live h3{font-size:27px!important}#ra-context-nav .nav-btn{font-size:10px!important}}

#ra-context-nav svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* 0.14.1: consistent mobile typography and a designed no-live-presenter card. */
.ra-with-dj .ra-design-header{gap:8px;align-items:center}
.ra-with-dj .ra-design-header h1{font-size:clamp(17px,5.2vw,24px)!important;white-space:nowrap!important;line-height:1.2!important;letter-spacing:-.7px}
.ra-with-dj .ra-design-header h1 span{display:inline!important;white-space:nowrap!important}
.ra-with-dj .ra-design-header-actions{gap:5px}
.ra-with-dj .ra-design-header-actions .ra-button{width:36px;height:36px;min-height:36px;padding:4px!important;font-size:18px;flex-shrink:0}
.ra-with-dj .ra-design-tabs{padding-inline:4px;gap:4px;align-items:stretch}
.ra-with-dj .ra-design-tabs button{flex:1 0 auto;padding:13px 12px;text-align:center;font:600 12px/1.3 Arial,Helvetica,sans-serif;letter-spacing:0}
.ra-with-dj #ra-current-section>h2{font:700 22px/1.25 Arial,Helvetica,sans-serif!important;letter-spacing:-.4px;text-transform:none;margin:18px 0 12px}
.ra-with-dj #ra-current-section>h3,.ra-with-dj .dj-hub-heading h2{font:700 18px/1.3 Arial,Helvetica,sans-serif!important;letter-spacing:-.2px;text-transform:none;margin:20px 0 10px}
.ra-with-dj .ra-show-title{text-transform:none!important;overflow-wrap:anywhere;line-height:1.12!important}
.ra-with-dj .ra-dj-card{padding:0!important;background:transparent;border-radius:0}
.ra-with-dj .dc-post-head{row-gap:5px}
.ra-with-dj .ra-design-replay{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;border:1px solid #5c572b;background:#11140f;min-height:270px;display:flex;align-items:flex-end;margin:0 0 20px}
.ra-with-dj .ra-design-replay::before{content:"";position:absolute;inset:0;z-index:-2;background:url('community-replay-art.png') center/cover no-repeat}
.ra-with-dj .ra-design-replay::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#080a0ce6,#080a0c20),linear-gradient(0deg,#080a0cbd,transparent)}
.ra-with-dj .ra-design-replay>div{padding:24px;width:100%;min-width:0}
.ra-with-dj .ra-design-replay small{display:block;font:700 9px/1.4 Arial,sans-serif;color:var(--ra-design-yellow);letter-spacing:1.5px}
.ra-with-dj .ra-design-replay h3{font:800 clamp(27px,8vw,34px)/1.08 Arial,Helvetica,sans-serif!important;text-transform:none;letter-spacing:-.9px;color:#fff;margin:12px 0}
.ra-with-dj .ra-design-replay p{font:400 13px/1.5 Arial,Helvetica,sans-serif;color:#d5d9dd;max-width:245px;margin:0 0 16px}
.ra-with-dj .ra-design-replay .ra-button.primary{background:var(--ra-design-yellow);color:#10130b;border-color:var(--ra-design-yellow);font-weight:700;min-height:44px;padding:11px 14px}
.ra-with-dj .ra-design-replay .ra-design-updating{font-size:10px;letter-spacing:0;font-weight:400;color:#afb7bf;margin-top:12px}
@media(max-width:350px){.ra-with-dj .ra-design-header small{font-size:6px;letter-spacing:1px}.ra-with-dj .ra-design-header-actions .ra-button{width:32px;height:34px;min-height:34px}.ra-with-dj .ra-design-tabs button{padding:12px 8px;font-size:11px}.ra-with-dj .ra-design-replay>div{padding:20px}}

/* Six clear destinations; group pages open as touch-sized tile grids. */
#ra-context-nav{--nav-count:6;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));height:auto;min-height:0;padding:0 4px env(safe-area-inset-bottom,0px)}
#ra-context-nav .nav-btn{min-height:64px;font-size:10px!important;padding:8px 1px}
.ra-with-dj .ra-design-hub-heading{padding:6px 0 15px}
.ra-with-dj .ra-design-hub-heading small{font-size:9px;letter-spacing:1.5px;color:var(--ra-design-yellow)}
.ra-with-dj .ra-design-hub-heading h2{font:800 25px/1.2 Arial,sans-serif!important;text-transform:none;letter-spacing:-.5px;margin:8px 0}
.ra-with-dj .ra-design-hub-heading p{font-size:12px;line-height:1.5;color:#a7afb8;margin:0}
.ra-with-dj .ra-design-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:0 0 20px}
.ra-with-dj .ra-design-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;text-align:left;min-width:0;min-height:115px;padding:17px 15px;background:linear-gradient(135deg,#1d2327,#11171b);border:1px solid #343d44;border-radius:15px;color:#edf0f4;font-family:Arial,sans-serif;cursor:pointer}
.ra-with-dj .ra-design-tile-icon{font-size:25px;line-height:1;color:var(--ra-design-yellow)}
.ra-with-dj .ra-design-tile strong{font-size:13px;line-height:1.35;font-weight:650;white-space:normal;overflow-wrap:anywhere;padding-right:8px}
.ra-with-dj .ra-design-tile-arrow{position:absolute;right:13px;top:15px;font-size:14px;color:#89959f}
.ra-with-dj .ra-design-tile:hover{border-color:var(--ra-design-yellow);background:#202920}
@media(max-width:350px){#ra-context-nav .nav-btn{font-size:9px!important}.ra-with-dj .ra-design-tile{padding:15px 12px;min-height:106px}.ra-with-dj .ra-design-tile strong{font-size:12px}}

/* Full-card live DJ artwork; overlay and content stay above the photo. */
.ra-with-dj .dj-hub-live>.ra-live-card-photo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center!important;border-radius:0!important;margin:0!important;padding:0!important;z-index:0;opacity:1}
.ra-with-dj .dj-hub-live::after{z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.94),rgba(0,0,0,.3) 65%,rgba(0,0,0,.14))}
.ra-with-dj .dj-hub-live>div{position:relative;z-index:2}
.ra-with-dj .dj-hub-live>.dj-hub-avatar{inset:0!important;width:100%!important;height:100%!important}

/* Replay remains directly available beside the existing account sections. */
#ra-context-nav{--nav-count:7;grid-template-columns:repeat(7,minmax(0,1fr))}
#ra-context-nav .nav-btn{min-width:0}
#ra-context-nav .nav-btn span{max-width:100%;overflow-wrap:anywhere}
@media(max-width:400px){#ra-context-nav .nav-btn{font-size:8.5px!important}}
