:root{
  --bg:#0f172a;
  --bg2:#1e293b;
  --bg3:#273449;
  --accent:#22d3ee;
  --accent2:#34d399;
  --danger:#ef4444;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --border:#334155;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  background:linear-gradient(160deg,#0f172a,#111827);
  color:var(--text);
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none;}
.wrap{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg2);box-shadow:0 0 60px rgba(0,0,0,.5);position:relative;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;background:var(--bg3);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10;
}
.topbar h2{font-size:18px;margin:0;}
.topbar .myid{font-size:13px;color:var(--accent);background:rgba(34,211,238,.1);padding:4px 10px;border-radius:20px;}
.profile-pic{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#0f172a;
}
.list{padding:8px 0;}
.contact{
  display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid rgba(51,65,85,.5);
  cursor:pointer;transition:background .15s;
}
.contact:hover, .contact:active{background:rgba(255,255,255,.03);}
.contact .info{flex:1;min-width:0;}
.contact .name{font-weight:600;font-size:15px;}
.contact .code{font-size:13px;color:var(--muted);}
.dot{width:9px;height:9px;border-radius:50%;background:#475569;flex-shrink:0;}
.dot.online{background:var(--accent2);box-shadow:0 0 6px var(--accent2);}
.actions{display:flex;gap:10px;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;color:#fff;
}
.icon-btn.call{background:var(--accent2);}
.icon-btn.chat{background:var(--accent);}
.bottom-nav{
  position:sticky;bottom:0;display:flex;background:var(--bg3);border-top:1px solid var(--border);
}
.bottom-nav a{
  flex:1;text-align:center;padding:12px 0;font-size:12px;color:var(--muted);
}
.bottom-nav a.active{color:var(--accent);}
.search-box{padding:12px 18px;}
.search-box input{
  width:100%;padding:10px 14px;border-radius:24px;border:1px solid var(--border);
  background:var(--bg);color:var(--text);font-size:14px;
}
.empty-state{text-align:center;color:var(--muted);padding:60px 20px;font-size:14px;}

/* Call Screen */
.call-screen{
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  min-height:100vh;background:radial-gradient(circle at top,#1e3a4a,#0f172a 70%);
  padding:40px 20px;text-align:center;
}
.call-screen .avatar-big{
  width:120px;height:120px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:700;color:#0f172a;
  margin-top:60px;
}
.call-screen .call-name{font-size:24px;font-weight:700;margin-top:18px;}
.call-screen .call-status{color:var(--muted);margin-top:8px;font-size:15px;}
.call-controls{display:flex;gap:30px;margin-bottom:50px;}
.call-controls button{
  width:64px;height:64px;border-radius:50%;border:none;font-size:24px;cursor:pointer;color:#fff;
}
.btn-end{background:var(--danger);}
.btn-mute{background:#475569;}
.btn-accept{background:var(--accent2);}
.btn-speaker{background:#475569;}
.ringing-pulse{
  animation:pulse 1.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,211,238,.5);}
  70%{box-shadow:0 0 0 22px rgba(34,211,238,0);}
  100%{box-shadow:0 0 0 0 rgba(34,211,238,0);}
}

/* Chat */
.chat-window{display:flex;flex-direction:column;height:100vh;}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;}
.bubble{max-width:75%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.4;}
.bubble.me{align-self:flex-end;background:var(--accent);color:#0f172a;border-bottom-right-radius:4px;}
.bubble.them{align-self:flex-start;background:var(--bg3);border-bottom-left-radius:4px;}
.bubble .time{display:block;font-size:10px;opacity:.6;margin-top:4px;}
.chat-input{display:flex;padding:12px;gap:8px;border-top:1px solid var(--border);background:var(--bg3);}
.chat-input input{flex:1;padding:12px 16px;border-radius:24px;border:1px solid var(--border);background:var(--bg);color:var(--text);}
.chat-input button{width:44px;height:44px;border-radius:50%;border:none;background:var(--accent);color:#0f172a;font-size:18px;cursor:pointer;}

/* Auth pages */
.auth-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;}
.auth-card{background:var(--bg3);padding:36px 28px;border-radius:18px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.auth-card h1{font-size:22px;margin-bottom:4px;color:var(--accent);}
.auth-card p.sub{color:var(--muted);font-size:13px;margin-bottom:24px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
.field input,.field select{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--bg);color:var(--text);font-size:15px;
}
.btn-primary{
  width:100%;padding:13px;border:none;border-radius:10px;background:var(--accent);color:#0f172a;
  font-weight:700;font-size:15px;cursor:pointer;margin-top:6px;
}
.btn-primary:hover{opacity:.9;}
.alert-err{background:#7f1d1d;color:#fecaca;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;}
.alert-ok{background:#064e3b;color:#bbf7d0;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;}

/* Admin */
.admin-wrap{max-width:1000px;margin:0 auto;padding:20px;}
table.admin-table{width:100%;border-collapse:collapse;background:var(--bg3);border-radius:10px;overflow:hidden;font-size:14px;}
table.admin-table th,table.admin-table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;}
table.admin-table th{background:#0f172a;color:var(--accent);font-size:12px;text-transform:uppercase;}
.badge{padding:3px 10px;border-radius:12px;font-size:12px;}
.badge.active{background:rgba(52,211,153,.15);color:var(--accent2);}
.badge.blocked{background:rgba(239,68,68,.15);color:var(--danger);}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:6px;border:none;cursor:pointer;color:#fff;}
.btn-sm.danger{background:var(--danger);}
.btn-sm.ok{background:var(--accent2);}
.btn-sm.edit{background:var(--accent);color:#0f172a;}
.card-stat{background:var(--bg3);padding:18px;border-radius:14px;text-align:center;flex:1;}
.card-stat .num{font-size:28px;font-weight:700;color:var(--accent);}
.card-stat .lbl{font-size:12px;color:var(--muted);margin-top:4px;}
.stat-row{display:flex;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.toast{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  background:var(--bg3);color:var(--text);padding:10px 18px;border-radius:8px;
  border:1px solid var(--border);font-size:13px;z-index:999;box-shadow:0 8px 20px rgba(0,0,0,.4);
}