.icon.three-point {height: 15px;}
.icon.reset {height:20px;}

.button.login {position: absolute; right:30px; border:none}
.button.file {height: 80px; width:100px; border-style: dashed; border-width: 1px;}
.button.filter { height: 42px; width: 42px; border-radius: 12px; background: linear-gradient(135deg, #ffd9a8, #ffb07c); box-shadow: 0 3px 6px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.button.filter:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0,0,0,0.25); }
  
.button.cancel {position: absolute; right:10px; background-color: white; border: none;}
.button.login-form {margin-top:25px; height: 30px;}
.button.three-point { position: absolute; top: 10px; right: 10px; height: 32px; width: 32px; border-radius: 50%; background: #ffe0c2; border: none; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: transform 0.15s ease; }
.button.three-point:hover { transform: scale(1.1); }
  
.button.del {border: none; height: 30px; width: 100px; }
.button.edit {border: none; height: 30px; width: 100px;}
.button.reset { justify-self: end; height: 34px; padding: 0 16px; border-radius: 10px; background: #ffe0c2; color: #5a3d1e; border: 1px solid #e0b894; font-weight: 600; transition: background 0.2s ease; }
.button.reset:hover { background: #ffd1a1; }
.button.login-form { width: 100%; margin-top: 24px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #ffd9a8, #ffb07c); border: none; color: #5a3d1e; font-weight: 700; font-size: 1rem; box-shadow: 0 3px 8px rgba(0,0,0,0.15); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.button.login-form:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,0.22); }


/*.label.login { background: transparent;}*/
.label.login {
  font-weight: 600;
  color: #5a3d1e;
  font-size: 0.9rem;
  font-family: "Segoe UI", "Gill Sans", sans-serif;
}
.label.lesson { width: 170px; text-align: start; }
.label.langs { font-weight: 600; color: #5a3d1e; font-family: "Segoe UI", "Gill Sans", sans-serif; }
.label.lesson.footer { font-size: small; font-weight: bold; margin-right: 5px; }  

.textarea.lessons-desc-input { width: 100%; height: 150px; }

.body-layout { flex: 1 1 auto; display: flex; justify-content: center; padding: 1rem; min-height: 0px; }
.middle-column { width: 100%; max-width: 750px; padding: 1rem; position: relative; overflow: hidden; }
 
.lessons-header-layout { padding: 12px 20px 6px 10px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; flex-direction: column; gap: 8px; }

.lessons-filter-box { background: white; border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); overflow: hidden; max-height: 0; transition: max-height 0.35s ease; }
.lessons-filter-box.show { max-height: 300px; }
.lessons-filter-inner { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; align-items: center; }
  
.lessons-lesson-list { height: 100%; overflow: auto; scrollbar-width: none; -ms-overflow-style: none; }
.lessons-lesson-list::-webkit-scrollbar { display: none; }

.login-form-label {width:100px;}

.lessons-popup-buttons {margin-top:20px; gap:20px; justify-content: space-between;}
.lessons-title-input { width: 100%; padding: 6px; margin-bottom: 12px; border-radius: 5px; }
.lessons-file-input {display:none;}
.lessons-prev-image {display: none; width: 80px; height: 80px; border-radius: 10px;}
.lessons-language-box {gap: 10px; margin-top:10px; justify-content: space-between; }
.lessons-dropdown { width: 100%; height: 38px; padding: 6px 10px; font-size: 15px; color: #5a3d1e;  background-color: #fff7ec; border: 1px solid #e0b894; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: box-shadow 0.2s ease; }
.lessons-dropdown:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 180, 120, 0.4); }

.lessons-lesson-box { position: relative; margin-top: 14px; margin-right: 20px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, #fff7ec, #ffe8d2); box-shadow: 0 4px 10px rgba(0,0,0,0.08); opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s, transform .15s ease; cursor: pointer; }
.lessons-lesson-box:hover { transform: translateY(+5px) scale(1.01); box-shadow: 0 6px 14px rgba(0,0,0,0.12); }
  
.lessons-lesson-box { transform: translateY(10px); }
.lessons-lesson-box.show { opacity: 1; visibility: visible; }
  
.lessons-lesson-thumbnail { height: 64px; width: 64px; border-radius: 14px; margin-right: 16px; object-fit: cover; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
  
.lessons-lesson-title { font-weight: 700; font-size: 1.1rem; color: #5a3d1e; margin-bottom: 4px; font-family: "Segoe UI", "Gill Sans", sans-serif; }
.lessons-lesson-description { font-size: 0.9rem; color: #7a5a3a; opacity: 0.9; }
  
.lessons-lesson-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.lesson-tag { background: #ffe0c2; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; color: #5a3d1e; display: flex; align-items: center; gap: 4px; }
  
.lessons-lesson-footer-text {font-size: small; margin-right:5px;}
.lessons-lesson-button-box { max-height: 0; opacity: 0; transform: translateY(-6px); overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease; position: absolute; right: 10px; top: 50px; background: white; border-radius: 12px; padding: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
  
.button.three-point:hover + .lessons-lesson-button-box,
.lessons-lesson-button-box:hover { max-height: 200px; opacity: 1; transform: translateY(0); }
.lessons-lesson-button-box.open { max-height: 200px; opacity: 1; transform: translateY(0); }

.filter-smiley { transform: scale(0.5);}
.filter-smiley-text { transform: scale(2);}

.login-input {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  gap: 6px;
}

.login-input .input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e0b894;
  background: #fff7ec;
  color: #5a3d1e;
  font-size: 0.95rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.login-input .input:focus {
  outline: none;
  border-color: #ffb07c;
  box-shadow: 0 0 0 3px rgba(255, 180, 120, 0.35);
}
/*******************************************************************/
.empty-state { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; opacity: 0; animation: emptyFade 0.4s ease forwards; scale: 2; }
.empty-text {scale: 0.6; font-weight: bold;}


.sorry-cute { width: 160px; margin-bottom: 20px; overflow: visible; opacity: 0; transform: scale(0.8); animation: popIn 0.6s cubic-bezier(.34,1.56,.64,1) forwards, bob 3s ease-in-out infinite 1.2s; }

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

.face { fill: #fff7e6; stroke: #e6d2b5; stroke-width: 3; }
.blush { fill: #ffb3c6; opacity: 0.7; animation: blushPulse 2.4s ease-in-out infinite 1.4s; }
.eye { fill: #333; }
.sparkle { fill: white; opacity: 0.9; }
.brow { stroke: #333; stroke-width: 3; stroke-linecap: round; transform-origin: center; animation: browSad 1.2s ease forwards 0.4s; }
.mouth { stroke: #333; stroke-width: 3; fill: none; stroke-linecap: round; animation: mouthTremble 0.8s ease-in-out infinite 1.4s; }
.tear { fill: #9edaff; opacity: 0; animation: tearForm 2.8s ease-in-out infinite 1.6s; }

@keyframes tearForm {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  50% { transform: translateY(2px); }
  100% { opacity: 0; transform: translateY(0); }
}


/* Gentle bobbing */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@keyframes emptyFade {
  to { opacity: 1; }
}

@keyframes blushPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes mouthTremble {
  0%, 100% { d: path("M55 85 Q70 78 85 85"); }
  50% { d: path("M55 85 Q70 80 85 85"); }
}