/* ===== CGN upgrade 2 styles ===== */

/* --- sidebar: thin scrollbar that never covers buttons, grouped sections, collapse-to-rail --- */
.app{transition:grid-template-columns .2s ease}
.side{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;scrollbar-gutter:stable;overscroll-behavior:contain;padding:10px 8px 24px 12px}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:6px}
.side::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4)}
.side::-webkit-scrollbar-track{background:transparent}
.side-toggle{display:flex;align-items:center;gap:10px;width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#c3d0ee;border-radius:10px;padding:8px 12px;margin:0 0 10px;font:600 13px inherit;cursor:pointer}
.side-toggle:hover,.side-toggle:focus-visible{background:rgba(255,255,255,.12);color:#fff;outline:none}
.side-toggle span:first-child{font-size:16px;line-height:1;width:18px;text-align:center}
.nav-sec{margin-bottom:6px}
.nav-sec-h{display:flex;align-items:center;width:100%;border:0;background:none;color:#8ea2cc;font:800 11px inherit;letter-spacing:.09em;text-transform:uppercase;padding:8px 10px 6px;cursor:pointer;border-radius:8px}
.nav-sec-h:hover,.nav-sec-h:focus-visible{color:#fff;background:rgba(255,255,255,.05);outline:none}
.nav-sec-h i{margin-left:auto;font-style:normal;transition:transform .15s}
.nav-sec.shut .nav-sec-h i{transform:rotate(-90deg)}
.nav-sec.shut .nav-sec-b{display:none}
.nav a{cursor:pointer;padding:9px 12px;margin-bottom:2px;position:relative}
.nav a:focus-visible{outline:2px solid #a78bfa;outline-offset:1px}
.nav a .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .side-cross{display:none}
@media(min-width:901px){
  body.side-collapsed .app{grid-template-columns:76px 1fr}
  body.side-collapsed .side{padding:10px 6px 24px;overflow-x:visible}
  body.side-collapsed .side-toggle{justify-content:center;padding:8px 0}
  body.side-collapsed .side-toggle .lbl,body.side-collapsed .nav-sec-h,body.side-collapsed .nav a .lbl,body.side-collapsed .nav a .live{display:none}
  body.side-collapsed .nav-sec{border-top:1px solid rgba(255,255,255,.08);padding-top:6px}
  body.side-collapsed .nav-sec.shut .nav-sec-b{display:block}
  body.side-collapsed .nav a{justify-content:center;padding:11px 0;gap:0}
  body.side-collapsed .nav a .count{position:absolute;top:2px;right:6px;margin:0;padding:1px 5px;font-size:10px;background:#ef4444}
  body.side-collapsed .nav a.nav-download{font-size:0;padding:11px 0}
  body.side-collapsed .nav a.nav-download::before{content:"⬇️";font-size:18px}
  /* hover label (flyout) for the icon rail */
  body.side-collapsed .nav a:hover::after,body.side-collapsed .nav a:focus-visible::after{content:attr(title);position:fixed;left:84px;transform:translateY(-2px);background:#0f172a;color:#fff;font-size:13px;font-weight:600;padding:7px 11px;border-radius:8px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.35);z-index:9999;pointer-events:none}
  body.side-collapsed #fabPlus{left:92px !important}
}

/* --- posts --- */
.post-media{border-radius:14px;overflow:hidden;margin-top:10px;background:#000;position:relative}
.post-media img{width:100%;display:block;background:#f1f3fa}
.post-media video{width:100%;display:block;max-height:70vh;background:#000}
.post-media.reel{max-width:380px;margin-left:auto;margin-right:auto}
.post-media.reel video{aspect-ratio:9/16;object-fit:cover;max-height:76vh}
.reel-tag{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;font-weight:800;padding:4px 9px;border-radius:999px}
.post-media-msg{margin-top:10px;padding:16px;border-radius:12px;background:#f5f3ff;color:#5b21b6;font-size:14px}
.post-media-msg.bad{background:#fee2e2;color:#991b1b}
.pg-badge{display:inline-block;background:#efe9fe;color:var(--violet);font-size:11px;font-weight:800;border-radius:999px;padding:1px 8px;vertical-align:middle}
.pmenu{margin-left:auto;position:relative}
.pmenu-b{border:0;background:none;color:var(--muted);font-size:20px;font-weight:800;cursor:pointer;padding:2px 10px;border-radius:8px}
.pmenu-b:hover,.pmenu-b:focus-visible{background:#f1f3fa;outline:none}
.pmenu-pop{display:none;position:absolute;right:0;top:110%;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.15);min-width:170px;z-index:60;overflow:hidden}
.pmenu-pop.open{display:block}
.pmenu-pop button{display:block;width:100%;text-align:left;border:0;background:none;padding:11px 14px;cursor:pointer;font-size:14px}
.pmenu-pop button:hover{background:#f5f3ff}.pmenu-pop .bad{color:#b91c1c}
.cp-input[readonly]{cursor:pointer}

/* --- composer --- */
.cmp-row{margin-bottom:12px}
.cmp-l{display:block;font-size:12.5px;font-weight:700;color:#334155;margin-bottom:5px}
.cmp-sel{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;font:inherit;font-size:15px;background:#fff;color:#0f172a}
.cmp-ta{width:100%;min-height:120px;padding:12px;border:1px solid #cbd5e1;border-radius:12px;font:inherit;font-size:16px;resize:vertical}
.cmp-tools{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.cmp-tool{border:1px solid var(--line);background:#f8fafc;border-radius:10px;padding:9px 12px;font-weight:700;font-size:13.5px;cursor:pointer}
.cmp-tool:hover,.cmp-tool:focus-visible{border-color:var(--violet);background:#f5f3ff;outline:none}
.cmp-opts label,.cmp-chk{display:flex;gap:8px;align-items:flex-start;font-size:14px;margin:6px 0}
.cmp-opts input,.cmp-chk input{margin-top:3px;width:18px;height:18px;flex:none}
.cmp-thumb{position:relative;border-radius:12px;overflow:hidden;background:#000;max-height:340px;display:flex;justify-content:center}
.cmp-thumb img,.cmp-thumb video{max-width:100%;max-height:340px;display:block}
.cmp-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;font-size:15px}
.cmp-preview{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.upbar{position:relative;height:22px;border-radius:999px;background:#eef1f7;overflow:hidden;margin:10px 0}
.upbar-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--violet),var(--indigo));transition:width .2s}
.upbar-txt{position:relative;display:block;text-align:center;font-size:12px;font-weight:700;line-height:22px;color:#0f172a;mix-blend-mode:normal;text-shadow:0 0 3px #fff}
.hint{color:var(--muted);font-size:12.5px}
.row-f{display:flex;align-items:center;gap:8px}

/* --- tabs, grids --- */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:#f8fafc;border-radius:999px;padding:8px 14px;font-weight:700;font-size:13.5px;cursor:pointer;color:#334155}
.tab.on{background:var(--violet);border-color:var(--violet);color:#fff}
.drop{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px dashed #c4b5fd;border-radius:14px;padding:22px;margin-top:12px;text-align:center;cursor:pointer;background:#faf8ff;color:#5b21b6}
.drop span{font-size:12.5px;color:var(--muted)}
.drop.over,.drop:focus-visible{background:#ede9fe;outline:none}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.lib-item{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#eef1f7;cursor:pointer;padding:0;display:grid;place-items:center;font-size:28px}
.lib-item img{width:100%;height:100%;object-fit:cover}
.lib-item:focus-visible{outline:3px solid var(--violet)}
.lib-dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px}
.lib-pub{position:absolute;left:6px;top:6px;background:#16a34a;color:#fff;font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px}
.lib-st{font-size:13px;font-weight:700;color:#5b21b6}.lib-st.bad{color:#b91c1c}
.sec-h{max-width:940px;margin:18px auto 10px}

/* --- music --- */
.track{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.tr-play{width:44px;height:44px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--violet),var(--indigo));color:#fff;font-size:16px;cursor:pointer;flex:none}
.tr-info{flex:1;min-width:0;display:flex;flex-direction:column}
.tr-info span{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.tr-info a{color:var(--violet)}
.tr-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dl-prog{width:100%;height:6px;margin-top:4px;accent-color:var(--violet)}
.aplayer{position:fixed;left:0;right:0;bottom:0;z-index:8600;background:#0a1c42;color:#fff;display:flex;align-items:center;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.3)}
.aplayer[hidden]{display:none}
.ap-btn{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:16px;cursor:pointer;flex:none}
.ap-info{display:flex;flex-direction:column;min-width:0;max-width:30%}
.ap-info b,.ap-info span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-info span{font-size:12px;opacity:.8}
.ap-t{font-size:12px;opacity:.85;font-variant-numeric:tabular-nums}
#apSeek{flex:1;accent-color:#a78bfa;min-width:60px}
body.has-player .main{padding-bottom:90px}

/* --- video center --- */
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.vid-card{position:relative;border:0;padding:0;border-radius:14px;overflow:hidden;background:#000;cursor:pointer;aspect-ratio:16/9;text-align:left}
.vid-card.reel{aspect-ratio:9/16}
.vid-card img{width:100%;height:100%;object-fit:cover;opacity:.92}
.vid-cap{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 10px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;font-size:12.5px;display:flex;flex-direction:column}
.viewer video{width:100%;max-height:72vh;background:#000;border-radius:12px;display:block}
.viewer.reel video{aspect-ratio:9/16;max-width:420px;margin:0 auto;object-fit:cover}

/* --- fan pages --- */
.fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;max-width:940px;margin:0 auto}
.fp-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.fp-cover{height:90px;background:linear-gradient(135deg,#7c3aed,#4f46e5);background-size:cover;background-position:center}
.fp-body{padding:0 14px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.fp-body b{font-size:15px}.fp-body span{color:var(--muted);font-size:12.5px}
.fp-ph{width:64px;height:64px;border-radius:16px;border:3px solid #fff;margin-top:-32px;object-fit:cover;background:#4f46e5;color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px}
.fp-hero{padding:0;overflow:hidden;max-width:940px;margin:0 auto 16px}
.fp-hero-cover{height:200px;background:linear-gradient(135deg,#7c3aed,#4f46e5);background-size:cover;background-position:center}
.fp-hero-row{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;padding:0 18px 16px}
.fp-hero-ph{width:110px;height:110px;border-radius:22px;border:4px solid #fff;margin-top:-55px;object-fit:cover;background:#4f46e5;color:#fff;display:grid;place-items:center;font-weight:800;font-size:36px;flex:none}
.fp-tabs{padding:0 18px 14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.kpi{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;background:#fafbff}
.kpi b{font-size:22px}.kpi span{font-size:12px;color:var(--muted)}
.mini-chart{display:flex;align-items:flex-end;gap:3px;height:110px}
.mini-chart i{flex:1;min-width:3px;background:var(--violet);border-radius:3px 3px 0 0}
.mz-note{background:#f5f3ff;border:1px solid #ddd6fe;color:#4c1d95;border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:14px;line-height:1.5}
.mz-cat{margin:14px 0}
.mz-bar{height:14px;background:#eef1f7;border-radius:999px;overflow:hidden;margin:6px 0}
.mz-bar i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#16a34a)}
.ok-chip,.no-chip,.st-chip{display:inline-block;border-radius:999px;font-size:11.5px;font-weight:700;padding:2px 9px}
.ok-chip{background:#dcfce7;color:#166534}.no-chip{background:#f1f5f9;color:#475569;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.st-chip{background:#f1f5f9;color:#475569}.st-pending{background:#fef3c7;color:#92400e}.st-approved,.st-verified{background:#dbeafe;color:#1e40af}
.st-available,.st-paid{background:#dcfce7;color:#166534}.st-reversed,.st-rejected{background:#fee2e2;color:#991b1b}
.pa-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}

/* --- live --- */
.lv{display:grid;grid-template-columns:1fr 320px;padding:0;overflow:hidden;max-width:1100px;margin:0 auto 14px}
.lv-stage{position:relative;background:#000;min-height:300px;display:grid;place-items:center}
.lv-stage video{width:100%;max-height:70vh;display:block}
.lv-audio{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:22px;font-weight:800;background:radial-gradient(circle,#4f2bb8,#0a1c42)}
.lv-audio[hidden]{display:none}
.lv-top{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:8px;flex-wrap:wrap}
.lv-status,.lv-pill{background:rgba(0,0,0,.6);color:#fff;font-size:12.5px;font-weight:800;padding:5px 10px;border-radius:999px}
.lv-status.on{background:#dc2626}.lv-status.warn{background:#d97706}
#lvUnmute{position:absolute;bottom:14px;left:50%;transform:translateX(-50%)}
.lv-side{display:flex;flex-direction:column;padding:12px;min-height:0;max-height:70vh}
.lv-comments{flex:1;overflow:auto;padding:8px 0;display:flex;flex-direction:column;gap:6px;min-height:160px}
.lv-c{font-size:14px;background:#f5f3ff;border-radius:10px;padding:6px 10px}
.lv-form{display:flex;gap:6px}
.lv-ctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px;max-width:1100px;margin:0 auto 10px}
.live-dot{width:12px;height:12px;border-radius:50%;background:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.2);flex:none;animation:lvp 1.4s infinite}
@keyframes lvp{50%{box-shadow:0 0 0 8px rgba(220,38,38,0)}}

/* --- footer inside the app --- */
.app-foot{margin:30px -20px -40px}
.app-foot .cgn-footer{border-radius:0}
.auth-foot{grid-column:1/-1;width:100%;align-self:end}
.auth-overlay{grid-template-rows:1fr auto}

@media(max-width:900px){
  .lv{grid-template-columns:1fr}
  .lv-side{max-height:none}
  .app-foot{margin:24px -10px -90px}
  .aplayer{bottom:calc(58px + env(safe-area-inset-bottom));padding-bottom:10px}
  body.has-player .main{padding-bottom:160px}
  .ap-info{max-width:38%}.ap-t{display:none}
  .fp-hero-cover{height:130px}
  .track{flex-wrap:wrap}.tr-acts{width:100%;justify-content:flex-start;padding-left:56px}
  .vid-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (prefers-reduced-motion: reduce){.app,.live-dot,.nav-sec-h i{transition:none;animation:none}}

/* background Gospel Radio mini player (shown outside Home while music plays) */
.radio-mini{position:fixed;right:20px;bottom:20px;z-index:8400;display:flex;align-items:center;gap:10px;background:#0a1c42;color:#fff;border-radius:999px;padding:6px 8px 6px 6px;box-shadow:0 10px 28px rgba(10,28,66,.35);max-width:min(340px,calc(100vw - 32px))}
.radio-mini[hidden]{display:none}
.radio-mini .rm-play{width:40px;height:40px;border-radius:50%;border:0;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.radio-mini .rm-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.radio-mini .rm-txt b{font-size:12.5px}.radio-mini .rm-txt span{font-size:11.5px;color:#c7d2fe;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.radio-mini .rm-x{border:0;background:rgba(255,255,255,.12);color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;flex:none}
@media(max-width:900px){.radio-mini{right:12px;bottom:calc(74px + env(safe-area-inset-bottom))}}
/* phones: keep the footer's last lines clear of the floating radio player */
@media(max-width:900px){body:has(#radioMini:not([hidden])) .app-foot .cf-bottom{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}