/* ============================================================
   BetterClass — iOS-стиль (по мотивам unitime.su)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#f2f2f7;
  --card:#ffffff;
  --card-2:#f2f2f7;
  --elevated:#ffffff;
  --text:#1c1c1e;
  --text-2:#6e6e73;
  --text-3:#8e8e93;
  --sep:rgba(60,60,67,.13);
  --sep-strong:rgba(60,60,67,.29);
  --fill:rgba(120,120,128,.16);
  --fill-2:rgba(120,120,128,.12);
  --accent:#ff3b30;
  --accent-press:#e0352b;
  --green:#34c759;
  --hairline:.5px;

  --k-lecture:#2ac4a0;
  --k-seminar:#5856d6;
  --k-practice:#34c759;
  --k-credit:#ff9500;
  --k-exam:#ff2d55;
  --k-consult:#5ac8fa;
  --k-military:#8e8e93;
  --k-other:#8e8e93;

  --r:12px; --r-lg:16px; --r-sm:10px; --r-xs:8px;
  --ease:cubic-bezier(0,0,.2,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,system-ui,"Helvetica Neue",Arial,sans-serif;
  --topbar-h:52px;

  --shadow-card:0 1px 2px rgba(0,0,0,.04);
  --shadow-pop:0 8px 30px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.08);
}

:root[data-theme="dark"]{
  --bg:#000000;
  --card:#1c1c1e;
  --card-2:#2c2c2e;
  --elevated:#2c2c2e;
  --text:#ffffff;
  --text-2:#98989f;
  --text-3:#8d8d93;
  --sep:rgba(84,84,88,.55);
  --sep-strong:rgba(84,84,88,.8);
  --fill:rgba(120,120,128,.36);
  --fill-2:rgba(120,120,128,.24);
  --accent:#ff453a;
  --accent-press:#ff5f55;
  --green:#32d74b;

  --k-lecture:#41d6b3;
  --k-seminar:#7d7bee;
  --k-practice:#3ddc62;
  --k-credit:#ffa733;
  --k-exam:#ff4d6f;
  --k-consult:#6fd0fb;
  --k-military:#9a9aa1;
  --k-other:#9a9aa1;

  --shadow-card:0 1px 2px rgba(0,0,0,.3);
  --shadow-pop:0 10px 34px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.5);
}

@media (prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark}}

html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.4;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overscroll-behavior-x:none;min-height:100dvh;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.2}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
input{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
svg{fill:none;stroke:currentColor;stroke-width:2}
::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)}
[hidden]{display:none!important}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes barfade{from{opacity:1}to{opacity:.15}}

/* iOS-спиннер */
.spin{
  width:20px;height:20px;flex:none;position:relative;color:var(--text-3);
}
.spin::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;opacity:.9;
  animation:spin .7s linear infinite;
}

/* ============ верхняя панель ============ */
.topstack{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:var(--hairline) solid var(--sep);
  padding-top:env(safe-area-inset-top,0);
}
.bar-in{max-width:1200px;margin:0 auto;padding:0 clamp(12px,4vw,24px)}

.appbar{height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:12px}
.appbar-actions{display:flex;align-items:center;gap:8px;flex:none}
.wordmark{font-weight:800;font-size:17px;letter-spacing:.02em;user-select:none}
.wordmark span{color:var(--accent)}

.icon-btn{
  width:36px;height:36px;flex:none;display:grid;place-items:center;
  border:0;border-radius:50%;background:var(--fill-2);color:var(--text);
  transition:background-color .15s,transform .12s var(--ease);
}
.icon-btn svg{width:19px;height:19px}
.icon-btn:active{transform:scale(.9);background:var(--fill)}
.icon-btn .ic-sun{display:none}
:root[data-theme="dark"] .icon-btn .ic-sun{display:block}
:root[data-theme="dark"] .icon-btn .ic-moon{display:none}

/* ряд навигации по датам */
.subbar{
  display:flex;align-items:center;gap:10px;
  min-height:50px;padding:6px 0 8px;
  border-top:var(--hairline) solid var(--sep);
}
.week-nav{display:flex;gap:2px;flex:none}
.week-nav button{
  width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:var(--accent);
  transition:background-color .15s,transform .12s var(--ease);
}
.week-nav button svg{width:20px;height:20px;stroke-width:2.4}
.week-nav button:active{transform:scale(.85);background:var(--fill-2)}
.week-title{min-width:0;flex:1 1 auto}
.week-main{font-size:16px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.week-sub{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-today{
  padding:6px 14px;border:0;border-radius:999px;background:var(--accent);color:#fff;
  font-weight:600;font-size:13px;flex:none;
  transition:transform .12s var(--ease),filter .15s;
}
.btn-today:active{transform:scale(.94);filter:brightness(.92)}

.seg{display:inline-flex;background:var(--fill-2);border-radius:9px;padding:2px;gap:0;flex:none}
.seg button{
  border:0;background:transparent;border-radius:7px;padding:5px 12px;
  font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;
  transition:background-color .2s,box-shadow .2s;
}
.seg button.on{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:600}
.seg-sm button{padding:5px 11px;font-size:12.5px}

.subbar-group{display:none}
.share-btn,.toggle-controls .tc-label{}
.toggle-controls{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:6px 13px;border:0;border-radius:999px;background:var(--fill-2);
  font-size:13px;font-weight:600;color:var(--text);
  transition:background-color .15s,transform .12s var(--ease);
}
.toggle-controls:active{transform:scale(.94)}
.toggle-controls .ic{width:16px;height:16px}
.share-btn{background:var(--fill-2)}

@media (max-width:640px){
  .toggle-controls{width:36px;height:36px;padding:0;border-radius:50%;justify-content:center}
  .toggle-controls .tc-label{display:none}
  #viewSeg{display:none}
  .subbar{gap:8px}
  .btn-today{margin-left:auto}
}

/* ============ день-таб (неделя-полоска) ============ */
.daytabs{display:none}
.daytabs.show{
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  max-width:1200px;margin:0 auto;
  padding:9px clamp(12px,4vw,24px) 10px;
  -webkit-overflow-scrolling:touch;
}
.daytabs::-webkit-scrollbar{display:none}
.dtab{
  flex:0 0 auto;min-width:46px;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 10px 7px;border:0;border-radius:12px;background:var(--fill-2);
  transition:background-color .15s,transform .12s var(--ease);
}
.dtab:active{transform:scale(.92)}
.dtab b{font-size:12px;font-weight:600;color:var(--text-2)}
.dtab span{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.dtab .dt-n{width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:1px}
.dtab.today b{color:var(--accent)}
.dtab.on{background:var(--accent)}
.dtab.on b,.dtab.on span{color:#fff}

/* ============ контролы: поповер на десктопе ============ */
.controls{
  position:fixed;z-index:90;
  top:calc(var(--topbar-h) + env(safe-area-inset-top,0) + 8px);
  right:clamp(12px,4vw,24px);
  width:min(400px,calc(100vw - 24px));
  max-height:min(78dvh,720px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none;
  background:var(--bg);border-radius:18px;box-shadow:var(--shadow-pop);
  border:var(--hairline) solid var(--sep);
  transform-origin:top right;animation:popover .18s var(--ease) both;
}
.controls::-webkit-scrollbar{display:none}
@keyframes popover{from{opacity:0;transform:scale(.95) translateY(-8px)}to{opacity:1;transform:none}}
.controls-in{padding:14px;display:flex;flex-direction:column;gap:16px}
.search{position:relative;z-index:5;display:flex;flex-direction:column;gap:10px}
.controls .filters{gap:16px}

.seg-types{display:inline-flex;background:var(--fill-2);border-radius:9px;padding:2px;align-self:flex-start}
.seg-types button{border:0;background:transparent;border-radius:7px;padding:6px 14px;font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;transition:background-color .2s,box-shadow .2s}
.seg-types button.on{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:600}

.search-field{position:relative;display:flex;align-items:center}
.search-ic{position:absolute;left:12px;width:17px;height:17px;color:var(--text-3);pointer-events:none;stroke-width:2.4}
.search-field input{
  width:100%;height:38px;padding:0 40px 0 36px;
  background:var(--fill-2);border:0;border-radius:10px;
  font-size:16px;color:var(--text);
}
.search-field input::placeholder{color:var(--text-3)}
.clear-btn{
  position:absolute;right:8px;width:22px;height:22px;display:grid;place-items:center;
  border:0;border-radius:50%;background:var(--text-3);color:var(--card);
}
.clear-btn svg{width:12px;height:12px;stroke-width:3}

.dropdown{
  position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;
  max-height:min(56vh,420px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none;
  background:var(--elevated);border-radius:14px;box-shadow:var(--shadow-pop);
  padding:5px;animation:fadeIn .16s var(--ease) both;
}
.dropdown::-webkit-scrollbar{display:none}
.dropdown button{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:11px 12px;background:transparent;border:0;border-radius:10px;text-align:left;
}
.dropdown button:active,.dropdown button.active{background:var(--fill-2)}
.dropdown .d-label{font-weight:500;font-size:16px}
.dropdown .d-desc{font-size:13px;color:var(--text-3);text-align:right;flex:none;max-width:45%}
.dropdown .d-msg,.dropdown .d-spin{padding:16px 12px;font-size:14px;color:var(--text-3)}
.dropdown .d-spin{display:flex;align-items:center;gap:10px}

/* ============ фильтры — iOS-группы с переключателями ============ */
.filters{display:flex;flex-direction:column;gap:22px}
.fgroup{}
.fgroup-title{
  font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--text-3);padding:0 16px 7px;
}
.flist{background:var(--card);border-radius:var(--r-lg);overflow:hidden}
.frow{
  display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 16px;
}
.frow + .frow{box-shadow:inset 0 var(--hairline) 0 var(--sep)}
.frow-label{flex:1 1 auto;min-width:0;font-size:16px;display:flex;align-items:center;gap:10px}
.frow-label .dot{width:10px;height:10px;border-radius:3px;flex:none}
.frow-sub{font-size:13px;color:var(--text-3);margin-top:1px}
.frow-count{font-size:15px;color:var(--text-3);font-variant-numeric:tabular-nums}
.frow-actions{display:flex;gap:18px;padding:10px 16px 4px}
.frow-actions button{border:0;background:transparent;color:var(--accent);font-size:14px;font-weight:500;padding:0}

/* iOS toggle */
.tgl{
  width:51px;height:31px;flex:none;border:0;border-radius:999px;background:var(--fill);
  position:relative;transition:background-color .2s var(--ease-io);padding:0;
}
.tgl::after{
  content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;
  background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);
  transition:transform .2s var(--ease-io);
}
.tgl.on{background:var(--green)}
.tgl.on::after{transform:translateX(20px)}
.tgl:active::after{width:31px}
.tgl.on:active::after{transform:translateX(16px)}

/* ============ bottom sheet (мобильные фильтры) ============ */
.sheet-back{
  position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.sheet-back.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:101;
  background:var(--bg);border-radius:16px 16px 0 0;
  height:82dvh;max-height:92dvh;display:flex;flex-direction:column;
  transform:translateY(101%);transition:transform .34s var(--ease);
  will-change:transform;
}
.sheet.open{transform:translateY(0)}
.sheet.dragging{transition:none}
.sheet.tall{height:92dvh}
.sheet-grab-zone{padding:8px 0 2px;cursor:grab;touch-action:none;flex:none;user-select:none;-webkit-user-select:none}
.sheet-grab-zone:active{cursor:grabbing}
.sheet-grab{width:38px;height:5px;border-radius:3px;background:var(--text-3);opacity:.35;margin:0 auto}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 12px}
.sheet-head h2{font-size:19px;font-weight:700;letter-spacing:-.02em}
.sheet-head button{border:0;background:transparent;color:var(--accent);font-size:17px;font-weight:600;padding:4px 2px;touch-action:auto}
.sheet-body{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;padding:2px 16px calc(env(safe-area-inset-bottom,0) + 28px);-webkit-overflow-scrolling:touch}

/* ============ доска (десктоп, неделя) ============ */
.scene{min-height:60dvh}
.page{max-width:1120px;margin:0 auto;padding:16px clamp(12px,4vw,24px) 48px}

.board{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px;align-items:start;
  max-height:calc(100dvh - 160px);overflow:auto;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;
}
.board::-webkit-scrollbar{display:none}
.bcol{
  min-width:0;display:flex;flex-direction:column;gap:9px;
  background:var(--card);border-radius:16px;padding:10px 10px 12px;
}
.bcol-head{
  position:sticky;top:0;z-index:2;background:var(--card);
  padding:4px 4px 10px;display:flex;align-items:baseline;gap:6px;
  border-bottom:var(--hairline) solid var(--sep);margin-bottom:1px;
}
.bcol-head b{font-size:14px;font-weight:600}
.bcol-head span{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.bcol.today{outline:2px solid var(--accent);outline-offset:0}
.bcol.today .bcol-head b{color:var(--accent)}
.bcol-empty{padding:22px 4px;text-align:center;font-size:13px;color:var(--text-3)}
.bcol .card{background:color-mix(in srgb,var(--k) 12%,var(--bg));border-radius:12px}
:root[data-theme="dark"] .bcol .card{background:color-mix(in srgb,var(--k) 20%,var(--card-2))}

/* ============ карточка занятия ============ */
.card{
  --k:var(--k-other);
  position:relative;border-radius:14px;padding:12px 14px 12px 16px;
  background:color-mix(in srgb,var(--k) 13%,var(--card));
  border-left:4px solid var(--k);
  animation:fadeIn .3s var(--ease) both;
  transition:transform .12s var(--ease);
}
:root[data-theme="dark"] .card{background:color-mix(in srgb,var(--k) 18%,var(--card))}
.card.tappable{cursor:pointer}
.card.tappable:active{transform:scale(.98)}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px;flex-wrap:wrap}
.card-kind{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--k)}
.card-time{font-size:12px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.card-pn{font-size:10px;font-weight:600;color:var(--text-3);margin-left:5px}
.lcard .card-pn{margin-left:6px}
.bcol .card-pn{display:none}
.card-title{font-size:15px;font-weight:600;color:var(--text);line-height:1.3;margin:4px 0 5px;letter-spacing:-.01em}
.card-row{font-size:12.5px;color:var(--text-2);line-height:1.35;display:flex;align-items:center;gap:5px}
.card-row.dim{color:var(--text-3)}
.card-row .mail{width:12px;height:12px;color:var(--text-3);flex:none}
.card-mod{margin-top:6px;font-size:11.5px;font-weight:600;color:var(--k);display:flex;align-items:center;gap:5px}
.card-mod::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;flex:none}
.card-webinar{
  margin-top:9px;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border:0;border-radius:999px;
  background:color-mix(in srgb,var(--k) 16%,transparent);color:var(--k);
  font-size:12.5px;font-weight:600;
}
.card-webinar svg{width:13px;height:13px}
.card-webinar:active{filter:brightness(.9)}

.k-lecture{--k:var(--k-lecture)} .k-seminar{--k:var(--k-seminar)} .k-practice{--k:var(--k-practice)}
.k-credit{--k:var(--k-credit)} .k-exam{--k:var(--k-exam)} .k-consult{--k:var(--k-consult)}
.k-military{--k:var(--k-military)} .k-other{--k:var(--k-other)}

/* ============ режим одного дня ============ */
.dayview{display:flex;flex-direction:column;gap:10px;max-width:620px;margin:0 auto;touch-action:pan-y}
.dayview-head{padding:2px 4px 6px}
.dayview-head b{font-size:22px;font-weight:700;letter-spacing:-.02em}
.dayview-head span{font-size:14px;color:var(--text-3);margin-left:8px;font-variant-numeric:tabular-nums}
.dayview-empty{
  margin-top:8px;padding:48px 20px;text-align:center;color:var(--text-3);font-size:15px;
  background:var(--card);border-radius:var(--r-lg);
}

.lcard.card{padding:14px 15px 14px 18px;border-radius:16px}
.lcard .card-title{font-size:16.5px}
.lcard .card-row{font-size:13.5px}

/* ============ уведомления / ошибки ============ */
.notice{
  margin-top:8px;padding:44px 24px;text-align:center;
  background:var(--card);border-radius:var(--r-lg);
}
.notice-icon{width:40px;height:40px;margin:0 auto 12px;color:var(--text-3)}
.notice-icon svg{width:100%;height:100%;stroke-width:1.6}
.notice h3{font-size:18px;margin-bottom:6px}
.notice p{font-size:14px;color:var(--text-3);max-width:40ch;margin:0 auto;line-height:1.45}
.notice button{
  margin-top:16px;padding:10px 22px;border:0;border-radius:999px;
  background:var(--accent);color:#fff;font-weight:600;font-size:14px;
}
.notice button:active{filter:brightness(.92)}

/* ============ toast ============ */
.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0) + 24px);
  transform:translate(-50%,14px);z-index:200;max-width:calc(100vw - 32px);
  padding:11px 18px;border-radius:999px;
  background:color-mix(in srgb,var(--text) 92%,transparent);color:var(--bg);
  font-size:13.5px;font-weight:600;box-shadow:var(--shadow-pop);
  opacity:0;pointer-events:none;transition:opacity .24s var(--ease),transform .24s var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* skeleton */
.skeleton{opacity:.6;pointer-events:none}
.sk{background:var(--fill-2);border-radius:14px}

/* скрытый iOS-переключатель для системного тактильного отклика */
.haptic-switch{position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;z-index:-1}
.haptic-switch input{margin:0}

/* ============ адаптив ============ */
@media (max-width:1023px){
  .board{display:none}
  #viewSeg{display:none}
}
@media (min-width:1024px){
  .dayview,.daytabs,.sheet,.sheet-back{display:none!important}
}

@media (max-width:560px){
  .bar-in,.controls-in,.page,.daytabs.show{padding-left:16px;padding-right:16px}
  .search-field input{height:40px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}