:root{
  --wa:#075E54;
  --green:#00a884;
  --bg:#0b141a;
  --panel:#111b21;
  --card:#1f2c33;
  --text:#e9edef;
  --muted:#8696a0;
  --border:rgba(255,255,255,.12);
  --danger:#ff3b3b;
}
*{box-sizing:border-box}
body{margin:0;font-family:Tahoma,Arial,sans-serif;background:radial-gradient(circle at top,#10443d,#0b141a 55%);color:var(--text)}
.install-body{min-height:100vh;display:grid;place-items:center;padding:18px}
.install-card{width:min(520px,100%);background:rgba(17,27,33,.94);border:1px solid var(--border);border-radius:28px;padding:26px;box-shadow:0 25px 90px rgba(0,0,0,.4)}
.install-card h1{margin:0 0 10px}.install-card p{color:var(--muted);line-height:1.8}
.form{display:grid;gap:12px}.form h2{font-size:15px;color:var(--green);margin:10px 0 0}
input{width:100%;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.07);color:white;padding:15px;outline:none}
button,.call-btn,.round,.logout{cursor:pointer;text-decoration:none}
.form button{border:0;border-radius:16px;background:linear-gradient(135deg,var(--wa),var(--green));color:white;padding:15px;font-weight:800}
.alert{background:rgba(255,59,59,.15);color:#ffb7b7;border-radius:14px;padding:12px;margin:12px 0}

.app{width:min(540px,100%);min-height:100vh;margin:0 auto;background:rgba(11,20,26,.8)}
.header{background:var(--wa);padding:18px;display:flex;align-items:center;justify-content:space-between}
.header h1{margin:0;font-size:23px}.header span{font-size:13px;color:rgba(255,255,255,.75)}
.logout{color:white;background:rgba(255,255,255,.15);padding:9px 13px;border-radius:999px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--wa)}
.tab{border:0;background:transparent;color:rgba(255,255,255,.7);font-weight:900;padding:14px;position:relative}
.tab.active{color:white}.tab.active:after{content:"";position:absolute;bottom:0;left:18%;right:18%;height:3px;border-radius:5px;background:white}
.panel{display:none;padding:10px}.panel.active{display:block}
.row{display:flex;align-items:center;gap:12px;padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.07)}
.avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--wa),#1b6b68);font-weight:900;font-size:22px}
.row-text{flex:1;min-width:0}.row-text strong{display:block}.row-text span{display:block;color:var(--muted);font-size:13px;margin-top:5px}
.round{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(0,168,132,.18);color:var(--green);border:1px solid rgba(0,168,132,.25)}
.call-btn{color:var(--green);font-weight:800}.empty{text-align:center;color:var(--muted);padding:36px}

.call-page{background:#000;overflow:hidden}
.call-shell{position:fixed;inset:0;background:#000}
#jitsi{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.call-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 35%,rgba(0,0,0,.72))}
.caller{position:absolute;top:9%;left:50%;transform:translateX(-50%);text-align:center;transition:.6s}
.big-avatar{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:linear-gradient(135deg,var(--wa),#183c36);font-size:46px;font-weight:900;border:2px solid rgba(255,255,255,.25)}
.caller h1{font-size:clamp(26px,7vw,42px);margin:0 0 8px}.caller p{margin:0;color:rgba(255,255,255,.75);font-size:12px}
.share-box{position:absolute;top:max(16px,env(safe-area-inset-top));right:14px;left:14px;display:grid;gap:7px;pointer-events:auto}
.share-box button,.share-box input{background:rgba(255,255,255,.13);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.18);border-radius:14px;color:white;padding:12px}
.share-box button{font-weight:900}.share-box small{color:rgba(255,255,255,.75);text-align:center}
.glass-controls{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:16px;padding:12px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(24px);box-shadow:0 20px 70px rgba(0,0,0,.5);pointer-events:auto}
.glass-controls button{width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.06));color:white;font-size:22px}
.glass-controls .danger{background:var(--danger);border:0;transform:rotate(135deg)}
.glass-controls .disabled{opacity:.35}
@media(min-width:760px){
  .app{margin-top:22px;min-height:calc(100vh - 44px);border-radius:30px;overflow:hidden;border:1px solid var(--border)}
  .call-shell{width:min(480px,100%);height:min(900px,100vh);inset:50% auto auto 50%;transform:translate(-50%,-50%);border-radius:32px;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
}