@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Tokens ─────────────────────────────────────── */
:root {
  --acc: 0,122,255;
  --bg:  #eef0f6;
  --bg3: #dde1ec;
  --gf:  rgba(255,255,255,.65);
  --gb:  rgba(255,255,255,.85);
  --gs:  0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.9);
  --gbl: blur(40px) saturate(180%);
  --t1: #0a0a12;
  --t2: #44444f;
  --t3: #8e8e9a;
  --r: 16px;
  --sp: cubic-bezier(.34,1.56,.64,1);
  --ez: cubic-bezier(.22,1,.36,1);
  /* safe areas */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --nh: 52px;
  --dh: 72px;
}
[data-dark] {
  --bg:  #06060b;
  --bg3: #18181f;
  --gf:  rgba(16,16,24,.82);
  --gb:  rgba(255,255,255,.08);
  --gs:  0 4px 32px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  --t1: #f2f2fa;
  --t2: #aaaab8;
  --t3: #55555f;
}

/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-family: 'Inter', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  overflow: hidden;   /* предотвращаем скролл на уровне html */
  margin: 0;
  padding: 0;
  background: var(--bg);
}
body {
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg); /* фон до самого низа */
  color: var(--t1);
  overflow: hidden;
  position: relative;
}
button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; border: none; background: none; }
a { color: rgba(var(--acc),1); text-decoration: none; }
input { font-family: inherit; }

/* ── Orbs ───────────────────────────────────────── */
.orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; animation: od linear infinite; }
[data-dark] .orb { opacity: .13; }
.o1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--acc),.65), transparent 65%); top: -180px; left: -150px; animation-duration: 22s; }
.o2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(88,86,214,.55), transparent 65%); bottom: -150px; right: -120px; animation-duration: 28s; animation-delay: -11s; }
.o3 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(52,199,89,.4), transparent 65%); top: 38%; left: 32%; animation-duration: 19s; animation-delay: -6s; }
@keyframes od { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(24px,-28px) scale(1.04)} 66%{transform:translate(-14px,18px) scale(.97)} 100%{transform:translate(0,0) scale(1)} }

/* ── Glass ──────────────────────────────────────── */
.g { background: var(--gf); backdrop-filter: var(--gbl); -webkit-backdrop-filter: var(--gbl); border: 1.5px solid var(--gb); box-shadow: var(--gs); }

/* ── Nav ────────────────────────────────────────── */
.nav {
  position: fixed;
  top: calc(env(safe-area-inset-top, 20px));
  left: 8px;
  right: 8px;
  height: 48px;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: rgba(var(--acc,0,122,255),0.06);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
  transition: background .3s, box-shadow .3s;
}

[data-dark] .nav {
  background: rgba(var(--acc,0,122,255),0.12);
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
}

/* кнопки в шторке — круглые */
.nav .ib {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;                 /* ширина = высоте для круга */
  height: 36px;                /* высота кнопки */
  border-radius: 50%;          /* полностью круглая */
  cursor: pointer;
  color: var(--t3,#000);
  background: rgba(var(--acc,0,122,255),0.05);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transition: all 0.25s;
}

.nav .ib:hover {
  background: rgba(var(--acc,0,122,255),0.12);
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(var(--acc,0,122,255),0.2),0 0 8px rgba(var(--acc,0,122,255),0.3);
}

[data-dark] .nav .ib:hover {
  background: rgba(var(--acc,0,122,255),0.2);
  box-shadow: 0 4px 16px rgba(var(--acc,0,122,255),0.3),0 0 12px rgba(var(--acc,0,122,255),0.4);
}

/* выравнивание блоков */
.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* заголовок */
.nav-title {
  font-size: 17px;
  font-weight: 800;
  background: linear-gradient(270deg, #0050FF, #8856D6, #34C759, #0050FF);
  background-size: 600% 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: xorasGradient 8s ease infinite;
  letter-spacing: -.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes xorasGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* ── Icon button ────────────────────────────────── */
.ib { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--t1); transition: transform .22s var(--sp); flex-shrink: 0; }
.ib:active { transform: scale(.78) !important; }

/* ── Page (scrollable area) ─────────────────────── */
.page {
  position: absolute;
  top: calc(var(--sat) + var(--nh));
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  padding: 16px 14px 8px;
  background: var(--bg); /* тоже фон для page */
}
/* max-width centering */
.page > .view { max-width: 660px; margin: 0 auto; }

/* ── Views ──────────────────────────────────────── */
.view { display: none; }
.view.on { display: block; animation: vin .28s var(--ez) both; }
@keyframes vin { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* ── Hero ───────────────────────────────────────── */
.hero { text-align: center; padding: 22px 0 20px; }

/* анимация подпрыгивания */
@keyframes hfl { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

/* иконка (теперь SVG логотип Xoras) */
.hero-ico { font-size: 52px; display: block; margin-bottom: 10px; animation: hfl 3s ease-in-out infinite; }

/* SVG логотип Xoras внутри hero-ico */
.hero-ico svg { width: 72px; height: 72px; display: inline-block; }
.hero-ico svg line { stroke-linecap: round; }
.hero-ico svg line, .hero-ico svg path {
  stroke-width: 2;
  stroke: url(#gradX); /* плавный градиент */
  stroke-linejoin: round;
  fill: none;
  animation: glowX 4s ease-in-out infinite alternate;
}

/* плавное свечение градиента */
@keyframes glowX {
  0% { filter: drop-shadow(0 0 6px rgba(var(--acc),0.5)); }
  50% { filter: drop-shadow(0 0 14px rgba(var(--acc),0.7)); }
  100% { filter: drop-shadow(0 0 6px rgba(var(--acc),0.5)); }
}

.hero-h { font-size: 22px; font-weight: 900; color: var(--t1); letter-spacing: -.4px; margin-bottom: 5px; }
.hero-s { font-size: 13px; color: var(--t3); font-weight: 500; }

/* градиент для SVG (можно менять под светлую/тёмную тему) */
.hero-ico svg defs linearGradient#gradX stop:first-child { stop-color: #34C759; }
.hero-ico svg defs linearGradient#gradX stop:nth-child(2) { stop-color: #007AFF; }
.hero-ico svg defs linearGradient#gradX stop:nth-child(3) { stop-color: #8856D6; }

/* тёмная тема градиент */
[data-dark] .hero-ico svg defs linearGradient#gradX stop:first-child { stop-color: #34C759; }
[data-dark] .hero-ico svg defs linearGradient#gradX stop:nth-child(2) { stop-color: #0050FF; }
[data-dark] .hero-ico svg defs linearGradient#gradX stop:nth-child(3) { stop-color: #8856D6; }

/* ── Dept sections ──────────────────────────────── */
.dept-sec { margin-bottom: 20px; }
.dept-lbl {
  font-size: 11px; font-weight: 700; color: var(--t3); text-transform: uppercase;
  letter-spacing: .9px; margin-bottom: 9px;
  display: flex; align-items: center; gap: 7px;
}
.dept-lbl::before { content:''; display:block; width:3px; height:12px; border-radius:2px; background:rgba(var(--acc),1); }
.group-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Group chip ─────────────────────────────────── */
.gcard {
  padding: 10px 20px; border-radius: 100px; font-size: 14px; font-weight: 700;
  color: var(--t2); transition: transform .28s var(--sp), color .2s, background .2s, border-color .2s, box-shadow .2s;
}
.gcard:active { transform: scale(.87) !important; }
.gcard.on {
  background: rgba(var(--acc),.14); border-color: rgba(var(--acc),.5);
  color: rgba(var(--acc),1); transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(var(--acc),.2), var(--gs);
}

/* ── Week bar ───────────────────────────────────── */
.week-bar { display: flex; background: var(--bg3); border-radius: 14px; padding: 3px; margin-bottom: 14px; }
.wt { flex:1; padding: 9px 6px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--t3); transition: all .28s var(--sp); }
.wt.on { background: var(--gf); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1.5px solid var(--gb); box-shadow: 0 2px 10px rgba(0,0,0,.09); color: var(--t1); transform: scale(1.02); }
.wt:active { transform: scale(.92) !important; }

/* ── Day tabs ───────────────────────────────────── */
.day-scroll-wrap { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 14px; padding-bottom: 2px; }
.day-scroll-wrap::-webkit-scrollbar { display: none; }
.day-tabs { display: flex; gap: 7px; padding: 1px 1px 3px; width: max-content; }
.daytab {
  padding: 8px 18px; border-radius: 100px; font-size: 13px; font-weight: 700;
  color: var(--t3); white-space: nowrap; transition: all .28s var(--sp);
  border: 1.5px solid var(--gb); background: var(--gf);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.daytab:active { transform: scale(.87) !important; }
.daytab.on { background: rgba(var(--acc),1); border-color: rgba(var(--acc),1); color: #fff; box-shadow: 0 6px 18px rgba(var(--acc),.35); transform: scale(1.04); }

/* ── Empty ──────────────────────────────────────── */
.empty { text-align: center; padding: 56px 20px; color: var(--t3); font-size: 14px; font-weight: 600; }
.empty-ico { font-size: 44px; display: block; margin-bottom: 14px; animation: hfl 3s ease-in-out infinite; }

/* ── Lesson card ────────────────────────────────── */
.lcard {
  display: flex; border-radius: var(--r); margin-bottom: 8px; overflow: hidden;
  animation: cin .3s var(--ez) both;
  transition: transform .2s;
}
.lcard:active { transform: scale(.975); }
@keyframes cin { from{opacity:0;transform:translateY(8px) scale(.97)} to{opacity:1;transform:none} }

.ltime {
  width: 54px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 12px 0;
  border-right: 1.5px solid var(--gb);
  background: linear-gradient(180deg, rgba(var(--acc),.15) 0%, rgba(var(--acc),.04) 100%);
}
.lnum { font-size: 22px; font-weight: 900; color: rgba(var(--acc),1); line-height: 1; }
.ltm  { font-size: 7.5px; font-weight: 700; color: var(--t3); text-align: center; line-height: 1.5; }

.lbody { flex: 1; padding: 10px 13px; min-width: 0; }
.li { padding: 7px 0; border-bottom: 1px solid rgba(var(--acc),.07); }
.li:first-child { padding-top: 0; }
.li:last-child  { border-bottom: none; padding-bottom: 0; }

.ltags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.tag { padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 800; }
.tt-l { background: rgba(88,86,214,.13);  color: #5856d6; }
.tt-p { background: rgba(255,45,85,.12);  color: #ff2d55; }
.tt-b { background: rgba(255,149,0,.12);  color: #ff9500; }

.lname   { font-size: 14px; font-weight: 700; color: var(--t1); line-height: 1.35; margin-bottom: 3px; word-break: break-word; }
.lmeta   { font-size: 12px; color: var(--t2); font-weight: 500; margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.lico    { font-size: 11px; opacity: .45; flex-shrink: 0; }
.lnote   { font-size: 10px; color: var(--t3); font-style: italic; margin-top: 3px; }

/* ── Search ─────────────────────────────────────── */
.search-wrap { position: relative; margin-bottom: 14px; }
.search-ico  { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--t3); font-size: 14px; pointer-events: none; }
.search-inp  { width: 100%; padding: 13px 16px 13px 40px; border-radius: var(--r); font-size: 15px; font-weight: 500; color: var(--t1); outline: none; transition: border-color .2s, box-shadow .2s; }
.search-inp::placeholder { color: var(--t3); }
.search-inp:focus { border-color: rgba(var(--acc),.5); box-shadow: 0 0 0 3px rgba(var(--acc),.1), var(--gs); }

/* ── About ──────────────────────────────────────── */
.about-card  { border-radius: 20px; padding: 20px; margin-bottom: 14px; }
.about-title { font-size: 20px; font-weight: 900; color: var(--t1); margin-bottom: 10px; letter-spacing: -.3px; }
.about-text  { font-size: 14px; color: var(--t2); line-height: 1.65; margin-bottom: 9px; }
.disclaimer  { border-radius: 14px; padding: 14px 16px; background: rgba(255,149,0,.1); border: 1.5px solid rgba(255,149,0,.25); font-size: 12px; color: var(--t2); line-height: 1.65; }
.disclaimer strong { color: #ff9500; }
.legend      { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.leg-item    { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--t2); font-weight: 600; }
.leg-dot     { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ── Result label ───────────────────────────────── */
.res-lbl { font-size: 11px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 10px; }


/* ── iOS‑style Bottom Dock ─────────────────────── */
.dock {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  height: 56px;
  min-width: 280px;
  max-width: 500px;
  background: rgba(var(--acc,0,122,255),0.06);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-radius: 28px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.16);
  z-index: 500;
  padding: 0 8px;
  transition: background .3s, box-shadow .3s;
  overflow: hidden;
}

[data-dark] .dock {
  background: rgba(var(--acc,0,122,255),0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

/* плавный слайдер активной кнопки */
.dock .db-slider {
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: calc(100% / 4 - 8px); /* подстрой под кол-во кнопок */
  background: rgba(var(--acc),0.2);
  border-radius: 20px;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
  z-index: 1;
}

/* ── iOS‑style Bottom Dock with sliding active background ── */
.dock {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 56px;
  min-width: 280px;
  max-width: 500px;
  border-radius: 28px;
  background: rgba(var(--acc,0,122,255),0.06);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  padding: 0 8px;
  overflow: hidden;
}

/* тёмная тема */
[data-dark] .dock {
  background: rgba(var(--acc,0,122,255),0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

.dock-slider {
  position: absolute;
  top: 4px;      /* немного отступ сверху плашки */
  bottom: 4px;   /* немного отступ снизу плашки */
  left: 0;
  width: 0;      /* JS потом устанавливает нужную ширину */
  background: rgba(var(--acc),0.2);
  border-radius: 20px;
  transition: all 0.25s cubic-bezier(.34,1.56,.64,1);
  z-index: 1;
  pointer-events: none; /* чтобы не мешал клику по кнопкам */
}

/* кнопки dock — вытянутые овалы */
.dock .db {
  all: unset;
  flex: 1;
  margin: 0 4px;
  height: 40px;
  min-width: 60px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s;
  color: var(--t3,#000);
  font-size: 12px;
  gap: 2px;
  position: relative;
  z-index: 2;
}

.dock .db i {
  font-size: 18px;
  transition: all 0.25s;
}

.dock .db span {
  font-size: 10px;
  font-weight: 700;
  transition: all 0.25s;
}

.dock .db:hover {
  transform: scale(1.05);
  background: rgba(var(--acc,0,122,255),0.08);
}

[data-dark] .db {
  background: rgba(16,16,24,0.5);
  color: var(--t2);
}

/* активная кнопка цвет + масштаб */
.db.on {
  color: rgba(var(--acc),1);
  transform: scale(1.05);
}

/* клик / анимация */
.db:active { transform: scale(.85) !important; }
.db i { font-size: 20px; }
.db span { font-size: 10px; }
/* ── Color panel ────────────────────────────────── */
.cpanel {
  position: fixed;
  bottom: calc(var(--sab) + var(--dh) + 18px);
  left: 50%; transform: translateX(-50%) translateY(12px);
  z-index: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ez), transform .3s var(--ez);
  padding: 14px 20px; border-radius: 20px; min-width: 220px;
}
.cpanel.open { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
.cp-title  { font-size: 11px; font-weight: 800; color: var(--t3); text-transform: uppercase; letter-spacing: .8px; text-align: center; margin-bottom: 12px; }
#swatches  { display: flex; gap: 10px; justify-content: center; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .28s var(--sp), border-color .2s; }
.sw:active { transform: scale(.78); }
.sw.on { border-color: var(--t1); transform: scale(1.2); }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 390px) {
  .lname { font-size: 13px; }
  .db { padding: 7px 14px; }
  .daytab { padding: 7px 14px; font-size: 12px; }
}
@media (max-width: 340px) {
  .db span { display: none; }
  .db { padding: 8px 16px; }
}