*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  width:100%;
  height:100%;
  background:#07090d;
  color:#fff;
  font-family:Arial,sans-serif;
  overflow:hidden;
}

body{
  min-height:100dvh;
}

button{
  font-family:inherit;
}

.hidden{
  display:none!important;
}

.screen{
  width:100%;
  height:100dvh;
}


/* HOME */

.home-screen{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 25%,#18261d 0,#090d0b 42%,#06080b 100%);
  padding:24px;
}

.home-brand{
  position:absolute;
  top:28px;
  left:25px;
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-avatar,
.small-avatar,
.mini-avatar{
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#303847;
  font-weight:700;
}

.brand-avatar{
  width:46px;
  height:46px;
  font-size:20px;
}

.brand-title{
  font-size:21px;
  font-weight:700;
}

.brand-subtitle{
  color:#8e98a8;
  font-size:12px;
  margin-top:3px;
}

.home-card{
  width:min(420px,92vw);
  padding:38px 28px;
  border-radius:24px;
  background:#11161d;
  border:1px solid #29313d;
  box-shadow:0 25px 70px #000b;
  text-align:center;
}

.home-icon{
  width:80px;
  height:80px;
  margin:auto;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#202936;
  font-size:38px;
}

.home-card h1{
  margin:20px 0 8px;
  font-size:28px;
}

.home-card p{
  margin:0 0 27px;
  color:#9aa4b3;
}

.duration-title{
  color:#aab3c0;
  font-size:12px;
  margin-bottom:10px;
}

.duration-options{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:22px;
}

.duration{
  padding:10px 16px;
  border-radius:10px;
  border:1px solid #343c49;
  background:#171d26;
  color:#cbd2dc;
}

.duration.active{
  border-color:#45d980;
  background:#173325;
  color:#70ed9e;
}

.start-class{
  width:100%;
  padding:15px;
  border:0;
  border-radius:13px;
  background:#35d879;
  color:#06120b;
  font-size:15px;
  font-weight:700;
}


/* CALLING */

.calling-screen{
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 50% 40%,#17251d,#07090d 65%);
}

.calling-top{
  padding:25px;
  text-align:center;
  color:#dfe6ed;
  font-size:14px;
}

.calling-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#48e98b;
  margin-right:7px;
  box-shadow:0 0 12px #48e98b;
}

.calling-center{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.miss-avatar{
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#3d4657,#202733);
  border:1px solid #596274;
  box-shadow:0 20px 60px #0009;
  font-weight:700;
}

.miss-avatar.large{
  width:115px;
  height:115px;
  font-size:46px;
}

.calling-name{
  margin-top:22px;
  font-size:25px;
  font-weight:700;
}

.calling-text{
  margin-top:8px;
  color:#8f99a8;
}

.calling-timer{
  margin-top:28px;
  font-size:22px;
  color:#63e995;
}

.cancel-call{
  margin-top:35px;
  padding:12px 28px;
  border-radius:25px;
  border:1px solid #55323a;
  background:#251519;
  color:#ff9ba7;
}


/* CLASS */

.class-screen{
  display:flex;
  flex-direction:column;
  background:#05070a;
}

.class-topbar{
  height:65px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 18px;
  background:#0d1117;
  border-bottom:1px solid #202732;
  z-index:20;
}

.class-title{
  display:flex;
  align-items:center;
  gap:10px;
}

.small-avatar{
  width:40px;
  height:40px;
}

.teacher-name{
  font-size:15px;
  font-weight:700;
}

.teacher-status{
  color:#7e8998;
  font-size:10px;
  margin-top:3px;
}

.teacher-status span{
  display:inline-block;
  width:6px;
  height:6px;
  background:#43e784;
  border-radius:50%;
  margin-right:5px;
}

.class-time{
  text-align:right;
}

.time-label{
  color:#6e7887;
  font-size:8px;
  letter-spacing:1px;
}

#countdown{
  margin-top:2px;
  font-size:20px;
  font-weight:700;
  color:#72ee9e;
}


/* NORMAL CALL */

.call-mode{
  flex:1;
  min-height:0;
  position:relative;
}

.teacher-main{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 38%,#18251e,#0a0e0c 65%);
}

.teacher-visual{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.teacher-glow{
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  background:#55dc8a22;
  filter:blur(35px);
}

.teacher-avatar-big{
  width:180px;
  height:180px;
  font-size:70px;
  z-index:2;
}

.teacher-main-name{
  z-index:2;
  margin-top:18px;
  font-size:23px;
  font-weight:700;
}

.teacher-main-state{
  z-index:2;
  margin-top:7px;
  color:#67e998;
  font-size:13px;
}


/* STUDENT BOTTOM */

.student-bottom{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  width:min(270px,42vw);
  height:min(185px,26vw);
  min-width:180px;
  min-height:125px;
  border-radius:15px;
  overflow:hidden;
  border:1px solid #4a5260;
  background:#11161e;
  box-shadow:0 15px 45px #000b;
}

.student-bottom video{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scaleX(-1);
}

.student-label{
  position:absolute;
  left:10px;
  bottom:9px;
  background:#05070bcc;
  border-radius:7px;
  padding:6px 9px;
  font-size:11px;
}

.student-label span{
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:5px;
  border-radius:50%;
  background:#4ae78b;
}


/* LESSON MODE */

.lesson-mode{
  flex:1;
  min-height:0;
  position:relative;
  display:flex;
  flex-direction:column;
  padding:8px 10px 0;
  background:#080b0d;
}

.lesson-people{
  height:74px;
  flex:none;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
}

.mini-person,
.mini-student{
  position:relative;
  width:110px;
  height:64px;
  border-radius:11px;
  overflow:hidden;
  background:#171c24;
  border:1px solid #3a424e;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mini-person{
  flex-direction:column;
}

.mini-avatar{
  width:30px;
  height:30px;
  font-size:13px;
}

.mini-person span,
.mini-student span{
  font-size:9px;
  margin-top:3px;
}

.mini-student video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scaleX(-1);
}

.mini-student span{
  position:absolute;
  left:6px;
  bottom:5px;
  margin:0;
  padding:3px 5px;
  border-radius:4px;
  background:#000b;
}

.blackboard{
  position:relative;
  flex:1;
  min-height:0;
  border:7px solid #292019;
  border-radius:13px 13px 0 0;
  overflow:hidden;
  background:#0e1710;
  box-shadow:
    inset 0 0 0 2px #111,
    0 -5px 30px #0008;
}

.board-top{
  height:35px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 13px;
  background:#171e17;
  border-bottom:1px solid #2c392e;
  color:#8e9b90;
  font-size:9px;
  letter-spacing:1px;
}

.board-content{
  position:absolute;
  inset:35px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:25px;
}

.board-title{
  font-size:clamp(25px,5vw,52px);
  font-weight:700;
}

.board-line{
  margin-top:14px;
  color:#cdd8cf;
  font-size:clamp(14px,2vw,22px);
}


/* CONTROLS */

.bottom-controls{
  height:72px;
  flex:none;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  position:relative;
  background:#0d1117;
  border-top:1px solid #202732;
}

.control{
  min-width:110px;
  padding:12px 17px;
  border-radius:11px;
  border:1px solid #353d49;
  background:#171c24;
  color:#e5ebf3;
  font-size:12px;
}

.control.rotate{
  background:#171d25;
}

.control.end{
  background:#351c22;
  border-color:#67313a;
  color:#ffadb6;
}

.mic-status{
  position:absolute;
  left:16px;
  color:#7d8795;
  font-size:10px;
}


/* MOBILE */

@media(max-width:700px){

  .home-screen{
    padding:16px;
  }

  .home-brand{
    top:18px;
    left:18px;
  }

  .home-card{
    padding:30px 20px;
  }

  .class-topbar{
    height:59px;
    padding:7px 12px;
  }

  .small-avatar{
    width:36px;
    height:36px;
  }

  .teacher-name{
    font-size:13px;
  }

  #countdown{
    font-size:17px;
  }

  .teacher-avatar-big{
    width:145px;
    height:145px;
    font-size:58px;
  }

  .student-bottom{
    width:145px;
    height:105px;
    min-width:0;
    min-height:0;
    bottom:18px;
  }

  .bottom-controls{
    height:66px;
  }

  .mic-status{
    display:none;
  }

  .control{
    min-width:105px;
    padding:11px 12px;
  }

  .lesson-mode{
    padding:5px 6px 0;
  }

  .lesson-people{
    height:62px;
  }

  .mini-person,
  .mini-student{
    width:92px;
    height:54px;
  }

  .blackboard{
    border-width:5px;
  }

  .board-top{
    height:31px;
  }

  .board-content{
    inset:31px 0 0;
  }
}

/* =========================================================
   MISSMАAM WHITE UI — APPROVED CLASSROOM LAYOUT
   ========================================================= */

html,
body,
#app{
  background:#ffffff !important;
  color:#111111 !important;
}

/* ALL SCREENS WHITE */
.screen,
.home-screen,
.calling-screen,
.class-screen{
  background:#ffffff !important;
  color:#111111 !important;
}

/* HOME */
.home-brand{
  color:#111111 !important;
}

.brand-title,
.home-card h1,
.home-card p,
.duration-title{
  color:#111111 !important;
}

.home-card{
  background:#ffffff !important;
  border:1px solid #e1e4e8 !important;
  box-shadow:0 12px 40px rgba(0,0,0,.08) !important;
}

.home-icon{
  background:#f1f3f5 !important;
}

.duration{
  background:#ffffff !important;
  color:#222222 !important;
  border-color:#d7dbe0 !important;
}

.duration.active{
  background:#eaf8ef !important;
  color:#159447 !important;
  border-color:#35c96f !important;
}

.start-class{
  background:#20c968 !important;
  color:#ffffff !important;
}

/* CALLING */
.calling-screen{
  background:#ffffff !important;
}

.calling-top,
.calling-name{
  color:#111111 !important;
}

.calling-text{
  color:#68717c !important;
}

.calling-timer{
  color:#20b85f !important;
}

.cancel-call{
  background:#ffffff !important;
  color:#d94b5c !important;
  border-color:#e5b9bf !important;
}

/* CLASS TOP BAR */
.class-topbar{
  background:#ffffff !important;
  color:#111111 !important;
  border-bottom:1px solid #e5e7eb !important;
}

.teacher-name{
  color:#111111 !important;
}

.teacher-status{
  color:#66707c !important;
}

.time-label{
  color:#7a838d !important;
}

#countdown{
  color:#18a957 !important;
}

/* TEACHER — FULL SCREEN */
.call-mode{
  background:#ffffff !important;
}

.teacher-main{
  background:#ffffff !important;
}

.teacher-visual{
  background:#ffffff !important;
}

/* Remove dark teacher glow */
.teacher-glow{
  background:transparent !important;
  filter:none !important;
}

/* TEACHER AVATAR */
.teacher-avatar-big{
  background:linear-gradient(145deg,#eef1f5,#d9dee6) !important;
  color:#111111 !important;
  border:1px solid #cbd1d9 !important;
  box-shadow:0 15px 45px rgba(0,0,0,.12) !important;
}

.teacher-main-name{
  color:#111111 !important;
}

.teacher-main-state{
  color:#19a957 !important;
}

/* STUDENT CAMERA — TOP RIGHT CORNER */
.student-bottom{
  position:absolute !important;
  z-index:50 !important;
  top:18px !important;
  right:18px !important;
  left:auto !important;
  bottom:auto !important;
  width:150px !important;
  height:108px !important;
  transform:none !important;
  border-radius:14px !important;
  overflow:hidden !important;
  background:#f1f3f5 !important;
  border:2px solid #ffffff !important;
  box-shadow:0 8px 28px rgba(0,0,0,.20) !important;
}

.student-bottom video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.student-label{
  position:absolute !important;
  left:8px !important;
  bottom:7px !important;
  background:rgba(0,0,0,.65) !important;
  color:#ffffff !important;
  border-radius:7px !important;
  padding:5px 8px !important;
  font-size:10px !important;
}

.student-label span{
  background:#35d879 !important;
}

/* BOTTOM CONTROLS */
.bottom-controls{
  background:#ffffff !important;
  border-top:1px solid #e5e7eb !important;
}

.mic-status{
  color:#68717c !important;
}

.control{
  background:#ffffff !important;
  color:#20252b !important;
  border-color:#d5d9df !important;
  box-shadow:0 2px 8px rgba(0,0,0,.06) !important;
}

.control.end{
  background:#fff1f2 !important;
  color:#d94b5c !important;
  border-color:#efc5ca !important;
}

/* LESSON MODE ALSO WHITE */
.lesson-mode{
  background:#ffffff !important;
}

.lesson-people{
  background:#ffffff !important;
  color:#111111 !important;
}

.mini-person,
.mini-student{
  color:#111111 !important;
}

.blackboard{
  background:#ffffff !important;
  border-color:#dfe3e8 !important;
  box-shadow:0 10px 35px rgba(0,0,0,.08) !important;
}

.board-top{
  background:#f7f8fa !important;
  color:#555e68 !important;
  border-bottom:1px solid #e1e4e8 !important;
}

.board-content{
  background:#ffffff !important;
  color:#111111 !important;
}

.board-title,
.board-line{
  color:#111111 !important;
}

/* MOBILE */
@media(max-width:700px){
  .student-bottom{
    top:14px !important;
    right:12px !important;
    width:125px !important;
    height:92px !important;
    bottom:auto !important;
    left:auto !important;
  }

  .teacher-avatar-big{
    width:180px !important;
    height:180px !important;
  }

  .teacher-main-name{
    font-size:23px !important;
  }

  .teacher-main-state{
    font-size:13px !important;
  }

  .class-topbar{
    background:#ffffff !important;
  }

  .bottom-controls{
    background:#ffffff !important;
  }
}

/* =========================================================
   CALLING SCREEN — MUSIC + OPTIONAL AD SLOT
   ========================================================= */

.calling-ad-slot{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  width:min(420px,88vw);
  min-height:64px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#f7f7f7;
  border:1px solid #e3e3e3;
  color:#666;
  text-align:center;
}

.calling-ad-slot.hidden{
  display:none!important;
}

#callingAdContent{
  width:100%;
  padding:10px 14px;
  font-size:12px;
}

@media(max-width:600px){
  .calling-ad-slot{
    bottom:18px;
    width:88vw;
    min-height:58px;
  }
}

/* =========================================================
   CALLING SCREEN — OPTIONAL AD SLOT
   ========================================================= */

.calling-screen{
  position:relative;
}

.calling-ad-slot{
  position:absolute;
  left:16px;
  right:16px;
  bottom:18px;
  min-height:72px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#f7f7f7;
  border:1px solid #e5e5e5;
  color:#555;
}

.calling-ad-slot.hidden{
  display:none!important;
}

#callingAdContent{
  width:100%;
  text-align:center;
  font-size:13px;
}

/* =========================================================
   MISSMАAM PROFESSIONAL CALLING UI
   ========================================================= */

.calling-screen .calling-top{
  color:#334155;
  font-weight:600;
}

.calling-screen .calling-dot{
  background:#4f46e5 !important;
  box-shadow:0 0 0 0 rgba(79,70,229,.45);
  animation:missmaam-call-dot 1.4s infinite;
}

.calling-screen .miss-avatar.large{
  background:linear-gradient(145deg,#334155,#1e293b);
  color:#ffffff;
  box-shadow:
    0 18px 45px rgba(15,23,42,.22),
    0 0 0 0 rgba(79,70,229,.38);
  animation:missmaam-call-ring 1.8s infinite;
}

.calling-screen .calling-name{
  color:#0f172a;
  font-weight:700;
}

.calling-screen .calling-text{
  color:#64748b;
}

.calling-screen .cancel-call{
  min-width:158px;
  min-height:52px;
  padding:0 28px;
  border-radius:14px;
  border:1px solid #cbd5e1;
  background:#ffffff;
  color:#334155;
  font-size:16px;
  font-weight:600;
  letter-spacing:.1px;
  box-shadow:
    0 6px 18px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.calling-screen .cancel-call:hover{
  background:#f8fafc;
  border-color:#94a3b8;
  box-shadow:0 9px 24px rgba(15,23,42,.12);
  transform:translateY(-1px);
}

.calling-screen .cancel-call:active{
  transform:translateY(1px) scale(.98);
  box-shadow:0 4px 12px rgba(15,23,42,.08);
}

@keyframes missmaam-call-ring{
  0%{
    box-shadow:
      0 18px 45px rgba(15,23,42,.22),
      0 0 0 0 rgba(79,70,229,.38);
  }
  55%{
    box-shadow:
      0 18px 45px rgba(15,23,42,.22),
      0 0 0 18px rgba(79,70,229,0);
  }
  100%{
    box-shadow:
      0 18px 45px rgba(15,23,42,.22),
      0 0 0 0 rgba(79,70,229,0);
  }
}

@keyframes missmaam-call-dot{
  0%,100%{
    opacity:1;
    transform:scale(1);
  }
  50%{
    opacity:.55;
    transform:scale(1.25);
  }
}