/* ═══════════════════════════════════════════════════════════════
   1-В клас — оформлення у стилі iOS.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#f2f2f7; --card:#fff; --ink:#1c1c1e; --muted:#6b6b70; --faint:#6f6f76;
  --sep:#e5e5ea; --fill:#e9e9eb;
  --accent:#0071e3; --accent-soft:rgba(10,132,255,.12);
  --orange:#a85700; --orange-soft:rgba(255,149,0,.18);
  --green:#1a7f3c;  --green-soft:rgba(52,199,89,.18);
  --pink:#c8143c;   --pink-soft:rgba(255,45,85,.14);
  --hero-lesson:#0071e3; --hero-break:#a85700; --hero-lunch:#1a7f3c; --hero-rest:#5c5c61;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --shadow-hero:0 8px 24px rgba(0,0,0,.12);
  --r-card:18px; --r-hero:22px; --r-small:12px;
  --tap:44px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000; --card:#1c1c1e; --ink:#fff; --muted:#98989f; --faint:#909099;
    --sep:#38383a; --fill:#2c2c2e;
    --accent:#409cff; --accent-soft:rgba(10,132,255,.22);
    --orange:#ffa733; --orange-soft:rgba(255,149,0,.22);
    --green:#4cd471;  --green-soft:rgba(52,199,89,.22);
    --pink:#ff6482;   --pink-soft:rgba(255,45,85,.22);
    --hero-lesson:#0a6fd8; --hero-break:#a85700; --hero-lunch:#177536; --hero-rest:#4a4a4f;
    --shadow:none; --shadow-hero:0 8px 24px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}   /* інакше display:flex перебиває атрибут hidden */
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
button{font:inherit; cursor:pointer; color:inherit}
.wrap{max-width:480px; margin:0 auto; padding:18px 16px 44px;
  display:flex; flex-direction:column; gap:14px}

/* ── Шапка ─────────────────────────────────────────── */
header{display:flex; align-items:center; gap:12px}
header .logo{width:52px; height:52px; flex:none; border-radius:13px; object-fit:cover;
  box-shadow:var(--shadow)}
header .titles{flex:1; min-width:0}
h1{margin:0; font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.1}
header .sub{font-size:13px; color:var(--muted); margin-top:3px}
.icon-btn{flex:none; min-height:36px; padding:8px 14px; border:none; border-radius:14px;
  background:var(--accent-soft); color:var(--accent); font-size:14px; font-weight:600}

/* ── Смужка стану ──────────────────────────────────── */
.notice{
  display:flex; align-items:center; gap:8px; padding:11px 14px;
  border-radius:14px; font-size:14px; font-weight:600;
}
.notice.offline{background:var(--orange-soft); color:var(--orange)}
.notice.fresh{background:var(--green-soft); color:var(--green)}
.notice .dot{width:8px; height:8px; flex:none; border-radius:50%; background:currentColor}

/* ── Живий статус ──────────────────────────────────── */
.status{border-radius:var(--r-hero); padding:22px; color:#fff;
  box-shadow:var(--shadow-hero); background:var(--hero-rest)}
.status.lesson{background:var(--hero-lesson)}
.status.break {background:var(--hero-break)}
.status.lunch {background:var(--hero-lunch)}
.status.rest  {background:var(--hero-lunch)}
.status.plain {background:var(--hero-rest)}
.status .kicker{font-size:13px; font-weight:600; opacity:.9;
  text-transform:uppercase; letter-spacing:.04em}
.status .big{font-size:clamp(27px,8vw,38px); font-weight:700; letter-spacing:-.02em;
  margin-top:4px; line-height:1.12}
.status .small{font-size:16px; opacity:.95; margin-top:5px}

/* ── Ряд плиток ────────────────────────────────────── */
.quick-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px}
.tile{background:var(--card); border-radius:var(--r-card); padding:15px; box-shadow:var(--shadow)}
.tile .k{font-size:12px; color:var(--muted); font-weight:600}
.tile .v{font-size:17px; font-weight:600; margin-top:4px; letter-spacing:-.01em}
.tile .x{font-size:13px; color:var(--muted); margin-top:2px}

/* ── Секції та групи ───────────────────────────────── */
.section{display:flex; flex-direction:column}
.section > h2{margin:0; font-size:13px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.03em; padding:0 4px 8px}
.group{background:var(--card); border-radius:var(--r-card);
  box-shadow:var(--shadow); overflow:hidden}
.group.pad{padding:15px}

.row{display:flex; align-items:center; gap:12px; padding:12px 15px; border-top:.5px solid var(--sep)}
.row:first-child{border-top:none}
.row .lead{width:28px; flex:none; text-align:center; font-size:15px; font-weight:700; color:var(--muted)}
.row .main{flex:1; min-width:0}
.row .main .t{font-size:15px; font-weight:600}
.row .main .s{font-size:13px; color:var(--muted); margin-top:1px}
.row .trail{margin-left:auto; font-size:14px; color:var(--muted); white-space:nowrap;
  font-variant-numeric:tabular-nums}
.row .trail.none{color:var(--faint)}
.row.now{background:var(--accent-soft)}
.row.now .lead{color:var(--accent)}
.row.now .main .t::after{content:" · зараз"; color:var(--accent); font-size:13px; font-weight:600}
.row.meal{background:var(--green-soft)}
.row.meal .lead,.row.meal .main .t{color:var(--green)}

.glyph{width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center;
  font-size:16px; background:var(--fill)}
.glyph.blue{background:var(--accent-soft)}
.glyph.orange{background:var(--orange-soft)}
.glyph.green{background:var(--green-soft)}
.glyph.pink{background:var(--pink-soft)}

.blank{display:flex; gap:12px; align-items:flex-start}
.blank .t{font-size:15px; font-weight:600}
.blank .s{font-size:13px; color:var(--muted); margin-top:2px}

/* ── Сегментний перемикач ──────────────────────────── */
.modes{position:sticky; top:8px; z-index:20; display:flex; gap:2px; padding:2px;
  background:var(--fill); border-radius:10px}
.modes button{flex:1; min-height:34px; border:none; border-radius:8px; background:transparent;
  font-size:14px; font-weight:500}
.modes button.on{background:var(--card); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.14)}

/* ── Навігація по датах ────────────────────────────── */
.nav{display:flex; align-items:center; gap:8px; padding:12px 12px 2px}
.nav .arrow{width:32px; height:32px; flex:none; border-radius:8px; border:none;
  background:var(--fill); color:var(--accent); font-size:17px; line-height:1}
.nav .label{flex:1; text-align:center; font-size:16px; font-weight:600; letter-spacing:-.01em}
.nav .label small{display:block; font-weight:400; color:var(--muted); font-size:13px; letter-spacing:0}

.pills{display:flex; gap:8px; padding:10px 12px 4px; overflow-x:auto; scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pills button{flex:1 0 auto; min-width:46px; padding:6px 8px; border:none;
  border-radius:var(--r-small); background:var(--fill); font-size:13px; font-weight:600; line-height:1.25}
.pills button span{display:block; font-size:11px; font-weight:400; color:var(--muted)}
.pills button.on{background:var(--accent); color:#fff}
.pills button.on span{color:rgba(255,255,255,.85)}

.quick{display:flex; gap:8px; padding:8px 12px 12px}
.quick button{flex:1; min-height:32px; border:none; border-radius:9px;
  background:var(--fill); color:var(--accent); font-size:14px; font-weight:500}
.quick button.on{background:var(--accent); color:#fff; font-weight:600}

.badge{display:inline-block; padding:2px 8px; border-radius:99px; font-size:11px;
  font-weight:600; vertical-align:2px; margin-left:6px}
.badge.today{background:var(--accent); color:#fff}
.badge.tomorrow{background:var(--orange-soft); color:var(--orange)}
.badge.changed{background:var(--pink-soft); color:var(--pink)}

/* ── Портфель ──────────────────────────────────────── */
.bag{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 15px;
  border-top:.5px solid var(--sep)}
.bag .k{font-size:13px; color:var(--muted); font-weight:600}
.bag .chip{background:var(--accent-soft); color:var(--accent); font-size:13px;
  font-weight:600; padding:5px 12px; border-radius:99px}

/* ── Тиждень ───────────────────────────────────────── */
.wday{padding:12px 15px; border-top:.5px solid var(--sep)}
.wday:first-child{border-top:none}
.wday.today{background:var(--accent-soft)}
.wday h3{margin:0 0 4px; font-size:15px; font-weight:600; display:flex;
  justify-content:space-between; align-items:baseline; gap:8px}
.wday h3 .d{color:var(--muted); font-weight:400; font-size:13px; font-variant-numeric:tabular-nums}
.wday ol{margin:0; padding-left:20px; font-size:14px}
.wday .none{font-size:13px; color:var(--faint)}

/* ── Місяць ────────────────────────────────────────── */
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; padding:12px}
.cal .dow{text-align:center; font-size:11px; color:var(--muted); font-weight:600; padding-bottom:2px}
.cal .cell{aspect-ratio:1; border:2px solid transparent; border-radius:10px; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:15px; padding:0}
.cal .cell.blank{visibility:hidden}
.cal .cell.study{background:var(--fill)}
.cal .cell.off{color:var(--faint)}
.cal .cell.hol{background:var(--green-soft); color:var(--green); font-weight:600}
.cal .cell.today{background:var(--accent); color:#fff; font-weight:700}
.cal .cell.sel{border-color:var(--accent)}
.cal .marks{display:flex; gap:2px; height:4px}
.cal .marks i{width:4px; height:4px; border-radius:50%; display:block}
.cal .m-event{background:var(--pink)}
.cal .m-bday{background:var(--orange)}
.cal .cell.today .marks i{background:#fff}
.legend{display:flex; flex-wrap:wrap; gap:12px; padding:0 15px 12px; font-size:12px; color:var(--muted)}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.legend .l-today{background:var(--accent)}
.legend .l-hol{background:var(--green)}
.legend .l-event{background:var(--pink)}
.picked{border-top:.5px solid var(--sep)}
.picked h3{margin:0; padding:12px 15px 2px; font-size:15px; font-weight:600}

/* ── Контакти ──────────────────────────────────────── */
.avatar{width:40px; height:40px; flex:none; border-radius:50%; background:var(--fill);
  display:grid; place-items:center; font-size:18px}
.call{margin-left:auto; min-height:32px; display:inline-flex; align-items:center; padding:0 14px;
  border-radius:99px; background:var(--accent-soft); color:var(--accent);
  text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap}

/* ── Дії ───────────────────────────────────────────── */
.actions{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
.actions button,.actions a{
  min-height:var(--tap); border:none; border-radius:14px; background:var(--card);
  color:var(--accent); font-weight:600; font-size:15px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.actions a.subtle{color:var(--muted)}   /* службовий вхід — не сплутати з дією для батьків */
#install-hint{
  margin-top:10px; padding:14px; border-radius:14px; background:var(--card);
  box-shadow:var(--shadow); font-size:14px; line-height:1.5;
}
#install-hint b{font-weight:600}
#install-hint .step{display:flex; gap:8px; margin-top:6px}
#install-hint .step i{color:var(--accent); font-style:normal; font-weight:700}

#qr{display:none; text-align:center; margin-top:12px}
#qr canvas{border:10px solid #fff; border-radius:14px; background:#fff; max-width:100%; height:auto}
#qr div{color:var(--muted); font-size:12px; margin-top:8px; word-break:break-all}

footer{text-align:center; font-size:12px; color:var(--muted); padding-top:4px}

@media print{
  .modes,.quick,.nav .arrow,.pills,.actions,#qr,.status,.icon-btn{display:none !important}
  body{background:#fff}
  .group,.tile{box-shadow:none; border:1px solid #ddd; break-inside:avoid}
}