/* Up2Date Live — brand identity (navy/teal/orange) */
.u2d-app{
  --navy:#0D3C55; --teal:#1395BA; --teal-d:#106988; --orange:#F16D22;
  --sky:#A7D7EB; --gray:#D7D7D7; --off:#FAFAFA; --ink:#2A2A2A;
  font-family:'Tajawal','Segoe UI',Tahoma,sans-serif; direction:rtl; color:var(--ink);
  max-width:1080px; margin:0 auto;
}
.u2d-app *{box-sizing:border-box}
.u2d-card{background:#fff;border:1px solid #eef2f4;border-radius:16px;box-shadow:0 6px 22px rgba(13,60,85,.08);padding:22px;margin-bottom:18px}
.u2d-h{font-size:18px;font-weight:800;color:var(--navy);margin:0 0 12px}
.u2d-note{background:#f2fafd;border-inline-start:4px solid var(--teal);padding:11px 14px;border-radius:10px;font-size:13.5px;color:var(--teal-d);margin-bottom:16px}
.u2d-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.u2d-row2{grid-template-columns:1fr}}
.u2d-field{margin-bottom:14px}
.u2d-field label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
.u2d-field input,.u2d-field select{width:100%;padding:11px 13px;border:1.5px solid var(--gray);border-radius:10px;font-family:inherit;font-size:14px;background:#fff}
.u2d-field input:focus,.u2d-field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(19,149,186,.13)}

.u2d-btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;padding:11px 20px;border:none;border-radius:10px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;transition:.15s}
.u2d-btn:hover{filter:brightness(.94);color:#fff}
.u2d-btn:disabled{opacity:.6;cursor:default}
.u2d-teal{background:var(--teal)}
.u2d-navy{background:var(--navy)}
.u2d-ghost{background:var(--off);color:var(--navy);border:1px solid var(--gray)}
.u2d-danger{background:#e5484d}

.u2d-badge{display:inline-block;padding:5px 12px;border-radius:20px;font-size:12.5px;font-weight:700}
.u2d-live{background:#fde6e6;color:#e5484d}
.u2d-green{background:#e3f6ea;color:#12a150}

.u2d-live-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.u2d-links{font-size:12px;color:#7a8a94;font-family:monospace;word-break:break-all}

.u2d-stage-mini{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:linear-gradient(120deg,var(--navy),var(--teal-d));border-radius:14px;padding:20px;color:#fff;margin-bottom:18px}
.u2d-count{display:flex;flex-direction:column;line-height:1}
.u2d-count span{font-size:44px;font-weight:800}
.u2d-count small{font-size:12.5px;color:var(--sky);margin-top:4px}
.u2d-controls{display:flex;gap:10px;flex-wrap:wrap}

.u2d-roster-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--gray);margin-bottom:8px}
.u2d-roster-head b{color:var(--navy)}
.u2d-roster{display:flex;flex-direction:column;gap:4px;max-height:340px;overflow-y:auto}
.u2d-rstudent{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px}
.u2d-rstudent:hover{background:var(--off)}
.u2d-rstudent img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--sky)}
.u2d-rstudent .nm{flex:1;font-weight:600;color:var(--navy);font-size:14px}
.u2d-dot{width:9px;height:9px;border-radius:50%;background:#12a150;box-shadow:0 0 0 3px rgba(18,161,80,.18)}
.u2d-mini{width:30px;height:30px;border-radius:8px;background:var(--off);border:none;color:#7a8a94;cursor:pointer}
.u2d-mini:hover{background:#fde6e6;color:#e5484d}
.u2d-empty{padding:22px;text-align:center;color:#7a8a94;font-size:13.5px}

/* Student stage */
.u2d-stage{background:radial-gradient(circle at 50% 35%,#12333f,#0a1418);display:flex;flex-direction:column;gap:16px;min-height:340px;justify-content:center;align-items:center;text-align:center}
.u2d-join-cta{display:flex;flex-direction:column;align-items:center;gap:10px}
.u2d-join-cta p{color:#aac4d0;font-size:13.5px;margin:0}
.u2d-play{width:74px;height:74px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:30px;box-shadow:0 8px 30px rgba(241,109,34,.5)}
.u2d-joined{color:#fff;font-weight:700;font-size:16px;line-height:1.8}
.u2d-joined small{color:#aac4d0;font-weight:400;font-size:13px}