:root{
  --bg-color:#ffffff;
  --card-bg:#ffffff;
  --text-color:#000000;
  --text-secondary:#000000;
  --primary-color:#3B1664;
  --primary-hover:#2a1048;
  --accent-soft:#f3eef7;
  --border-color:#d9d9d9;
  --green-bg:#e6f4ea;
  --green-text:#137333;
  --red-bg:#fce8e6;
  --red-text:#c5221f;
}
*{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
body{
  background-color:var(--bg-color)!important;
  color:var(--text-color)!important;
}
.app-card{
  background:var(--card-bg);
  border-color:var(--border-color)!important;
  box-shadow:0 4px 20px rgba(67,44,122,.04);
}
.soft-input{
  border-color:#dcd7e5!important;
  background:#fff!important;
  color:var(--text-color)!important;
}
.soft-input:focus{
  border-color:var(--primary-color)!important;
  box-shadow:0 0 0 2px rgba(67,44,122,.10)!important;
}
.primary-btn{
  background:var(--primary-color)!important;
  color:#fff!important;
}
.primary-btn:hover{background:var(--primary-hover)!important}
button{transition:all .15s ease}
header h1,#student-public-view h1{letter-spacing:-.04em}
.border{border-color:var(--border-color)!important}
.day-circle{width:44px;height:44px;border-radius:9999px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;color:var(--text-color)!important;background:transparent!important}.day-circle.selected{background:var(--primary-color)!important;color:#fff!important;border-radius:9999px!important}.day-circle.today{box-shadow:0 0 0 1px var(--primary-color)}.day-dot{display:block!important;width:5px!important;height:5px!important;min-width:5px!important;border-radius:9999px!important;background:var(--primary-color)!important;margin-top:2px}.day-circle.selected .day-dot{background:#fff!important}.day-circle.selected span.font-bold{color:#fff!important}
.balance-green{background:var(--green-bg)!important;color:var(--green-text)!important}
.balance-orange{background:#fff4df!important;color:#8a5a00!important}
.balance-red{background:var(--red-bg)!important;color:var(--red-text)!important}
.modal-bg{background:rgba(43,35,67,.42)}
.status{font-size:11px;font-weight:600;padding:4px 8px;border-radius:999px;white-space:nowrap}
.teacher-detail-list{max-height:230px;overflow-y:auto;padding-right:4px}
.teacher-detail-list::-webkit-scrollbar,#public-lessons::-webkit-scrollbar{width:5px}
.teacher-detail-list::-webkit-scrollbar-thumb,#public-lessons::-webkit-scrollbar-thumb{background:#cfc9da;border-radius:99px}

/* Цветовая палитра из референса — без изменения размеров/раскладки */
.text-slate-800,.text-slate-900,.font-bold,.font-semibold{color:var(--text-color)}
.text-slate-500,.text-slate-400{color:var(--text-secondary)!important}
.bg-slate-50{background:#faf9fc!important}
.bg-slate-100{background:var(--accent-soft)!important;color:var(--primary-color)!important}
.bg-indigo-50,.bg-violet-50{background:var(--accent-soft)!important;color:var(--primary-color)!important}
.bg-indigo-600{background:var(--primary-color)!important;color:#fff!important}
.hover\\:bg-indigo-700:hover{background:var(--primary-hover)!important}
.text-indigo-700{color:var(--primary-color)!important}
.bg-emerald-50{background:var(--green-bg)!important;color:var(--green-text)!important}
.text-emerald-600{color:var(--green-text)!important}
.bg-red-50{background:var(--red-bg)!important;color:var(--red-text)!important}
.bg-red-100{background:#f7dddd!important;color:var(--red-text)!important}
.text-red-600,.text-red-700{color:var(--red-text)!important}
.bg-amber-100{background:#fff1d8!important;color:#8a5a00!important}
.bg-emerald-100{background:var(--green-bg)!important;color:var(--green-text)!important}
.bg-blue-100{background:#e9e5f4!important;color:var(--primary-color)!important}
.bg-slate-100{background:var(--accent-soft)!important;color:var(--primary-color)!important}

@media(max-width:640px){
  .day-circle{width:38px;height:38px}
  .status{font-size:10px;padding:3px 6px}
  .app-card{border-radius:20px}
  header{align-items:flex-start!important;flex-direction:column!important}
  header nav{width:100%;display:grid!important;grid-template-columns:1fr 1fr auto}
  header nav button{padding:.65rem .7rem!important}
  .fixed.right-6{right:1rem;bottom:1rem}
  .modal-bg{align-items:flex-end!important}
  .modal-bg>.app-card{border-radius:24px 24px 0 0;max-height:92vh;overflow:auto}
}

/* Dark landing section */
.bg-slate-900,
.bg-slate-900 h2,
.bg-slate-900 h3,
.bg-slate-900 p,
.bg-slate-900 .font-bold,
.bg-slate-900 .text-white,
.bg-slate-900 .text-slate-300{
  color:#fff!important;
}
.bg-slate-900 .text-slate-300{
  color:#cbd5e1!important;
}

/* Password visibility controls */
.password-field{position:relative;width:100%}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:#6b6475;background:transparent}
.password-toggle:hover{background:#f3eef7;color:var(--primary-color)}
.password-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#teacher-header .teacher-nav{margin-right:2.75rem;flex-shrink:0}
#teacher-header .teacher-nav button{white-space:nowrap}
.fixed.right-6.bottom-6{line-height:1;align-items:center;justify-content:center}
@media(max-width:640px){#teacher-header .teacher-nav{margin-right:0!important;padding-top:2.75rem;width:100%;grid-template-columns:1fr 1fr!important}}


/* Modern weekday selector for recurring lessons */
#recurring-days{
  gap:8px;
  margin-top:10px;
}
#recurring-days label{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:8px 10px;
  border:1px solid #e5deed;
  border-radius:12px;
  background:#fff;
  color:#62566f;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  user-select:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
#recurring-days label:hover{
  border-color:#c8b5df;
  background:#faf7fd;
  transform:translateY(-1px);
}
#recurring-days label:has(.rec-day:checked){
  border-color:#4b1b70;
  background:#4b1b70;
  color:#fff;
  box-shadow:0 3px 8px rgba(75,27,112,.16);
}
#recurring-days .rec-day{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}
#recurring-days label:has(.rec-day:focus-visible){
  outline:3px solid #c8b5df;
  outline-offset:2px;
}
@media(max-width:420px){
  #recurring-days label{min-height:38px;padding:7px 4px;border-radius:10px}
}

/* Profile settings menu */
#teacher-header{flex-direction:row!important;align-items:center!important}
#teacher-header .teacher-header-actions{flex-shrink:0}
#teacher-header .teacher-nav{margin-right:0!important;padding-top:0!important;width:auto!important;display:flex!important;grid-template-columns:none!important}
#teacher-header .teacher-nav button{white-space:nowrap}
.profile-menu-button{color:var(--text-color);border:1px solid var(--border-color);transition:background .15s ease,transform .15s ease}
.profile-menu-button:hover{background:var(--accent-soft)!important;transform:translateY(-1px)}
.profile-menu-dropdown{background:var(--card-bg);border:1px solid var(--border-color);color:var(--text-color)}
.profile-menu-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;font-size:14px}
.profile-menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px;border-radius:10px;font-size:14px;font-weight:500;color:var(--text-color)}
.profile-menu-item:hover{background:var(--accent-soft)}
.profile-menu-item svg{width:19px;height:19px;flex-shrink:0}
.profile-menu-divider{height:1px;background:var(--border-color);margin:5px 3px}
.profile-logout{color:var(--red-text)}
:root[data-theme="dark"]{
 color-scheme:dark;--bg-color:#111018;--card-bg:#1d1a27;--text-color:#f2eef8;--text-secondary:#aaa2b7;
 --primary-color:#a879d4;--primary-hover:#8f5fbd;--accent-soft:#30283d;--border-color:#3c3549;
 --green-bg:#193529;--green-text:#9de0b6;--red-bg:#3b2228;--red-text:#ffaaa9;
}
:root[data-theme="dark"] body{background-color:var(--bg-color)!important;color:var(--text-color)!important}
:root[data-theme="dark"] .app-card{background:var(--card-bg)!important;color:var(--text-color);box-shadow:0 4px 20px rgba(0,0,0,.18)}
:root[data-theme="dark"] .text-slate-800,:root[data-theme="dark"] .text-slate-900,:root[data-theme="dark"] .font-bold,:root[data-theme="dark"] .font-semibold{color:var(--text-color)}
:root[data-theme="dark"] .text-slate-500,:root[data-theme="dark"] .text-slate-400{color:var(--text-secondary)!important}
:root[data-theme="dark"] .bg-slate-50,:root[data-theme="dark"] .bg-slate-100,:root[data-theme="dark"] .bg-white{background:#292433!important;color:var(--text-color)!important}
:root[data-theme="dark"] .bg-indigo-50,:root[data-theme="dark"] .bg-violet-50{background:#30263d!important;color:#d9b9f4!important}
:root[data-theme="dark"] .bg-indigo-600{background:var(--primary-color)!important;color:#17101f!important}
:root[data-theme="dark"] .text-indigo-700{color:#d9b9f4!important}
:root[data-theme="dark"] .soft-input{background:#17141e!important;color:var(--text-color)!important;border-color:#4a4158!important}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{color-scheme:dark}
:root[data-theme="dark"] .border,:root[data-theme="dark"] .border-t{border-color:var(--border-color)!important}
:root[data-theme="dark"] .bg-amber-100{background:#45351f!important;color:#f3d39a!important}
:root[data-theme="dark"] .bg-emerald-100{background:#193529!important;color:#9de0b6!important}
:root[data-theme="dark"] .bg-blue-100{background:#202e43!important;color:#a9ccff!important}
:root[data-theme="dark"] .bg-red-100{background:#3b2228!important;color:#ffaaa9!important}
:root[data-theme="dark"] .bg-slate-900{background:#09080d!important}
:root[data-theme="dark"] .modal-bg{background:rgba(0,0,0,.68)}
:root[data-theme="dark"] #student-sort-menu,:root[data-theme="dark"] #lesson-delete-dropdown{background:var(--card-bg)!important;color:var(--text-color);border-color:var(--border-color)!important}
:root[data-theme="dark"] .password-toggle{color:#c3b5d3}
:root[data-theme="dark"] .password-toggle:hover{background:#30283d;color:#e3c8ff}
@media(max-width:640px){
 #teacher-header{flex-direction:column!important;align-items:stretch!important;gap:14px!important;padding:16px!important}
 #teacher-header>div:first-child{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:8px!important;padding-right:52px;box-sizing:border-box}
 #teacher-header>div:first-child img{width:40px;height:40px;flex:0 0 40px;margin:0}
 #teacher-header>div:first-child>div{min-width:0;flex:1}
 #teacher-header>div:first-child h1{font-size:1.2rem;line-height:1.35rem;white-space:nowrap}
 #teacher-header>div:first-child p{font-size:.75rem;line-height:1rem;white-space:normal;margin-top:2px}
 #teacher-header .teacher-header-actions{width:100%;display:flex;justify-content:flex-start;align-items:stretch;gap:8px}
 #teacher-header .teacher-nav{display:flex!important;flex-direction:column!important;gap:8px;width:100%;flex:1;min-width:0}
 #teacher-header .teacher-nav button{width:100%;padding:.7rem .85rem!important;font-size:14px;text-align:left;flex:initial;min-width:0}
 #teacher-header .teacher-header-actions .profile-menu-wrap{position:absolute;right:16px;top:16px;display:block;z-index:60}
 #teacher-header .profile-menu-button{width:42px;height:42px}
 #teacher-header .profile-menu-dropdown{width:min(240px,calc(100vw - 40px))}
 #teacher-header .teacher-nav button{white-space:normal}
}
@media(max-width:380px){
 #teacher-header .teacher-nav button{padding:.65rem .7rem!important;font-size:13px}
}

/* Dashboard cards */
#tab-dashboard button.app-card{transition:transform .15s ease,box-shadow .15s ease}
#tab-dashboard button.app-card:hover{box-shadow:0 8px 24px rgba(67,44,122,.09)}


/* Keep student and group names readable on hover in both themes. */
#students-list .cursor-pointer:hover,
#groups-list .group-card > div:first-child:hover{
  background:var(--accent-soft)!important;
  color:var(--text-color)!important;
}
#students-list .cursor-pointer:hover .font-semibold,
#groups-list .group-card > div:first-child:hover button{
  color:var(--text-color)!important;
}
:root[data-theme="dark"] #students-list .cursor-pointer:hover,
:root[data-theme="dark"] #groups-list .group-card > div:first-child:hover{
  background:#30283d!important;
  color:#f2eef8!important;
}
:root[data-theme="dark"] #students-list .cursor-pointer:hover .font-semibold,
:root[data-theme="dark"] #groups-list .group-card > div:first-child:hover button{
  color:#f2eef8!important;
}