:root { --bg:#F5EFE2; --ink:#19171C; --accent:#8A2C66; --pink:#F3A9D0; --yellow:#F5DC78; --blue:#AFC4F3; --green:#B7C98F; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; padding:20px 16px 48px;
  background: radial-gradient(circle at 15% 5%, var(--pink) 0, transparent 40%),
              radial-gradient(circle at 95% 25%, var(--blue) 0, transparent 40%),
              radial-gradient(circle at 25% 100%, var(--yellow) 0, transparent 45%), var(--bg);
  background-attachment: fixed;
  font-family: Onest, 'Noto Sans SC', system-ui, sans-serif; color: var(--ink); -webkit-tap-highlight-color: transparent; }
main { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
main > * { flex-shrink: 0; }
.card { padding:20px; border-radius:26px;
  background: rgba(255,255,255,.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.8); box-shadow: 0 10px 40px rgba(25,23,28,.08); }
.center { text-align: center; }
h1 { margin:0; font-size:26px; line-height:1.2; }
h2 { margin:0 0 12px; font-size:18px; }
p { margin:8px 0 0; line-height:1.45; }
.chip { display:inline-block; padding:5px 12px; border-radius:99px; background:var(--green); font-weight:600; font-size:13px; white-space: nowrap; }
.chip.teacher { background: var(--pink); }
.chip.low { background: var(--pink); }
.chip.zero { background: var(--ink); color:#fff; }
.mt { margin-top: 12px; }
code { font-size:18px; font-weight:700; color:var(--accent); user-select:all; }
.muted { opacity:.6; font-size:14px; }
label { display:block; font-size:13px; font-weight:600; opacity:.7; margin: 12px 0 6px; }
input, select, textarea { width:100%; font: inherit; font-size:16px; padding:11px 13px; border-radius:14px;
  border:1px solid rgba(25,23,28,.12); background: rgba(255,255,255,.85); color: var(--ink); }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--pink); }
button { font: inherit; font-weight:600; font-size:15px; border:0; border-radius:14px; padding:12px 16px;
  background: var(--ink); color: #fff; cursor: pointer; }
button.soft { background: rgba(255,255,255,.85); color: var(--ink); border:1px solid rgba(25,23,28,.1); }
button.link { background: none; color: var(--accent); padding: 6px 4px; font-size:14px; }
button.wide { width: 100%; margin-top: 14px; }
button:disabled { opacity:.5; }
.row { display:flex; gap:8px; }
.row > * { flex: 1; min-width: 0; }
.result { margin-top:14px; padding:14px; border-radius:16px; background: rgba(183,201,143,.35); }
.result input { font-size:14px; margin: 8px 0 10px; }
ul { list-style:none; margin:0; padding:0; }
li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-top:1px solid rgba(25,23,28,.07); }
li:first-child { border-top:0; }
li.tap { cursor: pointer; }
.name { font-weight:600; }
.sub { font-size:13px; opacity:.6; }
.empty { opacity:.55; font-size:14px; }
.back { align-self: flex-start; background: rgba(255,255,255,.6); color: var(--ink); padding: 8px 14px; font-size: 14px; }
.balance { display:flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.balance b { font-size: 44px; line-height: 1; }
.balance.low b { color: var(--accent); }
.toast { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); background:var(--ink); color:#fff; max-width: 90vw;
  padding:10px 16px; border-radius:99px; font-size:14px; opacity:0; transition:opacity .2s; pointer-events:none; z-index: 10; }
.toast.on { opacity:1; }

/* ---------- нижнее меню ---------- */
body { padding-bottom: 96px; }
.tabs { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5;
  display: flex; gap: 4px; padding: 6px; border-radius: 99px; width: min(420px, calc(100vw - 32px));
  background: rgba(255,255,255,.7); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 10px 30px rgba(25,23,28,.12); }
.tabs a { flex: 1; text-align: center; padding: 10px 6px; border-radius: 99px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.tabs a.on { background: var(--ink); color: #fff; }

/* ---------- календарь ---------- */
.seg { margin-bottom: 10px; }
.seg button { padding: 9px 10px; font-size: 14px; }
.nav-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.nav-label { flex: 1; text-align: center; font-weight: 700; }
button.icon { flex: 0 0 44px; padding: 8px 0; font-size: 20px; line-height: 1; }
.day { padding: 14px 18px; }
.day.is-today { outline: 2px solid var(--pink); }
.day-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.day .empty { padding: 4px 0; }
li.lesson { justify-content: flex-start; }
.grow { flex: 1; min-width: 0; }
.dot { flex: 0 0 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(25,23,28,.15); }
.faded { opacity: .5; }
.faded .name { text-decoration: line-through; }
.tag { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: var(--blue); vertical-align: middle; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; opacity: .75; padding: 0 6px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend b, .statuses b { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mh { text-align: center; font-size: 12px; font-weight: 600; opacity: .55; padding-bottom: 4px; }
.mc { background: rgba(255,255,255,.55); color: var(--ink); border-radius: 12px; padding: 6px 0 5px; min-height: 48px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; border: 1px solid transparent; }
.mc.out { opacity: .35; }
.mc.is-today { border-color: var(--pink); }
.mc.sel { background: var(--ink); color: #fff; }
.mc i { display: flex; gap: 2px; }
.mc i b { width: 6px; height: 6px; border-radius: 50%; }
.statuses { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.statuses button { display: flex; align-items: center; gap: 7px; font-size: 14px; padding: 10px; }
details summary { cursor: pointer; font-weight: 600; padding: 8px 0; color: var(--accent); }
.scope { margin-top: 6px; }
button.danger { background: #B3261E; }

/* ---------- всплывающая карточка ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 20; background: rgba(25,23,28,.35); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0; background: var(--bg); box-shadow: 0 -10px 40px rgba(25,23,28,.2); }

/* ---------- расписание ученика ---------- */
.strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sd { background: rgba(255,255,255,.6); color: var(--ink); border-radius: 14px; padding: 7px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid transparent; }
.sd small { font-size: 11px; opacity: .6; font-weight: 600; }
.sd span { font-size: 16px; }
.sd i { height: 6px; }
.sd i b { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sd.is-today { border-color: var(--pink); }
.sd.sel { background: var(--ink); color: #fff; }
.sd.sel small { opacity: .8; }
.sd.sel i b { background: var(--pink); }