:root{
  --bg:#0b1220;
  --panel:#101a2e;
  --panel2:#0e1730;
  --text:#e7eefc;
  --muted:#9bb0d6;
  --accent:#3b82f6;
  --accent2:#22c55e;
  --danger:#ef4444;
  --line:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --focus:0 0 0 3px rgba(59,130,246,.35);
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background: 
    radial-gradient(1200px 800px at 50% -300px, rgba(59,130,246,.18), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color:var(--text);
  line-height:1.5;
}

a{color:inherit; text-decoration:none;}

.container{
  max-width:98%;
  margin:0 auto;
  padding:20px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 20px;
  box-shadow:var(--shadow);
  margin-bottom:24px;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.brand .title{
  font-size:18px;
  font-weight:700;
  letter-spacing:.2px;
  margin:0;
  padding:0 4px;
}
.brand .sub{
  font-size:13px;
  color:var(--muted);
  padding:0 4px;
}

.pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}

.pill{
  font-size:13px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  padding:6px 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 18px;
  border-radius:12px;
  cursor:pointer;
  transition: transform .04s ease, background .12s ease, border-color .12s ease;
  user-select:none;
  font-size:14px;
  line-height:1.4;
  margin:0 2px;
}
.btn:hover{background:rgba(255,255,255,.09)}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:none;box-shadow:var(--focus)}

.btn.primary{background:rgba(59,130,246,.16);border-color:rgba(59,130,246,.5)}
.btn.primary:hover{background:rgba(59,130,246,.22)}

.btn.success{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.45)}
.btn.success:hover{background:rgba(34,197,94,.20)}

.btn.danger{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.45)}
.btn.danger:hover{background:rgba(239,68,68,.20)}

.btn.ghost{background:rgba(255,255,255,.02)}
.btn.ghost:hover{background:rgba(255,255,255,.06)}

.btn.sm{padding:8px 14px;border-radius:10px;font-size:13px}

.grid{
  margin-top:20px;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:24px;
}

@media (max-width: 1050px){
  .grid{grid-template-columns:1fr}
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  margin-bottom:20px;
}

.card .card-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
}
.card .card-h h2{
  margin:0;
  font-size:16px;
  letter-spacing:.25px;
  font-weight:600;
  line-height:1.3;
  padding:0 4px;
}
.card .card-b{
  padding:18px 20px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}
.field label{
  font-size:14px;
  color:var(--muted);
  font-weight:500;
  line-height:1.4;
  padding:0 4px;
}
.field input, .field select, .field textarea{
  width:100%;
  background:rgba(0,0,0,.22);
  border:1px solid var(--line);
  color:var(--text);
  padding:12px 16px;
  border-radius:12px;
  outline:none;
  font-size:14px;
  line-height:1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:var(--focus);
  border-color:rgba(59,130,246,.6);
}
.field textarea{
  min-height:96px;
  resize:vertical;
}

/* Улучшенные выпадающие списки */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239bb0d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 48px !important;
  cursor: pointer;
}

select:hover {
  border-color: rgba(255,255,255,.15);
}

select option {
  background-color: var(--panel);
  color: var(--text);
  padding: 12px;
  margin: 4px 0;
}

.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}
.row > *{flex:1 1 140px}

.notice{
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  padding:14px 18px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.14);
  background:rgba(0,0,0,.16);
  margin:20px 0;
}

.table-wrap{overflow:auto; margin:20px 0;}
.tableWrap{overflow:auto; margin:20px 0;}

.muted{color:var(--muted); padding:0 4px;}

.h{
  font-size:20px;
  font-weight:800;
  letter-spacing:.2px;
  margin:0 0 16px 0;
  line-height:1.3;
  padding:0 4px;
}

table.sched, table.mini{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

table.sched th, table.sched td,
table.mini th, table.mini td{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:12px 16px;
  vertical-align:top;
}

table.sched th, table.mini th{
  background:rgba(16,26,46,.95);
  color:var(--muted);
  font-size:13px;
  text-align:left;
  position:sticky;
  top:0;
  z-index:2;
  font-weight:600;
  line-height:1.4;
  padding:12px 16px;
}

table.sched th:first-child,
table.sched td:first-child{
  position:sticky;
  left:0;
  z-index:1;
  background:rgba(16,26,46,.95);
}

table.sched tr:first-child th,
table.mini tr:first-child th{border-top:1px solid var(--line)}
table.sched th:first-child,
table.mini th:first-child{border-left:1px solid var(--line)}
table.sched td:first-child,
table.mini td:first-child{border-left:1px solid var(--line)}

.col-lesson{width:70px}
.col-time{width:130px}

table.mini input, table.mini select{
  width:100%;
  background:rgba(0,0,0,.22);
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 14px;
  border-radius:10px;
  outline:none;
  font-size:13px;
  line-height:1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}
table.mini input:focus, table.mini select:focus{
  box-shadow:var(--focus);
  border-color:rgba(59,130,246,.6);
}

.tabs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.tab{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 16px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
  transition:background .2s ease;
  line-height:1.4;
  margin:0 2px;
}
.tab.active{
  background:rgba(59,130,246,.16);
  border-color:rgba(59,130,246,.5);
}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:20px 0;
}
@media (max-width: 700px){.grid2{grid-template-columns:1fr}}

.label{
  display: inline-block;
  margin-top:15px;
  font-size:14px;
  color:var(--muted);
  margin-bottom:8px;
  padding:0 4px;
}
.grid2 input{
  width:100%;
  background:rgba(0,0,0,.22);
  border:1px solid var(--line);
  color:var(--text);
  padding:12px 16px;
  border-radius:12px;
  outline:none;
  font-size:14px;
  line-height:1.5;
}
.grid2 input:focus{
  box-shadow:var(--focus);
  border-color:rgba(59,130,246,.6);
}

/* Toast */
.toast{
  position:fixed;
  left:20px;
  bottom:20px;
  max-width:min(520px, calc(100vw - 40px));
  padding:14px 18px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(16,26,46,.98);
  color:var(--text);
  box-shadow:var(--shadow);
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:60;
  line-height:1.5;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{border-color:rgba(34,197,94,.55)}
.toast.warn{border-color:rgba(59,130,246,.55)}
.toast.err{border-color:rgba(239,68,68,.55)}

.timetable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:920px;
}
.timetable th, .timetable td{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:14px 16px;
  vertical-align:top;
  line-height:1.5;
}
.timetable th{
  position:sticky;
  top:0;
  background:var(--panel);
  backdrop-filter: blur(6px);
  z-index:2;
  font-size:13px;
  text-align:left;
  color:var(--muted);
  font-weight:600;
  line-height:1.4;
}

.timetable th:first-child, .timetable td:first-child{
  position:sticky;
  left:0;
  background:var(--panel);
  z-index:1;
}

.timetable tr:first-child th{border-top:1px solid var(--line)}
.timetable th:first-child{border-left:1px solid var(--line)}
.timetable td:first-child{border-left:1px solid var(--line)}

.cell{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cell .sub{
  font-weight:700;
  font-size:14px;
  line-height:1.3;
  padding:0 2px;
}
.cell .subject{
  font-weight:700;
  font-size:14px;
  line-height:1.3;
  padding:0 2px;
}
.cell .meta{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
  padding:0 2px;
}
.cell .room{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
  padding:0 2px;
}

.cell.editable{
  cursor:pointer;
  border-radius:10px;
  padding:12px;
  background:rgba(255,255,255,.02);
  transition:background .2s ease;
  margin:0 4px;
}
.cell.editable:hover{background:rgba(59,130,246,.08)}

.cell-sub{
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity: 0.5;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line);
  background:rgba(0,0,0,.14);
  padding:6px 12px;
  border-radius:999px;
  line-height:1.4;
  margin:0 4px;
}

/* Teacher view lines */
.tcell-line{display:block; margin:2px 0; line-height:1.25}
.tcell-subj{font-weight:700; font-size:13px}
.tcell-class{color:var(--muted); font-size:12px; margin-left:6px}

/* Small separator inside modal */
.hr{height:1px; background:var(--line); margin:12px 0}

/* Модальное окно - убрана прозрачность */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.75);
  z-index:50;
  backdrop-filter: blur(4px);
}
.modal.show{display:flex}
.modal .dialog{
  width:min(640px, 100%);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.dialog .dialog-h{
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.dialog .dialog-h .t{
  font-weight:700;
  font-size:18px;
  line-height:1.3;
  padding:0 4px;
}
.dialog .dialog-b{
  padding:20px;
}
.dialog .dialog-f{
  padding:20px;
  border-top:1px solid var(--line);
  display:flex;
  gap:12px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

hr.sep{
  border:none;
  border-top:1px solid var(--line);
  margin:20px 0;
}

.small{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  padding:0 4px;
}

.login{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:40px 20px;
}
.login .box{
  width:min(560px, 100%);
  padding:28px 32px;
  background:var(--panel);
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

/* Дополнительные улучшения для отступов */
.form {
  flex-direction: column;
  gap: 20px;
}

.divider {
  height: 1px;
  background: var(--line);
  margin: 24px 0;
}

summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 14px;
  line-height: 1.4;
}

details {
  margin: 20px 0;
}

code {
  background: rgba(0,0,0,.2);
  padding: 4px 8px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.4;
  margin: 0 4px;
}

ol, ul {
  padding-left: 24px;
  margin: 16px 0;
}

li {
  margin-bottom: 8px;
  line-height: 1.6;
  padding:0 4px;
}

/* Улучшение видимости разделов на dashboard */
#scheduleMount {
  padding: 10px 0;
}

/* Улучшение для кнопок в панели управления */
#btnOpenDb, #btnSave, #btnExport, #btnManage, #btnSettings, #btnLogout {
  min-width: fit-content;
}

/* Улучшение для полей ввода на странице входа */
.input {
  width:100%;
  background:rgba(0,0,0,.22);
  border:1px solid var(--line);
  color:var(--text);
  padding:12px 16px;
  border-radius:12px;
  outline:none;
  font-size:14px;
  line-height:1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
  margin-top:4px;
}

/* Улучшение для заголовков карточек */
h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: var(--text);
  line-height: 1.3;
  padding: 0 4px;
}

/* Улучшение для меток в формах */
label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--muted);
  padding: 0 4px;
}

/* Специальные стили для текста в ячейках таблиц, чтобы не был впритык */
td, th {
  line-height: 1.5;
}

/* Улучшение для текста внутри таблиц */
table {
  line-height: 1.5;
}

/* Дополнительные отступы для контента внутри карточек */
.card-content {
  padding: 4px 8px;
}

/* Улучшение для текста в кнопках и элементах управления */
button, input, select, textarea {
  font-family: var(--font);
}

/* Улучшение для выпадающих списков в модальных окнах */
#modalBody select {
  width: 100%;
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 12px;
  outline: none;
  font-size: 14px;
  line-height: 1.5;
}

/* Улучшение для текста в уведомлениях */
#msg.toast {
  margin-top: 16px;
  padding: 12px 16px;
}

/* Улучшение для текста в бренде на странице входа */
.brand-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.3;
  padding: 0 4px;
}

.brand-sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
  padding: 0 4px;
}

/* Улучшение для списков в описании */
ol.muted, ul.muted {
  line-height: 1.6;
}

/* Улучшение для кода в описании паролей */
details div.muted code {
  margin: 0 4px;
}

/* Улучшение для контейнера с паролем на странице входа */
#passwordWrap {
  margin-top: 6px;
}

/* Улучшение для всех текстовых элементов - добавим отступы слева/справа */
p, span, div, h1, h2, h3, h4, h5, h6 {
  padding: 0 4px;
}

/* Улучшение для карточек на странице входа */
.login .card {
  margin-bottom: 16px;
}

/* Улучшение для элементов форм в модалках */
.modal input, .modal select, .modal textarea {
  padding: 12px 16px !important;
}

/* Улучшение для текста в таблицах управления */
table.mini td, table.mini th {
  padding: 10px 14px;
}