:root{
  --bg:#07101d;
  --bg2:#0c1728;
  --card:rgba(11,19,33,.88);
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.16);
  --text:#f5f8ff;
  --muted:#a9b5ca;
  --blue:#3f73ff;
  --blue2:#6592ff;
  --red:#d84f67;
  --red2:#f0647b;
  --green:#1fb66b;
  --green2:#35d782;
  --gold:#d4af37;
  --silver:#c9d0db;
  --adminblue:#3b82f6;
  --family:#ef4444;
  --member:#22c55e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(circle at top,#13223a,#07101d 55%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;min-height:100%}
img{display:block}
.hidden{display:none!important}
.glass-card{background:var(--card);border:1px solid var(--line);box-shadow:0 14px 44px rgba(0,0,0,.28);backdrop-filter:blur(14px);border-radius:28px;position:relative;overflow:hidden}
.app-shell{min-height:100vh;display:grid;grid-template-columns:310px 1fr}
.sidebar{padding:18px;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(7,16,29,.96),rgba(7,16,29,.86));display:flex;flex-direction:column;gap:16px}
.brand,.me-card{padding:18px}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{width:60px;height:60px;border-radius:18px;object-fit:cover}
.brand-title{font-weight:900;font-size:18px}
.brand-subtitle,.sub,.chat-meta,.admin-subtitle{color:var(--muted);font-size:13px}
.me-card{display:flex;align-items:center;gap:14px}
.me-name{font-size:18px;font-weight:800}
.role-badge{margin-top:6px;display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.sidebar-actions{display:grid;gap:10px}
.side-nav{display:flex;flex-direction:column;gap:8px}
.sidebar-footer{margin-top:auto;padding:12px 4px 0;color:var(--muted);font-size:12px;text-align:center;line-height:1.6}
.nav-btn,.btn{border:0;border-radius:18px;padding:12px 16px;font-weight:800;cursor:pointer;transition:.18s transform,.18s opacity,.18s background,.18s box-shadow}
.nav-btn:hover,.btn:hover{transform:translateY(-1px)}
.nav-btn{background:#122139;color:#fff;text-align:left;border:1px solid rgba(255,255,255,.06)}
.nav-btn.active{background:linear-gradient(135deg,#223d68,#162540);box-shadow:0 0 0 1px rgba(113,160,255,.35) inset}
.btn-primary{background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;box-shadow:0 10px 24px rgba(76,132,255,.26)}
.btn-secondary{background:#13213a;color:#fff;border:1px solid var(--line)}
.btn-danger{background:linear-gradient(135deg,var(--red2),var(--red));color:#fff;box-shadow:0 10px 24px rgba(209,82,102,.22)}
.btn-big{width:100%;padding:15px 18px;font-size:16px}
button:disabled,input:disabled,textarea:disabled,select:disabled{opacity:.55;cursor:not-allowed}
.main{padding:18px}
.tab-content{display:none}
.tab-content.active{display:block}
.hero{padding:26px;min-height:220px}
.hero-bg{position:absolute;inset:0;z-index:0;opacity:.3;background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(7,16,29,.2),rgba(7,16,29,.8) 70%);z-index:0}
.hero-content{position:relative;z-index:1;max-width:760px}.hero-topline{display:inline-flex;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);margin-bottom:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.hero h1{margin:0 0 10px;font-size:38px;line-height:1.04}.hero p{margin:0;color:var(--muted);line-height:1.55;max-width:670px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.file-label{display:inline-flex;align-items:center;justify-content:center}
.top-stats{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.stat-pill{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.room-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:16px}.stage-panel,.chat-panel,.side-panel,.page-panel{padding:16px}
.panel-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.panel-title-row h3,.page-panel h2{margin:0}
.stage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.seat-card{min-height:218px;border-radius:24px;padding:16px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid var(--line);position:relative;display:flex;flex-direction:column;align-items:center}
.seat-card:hover{border-color:var(--line2)}.seat-card-clickable{cursor:pointer}.seat-card-me{box-shadow:0 0 0 2px rgba(76,132,255,.34) inset}.seat-card-empty{background:rgba(255,255,255,.025)}
.seat-round{width:104px;height:104px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);font-size:28px}
.seat-name,.member-title,.chat-name{font-weight:800}.seat-action{margin-top:auto}.mic-indicator{position:absolute;right:12px;top:12px;width:16px;height:16px;border-radius:50%;background:#33d17a;box-shadow:0 0 16px rgba(51,209,122,.8);animation:micPulse 1s ease-in-out infinite}
@keyframes micPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35);opacity:.65}}
.chat-list{height:400px;overflow:auto;border-radius:20px;background:#0b1322;border:1px solid var(--line);padding:10px}.chat-item{padding:14px;border-radius:20px;margin-bottom:10px;background:linear-gradient(180deg,rgba(28,40,64,.92),rgba(18,27,45,.96));border:1px solid rgba(255,255,255,.06)}
.chat-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.chat-head-text{min-width:0}.chat-meta{font-size:12px;color:var(--muted);display:block}.chat-body{line-height:1.55;word-break:break-word}.chat-item img,.chat-item video,.chat-item audio{max-width:100%;border-radius:14px;margin-top:8px}
.chat-composer{display:grid;grid-template-columns:1fr auto auto;gap:10px;margin-top:12px}
.text-input,.text-area,.select{width:100%;border:1px solid var(--line);background:#0b1322;color:#fff;border-radius:16px;padding:12px;outline:none}.text-input:focus,.text-area:focus,.select:focus{border-color:rgba(101,146,255,.65);box-shadow:0 0 0 3px rgba(76,132,255,.14)}.text-area{min-height:120px;resize:vertical}
.member-card,.announcement-card,.queue-card,.profile-form-box,.profile-preview-box{padding:14px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid var(--line);margin-bottom:10px}
.member-row,.queue-card{display:flex;justify-content:space-between;gap:10px;align-items:center}.member-left{display:flex;align-items:center;gap:12px}.member-actions,.queue-actions{display:flex;gap:8px;flex-wrap:wrap}
.remote-audio-rack audio{width:100%;margin-top:8px;background:#10192a;border-radius:14px}.admin-bar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}.announcement-composer{display:grid;gap:12px;margin-bottom:14px}.admin-hidden-row{border-color:rgba(255,80,80,.18)}.empty-box{padding:16px;border-radius:18px;background:rgba(255,255,255,.03);border:1px dashed var(--line);color:var(--muted)}
.profile-page-grid{display:grid;grid-template-columns:320px 1fr;gap:16px}.profile-preview-box{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:320px}.profile-preview-name{margin-top:14px;font-size:20px;font-weight:900}.profile-actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}.field-label{display:block;margin:8px 0 8px;color:#dce4f5;font-weight:700}.profile-file-btn{width:max-content}
.screen-gate{position:fixed;inset:0;display:grid;place-items:center;background:rgba(4,8,14,.82);backdrop-filter:blur(10px);z-index:50;padding:18px}.gate-card{width:min(440px,100%);padding:32px;border-radius:28px;background:rgba(10,18,31,.96);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 48px rgba(0,0,0,.45);text-align:center}.gate-card h1,.gate-card h2{margin:12px 0 10px}.gate-card p{margin:0 0 18px;color:var(--muted);line-height:1.5}.gate-card-danger{border-color:rgba(209,82,102,.4)}.gate-logo{width:92px;height:92px;margin:0 auto 8px;border-radius:24px;object-fit:cover}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(24px);padding:12px 16px;border-radius:999px;background:rgba(16,27,45,.96);border:1px solid var(--line);opacity:0;pointer-events:none;transition:.2s;z-index:60;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.avatar-frame{position:relative;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.avatar-frame::before,.avatar-frame::after{content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none}
.avatar-frame::before{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.55),transparent 26%),conic-gradient(from 0deg,var(--frame-1),var(--frame-2),var(--frame-3),var(--frame-1));filter:blur(.2px);box-shadow:0 0 18px color-mix(in srgb, var(--frame-2) 55%, transparent)}
.avatar-frame::after{inset:-11px;border:2px solid color-mix(in srgb, var(--frame-2) 68%, transparent);opacity:.66;filter:blur(2px)}
.frame-particles{position:absolute;inset:-14px;border-radius:50%;pointer-events:none;opacity:.55;background:radial-gradient(circle at 20% 22%,rgba(255,255,255,.9) 0 2px,transparent 3px),radial-gradient(circle at 72% 18%,rgba(255,255,255,.72) 0 2px,transparent 3px),radial-gradient(circle at 84% 70%,rgba(255,255,255,.72) 0 2px,transparent 3px),radial-gradient(circle at 18% 78%,rgba(255,255,255,.72) 0 2px,transparent 3px)}
.animated-frame{animation:frameFloat 5.5s ease-in-out infinite}.animated-frame .frame-particles{animation:frameSpark 5.8s linear infinite}
@keyframes frameFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.018)}}
@keyframes frameSpark{0%,100%{transform:rotate(0deg);opacity:.4}50%{transform:rotate(180deg);opacity:.72}}
.avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;position:relative;z-index:2;background:#111827}
.avatar-frame-sm{width:52px;height:52px}.avatar-frame-md{width:82px;height:82px}.avatar-frame-lg{width:94px;height:94px}.avatar-frame-xl{width:154px;height:154px}
.frame-owner{--frame-1:#7a5311;--frame-2:#d4af37;--frame-3:#ffea87}.frame-admgeral{--frame-1:#7f8794;--frame-2:#c0c0c0;--frame-3:#eef2f7}.frame-adm{--frame-1:#113d85;--frame-2:#3b82f6;--frame-3:#90c2ff}.frame-familia{--frame-1:#7a1620;--frame-2:#ef4444;--frame-3:#ff9f9f}.frame-membro{--frame-1:#136235;--frame-2:#22c55e;--frame-3:#97f6bb}
.frame-owner::before{box-shadow:0 0 20px rgba(212,175,55,.55),0 0 34px rgba(212,175,55,.25)}.frame-admgeral::before{box-shadow:0 0 18px rgba(192,192,192,.45),0 0 30px rgba(255,255,255,.2)}.frame-adm::before{box-shadow:0 0 18px rgba(59,130,246,.45),0 0 30px rgba(59,130,246,.2)}.frame-familia::before{box-shadow:0 0 18px rgba(239,68,68,.45),0 0 30px rgba(239,68,68,.2)}.frame-membro::before{box-shadow:0 0 18px rgba(34,197,94,.42),0 0 30px rgba(34,197,94,.18)}

@media(max-width:1180px){.stage-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--line)}.room-grid{grid-template-columns:1fr}.stage-grid{grid-template-columns:repeat(2,1fr)}.chat-composer{grid-template-columns:1fr 1fr}.profile-page-grid{grid-template-columns:1fr}}
@media(max-width:620px){.main,.sidebar{padding:14px}.hero h1{font-size:28px}.stage-grid{grid-template-columns:1fr}.chat-composer{grid-template-columns:1fr}.member-row,.queue-card,.panel-title-row{flex-direction:column;align-items:flex-start}.seat-card{min-height:205px}}


/* mobile optimization v13 */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{overscroll-behavior-y:contain}
input,textarea,select,button{font:inherit}
.text-input,.text-area,.select,.btn,.nav-btn{-webkit-tap-highlight-color:transparent}
.chat-list{-webkit-overflow-scrolling:touch}
@supports (padding:max(0px)){
  .sidebar{padding-top:max(18px, env(safe-area-inset-top));padding-left:max(18px, env(safe-area-inset-left));padding-right:max(18px, env(safe-area-inset-right))}
  .main{padding-left:max(18px, env(safe-area-inset-left));padding-right:max(18px, env(safe-area-inset-right));padding-bottom:max(18px, env(safe-area-inset-bottom))}
  .toast{bottom:max(22px, env(safe-area-inset-bottom))}
}
@media(max-width:980px){
  body{background:linear-gradient(180deg,#0b1322,#07101d 55%)}
  .app-shell{min-height:100dvh}
  .sidebar{position:sticky;top:0;z-index:20;background:rgba(7,16,29,.98);backdrop-filter:blur(16px);padding-bottom:12px}
  .brand{padding:14px}
  .brand-logo{width:52px;height:52px;border-radius:16px}
  .brand-title{font-size:16px}
  .brand-subtitle{font-size:12px}
  .me-card{padding:12px;border-radius:22px}
  .avatar-frame-lg{width:76px;height:76px}
  .sidebar-actions{grid-template-columns:1fr 1fr}
  .side-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;overflow:auto;padding-bottom:2px}
  .nav-btn{text-align:center;padding:12px 10px;border-radius:16px;font-size:13px;white-space:nowrap;min-height:46px}
  .sidebar-footer{display:none}
  .main{padding:14px}
  .hero{padding:18px;min-height:auto;border-radius:24px}
  .hero-content{max-width:none}
  .hero h1{font-size:30px}
  .hero p{font-size:14px}
  .hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hero-actions .btn,.hero-actions .file-label{width:100%;min-height:48px}
  .top-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .stat-pill{text-align:center;font-size:13px;padding:11px 8px}
  .room-grid{gap:12px}
  .stage-panel,.chat-panel,.side-panel,.page-panel{padding:14px;border-radius:24px}
  .seat-card{min-height:188px;padding:14px;border-radius:20px}
  .seat-round{width:92px;height:92px}
  .avatar-frame-md{width:72px;height:72px}
  .chat-list{height:min(52dvh,420px);padding:8px;border-radius:18px}
  .chat-item{padding:12px;border-radius:18px}
  .chat-composer{position:sticky;bottom:0;z-index:5;background:linear-gradient(180deg,rgba(7,16,29,0),rgba(7,16,29,.95) 24%,rgba(7,16,29,.98));padding-top:10px}
  .text-input,.text-area,.select{min-height:48px;font-size:16px}
  .member-card,.announcement-card,.queue-card,.profile-form-box,.profile-preview-box{padding:12px;border-radius:18px}
  .profile-preview-box{min-height:260px}
  .profile-page-grid{gap:12px}
  .admin-bar{display:grid;grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .side-nav{grid-template-columns:repeat(5,auto);padding-bottom:4px}
  .hero-actions{grid-template-columns:1fr}
  .top-stats{grid-template-columns:1fr}
  .stage-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .seat-card{min-height:174px;padding:12px}
  .seat-name{font-size:14px}
  .room-right{display:grid;gap:12px}
  .chat-composer{grid-template-columns:1fr}
  .member-actions,.queue-actions,.profile-actions-row{width:100%}
  .member-actions .btn,.queue-actions .btn,.profile-actions-row .btn{flex:1}
}
@media(max-width:520px){
  .sidebar{padding:12px;padding-top:max(12px, env(safe-area-inset-top))}
  .brand,.me-card{padding:12px}
  .me-card{gap:10px}
  .me-name{font-size:16px}
  .role-badge{padding:7px 10px;font-size:11px}
  .main{padding:12px;padding-bottom:max(12px, env(safe-area-inset-bottom))}
  .hero{padding:16px;border-radius:22px}
  .hero-topline{font-size:11px}
  .hero h1{font-size:24px}
  .hero p{font-size:13px;line-height:1.45}
  .stage-panel,.chat-panel,.side-panel,.page-panel{padding:12px}
  .panel-title-row{margin-bottom:10px}
  .panel-title-row h3,.page-panel h2{font-size:18px}
  .stage-grid{grid-template-columns:1fr 1fr}
  .seat-card{min-height:162px}
  .seat-round{width:82px;height:82px;margin-bottom:10px}
  .avatar-frame-sm{width:46px;height:46px}
  .avatar-frame-md{width:64px;height:64px}
  .avatar-frame-xl{width:128px;height:128px}
  .chat-list{height:min(46dvh,360px)}
  .chat-head{align-items:flex-start}
  .chat-meta{font-size:11px}
  .chat-body{font-size:14px}
  .btn,.nav-btn{padding:12px 14px;border-radius:16px}
  .btn-big{padding:14px 16px}
  .screen-gate{padding:14px}
  .gate-card{padding:24px;border-radius:24px}
  .gate-logo{width:74px;height:74px;border-radius:20px}
  .member-left{align-items:flex-start}
  .member-row,.queue-card,.panel-title-row{flex-direction:column;align-items:flex-start}
  .profile-file-btn,.profile-actions-row .btn,.announcement-composer .btn{width:100%}
  .admin-bar{grid-template-columns:1fr}
}
@media(max-width:380px){
  .side-nav{gap:6px}
  .nav-btn{font-size:12px;padding:10px 8px}
  .stage-grid{grid-template-columns:1fr}
  .seat-card{min-height:170px}
}


/* v14 brighter mobile-first polish */
:root{
  --bg:#090f1f;
  --bg2:#101a31;
  --card:rgba(14,20,38,.88);
  --line:rgba(255,255,255,.1);
  --text:#f9fbff;
  --muted:#b7c2da;
  --blue:#4a8dff;
  --blue2:#70a3ff;
  --red:#ff5878;
  --red2:#ff7b93;
  --green:#28cf74;
  --green2:#45e68f;
  --gold:#e5be49;
  --silver:#d6dbe5;
}
body{background:radial-gradient(circle at top,#19325a,#090f1f 55%)}
.brand,.me-card,.page-panel,.stage-panel,.side-panel,.chat-panel,.hero{box-shadow:0 16px 46px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04)}
.nav-btn{display:flex;align-items:center;gap:10px;justify-content:flex-start}
.nav-ico{font-size:18px;filter:drop-shadow(0 0 8px rgba(255,255,255,.12))}
.nav-label{font-weight:700}
.mobile-bottom-nav{display:none}
.page-copy{margin:12px 4px 0;text-align:center;color:var(--muted);font-size:12px;opacity:.92}
.room-grid-stage-only{grid-template-columns:minmax(0,1fr) 320px}
.chat-page-panel{min-height:calc(100dvh - 180px);display:flex;flex-direction:column}
.chat-bg-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.13;pointer-events:none;z-index:0}
.chat-page-panel > *:not(.chat-bg-layer){position:relative;z-index:1}
.chat-list{background:linear-gradient(180deg,rgba(9,14,25,.72),rgba(8,12,22,.84));border:1px solid rgba(255,255,255,.06)}
.chat-item{border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));}
.chat-item.role-dono{background:linear-gradient(180deg,rgba(229,190,73,.22),rgba(229,190,73,.11));border-color:rgba(229,190,73,.35)}
.chat-item.role-adm_geral{background:linear-gradient(180deg,rgba(214,219,229,.24),rgba(214,219,229,.11));border-color:rgba(214,219,229,.35)}
.chat-item.role-adm{background:linear-gradient(180deg,rgba(74,141,255,.22),rgba(74,141,255,.1));border-color:rgba(74,141,255,.3)}
.chat-item.role-dono_familia{background:linear-gradient(180deg,rgba(255,88,120,.22),rgba(255,88,120,.1));border-color:rgba(255,88,120,.3)}
.chat-item.role-membro{background:linear-gradient(180deg,rgba(40,207,116,.2),rgba(40,207,116,.08));border-color:rgba(40,207,116,.28)}
.chat-body{padding:10px 12px;border-radius:16px;background:rgba(7,16,29,.38)}
.hero::before,.page-panel::before,.stage-panel::before,.side-panel::before,.chat-page-panel::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 28%,transparent 72%,rgba(255,255,255,.04));pointer-events:none}
.btn{box-shadow:0 10px 24px rgba(0,0,0,.24)}
.btn-primary{background:linear-gradient(135deg,var(--blue),#7d8eff)}
.btn-secondary{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03))}
.btn-danger{background:linear-gradient(135deg,var(--red),#d93e58)}
.member-card,.announcement-card,.queue-card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.announcement-card{position:relative;padding-right:78px}
.announcement-actions{position:absolute;top:12px;right:12px;display:flex;gap:8px}
.announcement-actions .btn{padding:9px 12px;min-height:auto}
.remote-audio-rack{display:none!important}
@media(max-width:980px){
  .sidebar{position:relative;border-bottom:none;padding-bottom:88px}
  .side-nav{display:none}
  .mobile-bottom-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;position:fixed;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:60;padding:10px;border-radius:24px;background:rgba(8,12,24,.94);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 40px rgba(0,0,0,.36)}
  .mobile-bottom-nav .nav-btn{flex-direction:column;gap:4px;justify-content:center;padding:10px 6px;min-height:58px;border-radius:18px;font-size:11px}
  .mobile-bottom-nav .nav-ico{font-size:18px}
  .mobile-bottom-nav .nav-label{font-size:10px;line-height:1.05}
  .main{padding-bottom:110px}
  .room-grid-stage-only{grid-template-columns:1fr}
  .chat-page-panel{min-height:auto}
  .chat-list{height:min(56dvh,480px)}
}
@media(max-width:640px){
  .hero-actions{grid-template-columns:1fr 1fr}
  .hero-actions .btn,.hero-actions .file-label{min-height:46px}
}
@media(max-width:520px){
  .mobile-bottom-nav{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}
  .hero-actions{grid-template-columns:1fr}
  .announcement-card{padding-right:12px}
  .announcement-actions{position:static;margin-top:12px}
}

/* v15 real mobile polish */
html,body{background:
radial-gradient(circle at 20% 0%, rgba(68,125,255,.24), transparent 30%),
radial-gradient(circle at 80% 10%, rgba(255,70,120,.18), transparent 28%),
linear-gradient(180deg,#0b1322 0%,#07101d 62%,#050b14 100%)}
.brand,.me-card,.page-panel,.stage-panel,.side-panel,.chat-page-panel,.hero{
  background:linear-gradient(180deg,rgba(16,24,42,.92),rgba(9,15,27,.95));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 52px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(92,133,255,.05);
}
.nav-btn,.btn{position:relative;overflow:hidden}
.nav-btn::after,.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);transition:transform .45s ease}
.nav-btn:hover::after,.btn:hover::after{transform:translateX(100%)}
.nav-btn{background:linear-gradient(180deg,#132540,#0e1a31);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.nav-btn.active{background:linear-gradient(135deg,#3258a7,#1a2d54 55%,#142342);box-shadow:0 10px 24px rgba(78,129,255,.24), 0 0 0 1px rgba(131,171,255,.32) inset}
.btn-primary{background:linear-gradient(135deg,#6aa2ff,#4176ff 58%,#315ff1);box-shadow:0 12px 28px rgba(76,132,255,.32)}
.btn-secondary{background:linear-gradient(135deg,#1b2e52,#13213a);border:1px solid rgba(255,255,255,.08)}
.btn-danger{background:linear-gradient(135deg,#ff7b98,#e85573 60%,#d84f67);box-shadow:0 12px 28px rgba(232,85,115,.28)}
.hero-topline,.stat-pill,.role-badge,.mini-badge{backdrop-filter:blur(10px)}
.stat-pill{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.seat-card,.member-card,.announcement-card,.queue-card,.profile-form-box,.profile-preview-box{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.chat-list{background:linear-gradient(180deg,rgba(6,11,21,.96),rgba(9,15,28,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.chat-item{position:relative;overflow:hidden}
.chat-item::before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,255,255,.08),transparent 34%,transparent 70%,rgba(255,255,255,.04));pointer-events:none}
.chat-item.role-dono{background:linear-gradient(180deg,rgba(229,190,73,.27),rgba(229,190,73,.12));box-shadow:0 8px 20px rgba(229,190,73,.12)}
.chat-item.role-adm_geral{background:linear-gradient(180deg,rgba(228,232,240,.28),rgba(214,219,229,.12));box-shadow:0 8px 20px rgba(214,219,229,.1)}
.chat-item.role-adm{background:linear-gradient(180deg,rgba(74,141,255,.28),rgba(74,141,255,.11));box-shadow:0 8px 20px rgba(74,141,255,.12)}
.chat-item.role-dono_familia{background:linear-gradient(180deg,rgba(255,88,120,.28),rgba(255,88,120,.11));box-shadow:0 8px 20px rgba(255,88,120,.12)}
.chat-item.role-membro{background:linear-gradient(180deg,rgba(40,207,116,.24),rgba(40,207,116,.1));box-shadow:0 8px 20px rgba(40,207,116,.1)}
.chat-panel-badges{display:flex;gap:8px;flex-wrap:wrap}
.mini-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-size:12px;color:#dce6ff}
.announcement-actions,.queue-actions{margin-top:8px}
.page-copy{opacity:.85;text-align:center;color:#b8c2d8;font-size:12px;padding:14px 6px 4px}
@media(max-width:980px){
  .sidebar{padding-bottom:86px}
  .side-nav{display:none}
  .mobile-bottom-nav .nav-btn.active{background:linear-gradient(135deg,#4f7fff,#2447a6)}
  .mobile-bottom-nav .nav-btn{background:linear-gradient(180deg,#121e36,#0d172b)}
  .hero-actions{grid-template-columns:1fr 1fr}
  .top-stats{display:grid;grid-template-columns:repeat(3,1fr)}
  .chat-list{height:calc(100dvh - 350px);min-height:320px}
}
@media(max-width:620px){
  .hero-actions{grid-template-columns:1fr}
  .top-stats{grid-template-columns:1fr}
  .mobile-bottom-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-panel,.stage-panel,.side-panel,.hero{border-radius:22px}
  .chat-composer{position:sticky;bottom:0;z-index:3;padding-top:10px;background:linear-gradient(180deg,rgba(9,15,28,0),rgba(9,15,28,.92) 25%,rgba(9,15,28,.98));}
}


/* v16 real mobile fix */
.app-shell.app-locked{display:none}
.chat-composer-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.chat-composer .file-label{width:100%;display:flex;align-items:center;justify-content:center}
.chat-composer .btn{min-height:48px}
@media(max-width:980px){
  .side-nav{display:none}
  .sidebar{position:relative;padding-bottom:92px}
  .brand,.me-card,.sidebar-actions{display:none}
  .main{padding:12px 12px 96px}
  .tab-content{padding-bottom:6px}
  .page-panel,.stage-panel,.side-panel,.hero{border-radius:20px}
}
@media(max-width:620px){
  .chat-composer-actions{grid-template-columns:1fr 1fr}
  #recordBtn{grid-column:1 / -1}
  .hero-actions{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .chat-composer-actions,.hero-actions{grid-template-columns:1fr}
}
.nav-btn.active,.btn-primary{box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 10px 28px rgba(76,132,255,.32)}
.btn-secondary{background:linear-gradient(180deg,#182846,#122139)}
.page-panel,.stage-panel,.side-panel,.hero{background:linear-gradient(180deg,rgba(18,28,50,.94),rgba(10,17,32,.92))}
.chat-item.role-dono{background:linear-gradient(180deg,rgba(82,63,12,.95),rgba(42,30,7,.96));border-color:rgba(229,190,73,.32)}
.chat-item.role-adm_geral{background:linear-gradient(180deg,rgba(74,82,94,.95),rgba(32,38,47,.96));border-color:rgba(214,219,229,.28)}
.chat-item.role-adm{background:linear-gradient(180deg,rgba(21,54,112,.95),rgba(11,30,66,.96));border-color:rgba(74,141,255,.3)}
.chat-item.role-dono_familia{background:linear-gradient(180deg,rgba(116,21,41,.95),rgba(63,11,22,.96));border-color:rgba(255,88,120,.28)}
.chat-item.role-membro{background:linear-gradient(180deg,rgba(17,86,53,.95),rgba(10,52,32,.96));border-color:rgba(40,207,116,.28)}


/* v17 mobile-first polish */
:root{
  --bg:#050814;
  --card:#11192c;
  --card-2:#0d1527;
  --text:#f5f7ff;
  --muted:#9da8c7;
  --line:rgba(255,255,255,.10);
  --brand-1:#ffd45a;
  --brand-2:#5fa8ff;
  --brand-3:#48e1a4;
}
body{
  background:
    radial-gradient(circle at top left, rgba(255,212,90,.16), transparent 22%),
    radial-gradient(circle at top right, rgba(95,168,255,.14), transparent 22%),
    radial-gradient(circle at bottom center, rgba(72,225,164,.10), transparent 26%),
    linear-gradient(180deg,#050814 0%,#08101d 100%);
}
.hero{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.hero-actions .btn,
.chat-composer-actions .btn,
.chat-composer-actions .file-label,
.admin-bar .btn,
.announcement-composer .btn{
  box-shadow:0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-primary{
  background:linear-gradient(135deg,#ffd45a,#ff9b32);
  color:#211200;
}
.btn-secondary{
  background:linear-gradient(180deg,#182745,#0e1a31);
  color:#eef3ff;
  border:1px solid rgba(255,255,255,.08);
}
.btn-danger{
  background:linear-gradient(135deg,#ff6b6b,#cb2447);
}
.side-nav .nav-btn,
.mobile-bottom-nav .nav-btn,
.mobile-page-pager .nav-btn{
  position:relative;
  overflow:hidden;
}
.side-nav .nav-btn::before,
.mobile-bottom-nav .nav-btn::before,
.mobile-page-pager .nav-btn::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 40%,transparent 65%,rgba(255,255,255,.05));
  pointer-events:none;
}
.mobile-page-pager{
  display:none;
  margin-bottom:14px;
  padding:8px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.mobile-page-pager .nav-btn{
  min-height:56px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:linear-gradient(180deg,#12203a,#0b1529);
  border:1px solid rgba(255,255,255,.08);
}
.mobile-page-pager .nav-btn.active,
.side-nav .nav-btn.active,
.mobile-bottom-nav .nav-btn.active{
  background:linear-gradient(135deg,#4f86ff,#7c4dff);
  color:#fff;
}
.page-panel h2, .panel-title-row h3{
  letter-spacing:.02em;
}
.room-grid-stage-only .room-left .stage-panel{
  min-height:520px;
}
.room-grid-stage-only .room-right .side-panel{
  min-height:520px;
}
.stage-grid{
  gap:14px;
}
.seat-card,
.member-card,
.queue-card,
.announcement-card{
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 34px rgba(0,0,0,.25);
}
.tab-content{
  animation:fadeTab .22s ease;
}
@keyframes fadeTab{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
.chat-page-panel{
  min-height:calc(100dvh - 210px);
}
.chat-list{
  flex:1;
  min-height:360px;
}
.chat-composer{
  position:sticky;
  bottom:0;
  z-index:3;
  padding-top:10px;
  background:linear-gradient(180deg,rgba(10,17,32,0),rgba(10,17,32,.86) 28%,rgba(10,17,32,.98));
  backdrop-filter:blur(10px);
}
.page-copy{
  opacity:.86;
  text-align:center;
  margin-top:12px;
  color:#cdd4ea;
}
@media (max-width: 980px){
  .mobile-page-pager{display:grid}
  .side-nav{display:none}
  .hero-content p{max-width:none}
  .room-grid-stage-only .room-left .stage-panel,
  .room-grid-stage-only .room-right .side-panel{min-height:auto}
}
@media (max-width: 620px){
  .hero-topline{font-size:12px}
  .hero h1{font-size:30px;line-height:1.05}
  .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .hero-actions .btn{min-height:52px}
  .chat-composer-actions{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
  }
  .chat-composer-actions .btn,
  .chat-composer-actions .file-label{
    min-height:50px;
    font-size:13px;
    justify-content:center;
  }
  .text-input,
  .text-area,
  .select{
    min-height:50px;
    font-size:16px;
  }
  .page-panel,.stage-panel,.side-panel,.hero{
    border-radius:22px;
  }
  .mobile-bottom-nav{
    background:rgba(8,12,24,.98);
    box-shadow:0 16px 42px rgba(0,0,0,.44);
  }
  .mobile-bottom-nav .nav-btn{
    min-height:62px;
  }
}


.chat-page-actions{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 14px;}
.chat-page-actions .btn{box-shadow:0 8px 22px rgba(0,0,0,.22);}