:root{
  --bg:#f4f6fb; --card:#ffffff; --ink:#151a25; --muted:#6b7488;
  --line:#e3e7f0; --accent:#1f4fd8; --accent-soft:#e8eefc;
  --ok:#0f8a5f; --warn:#b4620a; --now:#fff6e0; --now-line:#e8a33d;
  --radius:14px; --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1218; --card:#171b24; --ink:#e8ebf2; --muted:#98a1b5;
    --line:#262c38; --accent:#7fa2ff; --accent-soft:#1c2740;
    --ok:#4fd6a0; --warn:#e0a35c; --now:#2a2415; --now-line:#a4791f;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
  overflow-wrap:break-word;
}
button,input{-webkit-tap-highlight-color:transparent; touch-action:manipulation}
button{-webkit-user-select:none; user-select:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
h1,h2,h3{line-height:1.25;margin:0 0 .4em}
h1{font-size:1.75rem}
h2{font-size:1.25rem}
.muted{color:var(--muted)}

/* ---------- шапка ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top));
  background:var(--card); border-bottom:1px solid var(--line);
}
.topbar-title{display:flex;flex-direction:column;min-width:0;flex:1}
.topbar-title strong,.topbar-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-title strong{font-size:1rem}
.topbar-title span{font-size:.78rem}
.icon-btn{
  flex:none; width:38px; height:38px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  font-size:1.25rem; line-height:1; display:grid; place-items:center;
}
.icon-btn:hover{background:var(--accent-soft); border-color:var(--accent-soft)}
.icon-btn.spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* кнопка «добавить на экран Домой» — заметнее прочих, её надо найти с первого раза */
.icon-btn.is-accent{background:var(--accent-soft); border-color:transparent; font-size:1.1rem}

/* последний рубеж, если буфер обмена недоступен: ссылку видно и можно выделить */
.share-url{
  width:100%; margin:0 0 12px; padding:9px 11px; font:inherit; font-size:.82rem;
  border:1px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--ink);
}

/* ---------- предупреждение о возрасте данных ---------- */
.stale{
  display:flex; gap:10px; align-items:flex-start;
  margin:0 0 14px; padding:11px 13px; border-radius:12px;
  background:#fdebc8; color:#7a4f00; font-size:.86rem; line-height:1.45;
}
.stale.is-bad{background:#fbdcdc; color:#8c2b2b}
.stale-icon{flex:none; font-size:1rem; line-height:1.3}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .stale{background:#4a3711; color:#f5c968}
  :root:not([data-theme="light"]) .stale.is-bad{background:#4d2020; color:#ffb3b3}
}

/* ---------- окно с инструкцией ---------- */
.overlay{
  position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(15,20,32,.5); animation:fade .15s ease;
}
@media(min-width:620px){.overlay{align-items:center}}
.sheet{
  width:100%; max-width:460px; max-height:88vh; overflow-y:auto;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  background:var(--card); color:var(--ink);
  border-radius:var(--radius) var(--radius) 0 0;
  animation:rise .22s cubic-bezier(.2,.8,.3,1);
}
@media(min-width:620px){.sheet{border-radius:var(--radius); margin:16px}}
@keyframes rise{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.sheet-head{display:flex; align-items:flex-start; gap:12px; margin-bottom:6px}
.sheet-head h2{margin:0; flex:1; font-size:1.15rem}
.sheet-lead{margin:0 0 16px; color:var(--muted); font-size:.9rem; line-height:1.5}
.sheet-note{
  margin:14px 0 0; padding:10px 12px; border-radius:10px;
  background:var(--accent-soft); color:var(--ink); font-size:.82rem; line-height:1.45;
}
.primary-btn{
  display:block; width:100%; margin:0 0 16px; padding:13px 16px; cursor:pointer;
  border:0; border-radius:12px; background:var(--accent); color:#fff;
  font:inherit; font-weight:700; font-size:.98rem;
}
.os-tabs{display:flex; gap:6px; padding:4px; margin-bottom:16px;
  background:var(--bg); border-radius:12px}
.os-tab{
  flex:1; padding:9px 10px; cursor:pointer; border:0; border-radius:9px;
  background:transparent; color:var(--muted); font:inherit; font-weight:600; font-size:.9rem;
}
.os-tab.is-active{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}
.steps{margin:0; padding-left:22px; display:grid; gap:12px}
.steps li{line-height:1.5; font-size:.92rem}
.steps b{font-weight:700}
.steps .muted{font-size:.82rem}

main{max-width:960px; margin:0 auto; padding:20px 16px 40px}
.screen{animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- приветствие ---------- */
.hero{text-align:center; padding:24px 0 8px}
.hero-logo{display:block; margin:0 auto 16px; width:min(190px,46vw); height:auto}
.hero h1{margin:0}
.role-cards{display:grid; gap:14px; grid-template-columns:1fr; margin:28px 0 8px}
@media(min-width:620px){.role-cards{grid-template-columns:1fr 1fr}}
.role-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:20px; cursor:pointer; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); color:inherit; font:inherit; transition:.15s;
}
.role-card:hover{border-color:var(--accent); transform:translateY(-2px)}
.role-icon{font-size:1.9rem}
.role-name{font-size:1.15rem; font-weight:650; margin-top:6px}
.role-hint{color:var(--muted); font-size:.9rem}

/* ---------- поиск и списки ---------- */
.search{
  width:100%; padding:13px 15px; margin:6px 0 14px; font:inherit;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:12px; outline:none;
}
.search:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.chip{
  padding:6px 13px; border-radius:999px; cursor:pointer; font:inherit; font-size:.88rem;
  background:var(--card); color:var(--muted); border:1px solid var(--line);
}
.chip.is-active{background:var(--accent); border-color:var(--accent); color:#fff}
.group-grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.group-btn{
  padding:14px 12px; cursor:pointer; font:inherit; font-weight:600;
  background:var(--card); color:inherit; border:1px solid var(--line);
  border-radius:12px; text-align:center; transition:.12s;
}
.group-btn:hover{border-color:var(--accent); background:var(--accent-soft)}
.teacher-list{display:grid; gap:8px}
.teacher-btn{
  padding:13px 16px; cursor:pointer; font:inherit; text-align:left;
  background:var(--card); color:inherit; border:1px solid var(--line); border-radius:12px;
}
.teacher-btn:hover{border-color:var(--accent); background:var(--accent-soft)}
.teacher-btn small{color:var(--muted); margin-left:8px}

/* ---------- расписание ---------- */
.who{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  column-gap:12px; row-gap:4px; margin-bottom:14px;
}
.who .badge{grid-area:1/1; justify-self:start}
.who-actions{grid-area:1/2; justify-self:end; display:flex; gap:14px}
.who h2{grid-area:2/1/auto/-1; margin:0}
.badge{
  padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:600;
  background:var(--accent-soft); color:var(--accent);
}
.link-btn{
  background:none; border:none; padding:0; cursor:pointer; font:inherit;
  color:var(--accent); text-decoration:underline; text-underline-offset:3px;
}
.tabs{
  position:sticky; top:var(--topbar-h,62px); z-index:15;
  display:flex; gap:4px; padding:4px; margin-bottom:18px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 6px 16px -12px rgba(16,24,40,.5);
}
.tab{
  flex:1; padding:11px 6px; cursor:pointer; font:inherit; font-weight:600; font-size:.94rem;
  background:transparent; color:var(--muted); border:none; border-radius:9px;
}
.tab.is-active{background:var(--accent); color:#fff}

.day{margin-bottom:26px}
.day-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding-bottom:8px; margin-bottom:10px; border-bottom:1px solid var(--line);
}
.day-head h3{margin:0; font-size:1.05rem}
.day-head .day-date{color:var(--muted); font-size:.9rem}
.day-head .day-tag{
  padding:2px 9px; border-radius:999px; font-size:.72rem; font-weight:700;
  background:var(--ok); color:#fff; letter-spacing:.02em;
}

.lesson{
  display:grid; gap:2px 14px; grid-template-columns:78px 1fr;
  padding:12px 14px; margin-bottom:8px;
  background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--line); border-radius:12px;
}
.lesson.is-now{background:var(--now); border-left-color:var(--now-line)}
.lesson.is-past{opacity:.55}
.lesson-time{grid-row:1/span 3; font-variant-numeric:tabular-nums}
.lesson-time b{display:block; font-size:.95rem; font-weight:650}
.lesson-time span{display:block; color:var(--muted); font-size:.82rem}
.lesson-time i{display:block; color:var(--muted); font-size:.72rem; font-style:normal; margin-top:2px}
.lesson-subject{font-weight:600}
.lesson-meta{color:var(--muted); font-size:.88rem; display:flex; flex-wrap:wrap; gap:4px 12px}
.lesson-meta .room::before{content:"🚪 "}
.lesson-meta .who::before{content:"👤 "}
.lesson-meta .grp::before{content:"👥 "}
.sub-badge{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  font-size:.7rem; font-weight:700; background:var(--accent-soft); color:var(--accent);
  vertical-align:middle;
}
/* замена преподавателя — выделяем, это то, что легко пропустить */
.sub-badge.is-swap{ background:#fdebc8; color:#8a5a00; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sub-badge.is-swap{ background:#4a3711; color:#f5c968; }
}
.empty{
  padding:28px 20px; text-align:center; color:var(--muted);
  background:var(--card); border:1px dashed var(--line); border-radius:var(--radius);
}
.empty .big{font-size:2rem; display:block; margin-bottom:6px}
.status{margin-top:16px; font-size:.9rem}
.status.err{color:#c0392b}
.skeleton{height:74px; margin-bottom:8px; border-radius:12px;
  background:linear-gradient(90deg,var(--card),var(--line),var(--card));
  background-size:200% 100%; animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}

.foot{
  max-width:960px; margin:0 auto; padding:0 16px 30px;
  display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.8rem;
}

/* ---------- телефоны ---------- */
@media (max-width:460px){
  main{padding:16px 12px 32px}
  h1{font-size:1.5rem}
  h2{font-size:1.15rem}
  .hero{padding:12px 0 4px}
  .hero-logo{width:min(150px,42vw); margin-bottom:12px}
  .role-cards{gap:10px; margin:20px 0 4px}
  .role-card{padding:16px}

  .topbar{padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top)); gap:10px}
  .topbar-title span{display:none}          /* на узком экране подзаголовок лишний */
  .icon-btn{width:42px; height:42px}

  .group-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px}
  .group-btn{padding:13px 6px; font-size:.95rem}
  .chips{gap:6px; margin-bottom:12px}
  .chip{padding:7px 12px}

  .tab{font-size:.9rem; padding:11px 4px}
  .lesson{grid-template-columns:62px 1fr; gap:2px 10px; padding:11px 12px}
  .lesson-time b{font-size:.92rem}
  .lesson-time span{font-size:.78rem}
  .lesson-subject{font-size:.98rem}
  .lesson-meta{font-size:.85rem; gap:2px 10px}
  .day-head h3{font-size:1rem}
  .foot{padding:0 12px 26px; font-size:.76rem}
}