:root{
  --primary:#6366f1;
  --primary-light:#a855f7;
  --bg-dark:#020617;
  --card-bg:rgba(15,23,42,.8);
  --text:#f8fafc;
  --danger:#f43f5e;
  --ok:#22c55e;
}

*{box-sizing:border-box;font-family:'Cairo',sans-serif;-webkit-tap-highlight-color:transparent}
body{
  background:radial-gradient(circle at top right,#1e1b4b,#020617);
  color:var(--text);margin:0;min-height:100vh;
  display:flex;justify-content:center;align-items:center;overflow-x:hidden;
}
#app{width:100%;max-width:480px;padding:20px;z-index:10}
.glass-card{
  background:var(--card-bg);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:28px;padding:30px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.5);
}
.hidden{display:none!important}

.floating{animation:float 4s ease-in-out infinite;width:140px;margin-bottom:20px}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}

h1{font-size:38px;font-weight:900;margin:10px 0;text-align:center}
h1 span{
  background:linear-gradient(to right,#818cf8,#d946ef);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
p{text-align:center;opacity:.85;margin:0 0 18px}
.muted{opacity:.72;font-size:13px}

.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff;border:none;padding:18px;border-radius:18px;
  font-size:18px;font-weight:900;width:100%;cursor:pointer;
  transition:all .3s cubic-bezier(.175,.885,.32,1.275);
}
.btn-primary:hover{transform:scale(1.02);filter:brightness(1.1)}
.btn-primary:active{transform:scale(.95)}

.btn-secondary{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;padding:14px 16px;border-radius:16px;
  font-weight:900;cursor:pointer;transition:.2s; width:100%;
}
.btn-secondary:hover{transform:translateY(-1px);filter:brightness(1.08)}

.btn-ghost{
  background:transparent;border:1px solid rgba(255,255,255,.12);
  color:#fff;padding:12px 14px;border-radius:14px;
  font-weight:900;cursor:pointer;transition:.2s;
}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

.btn-icon{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;padding:10px 12px;border-radius:14px;
  font-weight:900;cursor:pointer;
}

.btn-danger-text{
  background:none;border:none;color:var(--danger);cursor:pointer;
  margin-top:20px;width:100%;font-weight:900;opacity:.75;
}

.setup-grid{display:grid;gap:12px;margin-top:10px}
.join-box{display:flex;gap:10px;align-items:center}
.join-box input{margin:0}

input,textarea{
  width:100%;background:rgba(0,0,0,.2);
  border:1px solid #334155;color:#fff;
  padding:15px;border-radius:15px;
  font-size:16px;outline:none;margin-bottom:10px;
}
textarea{height:120px;resize:none}
.textarea-wrapper{position:relative}
#char-count{
  position:absolute;left:12px;bottom:12px;
  font-size:12px;opacity:.6;
}
.emoji-btn{
  position:absolute;right:12px;bottom:10px;
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;font-size:18px;cursor:pointer;
}
.emoji-btn:hover{filter:brightness(1.1)}

.voice-row{display:flex;gap:10px;align-items:center;margin-top:6px}
.voice-status{flex:1}
.voice-preview{
  margin-top:10px;
  padding:12px;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  display:flex;gap:10px;align-items:center;justify-content:space-between;
}
.voice-preview audio{width:100%}

.admin-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.admin-header .actions{display:flex;gap:10px;align-items:center}
.badge{
  display:inline-block;
  padding:6px 10px;border-radius:999px;
  background:rgba(99,102,241,.16);
  border:1px solid rgba(99,102,241,.22);
  font-size:12px;font-weight:900;
}
.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.03);opacity:1}}

.code-text{color:var(--primary-light);font-weight:900;letter-spacing:2px}

.messages-stack{display:grid;gap:15px;margin-top:16px}
.msg-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  padding:16px;border-radius:20px;
  display:flex;gap:15px;align-items:flex-start;
  animation:slideIn .5s ease backwards;
}
@keyframes slideIn{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
.avatar-circle{
  width:55px;height:55px;border-radius:50%;
  background:#1e293b;border:2px solid var(--primary);
  flex:0 0 auto;
}
.msg-body{flex:1}
.msg-body p{margin:0 0 8px;line-height:1.7}
.msg-body small{opacity:.65}
.msg-actions{display:flex;flex-direction:column;gap:8px}
.btn-show{
  padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  font-weight:900;cursor:pointer;
  background:rgba(244,63,94,.08);
  color:var(--danger);
}
.btn-show.on{
  background:rgba(34,197,94,.10);
  color:var(--ok);
  border-color:rgba(34,197,94,.22);
}

.featured-banner{padding:16px;margin-top:14px}
.featured-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.featured-content{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px;
  line-height:1.7;
}
.guest-featured{padding:16px;margin-bottom:12px}

/* Modal (How to) */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  display:flex;justify-content:center;align-items:center;
  padding:18px;z-index:2500;
}
.modal-card{width:100%;max-width:560px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

.howto-body{display:grid;gap:10px}
.howto-tip{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:12px;
  line-height:1.8;
}
.howto-hint{margin-top:4px;text-align:center}
.tap-dot{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
  opacity:.9;
}

/* Loader */
.overlay{position:fixed;inset:0;background:var(--bg-dark);z-index:1000;display:flex;justify-content:center;align-items:center}
.loader{width:48px;height:48px;border:5px solid #fff;border-bottom-color:var(--primary);border-radius:50%;animation:rotation 1s linear infinite}
@keyframes rotation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  padding:12px 18px;
  border-radius:999px;
  background:rgba(15,23,42,.95);
  color:#fff;
  font-weight:900;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  z-index:5000;
  max-width:92vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:all .25s ease;
}

.toast.hidden{
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(10px);
}