/* Дизайн-система приложения: роли Material 3, тема avr (MD3 Expressive, светлая и тёмная) и тема КС54 «Линии связи».
   Вся раскладка берёт цвета только через роли, поэтому тема меняется одной строкой на <html>. */

@font-face { font-family: "Google Sans Flex"; font-stretch: 100% 112%; font-weight: 400 900; font-display: swap; src: url(fonts/gsf-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Google Sans Flex"; font-stretch: 100% 112%; font-weight: 400 900; font-display: swap; src: url(fonts/gsf-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Flex"; font-stretch: 100% 112%; font-weight: 400 900; font-display: swap; src: url(fonts/rf-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto Flex"; font-stretch: 100% 112%; font-weight: 400 900; font-display: swap; src: url(fonts/rf-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F; }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url(fonts/outfit-medium.ttf) format("truetype"); }
@font-face { font-family: "Outfit"; font-weight: 300; font-display: swap; src: url(fonts/outfit-light.ttf) format("truetype"); }

/* ================================================================ роли: avr тёмная (родная — ночное море) */
:root, [data-theme="avr"][data-mode="dark"] {
  --bg: #0B4248; --sf-lowest: #062E33; --sf-low: #0E4A50; --sf: #115158; --sf-high: #155A62; --sf-highest: #1A646C;
  --on-sf: #D3E3E4; --on-sf-v: #A9C4C6; --outline: #6F9497; --outline-v: #2A6168;
  --primary: #F2A5C3; --on-primary: #3B0D26; --pc: #5A4FC8; --on-pc: #F1EEFF;
  --sc: #1E5B62; --on-sc: #D3E3E4; --tertiary: #C4BCFF; --tc: #3F3591; --on-tc: #E4DFFF;
  --ec: #93000A; --on-ec: #FFDAD6; --signal: #F2A5C3; --break: #C4BCFF; --word: #D3E3E4; --scrim: rgba(3, 25, 28, .6);
  --k-theory: #5A4FC8; --kt-theory: #F1EEFF; --k-practice: #F2A5C3; --kt-practice: #3B0D26; --k-lab: #3F3591; --kt-lab: #E4DFFF;
  --k-exam: #93000A; --kt-exam: #FFDAD6; --k-other: #1E5B62; --kt-other: #D3E3E4; --k-cancel: #2A6168; --kt-cancel: #A9C4C6;
  color-scheme: dark;
}
/* avr светлая — бумага */
[data-theme="avr"][data-mode="light"] {
  --bg: #E9EFEF; --sf-lowest: #FFFFFF; --sf-low: #F3F7F7; --sf: #EAF1F1; --sf-high: #E2EBEC; --sf-highest: #D9E5E6;
  --on-sf: #0B4248; --on-sf-v: #3E5F63; --outline: #6F8C8F; --outline-v: #BCCFD1;
  --primary: #5A4FC8; --on-primary: #FFFFFF; --pc: #E4E0FF; --on-pc: #1E1478;
  --sc: #CDE2E3; --on-sc: #062E33; --tertiary: #A23F6E; --tc: #FFD9E6; --on-tc: #3B0D26;
  --ec: #FFDAD6; --on-ec: #410002; --signal: #5A4FC8; --break: #A23F6E; --word: #0B4248; --scrim: rgba(11, 66, 72, .35);
  --k-theory: #E4E0FF; --kt-theory: #1E1478; --k-practice: #FFD9E6; --kt-practice: #3B0D26; --k-lab: #CDE2E3; --kt-lab: #062E33;
  --k-exam: #FFDAD6; --kt-exam: #410002; --k-other: #D9E5E6; --kt-other: #0B4248; --k-cancel: #EAF1F1; --kt-cancel: #6F8C8F;
  color-scheme: light;
}
/* КС54 · ОП5 — ink, navy, оранжевый, сигнальный лайм */
[data-theme="ks54"] {
  --bg: #0B1533; --sf-lowest: #08102A; --sf-low: #0F1D45; --sf: #132558; --sf-high: #012673; --sf-highest: #0A3285;
  --on-sf: #FFFFFF; --on-sf-v: #C9D3EC; --outline: #4A5E99; --outline-v: #1E3470;
  --primary: #FF7614; --on-primary: #0B1533; --pc: #005EAA; --on-pc: #FFFFFF;
  --sc: #12408F; --on-sc: #FFFFFF; --tertiary: #C4F83A; --tc: #C4F83A; --on-tc: #0B1533;
  --ec: #D7262E; --on-ec: #FFFFFF; --signal: #C4F83A; --break: #C4F83A; --word: #FFFFFF; --scrim: rgba(5, 10, 26, .65);
  --k-theory: #005EAA; --kt-theory: #FFFFFF; --k-practice: #FF7614; --kt-practice: #0B1533; --k-lab: #FFD23F; --kt-lab: #0B1533;
  --k-exam: #D7262E; --kt-exam: #FFFFFF; --k-other: #12408F; --kt-other: #FFFFFF; --k-cancel: #1E3470; --kt-cancel: #8C9BC4;
  color-scheme: dark;
}

/* шрифты и формы по темам */
:root, [data-theme="avr"] {
  --font: "Google Sans Flex", "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font); --font-mono: var(--font);
  --r: 28px; --r-s: 16px; --r-xs: 8px; --r-full: 999px;
  --spring: cubic-bezier(.34, 1.56, .64, 1); --out: cubic-bezier(.2, .8, .2, 1);
  --grad: linear-gradient(135deg, #F2A5C3, #5A4FC8);
}
[data-theme="ks54"] {
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Unbounded", var(--font); --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r: 0px; --r-s: 0px; --r-xs: 0px; --r-full: 0px; --cut: 16px; --cut-s: 8px;
  --spring: cubic-bezier(.2, .8, .2, 1);
}
/* «срезанный угол» КС54: верхний левый и нижний правый под 45° */
[data-theme="ks54"] .cut { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
[data-theme="ks54"] .cut-s { clip-path: polygon(var(--cut-s) 0, 100% 0, 100% calc(100% - var(--cut-s)), calc(100% - var(--cut-s)) 100%, 0 100%, 0 var(--cut-s)); }

/* ================================================================ основа */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--on-sf); transition: background .4s; }
body { font: 16px/1.45 var(--font); font-variation-settings: "wght" 420; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; text-align: inherit; }
a { color: var(--primary); }
.hidden { display: none !important; }
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; position: relative; }
#view { padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 96px); }
body.has-live #view { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 160px); }
/* полосы прокрутки не показываем нигде, прокрутка — только если контент не влез */
html, body, #sheet { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, #sheet::-webkit-scrollbar { display: none; width: 0; height: 0; }
svg.i { width: 24px; height: 24px; fill: currentColor; flex: none; }

/* типографика MD3 (оси Google Sans Flex: вес, ширина, округлость) */
.t-display { font-family: var(--font-display); font-size: 34px; line-height: 1.12; font-weight: 800; font-stretch: 112%; font-variation-settings: "wght" 800, "wdth" 112, "ROND" 100; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.t-headline { font-family: var(--font-display); font-size: 26px; line-height: 1.2; font-weight: 720; font-variation-settings: "wght" 720, "wdth" 106, "ROND" 80; margin: 0; text-wrap: balance; }
.t-title { font-size: 19px; line-height: 1.3; font-weight: 680; font-variation-settings: "wght" 680, "ROND" 60; margin: 0; }
.t-body { font-size: 15px; }
.t-label { font-size: 13px; line-height: 1.35; font-weight: 620; font-variation-settings: "wght" 620; color: var(--on-sf-v); }
.t-kicker { font-size: 12px; font-weight: 640; font-variation-settings: "wght" 640; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.muted { color: var(--on-sf-v); }
[data-theme="ks54"] .t-display { font-weight: 700; font-size: 27px; letter-spacing: 0; }
[data-theme="ks54"] .t-headline { font-weight: 600; font-size: 21px; }
[data-theme="ks54"] .t-label, [data-theme="ks54"] .t-kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
[data-theme="ks54"] .t-kicker { color: var(--signal); }

/* ================================================================ шапка экрана */
.bar { display: flex; align-items: center; gap: 8px; margin: 8px 0 18px; min-height: 48px; }
.bar .tt { flex: 1; min-width: 0; }
.bar .tt .t-label { margin-top: 4px; }
.icon-btn { width: 48px; height: 48px; display: grid; place-items: center; color: var(--on-sf-v); border-radius: var(--r-full); flex: none; transition: background .2s, border-radius .35s var(--spring); }
.icon-btn:active { background: var(--sf-high); border-radius: var(--r-s); }
.avatar { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: var(--pc); color: var(--on-pc); font-weight: 760; font-size: 17px; transition: transform .4s var(--spring); }
.avatar:active { transform: scale(.9) rotate(-8deg); }
/* человек — форма cookie12 (брендбук avr, «Формы») */
[data-theme="avr"] .avatar, :root:not([data-theme]) .avatar { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50.0 0.0L52.2 0.4L54.2 1.7L56.1 3.4L57.9 5.2L59.6 6.7L61.4 7.5L63.4 7.7L65.6 7.2L68.0 6.6L70.5 6.0L72.9 6.0L75.0 6.7L76.6 8.2L77.8 10.3L78.6 12.7L79.2 15.1L80.0 17.3L81.1 18.9L82.7 20.0L84.9 20.8L87.3 21.4L89.7 22.2L91.8 23.4L93.3 25.0L94.0 27.1L94.0 29.5L93.4 32.0L92.8 34.4L92.3 36.6L92.5 38.6L93.3 40.4L94.8 42.1L96.6 43.9L98.3 45.8L99.6 47.8L100.0 50.0L99.6 52.2L98.3 54.2L96.6 56.1L94.8 57.9L93.3 59.6L92.5 61.4L92.3 63.4L92.8 65.6L93.4 68.0L94.0 70.5L94.0 72.9L93.3 75.0L91.8 76.6L89.7 77.8L87.3 78.6L84.9 79.2L82.7 80.0L81.1 81.1L80.0 82.7L79.2 84.9L78.6 87.3L77.8 89.7L76.6 91.8L75.0 93.3L72.9 94.0L70.5 94.0L68.0 93.4L65.6 92.8L63.4 92.3L61.4 92.5L59.6 93.3L57.9 94.8L56.1 96.6L54.2 98.3L52.2 99.6L50.0 100.0L47.8 99.6L45.8 98.3L43.9 96.6L42.1 94.8L40.4 93.3L38.6 92.5L36.6 92.3L34.4 92.8L32.0 93.4L29.5 94.0L27.1 94.0L25.0 93.3L23.4 91.8L22.2 89.7L21.4 87.3L20.8 84.9L20.0 82.7L18.9 81.1L17.3 80.0L15.1 79.2L12.7 78.6L10.3 77.8L8.2 76.6L6.7 75.0L6.0 72.9L6.0 70.5L6.6 68.0L7.2 65.6L7.7 63.4L7.5 61.4L6.7 59.6L5.2 57.9L3.4 56.1L1.7 54.2L0.4 52.2L0.0 50.0L0.4 47.8L1.7 45.8L3.4 43.9L5.2 42.1L6.7 40.4L7.5 38.6L7.7 36.6L7.2 34.4L6.6 32.0L6.0 29.5L6.0 27.1L6.7 25.0L8.2 23.4L10.3 22.2L12.7 21.4L15.1 20.8L17.3 20.0L18.9 18.9L20.0 17.3L20.8 15.1L21.4 12.7L22.2 10.3L23.4 8.2L25.0 6.7L27.1 6.0L29.5 6.0L32.0 6.6L34.4 7.2L36.6 7.7L38.6 7.5L40.4 6.7L42.1 5.2L43.9 3.4L45.8 1.7L47.8 0.4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50.0 0.0L52.2 0.4L54.2 1.7L56.1 3.4L57.9 5.2L59.6 6.7L61.4 7.5L63.4 7.7L65.6 7.2L68.0 6.6L70.5 6.0L72.9 6.0L75.0 6.7L76.6 8.2L77.8 10.3L78.6 12.7L79.2 15.1L80.0 17.3L81.1 18.9L82.7 20.0L84.9 20.8L87.3 21.4L89.7 22.2L91.8 23.4L93.3 25.0L94.0 27.1L94.0 29.5L93.4 32.0L92.8 34.4L92.3 36.6L92.5 38.6L93.3 40.4L94.8 42.1L96.6 43.9L98.3 45.8L99.6 47.8L100.0 50.0L99.6 52.2L98.3 54.2L96.6 56.1L94.8 57.9L93.3 59.6L92.5 61.4L92.3 63.4L92.8 65.6L93.4 68.0L94.0 70.5L94.0 72.9L93.3 75.0L91.8 76.6L89.7 77.8L87.3 78.6L84.9 79.2L82.7 80.0L81.1 81.1L80.0 82.7L79.2 84.9L78.6 87.3L77.8 89.7L76.6 91.8L75.0 93.3L72.9 94.0L70.5 94.0L68.0 93.4L65.6 92.8L63.4 92.3L61.4 92.5L59.6 93.3L57.9 94.8L56.1 96.6L54.2 98.3L52.2 99.6L50.0 100.0L47.8 99.6L45.8 98.3L43.9 96.6L42.1 94.8L40.4 93.3L38.6 92.5L36.6 92.3L34.4 92.8L32.0 93.4L29.5 94.0L27.1 94.0L25.0 93.3L23.4 91.8L22.2 89.7L21.4 87.3L20.8 84.9L20.0 82.7L18.9 81.1L17.3 80.0L15.1 79.2L12.7 78.6L10.3 77.8L8.2 76.6L6.7 75.0L6.0 72.9L6.0 70.5L6.6 68.0L7.2 65.6L7.7 63.4L7.5 61.4L6.7 59.6L5.2 57.9L3.4 56.1L1.7 54.2L0.4 52.2L0.0 50.0L0.4 47.8L1.7 45.8L3.4 43.9L5.2 42.1L6.7 40.4L7.5 38.6L7.7 36.6L7.2 34.4L6.6 32.0L6.0 29.5L6.0 27.1L6.7 25.0L8.2 23.4L10.3 22.2L12.7 21.4L15.1 20.8L17.3 20.0L18.9 18.9L20.0 17.3L20.8 15.1L21.4 12.7L22.2 10.3L23.4 8.2L25.0 6.7L27.1 6.0L29.5 6.0L32.0 6.6L34.4 7.2L36.6 7.7L38.6 7.5L40.4 6.7L42.1 5.2L43.9 3.4L45.8 1.7L47.8 0.4Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
[data-theme="ks54"] .avatar { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

/* ================================================================ кнопки, чипы, группы (MD3 Expressive) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary); font-weight: 640; font-variation-settings: "wght" 640, "ROND" 50; font-size: 15px;
  transition: border-radius .35s var(--spring), transform .3s var(--spring), filter .2s; }
.btn:hover { border-radius: var(--r-s); }
.btn:active { transform: scale(.94); border-radius: var(--r-s); }
.btn.tonal { background: var(--sc); color: var(--on-sc); }
.btn.text { background: transparent; color: var(--primary); padding: 0 14px; }
.btn.small { height: 40px; padding: 0 18px; font-size: 14px; }
.btn:disabled { opacity: .5; }
[data-theme="ks54"] .btn { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: 13px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

/* соединённые кнопки (button group): выбранная — полностью скруглённая и залитая */
.seg { display: flex; gap: 3px; margin: 0 0 16px; }
.seg button { flex: 1; height: 44px; display: grid; place-items: center; background: var(--sf-high); color: var(--on-sf-v); font-weight: 620; font-size: 14px;
  border-radius: var(--r-xs); transition: border-radius .4s var(--spring), background .25s, color .25s; }
.seg button:first-child { border-radius: var(--r-full) var(--r-xs) var(--r-xs) var(--r-full); }
.seg button:last-child { border-radius: var(--r-xs) var(--r-full) var(--r-full) var(--r-xs); }
.seg button.on { background: var(--pc); color: var(--on-pc); border-radius: var(--r-full); }
[data-theme="ks54"] .seg button { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
[data-theme="ks54"] .seg button.on { background: var(--primary); color: var(--on-primary); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-xs); background: var(--sf-high); color: var(--on-sf-v); font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip.on { background: var(--sc); color: var(--on-sc); }
.chip.warn { background: var(--primary); color: var(--on-primary); }
.chip.bad { background: var(--ec); color: var(--on-ec); }
[data-theme="ks54"] .chip { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; height: 26px; }

/* сгруппированный список: крайние углы большие, внутренние маленькие, между пунктами 2px */
.group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 12px 18px; background: var(--sf-low); border-radius: var(--r-xs);
  transition: border-radius .35s var(--spring), background .2s; }
.item:first-child { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
.item:last-child { border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); }
button.item:active { background: var(--sf-high); border-radius: var(--r-s); }
.item .ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--sc); color: var(--on-sc); flex: none; }
.item .bd { flex: 1; min-width: 0; }
.item .sub { color: var(--on-sf-v); font-size: 13px; margin-top: 1px; }
.item .tail { color: var(--on-sf-v); font-size: 14px; }
.group-title { margin: 22px 8px 8px; }
[data-theme="ks54"] .item .ic { border-radius: 0; background: var(--sf-high); color: var(--signal); }

/* переключатель M3: бегунок растёт и получает галочку */
.switch { position: relative; width: 52px; height: 32px; border-radius: 99px; background: var(--sf-highest); border: 2px solid var(--outline); flex: none; transition: background .25s, border-color .25s; }
.switch::after { content: ""; position: absolute; left: 6px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--outline); transition: all .35s var(--spring); }
.switch.on { background: var(--primary); border-color: var(--primary); }
.switch.on::after { left: 22px; top: 2px; width: 24px; height: 24px; background: var(--on-primary)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 16px no-repeat; }
[data-theme="ks54"] .switch, [data-theme="ks54"] .switch::after { border-radius: 0; }

/* карточки */
.card { background: var(--sf-low); border-radius: var(--r); padding: 18px 20px; margin-bottom: 10px; transition: border-radius .45s var(--spring), transform .45s var(--spring), background .3s; }
button.card { display: block; width: 100%; }
button.card:active { border-radius: 40px; transform: scale(.98); background: var(--sf); }

/* ================================================================ колода «Сегодня» (как в видео) */
.deck { --h: 300px; position: relative; height: calc(var(--h) + 88px); margin-bottom: 8px; touch-action: pan-x; }
.dc { position: absolute; left: 0; right: 0; top: 0; height: var(--h); padding: 22px; border-radius: var(--r); background: var(--sf-high); overflow: hidden;
  transform-origin: 50% 100%; transition: transform .6s var(--spring), opacity .35s, background .3s; will-change: transform; user-select: none; cursor: grab; }
.dc .full { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; transition: opacity .25s; }
.dc .compact { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 12px; display: flex; align-items: baseline; gap: 12px; opacity: 0; transition: opacity .25s; }
.dc .compact .ct { font-weight: 700; color: var(--on-sf-v); white-space: nowrap; }
.dc .compact .cn { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.dc.break { background: var(--sf); }
.dc.break .compact .ct, .dc.break .time { color: var(--break); }
.dc.p0 { z-index: 5; transform: none; }
.dc.p1 { z-index: 4; transform: translateY(66px) scale(.95); background: var(--sf); }
.dc.p1 .full { opacity: 0; } .dc.p1 .compact { opacity: 1; }
.dc.p2 { z-index: 3; transform: translateY(88px) scale(.9); background: var(--sf-low); }
.dc.p2 .full, .dc.p2 .compact, .dc.pn .full, .dc.pn .compact, .dc.pu .compact { opacity: 0; }
.dc.pn { z-index: 2; transform: translateY(100px) scale(.86); opacity: 0; pointer-events: none; }
.dc.pu { z-index: 6; transform: translateY(-112%) scale(1.03); opacity: 0; pointer-events: none; }
.dc.drag { transition: none; cursor: grabbing; }
.dc .row1 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dc .time { font-size: 18px; font-weight: 640; color: var(--on-sf-v); }
.dc .name { font-family: var(--font-display); font-size: 30px; line-height: 1.1; font-weight: 800; font-stretch: 110%; font-variation-settings: "wght" 800, "wdth" 110, "ROND" 100;
  margin: 12px 0 8px; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
[data-theme="ks54"] .dc .name { font-weight: 700; font-size: 25px; }
[data-theme="ks54"] .dc .time { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; }
.dc .status { color: var(--on-sf-v); }
.dc .meta { margin-top: auto; color: var(--on-sf-v); font-size: 14px; display: flex; flex-wrap: wrap; gap: 2px 14px; }
[data-theme="ks54"] .dc .meta { padding-right: 110px; }
.badge { font-size: 12px; font-weight: 720; padding: 6px 12px; border-radius: var(--r-full); background: var(--sf-highest); color: var(--on-sf-v); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.badge.now { background: var(--primary); color: var(--on-primary); }
[data-theme="ks54"] .badge { font-family: var(--font-mono); font-size: 10px; }
[data-theme="ks54"] .badge.now { background: var(--signal); color: #0B1533; }
.deck-foot { display: flex; align-items: center; justify-content: space-between; margin: 0 6px 18px; }
.deck-foot .t-label:first-child { flex: 1; }

/* фирменная графика на карточке: большая звезда avr / три линии КС54 */
.deco { position: absolute; pointer-events: none; z-index: 0; }
.deco-star { width: 240px; height: 240px; right: -86px; top: -86px; opacity: .12; animation: turn 140s linear infinite; }
.deco-lines { right: 0; bottom: 0; width: 140px; height: 140px; }
[data-theme="ks54"] .deco-star, [data-theme="avr"] .deco-lines, :root:not([data-theme]) .deco-lines, .dc:not(.p0) .deco { display: none; }
@keyframes turn { to { rotate: 360deg; } }

/* волнистая полоска MD3e / прямая сигнальная линия КС54 */
.prog { --v: 0%; position: relative; height: 12px; margin: 14px 0 4px; color: var(--signal); }
.prog::before { content: ""; position: absolute; left: calc(var(--v) + 6px); right: 0; top: 4px; height: 4px; border-radius: 99px; background: var(--outline-v); }
.prog::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12'%3E%3Cpath d='M0 6Q8 1.5 16 6T32 6' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 32px 12px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='12'%3E%3Cpath d='M0 6Q8 1.5 16 6T32 6' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 32px 12px repeat-x;
  animation: wave 1.4s linear infinite; }
.dc.break .prog { color: var(--break); }
@keyframes wave { to { -webkit-mask-position: -32px 0; mask-position: -32px 0; } }
[data-theme="ks54"] .prog { height: 8px; }
[data-theme="ks54"] .prog::before { border-radius: 0; top: 0; height: 8px; left: var(--v); }
[data-theme="ks54"] .prog::after { -webkit-mask: none; mask: none; animation: none; }

/* ================================================================ плавающий остаток */
#live { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 19;
  width: min(528px, calc(100% - 32px)); padding: 10px 16px 8px; border-radius: 22px; background: var(--sf-highest); color: var(--on-sf);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22); animation: rise .5s var(--spring); }
#live .lr { display: flex; align-items: center; gap: 10px; }
#live .lt { flex: 1; min-width: 0; font-weight: 640; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#live .lv { font-weight: 760; color: var(--signal); white-space: nowrap; }
#live .prog { margin: 4px 0 0; height: 12px; }
#live .prog::before { top: 4px; height: 3px; }
#live .sq { width: 10px; height: 10px; background: var(--signal); flex: none; }
[data-theme="avr"] #live .sq, :root:not([data-theme]) #live .sq, [data-theme="ks54"] #live .star { display: none; }
[data-theme="ks54"] #live { border-radius: 0; box-shadow: none; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
[data-theme="ks54"] #live .prog { height: 4px; }
[data-theme="ks54"] #live .prog::before { top: 0; height: 4px; }
@keyframes rise { from { transform: translate(-50%, 20px); opacity: 0; } }

/* ================================================================ навигация: плавающий остров MD3e */
#nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 20;
  display: flex; gap: 4px; padding: 6px 8px; border-radius: 999px; background: var(--sf); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
#nav button { display: grid; place-items: center; gap: 2px; min-width: 62px; padding: 6px 6px; border-radius: 999px; color: var(--on-sf-v); font-size: 12px; font-weight: 640;
  transition: background .3s, color .3s, transform .35s var(--spring); }
#nav button .ind { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background .3s, width .4s var(--spring); }
#nav button.on { color: var(--on-sf); }
#nav button.on .ind { background: var(--sc); color: var(--on-sc); }
#nav button:active { transform: scale(.92); }
[data-theme="ks54"] #nav { border-radius: 0; box-shadow: none; background: var(--sf-high); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
[data-theme="ks54"] #nav button, [data-theme="ks54"] #nav button .ind { border-radius: 0; }
[data-theme="ks54"] #nav button { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
[data-theme="ks54"] #nav button.on .ind { background: var(--primary); color: var(--on-primary); }

/* ================================================================ пары списком */
.days { display: grid; grid-template-columns: repeat(6, 1fr); align-items: start; gap: 4px; margin: 0 0 16px; }
.day { padding: 8px 0 10px; text-align: center; color: var(--on-sf-v); position: relative; border-radius: 20px; transition: background .3s, border-radius .4s var(--spring); }
.day .dw { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.day .dn { font-size: 20px; font-weight: 720; margin-top: 2px; }
.day.sel { background: var(--pc); color: var(--on-pc); border-radius: 999px; }
.day.free .dn { opacity: .45; font-weight: 420; }
.day.today::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--primary); }
[data-theme="ks54"] .day, [data-theme="ks54"] .day.sel { border-radius: 0; }
[data-theme="ks54"] .day .dw { font-family: var(--font-mono); }
[data-theme="ks54"] .day.today::after { border-radius: 0; background: var(--signal); }
.pair { display: flex; gap: 14px; align-items: center; width: 100%; background: var(--sf-low); padding: 12px 14px; margin-bottom: 6px; border-radius: var(--r-s);
  transition: transform .35s var(--spring), border-radius .35s var(--spring); }
.pair:active { transform: scale(.98); border-radius: var(--r); }
.pair.now { background: var(--sf-high); }
.ktime { min-width: 64px; padding: 8px 0; text-align: center; font-weight: 740; font-size: 15px; line-height: 1.15; border-radius: 14px; }
.ktime small { display: block; font-weight: 520; font-size: 11px; opacity: .85; }
[data-theme="ks54"] .ktime { font-family: var(--font-mono); font-size: 14px; border-radius: 0; }
.k-theory { background: var(--k-theory); color: var(--kt-theory); } .k-practice { background: var(--k-practice); color: var(--kt-practice); }
.k-lab { background: var(--k-lab); color: var(--kt-lab); } .k-exam { background: var(--k-exam); color: var(--kt-exam); }
.k-other, .k-mixed { background: var(--k-other); color: var(--kt-other); } .k-cancelled { background: var(--k-cancel); color: var(--kt-cancel); }
.pair .bd { flex: 1; min-width: 0; }
.pair .pn { font-weight: 660; }
.pair .pm { color: var(--on-sf-v); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pair .side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pair.cancelled .pn { text-decoration: line-through; opacity: .6; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.gap { color: var(--on-sf-v); font-size: 12px; text-align: center; margin: 0 0 6px; opacity: .8; }

/* ================================================================ оценки и ДЗ */
.mark { width: 44px; height: 44px; display: grid; place-items: center; font-weight: 800; font-size: 18px; flex: none; color: #062E33; background: var(--sf-highest); border-radius: 14px; }
.m5 { background: #A8E6C1; } .m4 { background: #D7E9A6; } .m3 { background: #FFD9A8; } .m2, .m1 { background: #FFB4AB; }
.mx { color: var(--on-sf); }
[data-theme="ks54"] .mark { border-radius: 0; color: #0B1533; }
[data-theme="ks54"] .m5 { background: #C4F83A; } [data-theme="ks54"] .m4 { background: #FFD23F; } [data-theme="ks54"] .m3 { background: #FF7614; } [data-theme="ks54"] .m2, [data-theme="ks54"] .m1 { background: #D7262E; color: #fff; }
.row { display: flex; gap: 14px; align-items: center; width: 100%; padding: 10px 14px; background: var(--sf-low); border-radius: var(--r-xs); }
.row .bd { flex: 1; min-width: 0; }
.row .sub { color: var(--on-sf-v); font-size: 13px; }
.avg { font-family: var(--font-display); font-size: 28px; font-weight: 800; font-variation-settings: "wght" 800, "ROND" 100; }
.mini { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.mini span { min-width: 24px; height: 24px; padding: 0 6px; font-size: 12px; font-weight: 800; display: grid; place-items: center; color: #062E33; border-radius: 8px; }
[data-theme="ks54"] .mini span { border-radius: 0; color: #0B1533; }
.target { margin-top: 10px; font-size: 13px; color: var(--on-sf-v); }
.hw { display: flex; gap: 14px; align-items: flex-start; }
.check { width: 28px; height: 28px; border: 2px solid var(--outline); border-radius: 10px; flex: none; margin-top: 1px; display: grid; place-items: center; transition: all .35s var(--spring); }
.check.on { background: var(--primary); border-color: var(--primary); border-radius: 50%; }
.check.on::after { content: ""; width: 11px; height: 6px; border: 2.5px solid var(--on-primary); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
[data-theme="ks54"] .check, [data-theme="ks54"] .check.on { border-radius: 0; }
.hw .bd { flex: 1; min-width: 0; }
.hw .txt { margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.hw.done .txt { opacity: .55; text-decoration: line-through; }
.att { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; padding: 6px 12px; background: var(--sf-high); color: var(--on-sf-v); font-size: 13px; text-decoration: none; border-radius: var(--r-full); }

/* ================================================================ студбилет */
.idcard { position: relative; overflow: hidden; padding: 22px; border-radius: var(--r); background: var(--pc); color: var(--on-pc); }
.idcard > :not(.deco) { position: relative; z-index: 1; }
.idcard .t-label { color: inherit; opacity: .8; }
.idcard .cn { font-family: var(--font-display); font-size: 23px; font-weight: 760; font-variation-settings: "wght" 760, "ROND" 100; margin: 10px 0 4px; }
.idcard .grid { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; font-size: 13px; opacity: .9; }
.idcard .grid b { display: block; font-size: 15px; }
[data-theme="ks54"] .idcard { background: var(--sf-high); color: #fff; }
.qr { background: #fff; padding: 16px; margin: 12px auto 0; width: 248px; text-align: center; border-radius: var(--r); }
.qr img { width: 216px; height: 216px; image-rendering: pixelated; display: block; margin: 0 auto; }
.qr .exp { color: #3E5F63; font-size: 12px; margin-top: 6px; }

/* ================================================================ звезда, заставка, ошибки, «Powered by avr» */
.star { display: inline-block; width: 1em; height: 1em; flex: none; background: var(--grad, linear-gradient(135deg, #F2A5C3, #5A4FC8));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C53 30 70 47 98 50C70 53 53 70 50 98C47 70 30 53 2 50C30 47 47 30 50 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C53 30 70 47 98 50C70 53 53 70 50 98C47 70 30 53 2 50C30 47 47 30 50 2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.twinkle { animation: twinkle 2.6s var(--d, 0s) ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(.72) rotate(0); opacity: .55; } 45% { transform: scale(1) rotate(12deg); opacity: 1; } }
.loader { display: grid; place-items: center; padding: 64px 0; }
.loader .star { width: 48px; height: 48px; animation: breathe 1.5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: rotate(-12deg) scale(.9); } 50% { transform: rotate(12deg) scale(1); } }

#splash { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .4s; }
#splash.out { opacity: 0; pointer-events: none; }
#splash .core { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
#splash .core .star { width: 96px; height: 96px; animation: star-in .9s var(--spring) both; }
#splash .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; animation: ring 1.4s .35s var(--out) both; }
#splash .ring.r2 { animation-delay: .55s; }
#splash .sp-avr .name { margin-top: 26px; font-family: var(--font-display); font-size: 26px; font-weight: 760; font-variation-settings: "wght" 760, "ROND" 100; animation: up-in .6s .5s var(--out) both; }
#splash .powered { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 34px); animation: up-in .6s .7s var(--out) both; }
@keyframes star-in { from { transform: rotate(-120deg) scale(.2); opacity: 0; } }
@keyframes ring { from { transform: scale(.6); opacity: .7; } to { transform: scale(2.2); opacity: 0; } }
@keyframes up-in { from { transform: translateY(14px); opacity: 0; } }

.powered { display: flex; justify-content: center; }
.powered svg { height: 46px; width: auto; color: var(--word); }
.powered.small svg { height: 34px; }
.foot { margin: 34px 0 6px; text-align: center; }
.foot .ver { color: var(--on-sf-v); font-size: 12px; margin-top: 8px; opacity: .8; }

.err-screen { min-height: 78vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; }
.err-screen .star { width: 72px; height: 72px; margin-bottom: 18px; filter: grayscale(.4); animation: breathe 3s ease-in-out infinite; }
.err-screen p { color: var(--on-sf-v); max-width: 320px; margin: 10px 0 24px; }
.err-screen .powered { margin-top: 40px; }
.err { display: flex; gap: 12px; align-items: center; background: var(--ec); color: var(--on-ec); padding: 14px 16px; margin: 10px 0; border-radius: var(--r-s); font-size: 14px; }
.err .bd { flex: 1; }
.empty { text-align: center; color: var(--on-sf-v); padding: 46px 16px; }
.empty .star { width: 76px; height: 76px; margin-bottom: 14px; }
[data-theme="ks54"] .empty .star, [data-theme="ks54"] .err-screen .star, [data-theme="ks54"] .loader .star { -webkit-mask: none; mask: none; background: none; width: 120px; height: 60px; filter: none;
  background-image: linear-gradient(135deg, transparent 30%, #FFFFFF 30% 40%, transparent 40% 50%, #FF7614 50% 60%, transparent 60% 70%, #C4F83A 70% 80%, transparent 80%); }
[data-theme="ks54"] .loader .star { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ================================================================ шторка, тост, вход */
#sheet-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 30; animation: fade .2s; }
#sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; z-index: 31;
  background: var(--sf-low); padding: 8px 22px calc(env(safe-area-inset-bottom, 0px) + 26px); border-radius: 32px 32px 0 0; animation: sheet-up .5s var(--spring); }
[data-theme="ks54"] #sheet { border-radius: 0; clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); }
#sheet .grab { width: 36px; height: 4px; border-radius: 4px; background: var(--outline); opacity: .6; margin: 6px auto 16px; }
@keyframes sheet-up { from { transform: translate(-50%, 100%); } }
@keyframes fade { from { opacity: 0; } }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--outline-v); }
.kv .k { color: var(--on-sf-v); }
.kv .v { text-align: right; }
.half { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; }
.half .t { color: var(--on-sf-v); min-width: 100px; }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 160px); z-index: 40; background: var(--on-sf); color: var(--bg);
  padding: 12px 20px; border-radius: 16px; font-size: 14px; font-weight: 600; animation: rise .4s var(--spring); }
.login { min-height: 84vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 12px; }
.login > .star { width: 96px; height: 96px; margin-bottom: 26px; animation: star-in .9s var(--spring) both; }
.login p { color: var(--on-sf-v); margin: 12px 0 28px; max-width: 320px; }
input.field { width: 100%; height: 52px; border: 1px solid var(--outline); background: transparent; color: var(--on-sf); padding: 0 16px; font: inherit; margin: 8px 0; border-radius: var(--r-xs); }
details summary { color: var(--on-sf-v); cursor: pointer; margin-top: 24px; font-size: 14px; }
.news-html { color: var(--on-sf-v); margin-top: 10px; line-height: 1.55; word-break: break-word; }
.news-html p { margin: 0 0 10px; }
.news-html strong, .news-html b { color: var(--on-sf); }
.news-img { width: 100%; border-radius: var(--r-s); margin-top: 10px; }
.dish { padding: 9px 0; border-bottom: 1px solid var(--outline-v); }
.dish .dc2 { color: var(--on-sf-v); font-size: 12px; }
.dish .dk { color: var(--on-sf-v); font-size: 12px; float: right; }
.widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.widget { display: block; width: 100%; background: var(--sf-low); border-radius: var(--r); padding: 16px 18px; min-height: 100px; transition: border-radius .45s var(--spring), transform .45s var(--spring); }
.widget:active { border-radius: 40px; transform: scale(.97); }
.widget .wv { font-family: var(--font-display); font-size: 28px; font-weight: 800; font-variation-settings: "wght" 800, "ROND" 100; margin-top: 6px; }
.widget .wd { color: var(--on-sf-v); font-size: 13px; margin-top: 2px; }
.mod { padding: 10px 0; border-bottom: 1px solid var(--outline-v); display: flex; gap: 12px; }
.mod .md { color: var(--on-sf-v); font-size: 12px; min-width: 78px; }
.mod.cur .mn { color: var(--primary); font-weight: 640; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* пять вкладок (полный режим) на узком экране */
@media (max-width: 400px) { #nav { gap: 0; padding: 6px 4px; } #nav button { min-width: 0; width: 64px; padding: 6px 2px; font-size: 11px; } #nav button .ind { width: 48px; } }

/* ================================================================ заставки по темам */
#splash .sp-avr, #splash .sp-ks { display: flex; flex-direction: column; align-items: center; }
[data-theme="ks54"] #splash .sp-avr, [data-theme="avr"] #splash .sp-ks, :root:not([data-theme]) #splash .sp-ks { display: none; }
/* КС54: три линии под 45° влетают из угла (белая, оранжевая, сигнальная), затем выезжает логотип */
#splash .sp-ks { position: absolute; inset: 0; justify-content: center; overflow: hidden; }
#splash .sp-lines { position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; }
#splash .sp-lines line { stroke-width: 22; stroke-dasharray: 340; stroke-dashoffset: 340; animation: draw .55s cubic-bezier(.2, .8, .2, 1) forwards; }
#splash .sp-lines .l1 { stroke: #FFFFFF; } #splash .sp-lines .l2 { stroke: #FF7614; animation-delay: .1s; } #splash .sp-lines .l3 { stroke: #C4F83A; animation-delay: .2s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.ks-logo { fill: currentColor; display: block; }
#splash .sp-ks .ks-logo { width: 190px; height: auto; color: #fff; animation: ks-in .5s .35s cubic-bezier(.2, .8, .2, 1) both; }
#splash .sp-ks-name { margin-top: 22px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .14em; color: #C4F83A; text-transform: uppercase; animation: up-in .4s .6s ease both; }
@keyframes ks-in { from { transform: translateX(-40px) skewX(-12deg); opacity: 0; clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ================================================================ переходы между экранами (View Transitions) */
@property --s { syntax: "<length>"; inherits: false; initial-value: 0px; }
#nav { view-transition-name: nav; }
#live { view-transition-name: live; }
::view-transition-group(nav), ::view-transition-group(live) { animation-duration: .35s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; mix-blend-mode: normal; }

/* avr — MD3: вкладки «fade through», вглубь/назад «shared axis X», тема — звезда из точки нажатия */
html[data-vt="tab"] ::view-transition-old(root) { animation: vt-out .1s cubic-bezier(.3, 0, 1, 1) both; }
html[data-vt="tab"] ::view-transition-new(root) { animation: vt-in-scale .34s .06s cubic-bezier(.05, .7, .1, 1) both; }
html[data-vt="fwd"] ::view-transition-old(root) { animation: vt-out-left .22s cubic-bezier(.3, 0, .8, .15) both; }
html[data-vt="fwd"] ::view-transition-new(root) { animation: vt-in-right .42s cubic-bezier(.05, .7, .1, 1) both; }
html[data-vt="back"] ::view-transition-old(root) { animation: vt-out-right .22s cubic-bezier(.3, 0, .8, .15) both; }
html[data-vt="back"] ::view-transition-new(root) { animation: vt-in-left .42s cubic-bezier(.05, .7, .1, 1) both; }
html[data-vt="theme"] ::view-transition-old(root) { animation: none; }
html[data-vt="theme"] ::view-transition-new(root) { animation: vt-star .75s cubic-bezier(.6, 0, .3, 1) both;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C53 30 70 47 98 50C70 53 53 70 50 98C47 70 30 53 2 50C30 47 47 30 50 2Z'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C53 30 70 47 98 50C70 53 53 70 50 98C47 70 30 53 2 50C30 47 47 30 50 2Z'/%3E%3C/svg%3E") no-repeat;
  -webkit-mask-size: var(--s) var(--s); mask-size: var(--s) var(--s);
  -webkit-mask-position: calc(var(--vx, 50vw) - var(--s) / 2) calc(var(--vy, 50vh) - var(--s) / 2); mask-position: calc(var(--vx, 50vw) - var(--s) / 2) calc(var(--vy, 50vh) - var(--s) / 2); }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in-scale { from { opacity: 0; transform: scale(.94); } }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-40px); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(60px); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(40px); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-60px); } }
@keyframes vt-star { from { --s: 0px; } to { --s: 360vmax; } }

/* КС54 — резко и по диагонали: шторка под 45° слева направо, как линии бренда */
html[data-theme="ks54"][data-vt] ::view-transition-old(root) { animation: none; }
html[data-theme="ks54"][data-vt] ::view-transition-new(root) { animation: ks-wipe .32s cubic-bezier(.7, 0, .2, 1) both; }
html[data-theme="ks54"][data-vt="back"] ::view-transition-new(root) { animation: ks-wipe-back .32s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes ks-wipe { from { clip-path: polygon(-60% 0, -60% 0, -120% 100%, -120% 100%); } to { clip-path: polygon(-60% 0, 220% 0, 160% 100%, -120% 100%); } }
@keyframes ks-wipe-back { from { clip-path: polygon(220% 0, 220% 0, 160% 100%, 160% 100%); } to { clip-path: polygon(-60% 0, 220% 0, 160% 100%, -120% 100%); } }

/* появление элементов списком (лесенкой) */
.rise { animation: rise-in .5s calc(var(--i, 0) * 35ms) var(--spring) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
[data-theme="ks54"] .rise { animation: ks-rise .28s calc(var(--i, 0) * 30ms) cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ks-rise { from { opacity: 0; transform: translateX(-14px); clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* смена дня/недели — по оси X, смена вкладки внутри экрана — fade through */
.slide-l { animation: slide-l .38s cubic-bezier(.05, .7, .1, 1) both; }
.slide-r { animation: slide-r .38s cubic-bezier(.05, .7, .1, 1) both; }
.fade-through { animation: vt-in-scale .32s cubic-bezier(.05, .7, .1, 1) both; }
@keyframes slide-l { from { opacity: 0; transform: translateX(48px); } }
@keyframes slide-r { from { opacity: 0; transform: translateX(-48px); } }

/* шторка закрывается тоже анимацией */
#sheet.closing { animation: sheet-down .26s cubic-bezier(.3, 0, .8, .15) both; }
#sheet-backdrop.closing { animation: fade-out .26s both; }
@keyframes sheet-down { to { transform: translate(-50%, 100%); } }
@keyframes fade-out { to { opacity: 0; } }
[data-theme="ks54"] #sheet { animation: ks-sheet .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes ks-sheet { from { transform: translate(-50%, 100%); clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); } }

/* индикатор вкладки растёт из центра (MD3) */
#nav button.on .ind { animation: pill .45s var(--spring); }
@keyframes pill { from { transform: scaleX(.3); opacity: .4; } }
[data-theme="ks54"] #nav button.on .ind { animation: ks-pill .2s steps(3); }
@keyframes ks-pill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* логотип КС54 в интерфейсе темы */
.brand-row { display: none; align-items: center; gap: 10px; margin: 0 2px 6px; color: #fff; }
.brand-row .ks-logo { height: 18px; width: auto; }
.brand-row span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--signal); text-transform: uppercase; }
[data-theme="ks54"] .brand-row { display: flex; }
.login .ks-logo { width: 150px; color: #fff; margin-bottom: 24px; display: none; animation: ks-in .5s cubic-bezier(.2, .8, .2, 1) both; }
[data-theme="ks54"] .login .ks-logo { display: block; }
[data-theme="ks54"] .login > .star { display: none; }
.idcard .deco-lines { width: 84px; height: 84px; }

/* ================================================================ пометка свежести данных */
.fresh { font-size: 12px; color: var(--on-sf-v); opacity: .75; margin-top: 4px; min-height: 0; }
.fresh:empty { display: none; }
.fresh.warn { color: var(--primary); opacity: 1; font-weight: 640; }
[data-theme="ks54"] .fresh { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
[data-theme="ks54"] .fresh.warn { color: var(--signal); }

/* на телефоне правой колонки нет */
.dash-side { display: none; }
.wgrid { display: none; }

/* ================================================================ ПК (от 1000 px): навигационная панель, дашборд, неделя сеткой */
@media (min-width: 1000px) {
  #app { max-width: 1320px; padding-left: 112px; }
  #view { padding: 28px 36px 48px; }
  body.has-live #view { padding-bottom: 48px; }
  /* навигационная панель MD3 слева */
  #nav { left: 20px; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; gap: 6px; padding: 12px 8px; border-radius: 40px; }
  #nav button { min-width: 72px; width: 76px; padding: 8px 4px; font-size: 12px; }
  #nav button .ind { width: 56px; height: 32px; }
  [data-theme="ks54"] #nav { transform: translateY(-50%); }
  ::view-transition-group(nav) { animation: none; }
  /* плавающий остаток — справа сверху */
  #live { left: auto; right: 32px; top: auto; bottom: 28px; transform: none; width: 380px; animation: none; }
  .t-display { font-size: 40px; }
  .bar { margin: 4px 0 26px; }
  /* дашборд «Сегодня» */
  .dash { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .dash-side { display: block; }
  .deck { --h: 340px; }
  .dc .name { font-size: 36px; }
  /* неделя колонками */
  .wgrid { display: grid; gap: 10px; align-items: start; }
  .wcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .whead { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 18px; color: var(--on-sf-v); }
  .whead .dw { text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
  .whead .dn { font-size: 22px; font-weight: 760; color: var(--on-sf); }
  .wcol.today .whead { background: var(--pc); color: var(--on-pc); }
  .wcol.today .whead .dn { color: var(--on-pc); }
  .wtile { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 12px 14px; border-radius: 18px; text-align: left;
    transition: transform .35s var(--spring), border-radius .35s var(--spring), filter .2s; }
  .wtile:hover { transform: translateY(-3px); border-radius: 24px; filter: brightness(1.06); }
  .wtile .wt { font-size: 12px; font-weight: 700; opacity: .85; }
  .wtile .wn { font-weight: 700; font-size: 15px; line-height: 1.2; }
  .wtile .wm { font-size: 12px; opacity: .8; }
  .wtile .dot { position: absolute; top: 12px; right: 12px; background: currentColor; }
  .wtile.cancelled { opacity: .5; text-decoration: line-through; }
  .wnote { font-size: 12px; color: var(--primary); padding: 0 12px; }
  .wempty { color: var(--on-sf-v); font-size: 13px; padding: 14px 12px; opacity: .7; }
  [data-theme="ks54"] .whead, [data-theme="ks54"] .wtile { border-radius: 0; }
  [data-theme="ks54"] .wtile { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
  [data-theme="ks54"] .whead .dw, [data-theme="ks54"] .wtile .wt { font-family: var(--font-mono); }
  /* списки в две колонки */
  #mbox, #hwbox, #b { columns: 2; column-gap: 24px; }
  #mbox > *, #hwbox > *, #b > * { break-inside: avoid; }
  #mbox .group-title, #hwbox .group-title { break-after: avoid; }
  .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* профиль и настройки — по центру, не на всю ширину */
  .bar:has(.t-headline) ~ * { max-width: 760px; }
  /* шторка становится диалогом по центру */
  #sheet { top: 50%; bottom: auto; transform: translate(-50%, -50%); max-width: 600px; max-height: 82vh; border-radius: 32px; padding: 26px 30px 30px;
    animation: dialog-in .42s cubic-bezier(.05, .7, .1, 1); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
  #sheet .grab { display: none; }
  #sheet.closing { animation: dialog-out .2s cubic-bezier(.3, 0, .8, .15) both; }
  [data-theme="ks54"] #sheet { animation: dialog-in .3s cubic-bezier(.2, .8, .2, 1); clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); }
  /* наведение мышью */
  .pair:hover, button.item:hover, .widget:hover, button.card:hover { filter: brightness(1.07); }
  .dc.p1:hover { transform: translateY(72px) scale(.95); }
}
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } }
@keyframes dialog-out { to { opacity: 0; transform: translate(-50%, -48%) scale(.96); } }

/* ================================================================ «Powered by avr labs» — ссылка */
:root, [data-theme="avr"] { --labs: var(--primary); }
[data-theme="ks54"] { --labs: #F2A5C3; }
a.powered { text-decoration: none; display: flex; width: fit-content; margin: 0 auto; border-radius: 16px; padding: 6px 10px; transition: transform .35s var(--spring), background .2s; }
a.powered:hover { background: color-mix(in oklab, var(--on-sf) 6%, transparent); }
a.powered:active { transform: scale(.94); }
#splash a.powered { left: 50%; transform: translateX(-50%); }

/* ================================================================ функции PulsarMESH */
.avatar { position: relative; overflow: hidden; }
.avatar .ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-banner { display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 14px; margin: 0 0 14px; background: var(--pc); color: var(--on-pc); border-radius: var(--r); }
.app-banner .ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--on-pc) 14%, transparent); flex: none; }
.app-banner .bd { flex: 1; min-width: 0; }
.app-banner .sub { font-size: 12px; opacity: .85; }
.app-banner .icon-btn { width: 36px; height: 36px; color: inherit; opacity: .7; font-size: 14px; }
[data-theme="ks54"] .app-banner { background: var(--sf-high); color: #fff; }
.changes { border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent); }
.changes .t-kicker { display: flex; align-items: center; gap: 6px; }
.changes .t-kicker svg { width: 18px; height: 18px; }
.chg { padding: 6px 0; font-size: 14px; border-top: 1px solid var(--outline-v); }
.chg:first-of-type { border-top: 0; }
textarea.field.note { height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.45; border-radius: var(--r-s); }
.note-ic { width: 16px; height: 16px; color: var(--on-sf-v); }
.item > .ic:not(:has(svg)) { font-weight: 800; }
/* статистика */
.bar-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.bar-track { flex: 1; height: 12px; background: var(--sf-high); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; transition: width .8s var(--spring); }
.months { display: flex; gap: 8px; align-items: flex-end; }
.mon { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.mcol { width: 100%; max-width: 44px; height: 110px; background: var(--sf-high); border-radius: 14px; display: flex; align-items: flex-end; overflow: hidden; }
.mfill { width: 100%; background: var(--primary); border-radius: 14px; }
[data-theme="ks54"] .bar-track, [data-theme="ks54"] .bar-fill, [data-theme="ks54"] .mcol, [data-theme="ks54"] .mfill { border-radius: 0; }
[data-theme="ks54"] .mfill { background: var(--signal); }
/* ачивки — вырезаны звездой (брендбук avr: награды — star) */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ach { background: var(--sf-low); border-radius: var(--r); padding: 16px 12px; text-align: center; opacity: .5; filter: grayscale(1); transition: transform .4s var(--spring); }
.ach.ok { opacity: 1; filter: none; }
.ach.ok:hover { transform: translateY(-4px) rotate(-2deg); }
.ach-star { display: block; width: 56px; height: 56px; margin: 0 auto 10px; background: var(--grad, linear-gradient(135deg, #F2A5C3, #5A4FC8));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C53 30 70 47 98 50C70 53 53 70 50 98C47 70 30 53 2 50C30 47 47 30 50 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C53 30 70 47 98 50C70 53 53 70 50 98C47 70 30 53 2 50C30 47 47 30 50 2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ach.ok .ach-star { animation: twinkle 2.6s ease-in-out infinite; }
.ach .an { font-weight: 700; font-size: 14px; }
.ach .ad { font-size: 12px; color: var(--on-sf-v); margin-top: 2px; }
[data-theme="ks54"] .ach { border-radius: 0; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
[data-theme="ks54"] .ach-star { background: var(--signal); }
.spark { position: fixed; z-index: 9999; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; background: linear-gradient(135deg, #F2A5C3, #5A4FC8);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C53 30 70 47 98 50C70 53 53 70 50 98C47 70 30 53 2 50C30 47 47 30 50 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C53 30 70 47 98 50C70 53 53 70 50 98C47 70 30 53 2 50C30 47 47 30 50 2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.avatar .ava-img { opacity: 0; transition: opacity .4s; }
.avatar .ava-img.ok { opacity: 1; }

/* ---------- пропуски: длинные названия переносятся, уроки одного предмета сведены в строку */
.chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.att-ls { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.att-l { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-xs); background: var(--sf-high); font-size: 14px; line-height: 1.3; }
.att-l span { min-width: 0; overflow-wrap: anywhere; }
.att-l small { flex: none; color: var(--on-sf-v); font-weight: 600; }
[data-theme="ks54"] .att-l { border-radius: 0; border-left: 3px solid var(--primary); }

/* ---------- неделя на телефоне: таблица пары × дни */
.mweek { display: grid; gap: 4px; margin-top: 4px; }
.mwh { display: flex; flex-direction: column; align-items: center; padding: 4px 0 6px; font-size: 11px; color: var(--on-sf-v); }
.mwh b { font-size: 17px; color: var(--on-sf); font-weight: 700; }
.mwh.today b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--on-primary); }
.mwn { grid-column: 1; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--on-sf-v); }
.mwt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 6px 2px;
  border-radius: 14px; font-size: 13px; line-height: 1.1; text-align: center; transition: transform .25s var(--spring, ease), border-radius .25s; }
.mwt:active { transform: scale(.94); border-radius: 20px; }
.mwt b { font-weight: 760; font-size: 12px; letter-spacing: -.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mwt small { font-size: 10px; opacity: .8; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwt .dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; background: currentColor; }
.mwt.cancelled { opacity: .45; text-decoration: line-through; }
.mwoff { display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; color: var(--on-sf-v); border-radius: 14px; background: var(--sf); }
.mwlegend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 14px; font-size: 12px; color: var(--on-sf-v); }
.mwlegend div { display: flex; gap: 6px; min-width: 0; }
.mwlegend b { flex: none; min-width: 34px; color: var(--on-sf); }
.mwlegend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="ks54"] .mwt, [data-theme="ks54"] .mwoff { border-radius: 0; }
[data-theme="ks54"] .mwt b, [data-theme="ks54"] .mwn, [data-theme="ks54"] .mwh b { font-family: var(--font-mono); }
[data-theme="ks54"] .mwh.today b { border-radius: 0; }
@media (min-width: 1000px) { .mob-only { display: none !important; } }

/* ---------- группа: чат, ДЗ с голосами, опросы, кто где */
.chat { display: flex; flex-direction: column; gap: 6px; max-height: calc(100dvh - 330px); overflow-y: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.msg { max-width: 82%; align-self: flex-start; padding: 8px 12px; border-radius: 18px 18px 18px 6px; background: var(--sf-high); }
.msg.mine { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--primary); color: var(--on-primary); }
.msg .who { font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.msg .tx { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.35; }
.msg .at { font-size: 11px; opacity: .65; text-align: right; margin-top: 2px; }
.composer { display: flex; gap: 8px; margin-top: 10px; }
.composer .field { flex: 1; margin: 0; }
.hwshare { display: flex; gap: 12px; align-items: flex-start; }
.hwshare .vote { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 34px; }
.hwshare .vote button { width: 34px; height: 28px; border-radius: 10px; color: var(--on-sf-v); background: var(--sf-high); font-size: 13px; }
.hwshare .vote button.on { background: var(--primary); color: var(--on-primary); }
.hwshare .bd { min-width: 0; flex: 1; }
.hwshare .tx { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0; }
.hwshare .sub, .poll .sub { font-size: 12px; color: var(--on-sf-v); }
.poll { display: flex; flex-direction: column; gap: 8px; }
.popt { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 14px;
  border-radius: 14px; background: var(--sf-high); overflow: hidden; text-align: left; isolation: isolate; }
.popt::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--sc); z-index: -1; transition: width .5s var(--spring, ease); }
.popt.on { outline: 2px solid var(--primary); }
.popt span { overflow-wrap: anywhere; }
.form { display: flex; flex-direction: column; gap: 6px; }
.form .field { margin: 0 0 6px; }
.ava-s { font-size: 13px; font-weight: 700; }
.ava-s.free { background: var(--sc); color: var(--on-sc); }
.ava-s.busy { background: var(--k-practice); color: var(--kt-practice); }
[data-theme="ks54"] .msg, [data-theme="ks54"] .popt, [data-theme="ks54"] .hwshare .vote button { border-radius: 0; }