:root{
    --page:#f2f3f7; --card:#fff; --ink:#12151c; --muted:#7c8391;
    --dim:#9aa1ad; --faint:#c3c8d2; --accent:#3b82f6;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{
    margin:0;background:var(--page);color:var(--ink);
    font-family:"Fira Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    display:flex;flex-direction:column;overscroll-behavior-y:none;
    -webkit-user-select:none;user-select:none;
  }

  .nav{
    display:flex;align-items:center;gap:10px;flex:none;
    padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
    background:var(--page);
  }
  .arrow{
    width:46px;height:46px;border-radius:50%;border:0;flex:none;
    background:#fff;color:var(--accent);font-size:24px;line-height:1;font-weight:600;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,.08);transition:transform .12s, opacity .12s;
  }
  .arrow:active{transform:scale(.92)}
  .navtext{flex:1;text-align:center;min-width:0}
  .t1{font-size:19px;font-weight:700;letter-spacing:-.2px}
  .t2{font-size:13px;color:var(--muted);margin-top:2px}

  .scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .list{padding:0 14px calc(env(safe-area-inset-bottom) + 28px)}

  .lesson{
    display:flex;gap:12px;background:var(--card);border-radius:16px;
    padding:12px 14px;margin-bottom:8px;box-shadow:0 1px 3px rgba(20,25,45,.06);
  }
  .num{width:22px;flex:none;text-align:center;font-size:12px;color:var(--faint);font-weight:700;padding-top:2px}
  .tcol{width:58px;flex:none;text-align:right}
  .tcol .a{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
  .tcol .b{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
  .body{flex:1;min-width:0}
  .subj{font-size:16px;font-weight:600;line-height:1.25}
  .meta{font-size:12.5px;color:var(--muted);margin-top:3px}

  .club{opacity:.52}
  .club .subj{font-size:14px;font-weight:500}

  .sep{
    font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:#a3a9b6;
    margin:16px 4px 8px;font-weight:700;
  }
  .grp{border-left:2px solid #dfe3ea;padding-left:10px;margin-top:6px}
  .grp:first-child{margin-top:0}

  .swipe{touch-action:pan-y}

  /* ——— текущий урок и прошедшие ——— */
  /* Показывается только когда на экране сегодняшний день. */

  .past{opacity:.38}

  .now{
    background:linear-gradient(135deg,#fff5e6,#ffeede);
    box-shadow:0 2px 12px rgba(214,138,40,.18);
  }
  .now .subj{color:#a85c08}
  .now .tcol .a{color:#a85c08}
  .now .num{color:#e0b078}
  .now .meta{color:#a5814f}

  .tag{
    display:inline-flex;align-items:center;gap:7px;
    margin-top:6px;padding:3px 9px 3px 10px;border-radius:999px;
    font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:#fff;background:#d68a28;
  }
  /* обратный отсчёт до конца урока */
  .tag .cd{
    letter-spacing:0;text-transform:none;font-size:12px;
    font-variant-numeric:tabular-nums;
    padding-left:7px;border-left:1px solid rgba(255,255,255,.45);
  }

  /* приглушённый кружок не должен спорить с подсветкой */
  .club.now{opacity:1}
  .club.now .subj{font-size:15px;font-weight:600}

  /* ——— идущая перемена ——— */
  /* Полоска между карточками. Показывается только та перемена, что идёт сейчас. */
  .break{
    display:flex;align-items:center;gap:9px;
    margin:2px 6px 10px;padding-left:22px;
    font-size:13px;font-weight:600;color:#c08a3e;
  }
  .break::after{
    content:"";flex:1;height:1px;
    background:linear-gradient(90deg,#e8c99a,rgba(232,201,154,0));
  }
  /* минуты до звонка — ради них полоска и нужна: видно, успеешь ли позвонить */
  .break .left{
    font-weight:700;letter-spacing:0;text-transform:none;color:#7a8a3c;
    font-variant-numeric:tabular-nums;
    background:#f2f6e4;border-radius:999px;padding:3px 10px;
  }