:root{
  --bg:#0a0c12; --card:rgba(22,28,48,.86); --card-border:rgba(255,255,255,.12);
  --text:#f4f7ff; --muted:#c3cceb; --accent:#8ab4ff; --accent-strong:#c6dcff;
  --link:#a7c5ff; --link-hover:#d6e4ff; --ok:#79ffb0; --danger:#ff8b8b; --warning:#ffd27d;
  --shadow:0 10px 35px rgba(0,0,0,.35); --radius:16px; --base-font:16.5px;
}
:root[data-theme="light"]{
  --bg:#f7f9fd; --card:#ffffff; --card-border:rgba(0,0,0,.08);
  --text:#0d1320; --muted:#52607a; --accent:#2457ff; --accent-strong:#0e2bbd;
  --link:#0f43ff; --link-hover:#0725a8;
  --ok:#0ea466; --danger:#c02626; --warning:#a36200;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body{ margin:0; min-height:100vh; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif; font-size:var(--base-font); line-height:1.65; color:var(--text); background: var(--bg) }
a{ color:var(--link); text-decoration:none } a:hover{ color:var(--link-hover); text-decoration:underline }
.topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--card-border); background:rgba(15,19,36,.08); backdrop-filter:blur(10px) }
.container{ max-width:1200px; margin:24px auto; padding:0 16px }
.card{ background:var(--card); border:1px solid(var(--card-border)); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow) }
label{ display:block; margin:8px 0; font-weight:600 }
select,input,button{ padding:10px 12px; border-radius:12px; border:1px solid var(--card-border); background:rgba(127,127,127,.06); color:var(--text) }
button{ background:linear-gradient(180deg, var(--accent), #3a64ff); color:#fff; border:none; font-weight:800; cursor:pointer }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--card-border); border-radius:999px; color:var(--accent-strong); background:rgba(127,127,127,.08) }
.muted{ color:var(--muted) }
.timetable{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  overflow-x:hidden;
}

.timetable--compact .day ul{ margin:0; padding-left:16px }
.day{ border:1px solid var(--card-border); border-radius:16px; padding:12px; background:linear-gradient(180deg, rgba(127,127,127,.08), rgba(127,127,127,.03)) }
.day h3{ margin:0 0 8px; color:var(--accent-strong) }
@media (max-width:1080px){ .timetable{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:700px){ .timetable{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .timetable{ grid-template-columns:1fr } .badge{ padding:5px 8px } select,input,button{ padding:10px } }
@media print{ body{ background:#fff; color:#000 } .topbar{ display:none } .card{ box-shadow:none; border:none; padding:0 } a{ color:#000; text-decoration:none } }

@media (max-width: 600px) {
  :root {
    --base-font: 18px; 
  }
    :root[data-theme="light"] select,
  :root[data-theme="light"] input {
    background-color: #ffffff;
  }
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) input {
    background-color: #111827;  /* рівний темний фон */
  }


  body {
    font-size: var(--base-font);
    overflow-x: hidden; 
  }

  .container {
    padding: 0 10px;
    margin: 12px auto;
  }

  .card {
    padding: 14px 12px;
    border-radius: 16px;
  }

 
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .topbar h1 {
    font-size: 1.05rem;
  }
  .topbar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }


  select,
  input,
  button {
    font-size: 1rem;
    min-height: 50px;           
    padding: 12px 14px;
    width: 100%;                
    box-sizing: border-box;
  }
  select option {
    font-size: 1rem;
  }

  label {
    display: block;
    font-size: 0.95rem;
  }

 
  #filterForm {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }

  #filterForm label {
    width: 100%;
    margin-bottom: 2px;
  }

  #filterForm button,
  #filterForm .badge {
    width: 100%;
    text-align: center;
  }


  .timetable {
    grid-template-columns: 1fr;
    gap: 10px;
    overflow-x: visible;   
  }

  .day {
    padding: 12px;
  }

  .day h3 {
    font-size: 1.05rem;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    gap: 4px;
  }

  .timetable .slot {
    font-weight: 700;
    margin-bottom: 3px;
  }

  .timetable .subject {
    font-size: 1rem;
    margin-bottom: 2px;
  }

  .timetable .meta,
  .timetable .time,
  .timetable .notes {
    font-size: 0.95rem;
  }


  .badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}



.slot {
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 0.95em;
}

.pair-num {
  font-weight: 800;
  color: var(--accent-strong);
  font-size: 1.05em;
}

.pair-label {
  margin-left: 4px;
  color: var(--muted);
  font-weight: 600;
}


.slot {
  padding: 4px 8px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


.slot-1 {
  background: rgba(255, 210, 125, 0.16);
  border-left: 3px solid var(--warning);
}
.slot-1 .pair-num,
.slot-1 .pair-label {
  color: var(--warning);
}


.slot-2 {
  background: rgba(121, 255, 176, 0.14);
  border-left: 3px solid var(--ok);
}
.slot-2 .pair-num,
.slot-2 .pair-label {
  color: var(--ok);
}


.slot-3 {
  background: rgba(138, 180, 255, 0.16);
  border-left: 3px solid var(--accent);
}
.slot-3 .pair-num,
.slot-3 .pair-label {
  color: var(--accent);
}


.slot-4 {
  background: rgba(198, 220, 255, 0.18);
  border-left: 3px solid var(--accent-strong);
}
.slot-4 .pair-num,
.slot-4 .pair-label {
  color: var(--accent-strong);
}


.slot-5 {
  background: rgba(195, 204, 235, 0.16);
  border-left: 3px solid var(--muted);
}
.slot-5 .pair-num,
.slot-5 .pair-label {
  color: var(--muted);
}





:root[data-theme="light"] select,
:root[data-theme="light"] input,
:root[data-theme="light"] textarea {
  background-color: #ffffff;
  color: #0d1320; 
  border: 1px solid rgba(0,0,0,.15);
}

:root[data-theme="light"] select option {
  background-color: #ffffff;
  color: #0d1320;
}


:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) input,
:root:not([data-theme="light"]) textarea {
  background-color: #111827;
  color: #f9fafb;
  border: 1px solid rgba(255,255,255,.25);
}

:root:not([data-theme="light"]) select option {
  background-color: #111827;
  color: #f9fafb;
}

.slot-first .pair-num,
.slot-first .pair-label {
  color: #ffd27d; 
}

@media (max-width:600px){
  html, body{
    overflow-x:hidden;
  }
  .container{
    overflow-x:hidden;
  }
}

.tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.tab-btn{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--card-border);
  background:rgba(127,127,127,.08);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}
.tab-btn.is-active{
  background:linear-gradient(180deg, var(--accent), #3a64ff);
  color:#fff;
  border:none;
}


#timetable.hide-empty li.slot-empty{ display:none; }


li.is-now{
  outline:2px solid rgba(121,255,176,.55);
  box-shadow:0 0 0 4px rgba(121,255,176,.12);
  border-radius:14px;
}
li.is-next{
  outline:2px solid rgba(255,210,125,.55);
  box-shadow:0 0 0 4px rgba(255,210,125,.12);
  border-radius:14px;
}


.timetable#timetable.hide-empty .day ul > li.slot-empty {
  display: none !important;
}


@media (max-width: 900px) {

  /* Контейнер днів */
  .timetable {
    display: flex;
    gap: 12px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    padding-bottom: 8px;
  }

  
  .timetable .day {
    flex: 0 0 92%;              
    scroll-snap-align: start;

    background: var(--card-bg, #101735);
    border-radius: 14px;
    padding: 10px;

    box-shadow: 0 8px 24px rgba(0,0,0,.25);
  }

 
  .timetable .day h3 {
    position: sticky;
    top: 0;
    z-index: 2;

    background: linear-gradient(
      to bottom,
      var(--card-bg, #101735) 80%,
      rgba(16,23,53,0)
    );

    padding-bottom: 6px;
    margin-top: 0;
  }

 
  .timetable .day ul {
    margin: 0;
    padding: 0;
  }

 
  .timetable::-webkit-scrollbar {
    display: none;
  }
  .timetable {
    scrollbar-width: none;
  }
  
  
}
.fb-rate.is-active{
  outline: 2px solid rgba(255,255,255,.6);
  transform: translateY(-1px);
}


@media (max-width: 900px) {
  .timetable .day {
    background: var(--card) !important;      /* було var(--card-bg, #101735) */
    border: 1px solid var(--card-border) !important;
  }

  .timetable .day h3 {
    background: linear-gradient(
      to bottom,
      var(--card) 80%,
      rgba(0,0,0,0)
    ) !important;
  }
}
.schedule-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  font-size:13px;
  opacity:.9;
}

.schedule-status .status-ok{
  background: rgba(121,255,176,.15);
  color: var(--ok);
  border: 1px solid rgba(121,255,176,.35);
}

#schedule .day h3 .muted {
  display: none;
}

@media (max-width: 600px){
 
  #hideEmptyToggle{
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
  }


  .schedule-controls .toggle{
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
  }

  .schedule-controls .toggle .muted{
    font-size: 0.95rem;
    line-height: 1.2;
  }
}


@media (max-width: 900px){
  .timetable{
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 8px;
    scroll-padding-right: 8px;
  }

  .timetable .day{
   
    flex: 0 0 calc(100% - 16px);
    scroll-snap-align: start;
    scroll-snap-stop: always; 
  }
}