:root{
  --bg-deep:#101a0d;
  --bg-green:#1b2b15;
  --bg-green-soft:#22331b;
  --olive:#48602f;
  --olive-light:#7c9a52;
  --orange:#f2792b;
  --orange-bright:#ff9a44;
  --orange-dim:#a84f1c;
  --cream:#f2ead6;
  --cream-dim:#cfc4a4;
  --stripe-dark:#0c140a;
  --danger:#e05a4e;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-pill:999px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{height:100%;}
body{
  min-height:100%;
  font-family:'Vazirmatn', sans-serif;
  background:var(--bg-deep);
  color:var(--cream);
  line-height:1.7;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input, textarea{font-family:inherit;}
::selection{background:var(--orange); color:var(--bg-deep);}

/* ---------- shared layout bits ---------- */
.top-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
  background:rgba(16,26,13,0.92);
  border-bottom:2px solid var(--olive);
  position:sticky; top:0; z-index:20;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:900; font-size:1.15rem; color:var(--cream);
}
.brand .mark{
  width:30px;height:30px;
  background:var(--orange);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display:flex;align-items:center;justify-content:center;
  color:var(--bg-deep); font-weight:900; font-size:0.95rem;
}
.pill-btn{
  padding:9px 18px;
  border-radius:var(--radius-pill);
  border:1px solid var(--olive);
  background:var(--stripe-dark);
  color:var(--cream);
  font-weight:700; font-size:0.85rem;
  transition:border-color .15s, color .15s, background .15s;
}
.pill-btn:hover{border-color:var(--orange); color:var(--orange-bright);}
.pill-btn.primary{
  background:var(--orange); border-color:var(--orange); color:var(--bg-deep);
}
.pill-btn.primary:hover{background:var(--orange-bright); border-color:var(--orange-bright); color:var(--bg-deep);}
.pill-btn.danger{border-color:var(--danger); color:var(--danger);}
.pill-btn.danger:hover{background:var(--danger); color:var(--bg-deep);}
.pill-btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------- auth (login/register) page ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(242,121,43,0.12), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(124,154,82,0.14), transparent 45%),
    var(--bg-deep);
}
.auth-card{
  width:100%; max-width:420px;
  background:var(--bg-green);
  border:1px solid var(--olive);
  border-radius:var(--radius-lg);
  padding:34px 30px;
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
}
.auth-card .brand{justify-content:center; font-size:1.4rem; margin-bottom:6px;}
.auth-card .brand .mark{width:38px; height:38px; font-size:1.1rem;}
.auth-sub{
  text-align:center; color:var(--cream-dim); font-size:0.9rem; margin-bottom:26px;
}
.tab-row{
  display:flex; background:var(--stripe-dark); border-radius:var(--radius-pill);
  padding:4px; margin-bottom:24px;
}
.tab-btn{
  flex:1; padding:10px; border:none; background:none; color:var(--cream-dim);
  font-weight:700; border-radius:var(--radius-pill); transition:all .2s;
}
.tab-btn.active{background:var(--orange); color:var(--bg-deep);}
.field{margin-bottom:16px;}
.field label{display:block; font-size:0.82rem; color:var(--cream-dim); margin-bottom:6px;}
.field input{
  width:100%; padding:13px 16px;
  background:var(--stripe-dark); border:1px solid var(--olive);
  border-radius:var(--radius-sm); color:var(--cream); font-size:0.95rem;
  transition:border-color .15s;
}
.field input:focus{outline:none; border-color:var(--orange);}
.auth-submit{
  width:100%; padding:14px; margin-top:6px;
  background:var(--orange); color:var(--bg-deep); border:none;
  border-radius:var(--radius-pill); font-weight:800; font-size:1rem;
  transition:background .2s, transform .1s;
}
.auth-submit:hover{background:var(--orange-bright);}
.auth-submit:active{transform:scale(0.98);}
.auth-submit:disabled{opacity:.6; cursor:not-allowed;}
.auth-error{
  background:rgba(224,90,78,0.15); border:1px solid var(--danger); color:#ffb4ac;
  padding:10px 14px; border-radius:var(--radius-sm); font-size:0.85rem; margin-bottom:16px;
  display:none;
}
.auth-error.show{display:block;}

/* ---------- chat layout ---------- */
.chat-layout{
  display:grid; grid-template-columns:280px 1fr;
  height:calc(100vh - 61px);
}
@media (max-width: 760px){
  .chat-layout{grid-template-columns:1fr;}
  .room-sidebar{display:none;}
  .room-sidebar.open{display:block; position:fixed; inset:61px 0 0 0; z-index:30;}
}
.room-sidebar{
  background:var(--bg-green); border-inline-end:1px solid var(--olive);
  overflow-y:auto; padding:16px 10px;
}
.room-sidebar h4{
  color:var(--cream-dim); font-size:0.78rem; letter-spacing:.5px;
  padding:6px 10px; text-transform:uppercase;
}
.room-item{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px; border-radius:var(--radius-sm); cursor:pointer;
  color:var(--cream-dim); margin-bottom:4px; transition:background .15s, color .15s;
  border:1px solid transparent;
}
.room-item:hover{background:var(--bg-green-soft); color:var(--cream);}
.room-item.active{background:var(--bg-green-soft); border-color:var(--olive); color:var(--orange-bright);}
.room-item .lock{margin-inline-start:auto; opacity:.7; font-size:0.85rem;}
.room-item .name{font-weight:700; font-size:0.92rem;}
.room-item .count{font-size:0.72rem; color:var(--cream-dim);}

.chat-main{display:flex; flex-direction:column; background:var(--bg-deep);}
.chat-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--olive); background:var(--bg-green);
}
.chat-header h3{font-size:1.05rem;}
.chat-header p{font-size:0.78rem; color:var(--cream-dim);}
.messages{flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px;}
.msg{display:flex; gap:10px; max-width:72%;}
.msg.mine{align-self:flex-end; flex-direction:row-reverse;}
.msg .avatar{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--bg-deep); font-size:0.9rem;
}
.msg .bubble{
  background:var(--bg-green-soft); border:1px solid var(--olive);
  border-radius:var(--radius-md); padding:10px 14px;
}
.msg.mine .bubble{background:var(--orange-dim); border-color:var(--orange);}
.msg .meta{font-size:0.72rem; color:var(--cream-dim); margin-bottom:3px; display:flex; gap:8px;}
.msg .meta .admin-tag{color:var(--orange-bright); font-weight:800;}
.msg .body{font-size:0.92rem; white-space:pre-wrap; word-break:break-word;}
.msg .del-btn{
  border:none; background:none; color:var(--cream-dim); font-size:0.75rem;
  margin-inline-start:8px; opacity:.6;
}
.msg .del-btn:hover{opacity:1; color:var(--danger);}

.composer{
  display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--olive);
  background:var(--bg-green);
}
.composer input{
  flex:1; padding:13px 16px; background:var(--stripe-dark); border:1px solid var(--olive);
  border-radius:var(--radius-pill); color:var(--cream); font-size:0.92rem;
}
.composer input:focus{outline:none; border-color:var(--orange);}
.composer button{
  padding:0 22px; background:var(--orange); color:var(--bg-deep); border:none;
  border-radius:var(--radius-pill); font-weight:800;
}
.composer button:hover{background:var(--orange-bright);}
.composer button:disabled{opacity:.5;}

.empty-state{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--cream-dim); gap:10px; text-align:center; padding:20px;
}

/* ---------- modal (join room password) ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.55);
  display:none; align-items:center; justify-content:center; z-index:100;
}
.modal-backdrop.show{display:flex;}
.modal-card{
  width:100%; max-width:360px; background:var(--bg-green); border:1px solid var(--olive);
  border-radius:var(--radius-lg); padding:26px;
}
.modal-card h4{margin-bottom:14px;}

/* ---------- admin dashboard ---------- */
.admin-wrap{max-width:1100px; margin:0 auto; padding:28px 20px;}
.admin-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:22px; margin-top:20px;}
@media (max-width:860px){.admin-grid{grid-template-columns:1fr;}}
.card{
  background:var(--bg-green); border:1px solid var(--olive); border-radius:var(--radius-md);
  padding:20px;
}
.card h3{margin-bottom:14px; font-size:1.05rem;}
.table-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.06); gap:10px;
}
.table-row:last-child{border-bottom:none;}
.table-row .info{display:flex; flex-direction:column; gap:2px;}
.table-row .info b{font-size:0.9rem;}
.table-row .info span{font-size:0.75rem; color:var(--cream-dim);}
.row-actions{display:flex; gap:6px;}
.row-actions button{
  border:1px solid var(--olive); background:var(--stripe-dark); color:var(--cream-dim);
  padding:6px 10px; border-radius:var(--radius-sm); font-size:0.75rem;
}
.row-actions button:hover{border-color:var(--orange); color:var(--orange-bright);}
.badge{
  font-size:0.68rem; padding:3px 9px; border-radius:var(--radius-pill);
  background:var(--stripe-dark); border:1px solid var(--olive); color:var(--cream-dim);
}
.badge.locked{border-color:var(--danger); color:#ffb4ac;}
.badge.pw{border-color:var(--orange); color:var(--orange-bright);}

.toast{
  position:fixed; bottom:24px; inset-inline-start:50%; transform:translateX(-50%);
  background:var(--bg-green-soft); border:1px solid var(--olive); color:var(--cream);
  padding:12px 20px; border-radius:var(--radius-pill); font-size:0.85rem;
  box-shadow:0 10px 24px rgba(0,0,0,0.4); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:200;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}
.toast.error{border-color:var(--danger); color:#ffb4ac;}