/* Gradely: спокойный интерфейс в духе Apple — белые карточки, тонкие линии, один синий цвет. */ :host, .pmg-page { --tint: rgba(0, 0, 0, .28); --glow-1: transparent; --glow-2: transparent; --glass: rgba(255, 255, 255, .78); --glass-2: rgba(118, 118, 128, .08); --glass-3: #FFFFFF; --stroke: rgba(60, 60, 67, .10); --hair: rgba(60, 60, 67, .12); --hair-2: rgba(60, 60, 67, .20); --ink: #1C1C1E; --ink-2: #3A3A3C; --soft: #6E6E73; --accent: #0071E3; --accent-soft: rgba(0, 113, 227, .10); --on-accent: #FFFFFF; --ring-1: #0A84FF; --ring-2: #5AC8FA; --ring-3: #5E5CE6; --m5: #248A3D; --m4: #0071E3; --m3: #C93400; --m2: #D70015; --ill: #8944AB; --ok: #0071A4; --unk: #D70015; --shadow: 0 30px 80px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .06); --card-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .06); --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PMG Onest", "Segoe UI", system-ui, sans-serif; --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PMG Onest", "Segoe UI", system-ui, sans-serif; --rounded: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "PMG Onest", system-ui, sans-serif; --brand: linear-gradient(160deg, #46A8FF 0%, #0A66FF 100%); --brand-text: linear-gradient(100deg, #0071E3, #0A84FF); --menu-bg: #FFFFFF; --page-bg: #F2F2F7; --fx-1: transparent; --fx-2: transparent; --fx-spot: transparent; --glare: transparent; --glyph: transparent; --lift-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 14px 34px rgba(0, 0, 0, .10); --spring: cubic-bezier(.34, 1.56, .64, 1); --radius: 18px; color-scheme: light; } :host { all: initial; } :host([data-theme="dark"]), .pmg-page[data-theme="dark"] { --tint: rgba(0, 0, 0, .55); --glass: rgba(28, 28, 30, .78); --glass-2: rgba(118, 118, 128, .24); --glass-3: #1C1C1E; --stroke: rgba(84, 84, 88, .36); --hair: rgba(84, 84, 88, .48); --hair-2: rgba(84, 84, 88, .65); --ink: #F5F5F7; --ink-2: #D1D1D6; --soft: #98989D; --accent: #0A84FF; --accent-soft: rgba(10, 132, 255, .18); --on-accent: #FFFFFF; --m5: #30D158; --m4: #0A84FF; --m3: #FF9F0A; --m2: #FF453A; --ill: #BF5AF2; --ok: #64D2FF; --unk: #FF453A; --shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 .5px rgba(255, 255, 255, .08); --card-shadow: 0 0 0 .5px rgba(255, 255, 255, .06); --brand-text: linear-gradient(100deg, #0A84FF, #64D2FF); --menu-bg: #1C1C1E; --page-bg: #000000; --lift-shadow: 0 14px 34px rgba(0, 0, 0, .55); color-scheme: dark; } @media (prefers-color-scheme: dark) { :host(:not([data-theme="light"])), .pmg-page:not([data-theme="light"]) { --tint: rgba(0, 0, 0, .55); --glass: rgba(28, 28, 30, .78); --glass-2: rgba(118, 118, 128, .24); --glass-3: #1C1C1E; --stroke: rgba(84, 84, 88, .36); --hair: rgba(84, 84, 88, .48); --hair-2: rgba(84, 84, 88, .65); --ink: #F5F5F7; --ink-2: #D1D1D6; --soft: #98989D; --accent: #0A84FF; --accent-soft: rgba(10, 132, 255, .18); --on-accent: #FFFFFF; --m5: #30D158; --m4: #0A84FF; --m3: #FF9F0A; --m2: #FF453A; --ill: #BF5AF2; --ok: #64D2FF; --unk: #FF453A; --shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 .5px rgba(255, 255, 255, .08); --card-shadow: 0 0 0 .5px rgba(255, 255, 255, .06); --brand-text: linear-gradient(100deg, #0A84FF, #64D2FF); --menu-bg: #1C1C1E; --page-bg: #000000; --lift-shadow: 0 14px 34px rgba(0, 0, 0, .55); color-scheme: dark; } } * { box-sizing: border-box; } button, select, input { font: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ---------- Кнопка в углу ---------- */ .launcher { position: fixed; right: 24px; bottom: 24px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 1px solid var(--stroke); border-radius: 999px; background: var(--glass); color: var(--ink); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); font: 600 14px/1 var(--sans); letter-spacing: -.01em; box-shadow: 0 10px 30px rgba(8, 12, 30, .18); transition: transform .2s ease, box-shadow .2s ease; } .launcher:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(8, 12, 30, .24); } .launcher-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; } .launcher-avg { font-variant-numeric: tabular-nums; color: var(--soft); font-weight: 600; } .launcher-avg:empty { display: none; } .launcher-badge { position: absolute; top: -5px; left: 26px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--m2); color: #fff; font: 700 11px/20px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--glass-3); } .launcher-badge[hidden] { display: none; } /* ---------- Панель справа на сайте ---------- */ .launcher.hide { opacity: 0; pointer-events: none; transform: translateY(10px); } .panel { display: flex; flex-direction: column; overflow: hidden; color: var(--ink-2); font: 400 14.5px/1.5 var(--sans); font-variant-numeric: tabular-nums; } .panel[hidden] { display: none; } .panel.drawer { position: fixed; top: 10px; right: 10px; bottom: 10px; z-index: 3; width: min(560px, calc(100vw - 20px)); border-radius: 22px; border: 1px solid var(--stroke); background: var(--glass); -webkit-backdrop-filter: blur(36px) saturate(180%); backdrop-filter: blur(36px) saturate(180%); box-shadow: var(--shadow); animation: slide .32s cubic-bezier(.2, .8, .2, 1) both; } @keyframes slide { from { opacity: 0; transform: translateX(30px); } } @keyframes fade { from { opacity: 0; } } /* ---------- Отдельная вкладка ---------- */ body.pmg-page { margin: 0; min-height: 100vh; background: var(--page-bg, #F2F2F7); background-attachment: fixed; font-family: var(--sans); } .panel.page { height: 100vh; max-width: 1360px; margin: 0 auto; border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); } .head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--hair); } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand-mark { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(99, 102, 241, .35), inset 0 1px 0 rgba(255, 255, 255, .35); } .brand-name { font: 700 17px/1.2 var(--sans); letter-spacing: -.02em; background: var(--brand-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .who { font-size: 12.5px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .school::before { content: ", "; } .school:empty::before { content: ""; } .head-tools { display: flex; align-items: center; gap: 6px; } .period select { appearance: none; padding: 8px 32px 8px 14px; border: 1px solid var(--hair-2); border-radius: 10px; background: var(--glass-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23878EA3' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center; font-size: 13.5px; font-weight: 500; color: var(--ink-2); } .period select option, .subj-select select option { background: var(--menu-bg); color: var(--ink); } select, input[type=date] { color-scheme: inherit; } .icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--soft); transition: background .15s, color .15s; } .icon-btn:hover { background: var(--glass-2); border-color: var(--hair); color: var(--ink); } .icon-btn.spin svg { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .layout { flex: 1; display: grid; grid-template-columns: 196px 1fr; min-height: 0; } .tabs { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; border-right: 1px solid var(--hair); } .drawer .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .drawer .tabs { flex-direction: row; flex-wrap: wrap; gap: 3px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--hair); } .drawer .tabs::-webkit-scrollbar { display: none; } .drawer .tab { flex: 1 1 auto; white-space: nowrap; padding: 7px 6px; font-size: 13px; text-align: center; } .drawer .head { padding: 14px 14px 12px 16px; } .drawer .brand-mark { width: 32px; height: 32px; border-radius: 10px; } .tab { text-align: left; padding: 9px 14px; border: 1px solid transparent; border-radius: 10px; background: none; font-size: 14px; font-weight: 500; color: var(--soft); transition: color .15s, background .15s; } .tab:hover { color: var(--ink); background: var(--glass-2); } .tab.on { color: var(--ink); font-weight: 600; } .tab-more { display: contents; } .more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .more-btn svg { transition: transform .2s; } .tab-more.open .more-btn svg { transform: rotate(180deg); } .more-menu { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 2px 10px; border-left: 2px solid var(--hair); margin: 2px 0 2px 14px; } .more-menu button { text-align: left; padding: 7px 12px; border: 0; border-radius: 9px; background: none; font: 500 13.5px var(--sans); color: var(--soft); cursor: pointer; } .more-menu button:hover { color: var(--ink); background: var(--glass-2); } .more-menu button.on { color: var(--accent); font-weight: 600; } .drawer .more-menu { flex: 1 1 100%; flex-direction: row; justify-content: center; border-left: 0; border-top: 1px dashed var(--hair-2); margin: 4px 0 0; padding: 6px 0 0; } .sheet { position: relative; overflow: auto; padding: 28px 32px 44px; outline: none; container: sheet / inline-size; } .drawer .sheet { padding: 18px 18px 30px; } h2 { font: 600 15px/1.3 var(--sans); color: var(--ink); margin: 0 0 14px; letter-spacing: -.01em; } h3 { font: 600 14px/1.3 var(--sans); color: var(--ink); margin: 0 0 12px; letter-spacing: -.01em; } section { margin-bottom: 22px; } p { margin: 0 0 8px; } .lead { font-size: 16px; color: var(--ink-2); } .muted { color: var(--soft); font-size: 13.5px; } .err { color: var(--m2); } .ok { color: var(--m5); font-weight: 600; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .two > section, .card, .chart-box, .subj-table-wrap { background: var(--glass-2); border: 1px solid var(--hair); border-radius: 18px; padding: 20px 22px; box-shadow: var(--card-shadow); } .link { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; } .link:hover { text-decoration: underline; text-underline-offset: 3px; } .btn { padding: 9px 16px; border: 1px solid var(--hair-2); border-radius: 10px; background: var(--glass-3); font-weight: 600; } /* Оценки: плитки с мягкой подложкой */ .mark { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; font: 600 14px/1 var(--sans); margin-right: 6px; } .mark.sm { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; margin: 0; } .m5 { color: var(--m5); } .m4 { color: var(--m4); } .m3 { color: var(--m3); } .m2 { color: var(--m2); } .m0 { color: var(--soft); } .mark.m5 { background: color-mix(in srgb, var(--m5) 14%, transparent); } .mark.m4 { background: color-mix(in srgb, var(--m4) 14%, transparent); } .mark.m3 { background: color-mix(in srgb, var(--m3) 16%, transparent); } .mark.m2 { background: color-mix(in srgb, var(--m2) 14%, transparent); } .mark.m0 { background: var(--hair); } .mark.ghost { background: none; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .55; } .mark.pop { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1) both; } @keyframes pop { from { transform: scale(.5); opacity: 0; } } /* ---------- Сводка ---------- */ .hero { display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center; padding: 22px 26px; margin-bottom: 22px; border-radius: 22px; border: 1px solid var(--stroke); background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 60%), var(--glass-2); box-shadow: var(--card-shadow); } .gauge-wrap { position: relative; width: 236px; height: 150px; } .gauge { width: 100%; height: auto; display: block; overflow: visible; } .g-track { fill: none; stroke: var(--hair-2); stroke-width: 12; stroke-linecap: round; } .g-arc { fill: none; stroke-width: 12; stroke-linecap: round; stroke-dashoffset: var(--off); } .gauge.anim .g-arc { animation: gauge 1.1s cubic-bezier(.25, .8, .25, 1) both; } @keyframes gauge { from { stroke-dashoffset: var(--len); } } .g-tick { font: 500 11px var(--sans); fill: var(--soft); } .hero-avg { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font: 600 52px/1 var(--sans); letter-spacing: -.035em; color: var(--ink); } .hero-cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 12px; color: var(--soft); } .hero-text p { margin-bottom: 4px; color: var(--soft); } .hero-text .lead { color: var(--ink); font-weight: 500; } .forecast { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13.5px; margin-top: 12px !important; } .times { margin-right: 12px; color: var(--ink-2); font-weight: 600; } .fc { white-space: nowrap; display: inline-flex; align-items: center; } .facts { display: flex; flex-direction: column; gap: 10px; } .fact { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; min-width: 220px; border: 1px solid var(--hair); border-radius: 14px; background: var(--glass-3); text-align: left; transition: border-color .15s, transform .15s; } .fact:hover { border-color: var(--accent); transform: translateY(-1px); } .fact b { font: 600 24px/1 var(--sans); color: var(--ink); letter-spacing: -.02em; } .fact span { font-size: 13px; color: var(--soft); } .fact span:only-child { font-size: 13.5px; color: var(--accent); font-weight: 600; padding: 5px 0; } .tips { list-style: none; margin: 0; padding: 0; } .tips li { padding: 10px 0 10px 18px; position: relative; border-bottom: 1px solid var(--hair); font-size: 14px; } .tips li:last-child { border-bottom: 0; } .tips li::before { content: ""; position: absolute; left: 0; top: 18px; width: 7px; height: 7px; border-radius: 50%; } .tip-up::before { background: var(--m5); box-shadow: 0 0 0 4px color-mix(in srgb, var(--m5) 18%, transparent); } .tip-risk::before { background: var(--m2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--m2) 18%, transparent); } .tip-few::before { background: var(--m3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--m3) 18%, transparent); } .fresh { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .fresh li { display: flex; align-items: center; gap: 6px; } .fresh small, .mark-list small { display: block; color: var(--soft); font-size: 12px; } .subj-table { display: flex; flex-direction: column; background: var(--glass-2); border: 1px solid var(--hair); border-radius: 18px; padding: 6px; box-shadow: var(--card-shadow); } .subj-row { display: grid; grid-template-columns: minmax(160px, 1.3fr) 2fr 44px 22px 104px; align-items: center; gap: 16px; padding: 9px 14px; border: 0; border-radius: 12px; background: none; text-align: left; transition: background .15s; } .subj-row + .subj-row { box-shadow: 0 -1px 0 var(--hair); } .subj-row:hover { background: var(--glass-3); box-shadow: none; } .subj-row:hover + .subj-row { box-shadow: none; } .subj-name { font-weight: 500; color: var(--ink); } .strip { display: flex; gap: 4px; flex-wrap: wrap; } .trend { font-size: 16px; text-align: center; color: var(--soft); } .trend.up { color: var(--m5); } .trend.down { color: var(--m2); } .will { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-size: 12.5px; color: var(--soft); } .will .mark { margin: 0; } .settings { padding-top: 6px; margin-top: 10px; } .seg-ctl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 10px; } .seg-ctl > span { margin-right: 8px; color: var(--soft); font-size: 13.5px; } .seg-ctl button { min-width: 42px; padding: 6px 14px; border: 1px solid var(--hair); border-radius: 10px; background: var(--glass-2); font-weight: 600; font-size: 13.5px; color: var(--soft); transition: all .15s; } .seg-ctl button:hover { color: var(--ink); } .seg-ctl button.on { color: var(--on-accent); background: var(--accent); border-color: transparent; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); } /* Кольца */ .ring { color: var(--soft); flex: none; } .ring.m5 { color: var(--m5); } .ring.m4 { color: var(--m4); } .ring.m3 { color: var(--m3); } .ring.m2 { color: var(--m2); } .ring-track { fill: none; stroke: var(--hair-2); stroke-width: 4; } .ring-arc { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-dashoffset: var(--off); animation: ring .9s cubic-bezier(.3, .7, .2, 1) both; } .ring-text { font-family: var(--sans); font-weight: 600; fill: var(--ink); letter-spacing: -.02em; } @keyframes ring { from { stroke-dashoffset: var(--c); } } /* ---------- Предметы ---------- */ .subj-layout { display: grid; grid-template-columns: 236px 1fr; gap: 24px; } .subj-list { display: flex; flex-direction: column; gap: 1px; position: sticky; top: 0; align-self: start; background: var(--glass-2); border: 1px solid var(--hair); border-radius: 18px; padding: 6px; box-shadow: var(--card-shadow); } .subj-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 13.5px; color: var(--ink-2); } .subj-item:hover { background: var(--glass-3); } .subj-item.on { background: var(--accent); color: var(--on-accent); font-weight: 600; } .subj-item b { font-weight: 600; font-size: 13px; } .subj-item.on b { color: var(--on-accent); } .detail-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; } .detail-head p { display: flex; align-items: center; gap: 6px; color: var(--soft); flex-wrap: wrap; margin: 0; } .detail-title { font-size: 24px; margin: 0 0 6px; letter-spacing: -.02em; } .chart-box { margin-bottom: 22px; padding-bottom: 10px; } .line-chart { width: 100%; height: auto; display: block; overflow: visible; } .line-chart .grid { stroke: var(--hair); stroke-width: 1; } .line-chart .axis { font: 500 12px var(--sans); fill: var(--soft); } .line-chart .bound { stroke: var(--soft); stroke-width: 1; stroke-dasharray: 2 5; opacity: .55; } .line-chart .bound-label { font: 500 11px var(--sans); fill: var(--soft); } .line-chart .area { fill: url(#pmg-area); animation: fade .8s ease .4s both; } .line-chart .area-top { stop-color: var(--accent); stop-opacity: .22; } .line-chart .area-bot { stop-color: var(--accent); stop-opacity: 0; } .line-chart .dot { stroke: var(--glass-3); stroke-width: 2; animation: fade .3s ease both .7s; } .line-chart .dot.m5 { fill: var(--m5); } .line-chart .dot.m4 { fill: var(--m4); } .line-chart .dot.m3 { fill: var(--m3); } .line-chart .dot.m2 { fill: var(--m2); } .line-chart .dot.hyp { fill: none; stroke-width: 2; animation: none; } .line-chart .dot.hyp.m5 { stroke: var(--m5); } .line-chart .dot.hyp.m4 { stroke: var(--m4); } .line-chart .dot.hyp.m3 { stroke: var(--m3); } .line-chart .dot.hyp.m2 { stroke: var(--m2); } .line-chart .pen { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: draw 1.1s ease-in-out both; } .line-chart .pen.hyp { stroke-dasharray: 5 5; animation: none; opacity: .75; } .line-chart .pen-end { fill: var(--accent); stroke: var(--glass-3); stroke-width: 3; } .line-chart .hit { fill: transparent; } .line-chart .hit:hover { fill: color-mix(in srgb, var(--accent) 8%, transparent); } @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } .calc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .calc-list li { display: flex; align-items: center; font-size: 14px; } .calc-list .or { color: var(--soft); font-size: 12px; padding-left: 4px; } .add-row { display: flex; gap: 8px; margin-bottom: 14px; } .add { width: 52px; height: 40px; border: 1px solid var(--hair-2); border-radius: 12px; background: var(--glass-3); font: 600 15px/1 var(--sans); transition: transform .1s, border-color .15s; } .add:hover { border-color: currentColor; } .add:active { transform: scale(.94); } .hyp-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 12px; } .mark.hypo { border: 0; cursor: pointer; box-shadow: inset 0 0 0 1.5px currentColor; background: none; animation: pop .3s cubic-bezier(.3, 1.6, .5, 1) both; } .mark.hypo:hover { opacity: .5; } .whatif-res { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14.5px; } .whatif-res b { font: 600 26px/1 var(--sans); color: var(--ink); letter-spacing: -.02em; margin: 0 2px; } .dist { display: grid; gap: 10px; } .dist-row, .hbar { display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 10px; } .hbar { grid-template-columns: minmax(120px, 190px) 1fr 28px; font-size: 13.5px; } .hbar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dist-track { height: 10px; background: var(--hair); border-radius: 6px; overflow: hidden; } .dist-bar { display: block; height: 100%; width: var(--w); border-radius: 6px; transform-origin: left; animation: grow .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); } .dist-bar.m5 { background: var(--m5); } .dist-bar.m4 { background: var(--m4); } .dist-bar.m3 { background: var(--m3); } .dist-bar.m2 { background: var(--m2); } .dist-bar.r-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), var(--accent)); } .dist-n { font-weight: 600; text-align: right; color: var(--ink); } @keyframes grow { from { transform: scaleX(0); } } .mark-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; } .mark-list li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; } .mark-list li:last-child { border-bottom: 0; } .mark-list time { color: var(--soft); font-size: 12.5px; } /* ---------- Домашка ---------- */ .hw-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 20px; } .hw-day h2 { display: flex; align-items: center; gap: 10px; } .hw-day.soon h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .hw-day.past { opacity: .55; } .all-done { font-size: 12px; font-weight: 600; color: var(--m5); padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--m5) 14%, transparent); } .hw-list { display: grid; gap: 8px; } .hw { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; background: var(--glass-2); border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--card-shadow); transition: border-color .15s, background .15s; } .hw:hover { border-color: var(--hair-2); } .hw.compact { box-shadow: none; background: var(--glass-3); grid-template-columns: 24px 1fr; } .hw-check { position: relative; cursor: pointer; padding-top: 1px; } .hw-check input { position: absolute; opacity: 0; width: 1px; height: 1px; } .check { display: block; width: 22px; height: 22px; border: 1.5px solid var(--hair-2); border-radius: 7px; position: relative; background: var(--glass-3); transition: background .15s, border-color .15s; } .hw-check input:focus-visible + .check { outline: 2px solid var(--accent); outline-offset: 2px; } .hw.done .check { background: var(--m5); border-color: var(--m5); } .hw.done .check::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: pop .25s ease both; } .hw-body b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; } .hw-text { display: block; overflow-wrap: anywhere; } .hw.done .hw-text { text-decoration: line-through; color: var(--soft); } .hw-body small { display: block; color: var(--soft); font-size: 12px; margin-top: 6px; } .hw-text a { color: var(--accent); } .files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .file { font-size: 12px; padding: 3px 10px; border: 1px solid var(--hair); border-radius: 8px; background: var(--glass-3); } /* ---------- Пропуски ---------- */ .abs-hero { padding: 22px 26px; border-radius: 22px; border: 1px solid var(--stroke); background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 60%), var(--glass-2); box-shadow: var(--card-shadow); } .big { font: 600 44px/1 var(--sans); color: var(--ink); letter-spacing: -.03em; margin-right: 6px; } .stacked { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 3px; margin: 18px 0 12px; } .seg { width: var(--w); border-radius: 3px; transform-origin: left; animation: grow .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); } .r-ill { background: var(--ill); } .r-ok { background: var(--ok); } .r-unk { background: var(--unk); } .r-other { background: var(--soft); } .legend { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--soft); } .legend b { color: var(--ink); } .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; } .hbars { display: grid; gap: 9px; } .abs-days { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow: auto; } .abs-days li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; } .abs-days li:last-child { border-bottom: 0; } .abs-days time { font-weight: 600; color: var(--ink); } .abs-days small { display: block; color: var(--soft); font-size: 12px; } .reason { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: none; } .reason.r-ill { color: var(--ill); background: color-mix(in srgb, var(--ill) 14%, transparent); } .reason.r-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); } .reason.r-unk { color: var(--unk); background: color-mix(in srgb, var(--unk) 14%, transparent); } /* ---------- Итоговые ---------- */ .table-wrap { overflow: auto; background: var(--glass-2); border: 1px solid var(--hair); border-radius: 18px; box-shadow: var(--card-shadow); } .finals { border-collapse: collapse; width: 100%; font-size: 13.5px; } .finals th, .finals td { padding: 8px 12px; border-bottom: 1px solid var(--hair); text-align: center; white-space: nowrap; } .finals tbody tr:last-child > * { border-bottom: 0; } .finals tbody tr:hover > * { background: var(--glass-3); } .finals th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink); white-space: normal; min-width: 180px; } .finals thead th { font-weight: 600; color: var(--soft); font-size: 12px; position: sticky; top: 0; background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .finals td.past { opacity: .8; } .finals thead th.past:first-of-type, .finals td.past { border-left: 0; } .finals .mark { margin: 0; } .word { font-size: 12px; color: var(--soft); } /* ---------- Шапка: статус ---------- */ .brand-text { min-width: 0; } .who { display: flex; gap: 8px; flex-wrap: wrap; } .status { color: var(--soft); } .status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--m5); margin-right: 6px; vertical-align: 1px; } .status.bad::before { background: var(--m2); } .drawer .who { font-size: 12px; display: block; } .drawer .who-name { display: none; } .drawer .period select { padding: 7px 28px 7px 10px; font-size: 13px; } .drawer .icon-btn { width: 32px; height: 32px; } .icon-btn[disabled] { opacity: .3; pointer-events: none; } .row-btns { display: flex; gap: 10px; justify-content: center; margin-top: 8px; } .btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; text-decoration: none; } .card { margin-bottom: 18px; } /* ---------- Мини-домашка и проверочные ---------- */ .hw-mini { list-style: none; margin: 0; padding: 0; } .hw-mini li { padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; } .hw-mini li:last-child { border-bottom: 0; } .hw-mini b { display: block; color: var(--ink); font-weight: 600; } .hw-mini span { color: var(--ink-2); overflow-wrap: anywhere; } .hw-mini li.done span { text-decoration: line-through; color: var(--soft); } .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .checks li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; font-size: 13.5px; } .checks small { display: block; color: var(--soft); font-size: 12px; } .check-date { display: grid; place-items: center; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 11px; line-height: 1.1; } .check-date b { font-size: 18px; font-weight: 600; } /* ---------- Домашка ---------- */ .hw-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 20px; } .hw-day h2 { display: flex; align-items: center; gap: 10px; } .hw-day.soon h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .hw-day.past { opacity: .55; } .all-done { font-size: 12px; font-weight: 600; color: var(--m5); padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--m5) 14%, transparent); } .hw-list { display: grid; gap: 8px; } .hw { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; background: var(--glass-2); border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--card-shadow); transition: border-color .15s, background .15s; } .hw:hover { border-color: var(--hair-2); } .hw.compact { box-shadow: none; background: var(--glass-3); grid-template-columns: 24px 1fr; } .hw-check { position: relative; cursor: pointer; padding-top: 1px; } .hw-check input { position: absolute; opacity: 0; width: 1px; height: 1px; } .check { display: block; width: 22px; height: 22px; border: 1.5px solid var(--hair-2); border-radius: 7px; position: relative; background: var(--glass-3); transition: background .15s, border-color .15s; } .hw-check input:focus-visible + .check { outline: 2px solid var(--accent); outline-offset: 2px; } .hw.done .check { background: var(--m5); border-color: var(--m5); } .hw.done .check::after { content: ""; position: absolute; left: 6.5px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: pop .25s ease both; } .hw-body b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; } .hw-text { display: block; overflow-wrap: anywhere; } .hw.done .hw-text { text-decoration: line-through; color: var(--soft); } .hw-body small { display: block; color: var(--soft); font-size: 12px; margin-top: 6px; } .hw-text a { color: var(--accent); } .files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .file { font-size: 12px; padding: 3px 10px; border: 1px solid var(--hair); border-radius: 8px; background: var(--glass-3); } /* ---------- Пропуски ---------- */ .abs-hero { padding: 22px 26px; border-radius: 22px; border: 1px solid var(--stroke); background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 60%), var(--glass-2); box-shadow: var(--card-shadow); } .big { font: 600 44px/1 var(--sans); color: var(--ink); letter-spacing: -.03em; margin-right: 6px; } .stacked { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 3px; margin: 18px 0 12px; } .seg { width: var(--w); border-radius: 3px; transform-origin: left; animation: grow .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); } .r-ill { background: var(--ill); } .r-ok { background: var(--ok); } .r-unk { background: var(--unk); } .r-other { background: var(--soft); } .legend { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--soft); } .legend b { color: var(--ink); } .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; } .hbars { display: grid; gap: 9px; } .abs-days { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow: auto; } .abs-days li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; } .abs-days li:last-child { border-bottom: 0; } .abs-days time { font-weight: 600; color: var(--ink); } .abs-days small { display: block; color: var(--soft); font-size: 12px; } .reason { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: none; } .reason.r-ill { color: var(--ill); background: color-mix(in srgb, var(--ill) 14%, transparent); } .reason.r-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); } .reason.r-unk { color: var(--unk); background: color-mix(in srgb, var(--unk) 14%, transparent); } /* ---------- Итоговые ---------- */ .table-wrap { overflow: auto; background: var(--glass-2); border: 1px solid var(--hair); border-radius: 18px; box-shadow: var(--card-shadow); } .finals { border-collapse: collapse; width: 100%; font-size: 13.5px; } .finals th, .finals td { padding: 8px 12px; border-bottom: 1px solid var(--hair); text-align: center; white-space: nowrap; } .finals tbody tr:last-child > * { border-bottom: 0; } .finals tbody tr:hover > * { background: var(--glass-3); } .finals th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink); white-space: normal; min-width: 180px; } .finals thead th { font-weight: 600; color: var(--soft); font-size: 12px; position: sticky; top: 0; background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .finals td.past { opacity: .8; } .finals thead th.past:first-of-type, .finals td.past { border-left: 0; } .finals .mark { margin: 0; } .word { font-size: 12px; color: var(--soft); } /* ---------- Шапка: статус ---------- */ .brand-text { min-width: 0; } .who { display: flex; gap: 8px; flex-wrap: wrap; } .status { color: var(--soft); } .status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--m5); margin-right: 6px; vertical-align: 1px; } .status.bad::before { background: var(--m2); } .drawer .who { font-size: 12px; display: block; } .drawer .who-name { display: none; } .drawer .period select { padding: 7px 28px 7px 10px; font-size: 13px; } .drawer .icon-btn { width: 32px; height: 32px; } .icon-btn[disabled] { opacity: .3; pointer-events: none; } .row-btns { display: flex; gap: 10px; justify-content: center; margin-top: 8px; } .btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; text-decoration: none; } .card { margin-bottom: 18px; } /* ---------- Мини-домашка и проверочные ---------- */ .hw-mini { list-style: none; margin: 0; padding: 0; } .hw-mini li { padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; } .hw-mini li:last-child { border-bottom: 0; } .hw-mini b { display: block; color: var(--ink); font-weight: 600; } .hw-mini span { color: var(--ink-2); overflow-wrap: anywhere; } .hw-mini li.done span { text-decoration: line-through; color: var(--soft); } .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .checks li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; font-size: 13.5px; } .checks small { display: block; color: var(--soft); font-size: 12px; } .check-date { display: grid; place-items: center; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 11px; line-height: 1.1; } .check-date b { font-size: 18px; font-weight: 600; } /* ---------- Расписание ---------- */ .day-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .day-title { margin: 0; flex: 0 1 auto; font-size: 18px; } .day-nav .link { margin-left: auto; } .lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .lesson { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 14px 16px; background: var(--glass-2); border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--card-shadow); } .lesson.now { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .lesson.over { opacity: .62; } .l-time { display: flex; flex-direction: column; align-items: flex-start; font-size: 12px; color: var(--soft); line-height: 1.35; } .l-time b { font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.1; margin-bottom: 2px; } .l-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .l-head b { color: var(--ink); font-weight: 600; margin-right: 4px; } .l-head .mark { width: 24px; height: 24px; font-size: 12.5px; margin: 0; } .pill { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; } .l-topic { color: var(--soft); font-size: 13px; margin: 4px 0 0; } .l-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--soft); margin: 10px 0 4px; } .l-given p { margin: 0 0 4px; font-size: 13.5px; overflow-wrap: anywhere; } .l-given small { color: var(--soft); } .l-hw .hw { padding: 8px 10px; } /* ---------- Домашка ---------- */ .hw-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .seg-ctl.sm { margin: 0; } .seg-ctl.sm button { padding: 5px 12px; font-size: 13px; } .count-pill { font-size: 12px; font-weight: 600; color: var(--soft); background: var(--hair); padding: 2px 9px; border-radius: 999px; } .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .tag { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--hair); color: var(--soft); } .tag.t-check { background: color-mix(in srgb, var(--m2) 14%, transparent); color: var(--m2); } .tag.t-learn { background: color-mix(in srgb, var(--ill) 14%, transparent); color: var(--ill); } .tag.t-write { background: color-mix(in srgb, var(--m4) 13%, transparent); color: var(--m4); } .tag.t-project { background: color-mix(in srgb, var(--m3) 15%, transparent); color: var(--m3); } .tag.t-oral { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } .hw-act { display: flex; align-items: center; gap: 10px; } .link.sm { font-size: 12.5px; font-weight: 500; color: var(--soft); } .link.sm:hover { color: var(--accent); } .date-in { padding: 5px 8px; border: 1px solid var(--hair-2); border-radius: 8px; background: var(--glass-3); font-size: 13px; color-scheme: light dark; } /* ---------- Сравнение с прошлым годом ---------- */ .subj-select { display: none; margin-bottom: 14px; } .subj-select select { width: 100%; appearance: none; padding: 10px 34px 10px 14px; border: 1px solid var(--hair-2); border-radius: 12px; background: var(--glass-2); font-weight: 600; color: var(--ink); } .prev-year { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -6px 0 16px; padding: 10px 14px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--hair); font-size: 13.5px; color: var(--soft); } .prev-year .pv { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); } .prev-year .pv .mark { width: 24px; height: 24px; font-size: 12.5px; margin: 0; } .pv-delta { font-weight: 600; margin-left: auto; } .cmp { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; } .cmp li { display: grid; grid-template-columns: 1fr auto 64px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; } .cmp li:last-child { border-bottom: 0; } .link.plain { color: var(--ink-2); font-weight: 500; text-align: left; } .cmp-marks { display: inline-flex; align-items: center; gap: 6px; color: var(--soft); } .cmp-marks .mark { margin: 0; width: 24px; height: 24px; font-size: 12.5px; } .cmp-delta { font-size: 12px; font-weight: 600; text-align: right; color: var(--soft); } .cmp .better .cmp-delta { color: var(--m5); } .cmp .worse .cmp-delta { color: var(--m2); } .years-chart { width: 100%; height: auto; display: block; overflow: visible; margin: 4px 0 8px; } .years-chart .grid { stroke: var(--hair-2); } .years-chart .axis { font: 500 12px var(--sans); fill: var(--soft); } .years-chart .yval { font: 600 13px var(--sans); fill: var(--ink); } .ybar { fill: color-mix(in srgb, var(--accent) 35%, transparent); transform-box: fill-box; transform-origin: bottom; animation: rise-bar .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d); } .ybar.cur { fill: var(--accent); } @keyframes rise-bar { from { transform: scaleY(0); } } /* ---------- Состояния ---------- */ .state { flex: 1; display: grid; place-content: center; text-align: center; gap: 12px; padding: 40px; color: var(--soft); } .loader { display: flex; gap: 8px; justify-content: center; } .loader span { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: bounce 1s ease-in-out infinite; } .loader span:nth-child(2) { animation-delay: .15s; opacity: .7; } .loader span:nth-child(3) { animation-delay: .3s; opacity: .45; } @keyframes bounce { 50% { transform: translateY(-8px); } } .empty { padding: 30px; text-align: center; color: var(--soft); } .tip { position: fixed; z-index: 10; max-width: 280px; padding: 8px 12px; border-radius: 10px; background: rgba(14, 18, 34, .88); color: #fff; font: 12.5px/1.45 var(--sans); white-space: pre-line; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); } .tip[hidden] { display: none; } /* Тонкие полосы прокрутки */ .sheet, .mark-list, .abs-days, .table-wrap { scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent; } /* ---------- Календарь ---------- */ .cal-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; } .cal { padding: 18px 18px 14px; margin: 0; } .cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .cal-title { margin: 0 4px; font-size: 20px; letter-spacing: -.02em; } .cal-year { color: var(--soft); font-weight: 500; } .cal-head .link { margin-left: auto; } .cal-sum { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--soft); margin: 0 4px 14px; } .cal-sum b { color: var(--ink); font-weight: 600; } .cal-dist { display: inline-flex; gap: 10px; } .cal-dist span { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink-2); } .cal-wd, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-wd span { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--soft); padding-bottom: 6px; } .cal-wd span:nth-child(n+6) { opacity: .6; } .cal-grid { position: relative; } .cal-grid.from-right { animation: cal-in-r .38s cubic-bezier(.2, .8, .2, 1) both; } .cal-grid.from-left { animation: cal-in-l .38s cubic-bezier(.2, .8, .2, 1) both; } @keyframes cal-in-r { from { opacity: 0; transform: translateX(28px); } } @keyframes cal-in-l { from { opacity: 0; transform: translateX(-28px); } } .cal-cell { position: relative; z-index: 1; aspect-ratio: 1 / .92; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 14px; background: none; padding: 0; color: var(--ink-2); transition: background .15s, color .15s, transform .15s; } .cal-cell.blank { pointer-events: none; } .cal-cell:hover { background: var(--glass-3); } .cal-cell:active { transform: scale(.94); } .cal-num { font-size: 14px; font-weight: 500; line-height: 1; } .cal-cell.has .cal-num { font-weight: 600; color: var(--ink); } .cal-cell.weekend .cal-num { color: var(--soft); } .cal-cell.future .cal-num { opacity: .55; } .cal-cell.today .cal-num { color: var(--accent); font-weight: 700; } .cal-cell.today::after { content: ""; position: absolute; inset: 3px; border-radius: 11px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; } .cal-cell.holiday { background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--ok) 10%, transparent) 5px 7px); } .cal-cell[aria-selected="true"] .cal-num { color: var(--accent); font-weight: 700; } .cal-dots { display: flex; gap: 3px; height: 6px; align-items: center; } .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .cal-dots .dot { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1) both; } .more { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--soft); line-height: 6px; } .abs-mark, .note-mark { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; } .abs-mark { box-shadow: inset 0 0 0 1.5px var(--unk); } .note-mark { background: var(--m3); border-radius: 1.5px; transform: rotate(45deg) scale(.9); } .cal-dots .abs-mark:first-child, .cal-dots .note-mark:first-child { margin-left: 0; } .cal-dots .dot + .abs-mark, .cal-dots .dot + .note-mark, .cal-dots .more + .abs-mark { margin-left: 3px; } .cal-cell .final-mark { position: absolute; bottom: 6px; display: block; width: 14px; height: 2px; border-radius: 2px; background: var(--accent); } /* Плавающая подсветка выбранного дня */ .cal-sel { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 14px; pointer-events: none; opacity: 0; background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent), 0 8px 20px color-mix(in srgb, var(--accent) 22%, transparent); transition: transform .42s cubic-bezier(.34, 1.45, .55, 1), width .3s ease, height .3s ease, opacity .2s; } .cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 4px 2px; font-size: 11.5px; color: var(--soft); } .cal-legend span { display: inline-flex; align-items: center; gap: 6px; } .cal-legend .dot { color: var(--accent); } .cal-legend .final-mark { position: static; width: 14px; height: 2px; border-radius: 2px; background: var(--accent); } .hol-sw { width: 14px; height: 10px; border-radius: 3px; background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--ok) 35%, transparent) 3px 5px); } /* Подробности дня */ .cal-details { margin: 0; min-height: 200px; } .cal-details.swap .cd-inner { animation: cd-in .32s cubic-bezier(.2, .8, .2, 1) both; } @keyframes cd-in { from { opacity: 0; transform: translateY(8px); } } .cal-details h2 { font-size: 17px; margin-bottom: 4px; } .cd-sub { color: var(--soft); font-size: 13px; margin-bottom: 12px; } .cd-label { font-size: 12px; font-weight: 600; color: var(--soft); margin: 16px 0 8px; } .cd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cd-list li { display: flex; align-items: center; gap: 6px; font-size: 14px; } .cal-details.swap .cd-list li { animation: cd-in .32s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 40ms); } .cd-list small { display: block; color: var(--soft); font-size: 12px; } .word-chip { flex: none; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 8px; background: var(--hair); color: var(--ink-2); margin-right: 6px; } .word-chip.warn { background: color-mix(in srgb, var(--m3) 16%, transparent); color: var(--m3); } .cd-abs, .cd-hw { font-size: 13.5px; margin: 0; } .cd-abs .reason { margin-right: 4px; } /* ---------- Домашка v2 ---------- */ .hw-hero { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; margin-bottom: 14px; border-radius: 20px; border: 1px solid var(--stroke); background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 60%), var(--glass-2); box-shadow: var(--card-shadow); } .hw-hero .lead { margin: 0; font-weight: 500; color: var(--ink); } .hw-hero .muted { margin: 2px 0 0; } .hw-left { font-size: 20px; color: var(--accent); } .hw-ring { width: 56px; height: 56px; } .hw-ring .ring-track { stroke-width: 5; } .hw-ring-arc { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dashoffset: var(--off); transition: stroke-dashoffset .6s cubic-bezier(.3, .8, .2, 1); animation: ring 1s cubic-bezier(.3, .7, .2, 1) both; } .day-strip { position: sticky; top: -18px; z-index: 5; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -6px 16px; padding: 8px 6px; border-radius: 16px; background: color-mix(in srgb, var(--menu-bg) 88%, transparent); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--hair); box-shadow: 0 6px 20px rgba(8, 12, 30, .06); } .day-strip::-webkit-scrollbar { display: none; } .page .day-strip { top: -28px; } .strip-sel { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 12px; opacity: 0; pointer-events: none; background: var(--accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .45s cubic-bezier(.34, 1.45, .55, 1), width .3s ease, height .3s ease; } .ds-day { position: relative; z-index: 1; flex: 0 0 auto; min-width: 54px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 8px 7px; border: 0; border-radius: 12px; background: none; color: var(--ink-2); transition: color .25s; } .ds-day:hover { background: var(--glass-3); } .ds-wd { font-size: 11px; color: var(--soft); transition: color .25s; } .ds-day b { font-size: 17px; font-weight: 600; line-height: 1.15; } .ds-n { min-width: 18px; padding: 0 5px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 16px; background: var(--accent-soft); color: var(--accent); transition: background .25s, color .25s; } .ds-day.clear .ds-n { background: color-mix(in srgb, var(--m5) 16%, transparent); color: var(--m5); } .ds-day.late .ds-n, .ds-day.late b { color: var(--m2); } .ds-day.late .ds-n { background: color-mix(in srgb, var(--m2) 14%, transparent); } .ds-day.on, .ds-day.on b { color: var(--on-accent); } .ds-day.on .ds-wd { color: color-mix(in srgb, var(--on-accent) 75%, transparent); } .ds-day.on .ds-n { background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: var(--on-accent); } .ds-day.on:hover { background: none; } .hw-checks { margin-bottom: 18px; } .hwg { margin-bottom: 22px; scroll-margin-top: 80px; } .hwg-head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; margin-bottom: 10px; } .hwg-head h2 { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 16px; } .hwg-head h2 small { font-size: 13px; font-weight: 500; color: var(--soft); } .hwg.soon .hwg-head h2::before { content: ""; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .hwg-count { font-size: 12.5px; color: var(--soft); } .hwg-count b { color: var(--ink); } .hwg-bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--hair); overflow: hidden; margin-top: 6px; } .hwg-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--m5)); transition: width .6s cubic-bezier(.3, .8, .2, 1); } .hwg.past { opacity: .6; } .hwg-list { display: grid; gap: 8px; } .hwc { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; padding: 14px 16px 12px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--hair); box-shadow: var(--card-shadow); transition: opacity .35s ease, border-color .2s, background .2s; } .hwc:hover { border-color: var(--hair-2); background: var(--glass-3); } .hwc.overdue::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--m2); } .hwc.done { opacity: .58; } .hwc.done:hover { opacity: .85; } .hw-enter .hwc { animation: card-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i), 12) * 35ms); } @keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(.99); } } .hwc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hwc-subj { font-weight: 600; color: var(--ink); font-size: 14px; } .hwc-when { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--soft); padding: 2px 9px; border-radius: 999px; background: var(--hair); white-space: nowrap; } .hwc-when.late { color: var(--m2); background: color-mix(in srgb, var(--m2) 13%, transparent); } .hwc-task { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; } .hwc-task a { color: var(--accent); } .strike { background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .45s cubic-bezier(.6, 0, .2, 1), color .3s; } .done .strike { background-size: 100% 1.5px; color: var(--soft); } .hwc .files { margin-top: 8px; } .hwc .tags { margin-top: 8px; } .hwc-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 12.5px; } .hwc-meta > div { display: contents; } .hwc-meta dt { color: var(--soft); white-space: nowrap; } .hwc-meta dd { margin: 0; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .move-btn { opacity: .75; } .hwc:hover .move-btn { opacity: 1; } .move-box { display: inline-flex; align-items: center; gap: 8px; animation: fade .25s ease both; } .hwc.compact { grid-template-columns: 22px 1fr; padding: 8px 10px; gap: 10px; box-shadow: none; background: var(--glass-3); align-items: center; } .hwc.compact .hwc-task { margin: 0; font-size: 13.5px; } /* Галочка: рамка пружинит, галка рисуется */ .hwc .check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--hair-2); background: var(--glass-3); display: grid; place-items: center; transition: background .2s, border-color .2s; } .hwc .check::after { display: none; } .tick { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s ease .08s; } .hwc.done .check { background: var(--m5); border-color: var(--m5); animation: tick-pop .4s cubic-bezier(.3, 1.6, .5, 1); } .hwc.done .tick { stroke-dashoffset: 0; } @keyframes tick-pop { 40% { transform: scale(.82); } 100% { transform: scale(1); } } .hw-check { position: relative; cursor: pointer; padding-top: 1px; } .hw-check:hover .check { border-color: var(--accent); } /* Просроченные: сворачиваемый блок */ .overdue-group { border-radius: 16px; border: 1px solid color-mix(in srgb, var(--m2) 25%, var(--hair)); background: color-mix(in srgb, var(--m2) 5%, transparent); padding: 4px; } .hwg-toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; border-radius: 12px; text-align: left; font-size: 14px; color: var(--ink); flex-wrap: wrap; } .hwg-toggle .muted { font-size: 12.5px; } .od-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--m2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--m2) 18%, transparent); } .chev { margin-left: auto; color: var(--soft); transition: transform .3s ease; } .overdue-group.open .chev { transform: rotate(180deg); } .collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.3, .8, .2, 1); } .collapse-in { overflow: hidden; } .overdue-group.open .collapse { grid-template-rows: 1fr; } .overdue-group .hwg-list { padding: 4px 4px 6px; } .hw-foot { display: flex; justify-content: center; margin: 4px 0 18px; } /* ---------- Живые эффекты ---------- */ .panel.page { position: relative; } .panel > :not(.bg-fx) { position: relative; z-index: 1; } .bg-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; } .glyph { position: absolute; color: var(--glyph); } .bg-fx .glyph { transform: translate3d(calc(var(--px) * var(--d) * -46px), calc(var(--py) * var(--d) * -46px), 0) rotate(var(--r)); } .bg-fx { --px: 0; --py: 0; } .glyph svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation: glyph-float var(--fd) ease-in-out infinite alternate; animation-delay: var(--fdl); } .glyph svg text { fill: currentColor; stroke: none; } @keyframes glyph-float { from { transform: translateY(-5px) rotate(-4deg); } to { transform: translateY(5px) rotate(4deg); } } :host([data-bg="none"]) .bg-fx, .pmg-page[data-bg="none"] .bg-fx { display: none; } /* Индикатор вкладки */ .tabs { position: relative; } .tab { position: relative; z-index: 1; } .tab-sel { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 10px; pointer-events: none; background: var(--glass-3); border: 1px solid var(--hair); box-shadow: var(--card-shadow); transition: transform .5s cubic-bezier(.34, 1.4, .55, 1), width .35s ease, height .35s ease; } .tab:active { transform: scale(.96); } /* Блик под курсором */ .hero, .hw-hero, .abs-hero, .two > section, .card, .chart-box, .hwc, .lesson, .fact, .subj-row, .table-wrap { position: relative; } .hero::after, .hw-hero::after, .abs-hero::after, .two > section::after, .card::after, .chart-box::after, .hwc::after, .lesson::after, .fact::after, .subj-row::after, .subj-list::after, .table-wrap::after, .day-strip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--glare), transparent 65%); opacity: 0; transition: opacity .35s ease; } .hero:hover::after, .hw-hero:hover::after, .abs-hero:hover::after, .two > section:hover::after, .card:hover::after, .chart-box:hover::after, .hwc:hover::after, .lesson:hover::after, .fact:hover::after, .subj-row:hover::after, .subj-list:hover::after, .table-wrap:hover::after, .day-strip:hover::after { opacity: 1; } /* Подъём и наклон карточек */ .hero, .hw-hero, .abs-hero, .two > section, .card:not(.cal):not(.settings), .chart-box, .hwc, .lesson, .fact { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ly, 0px)); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, border-color .25s, background .25s, opacity .35s; } .two > section:hover, .card:not(.cal):not(.settings):hover, .chart-box:hover, .hwc:hover, .lesson:hover { --ly: -2px; box-shadow: var(--lift-shadow); } .fact:hover { --ly: -3px; box-shadow: var(--lift-shadow); } .hero:hover, .hw-hero:hover, .abs-hero:hover { box-shadow: var(--lift-shadow); } /* Мелкие живые детали */ .mark { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); } .mark:hover { transform: scale(1.15); } .subj-row .ring { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); } .subj-row:hover .ring { transform: scale(1.1); } .subj-row .strip .mark { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); } .subj-row:hover .strip .mark { transform: translateY(-3px); } .subj-row .strip .mark:nth-child(1) { transition-delay: 0ms; } .subj-row .strip .mark:nth-child(2) { transition-delay: 22ms; } .subj-row .strip .mark:nth-child(3) { transition-delay: 44ms; } .subj-row .strip .mark:nth-child(4) { transition-delay: 66ms; } .subj-row .strip .mark:nth-child(5) { transition-delay: 88ms; } .subj-row .strip .mark:nth-child(6) { transition-delay: 110ms; } .subj-row .strip .mark:nth-child(7) { transition-delay: 132ms; } .subj-row .strip .mark:nth-child(8) { transition-delay: 154ms; } .subj-row .strip .mark:nth-child(9) { transition-delay: 176ms; } .subj-row .strip .mark:nth-child(10) { transition-delay: 198ms; } .subj-row .strip .mark:nth-child(11) { transition-delay: 220ms; } .subj-row .strip .mark:nth-child(12) { transition-delay: 242ms; } .subj-row:hover .subj-name { color: var(--accent); } .subj-name { transition: color .2s; } .icon-btn svg { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); } .icon-btn[data-act="refresh"]:hover svg { transform: rotate(-120deg); } .icon-btn[data-act="close"]:hover svg { transform: rotate(90deg); } .icon-btn[data-act="open-app"]:hover svg { transform: scale(1.15); } .icon-btn[data-act="theme-cycle"]:hover svg { transform: rotate(180deg); } .icon-btn:active { transform: scale(.9); } .brand-mark { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); } .brand:hover .brand-mark { transform: rotate(-12deg) scale(1.06); } .btn, .seg-ctl button, .add, .ds-day, .fact { will-change: transform; } .seg-ctl button:active, .btn:active, .ds-day:active { transform: scale(.94); } .cal-cell.has:hover { transform: translateY(-2px); } .cal-cell:hover .dot { transform: scale(1.35); } .cal-dots .dot { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); } .ybar { transition: fill .25s, filter .25s; } .ybar:hover { filter: brightness(1.15) drop-shadow(0 6px 10px color-mix(in srgb, var(--accent) 35%, transparent)); } .dist-row:hover .dist-bar, .hbar:hover .dist-bar { filter: brightness(1.12); } .line-chart .hit:hover { fill: color-mix(in srgb, var(--accent) 10%, transparent); } .tag { transition: transform .2s; } .hwc:hover .tag { transform: translateY(-1px); } .launcher-mark { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); } .launcher:hover .launcher-mark { transform: rotate(-14deg) scale(1.08); } .launcher::before { content: ""; position: absolute; left: 6px; top: 6px; width: 34px; height: 34px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 0 color-mix(in srgb, #8B5CF6 45%, transparent); animation: beacon 3.2s ease-out infinite; } @keyframes beacon { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, #8B5CF6 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px transparent; } } /* Появление при открытии */ .sheet:not(.quiet) .tips li, .sheet:not(.quiet) .fresh li, .sheet:not(.quiet) .subj-row, .sheet:not(.quiet) .lesson, .sheet:not(.quiet) .checks li { animation: row-in .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(min(var(--i, 0), 14) * 35ms + 120ms); } @keyframes row-in { from { opacity: 0; transform: translateY(8px); } } .sheet:not(.quiet) .hero, .sheet:not(.quiet) .hw-hero, .sheet:not(.quiet) .abs-hero, .sheet:not(.quiet) .two > section, .sheet:not(.quiet) .chart-box, .sheet:not(.quiet) .cal, .sheet:not(.quiet) .cal-details, .sheet:not(.quiet) .table-wrap { animation: sec-in .55s cubic-bezier(.2, .8, .2, 1) both; } .sheet:not(.quiet) .two > section:nth-child(2) { animation-delay: 60ms; } @keyframes sec-in { from { opacity: 0; transform: translateY(12px) scale(.99); } } .hwg-bar i { transform-origin: left; animation: grow .9s cubic-bezier(.2, .8, .2, 1) both .2s; } .cal-dist span, .forecast .fc { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both; } .forecast .fc:nth-child(2) { animation-delay: 80ms; } .forecast .fc:nth-child(3) { animation-delay: 160ms; } .forecast .fc:nth-child(4) { animation-delay: 240ms; } .sheet.quiet *, .sheet.quiet *::before, .sheet.quiet *::after { animation: none !important; } /* ---------- Отчёт для родителей ---------- */ .report-fact { align-items: center !important; flex-direction: row !important; gap: 12px; border-style: dashed; } .report-fact span { color: var(--accent); font-weight: 600; font-size: 13px; } .rf-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--brand); color: #fff; font-style: normal; } .report-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding: 16px 20px; border-radius: 18px; border: 1px solid var(--stroke); background: linear-gradient(100deg, color-mix(in srgb, #6366F1 14%, transparent), color-mix(in srgb, #14B8A6 10%, transparent)), var(--glass-2); } .report-cta b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; } .report-cta .muted { font-size: 13px; } .report-cta .btn { flex: none; } .report-modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: color-mix(in srgb, var(--menu-bg) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s ease; } .report-modal.open { opacity: 1; } .rm-box { width: min(1040px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1px solid var(--stroke); background: var(--glass); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); transform: translateY(16px) scale(.97); transition: transform .4s cubic-bezier(.3, 1.3, .5, 1); } .report-modal.open .rm-box { transform: none; } .rm-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 20px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; } .rm-head h2 { margin: 0 auto 0 0; font-size: 16px; } .rm-head .seg-ctl { margin: 0; } .rm-preview { flex: 1; min-height: 200px; overflow: auto; padding: 16px; display: grid; place-items: center; background: var(--hair); } .rm-preview img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); animation: sec-in .5s cubic-bezier(.2, .8, .2, 1) both; } .rm-preview .loader { margin-top: 90px; } .rm-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid var(--hair); flex-wrap: wrap; } .btn[disabled] { opacity: .5; pointer-events: none; } .rm-note { font-size: 12.5px; } /* ---------- Узкие места (панель справа, маленькое окно) ---------- */ @container sheet (max-width: 760px) { .report-cta { flex-direction: column; align-items: flex-start; } .facts .report-fact { flex: 1 1 100%; } .facts { flex-wrap: wrap; } .hw-hero { grid-template-columns: 48px 1fr; } .hw-hero .hw-tools { grid-column: 1 / -1; } .hw-ring { width: 48px; height: 48px; } .hwc-meta { gap: 4px 10px; } .cal-wrap { grid-template-columns: 1fr; gap: 14px; } .cal { padding: 14px 10px 12px; } .cal-cell { border-radius: 12px; } .cal-sel { border-radius: 12px; } .hero { grid-template-columns: 1fr; justify-items: center; gap: 18px; padding: 20px 16px; } .hero-text { text-align: center; } .forecast { justify-content: center; } .facts { width: 100%; flex-direction: row; } .fact { min-width: 0; flex: 1; flex-direction: column; gap: 2px; } .two { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; } .two > section, .card, .chart-box { padding: 16px; } .subj-row { grid-template-columns: 1fr 44px 92px; gap: 10px; padding: 9px 10px; } .subj-row .strip, .subj-row .trend { display: none; } .subj-layout { grid-template-columns: 1fr; } .subj-list { display: none; } .subj-select { display: block; } .hw { grid-template-columns: 24px 1fr; } .hw-act { grid-column: 2; justify-self: start; } .hbar { grid-template-columns: minmax(90px, 140px) 1fr 24px; } .abs-days li { grid-template-columns: 52px 1fr; } .abs-days .reason { grid-column: 2; justify-self: start; } .hw-top { flex-direction: column; align-items: flex-start; } } @media (max-width: 700px) { .panel.page { border: 0; } .page .layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .page .tabs { flex-direction: row; flex-wrap: wrap; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--hair); } .page .tab { white-space: nowrap; } .who .status { display: none; } } @media (prefers-reduced-motion: reduce) { .hero, .hw-hero, .abs-hero, .two > section, .card, .chart-box, .hwc, .lesson, .fact { transform: none !important; } *, *::before, *::after { animation: none !important; transition: none !important; } } /* Полоска обновления */ .upd-bar { margin: 8px 16px 0; padding: 9px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(100deg, color-mix(in srgb, #6366F1 14%, transparent), color-mix(in srgb, #14B8A6 12%, transparent)); font-size: 13px; animation: upd-in .5s cubic-bezier(.2, .9, .3, 1.1) both; } .upd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .upd-row + .upd-row, .upd-steps + .upd-row { margin-top: 8px; } .upd-row .btn:first-of-type { margin-left: auto; } .upd-steps + .upd-row .btn:first-of-type { margin-left: 0; } .upd-notes { color: var(--ink-2); flex: 1 1 200px; min-width: 0; } .upd-dot { width: 8px; height: 8px; border-radius: 50%; background: #14B8A6; box-shadow: 0 0 0 0 rgba(20, 184, 166, .6); animation: upd-pulse 1.8s ease-out infinite; flex: none; } .upd-steps { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); line-height: 1.5; } @keyframes upd-pulse { to { box-shadow: 0 0 0 8px rgba(20, 184, 166, 0); } } @keyframes upd-in { from { opacity: 0; transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .upd-bar, .upd-dot { animation: none; } } /* ---------- Здоровье ---------- */ .health .two { align-items: start; } .up { color: var(--m5); } .down { color: var(--m2); } .hl-tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .hl-tbl th { text-align: left; font-weight: 500; color: var(--soft); padding: 8px 0; } .hl-tbl td { padding: 8px 0 8px 10px; text-align: right; white-space: nowrap; } .hl-tbl tr + tr { border-top: 1px solid var(--hair); } .hl-tbl td.up, .hl-tbl td.down { width: 18px; font-size: 11px; } .hl-empty { text-align: center; padding: 30px 22px !important; } .hl-empty h2 { margin: 10px 0 6px; font: 600 19px/1.3 var(--sans); } .hl-empty-art { display: inline-grid; place-items: center; width: 92px; height: 92px; border-radius: 28px; background: var(--accent-soft); } .hl-dev-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; } .hl-dev.promo { background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 60%), var(--glass-2); } .pair { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .pair-qr { width: 168px; height: 168px; padding: 8px; border-radius: 16px; background: #fff; flex: none; } .pair-qr svg { width: 100%; height: 100%; display: block; } .pair-txt { flex: 1 1 220px; } .pair-txt p { margin: 0 0 8px; } .pair-code { font: 700 30px/1.1 var(--sans); letter-spacing: .12em; background: var(--brand-text); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 6px 0; } /* ---------- Своя домашка и фото ---------- */ .tag.t-own { background: color-mix(in srgb, #14B8A6 16%, transparent); color: #0D9488; } .hw-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; } .ph-strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; } .ph-th, .ph-add { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; border: 1px solid var(--hair-2); background: var(--glass-3); padding: 0; display: grid; place-items: center; color: var(--soft); cursor: pointer; flex: none; } .ph-th img { width: 100%; height: 100%; object-fit: cover; display: block; } .ph-th.wait { background: linear-gradient(100deg, var(--hair) 30%, var(--hair-2) 50%, var(--hair) 70%); background-size: 300% 100%; animation: shimmer 1.2s linear infinite; } @keyframes shimmer { to { background-position: -100% 0; } } .ph-add { border-style: dashed; } .ph-add:hover { color: var(--accent); border-color: var(--accent); } .ph-spin { position: absolute; inset: 0; background: color-mix(in srgb, var(--glass-3) 70%, transparent); } .ph-spin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 2.5px solid var(--accent); border-right-color: transparent; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .ph-view { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(5, 6, 12, .9); animation: fade .2s ease both; } .drawer .ph-view { position: absolute; border-radius: inherit; } .ph-view img { max-width: 94%; max-height: 80%; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); } .ph-x { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px; line-height: 1; } .ph-bar { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; gap: 10px; } .ph-bar .btn { background: rgba(255, 255, 255, .14); color: #fff; border-color: transparent; } .ph-bar .btn.danger { background: #D9414A; } .own-sheet { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 6, 12, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .2s ease both; } .drawer .own-sheet { position: absolute; border-radius: inherit; } .own-form { width: min(520px, 100%); max-height: 100%; overflow: auto; margin: 0 !important; padding: 18px 20px !important; background: var(--menu-bg) !important; animation: sheet-up .35s cubic-bezier(.2, .9, .3, 1.05) both; } @keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } } .own-form header, .own-form footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .own-form header h3 { margin: 0; } .own-form footer { margin-top: 14px; justify-content: flex-end; } .own-form textarea.in { resize: vertical; min-height: 76px; font: 500 14.5px/1.45 var(--sans); } .own-subjs { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow-y: auto; padding: 2px; } .own-subj { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--hair-2); background: var(--glass-3); color: var(--ink); font: 600 13px/1.2 var(--sans); cursor: pointer; text-align: left; } .own-subj:hover { border-color: var(--accent); } .own-subj.on { background: var(--accent); border-color: transparent; color: var(--on-accent); } .own-subj.other { font-style: italic; } .own-due { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .own-due .date-in { width: auto; padding: 5px 9px; font-size: 13px; } .own-form .icon-btn { font-size: 22px; line-height: 1; } @media (prefers-reduced-motion: reduce) { .ph-th.wait, .own-form, .ph-view, .own-sheet { animation: none; } } @media (max-width: 700px) { .health .two { grid-template-columns: 1fr; } } .hwc-cam { position: relative; margin-left: 6px; width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--soft); cursor: pointer; opacity: .55; transition: opacity .15s, background .15s; } .hwc:hover .hwc-cam { opacity: 1; } .hwc-cam:hover { background: var(--hair); color: var(--accent); } /* Устройства */ .devs-list ul { list-style: none; margin: 0; padding: 0; } .dev { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); } .dev:last-child { border-bottom: 0; } .dev.empty { display: block; font-size: 13.5px; } .dev-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); } .dev-main { flex: 1; min-width: 0; } .dev-main b { display: block; color: var(--ink); font-weight: 600; font-size: 14px; } .dev-main small { display: block; font-size: 12.5px; } .dev-me { font-size: 12px; font-weight: 600; color: var(--m5); white-space: nowrap; } .dev-note { margin: 10px 0 0; } /* ---------- Лёгкие эффекты (по умолчанию) ---------- Размытие фона под панелью и бесконечные анимации заставляют браузер всё время перерисовывать большие слои — отсюда сотни мегабайт памяти. В лёгком режиме фон непрозрачный, значки стоят на месте. */ :host([data-fx="lite"]) *, .pmg-page[data-fx="lite"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :host([data-fx="lite"]) .panel.drawer, .pmg-page[data-fx="lite"] .panel.page { background: var(--menu-bg); } :host([data-fx="lite"]) .launcher, :host([data-fx="lite"]) .day-strip, :host([data-fx="lite"]) .rm-box, .pmg-page[data-fx="lite"] .day-strip, .pmg-page[data-fx="lite"] .rm-box { background: var(--menu-bg); } :host([data-fx="lite"]) .glyph svg, .pmg-page[data-fx="lite"] .glyph svg { animation: none; } :host([data-fx="lite"]) .bg-fx, .pmg-page[data-fx="lite"] .bg-fx { transform: none !important; } :host([data-fx="lite"]) .fig-body, .pmg-page[data-fx="lite"] .fig-body { filter: none; } :host([data-fx="lite"]) .launcher::before { animation: none; } :host([data-fx="lite"]) .hero::after, :host([data-fx="lite"]) .card::after, :host([data-fx="lite"]) .two > section::after, .pmg-page[data-fx="lite"] .hero::after, .pmg-page[data-fx="lite"] .card::after, .pmg-page[data-fx="lite"] .two > section::after { display: none; } /* ---------- Вход в дневник через мост ---------- */ .br-card.alert { border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important; } .br-card p { margin: 0 0 10px; } .br-state { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); } .br-state i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--soft); } .br-state.ok i { background: var(--m5); box-shadow: 0 0 0 4px color-mix(in srgb, var(--m5) 22%, transparent); } .br-state.bad i { background: var(--m2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--m2) 22%, transparent); } .br-state.warn i { background: var(--m3); } .br-login { display: grid; gap: 10px; margin: 6px 0 12px; padding: 12px; border-radius: 14px; background: var(--glass-2); border: 1px dashed var(--hair-2); } .br-gos { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; background: #0D4CD3 !important; color: #fff !important; border-color: transparent !important; } .gos-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #fff; color: #0D4CD3; font: 800 14px/1 var(--sans); } .br-steps { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); } .br-steps li { margin-bottom: 4px; } .br-bm summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--accent); } .br-bm .hl-copy { display: flex; gap: 8px; align-items: center; margin: 10px 0; } .br-bm code { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--glass-3); border: 1px solid var(--hair); font-size: 11.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .br-log { list-style: none; margin: 10px 0; padding: 0; font-size: 13px; } .br-log li { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--hair); } .br-log li.bad span { color: var(--m2); } .br-log time { color: var(--soft); } .br-card .row-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; } /* ================= Gradely: слой в духе Apple ================= Белые карточки с мягкой тенью, тонкие линии, один синий цвет, круглые галочки как в «Напоминаниях», кнопки-капсулы, пружинящие нажатия. Перекрывает старое оформление выше. */ body.pmg-page { background: var(--page-bg); } .panel, .panel * { font-family: var(--sans); } .bg-fx { display: none !important; } .hero::after, .hw-hero::after, .abs-hero::after, .two > section::after, .card::after, .chart-box::after, .hwc::after, .lesson::after, .fact::after, .subj-row::after, .subj-list::after, .table-wrap::after { display: none !important; } /* Окно: отдельная вкладка и панель на дневнике */ .panel.page { background: var(--page-bg); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; max-width: 1440px; } .panel.drawer { background: var(--page-bg); border: .5px solid var(--hair); border-radius: 22px; box-shadow: var(--shadow); } .head { background: transparent; border-bottom: 0; } .brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 8px rgba(10, 102, 255, .28); display: grid; place-items: center; } .brand-mark svg { width: 20px; height: 20px; } .brand-name { font: 600 18px/1.2 var(--display); letter-spacing: -.02em; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); } .who, .status { color: var(--soft); } .icon-btn { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); } .icon-btn:hover { background: var(--glass-2); border: 0; color: var(--ink); } .period select, select { border-radius: 10px; border: 0; background: var(--glass-2); padding: 7px 12px; } /* Боковое меню (вкладка) — как в macOS: выбранный пункт синий */ .page .tabs { background: transparent; border-right: .5px solid var(--hair); padding: 14px 10px; gap: 2px; } .page .tab { padding: 7px 12px; border-radius: 8px; font: 500 14px/1.3 var(--sans); color: var(--ink-2); border: 0; } .page .tab:hover { background: var(--glass-2); color: var(--ink); } .page .tab.on { color: #fff; font-weight: 600; background: transparent; } .page .tab-sel { background: var(--accent); border: 0; border-radius: 8px; box-shadow: none; } .page .more-menu button.on { color: var(--accent); } /* Панель на дневнике — вкладки как переключатель iOS: белая плашка на сером */ .drawer .tabs { margin: 0 14px 6px; padding: 3px; gap: 0; border: 0; border-radius: 11px; background: var(--glass-2); } .drawer .tab { padding: 6px 4px; font: 500 12.5px/1.2 var(--sans); color: var(--ink-2); border: 0; border-radius: 8px; } .drawer .tab.on { color: var(--ink); font-weight: 600; } .drawer .tab-sel { background: var(--glass-3); border: 0; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); } .drawer .more-menu { border-top-color: var(--hair); } /* Заголовки и текст */ .sheet { color: var(--ink); } h2 { font: 600 17px/1.3 var(--display); letter-spacing: -.02em; } h3 { font-family: var(--display); letter-spacing: -.01em; } .lead { color: var(--ink); } .muted { color: var(--soft); } /* Карточки */ .two > section, .card, .chart-box, .hero, .hw-hero, .abs-hero, .subj-table-wrap, .table-wrap, .subj-list, .cal { background: var(--glass-3) !important; border: 0 !important; border-radius: var(--radius) !important; box-shadow: var(--card-shadow) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .two > section, .card, .chart-box, .hero, .hw-hero, .abs-hero { transition: transform .45s var(--spring), box-shadow .3s ease; transform: none; } .two > section:hover, .card:not(.cal):not(.settings):hover, .chart-box:hover, .hero:hover, .hw-hero:hover, .abs-hero:hover { transform: translateY(-2px); box-shadow: var(--lift-shadow) !important; } .fact, .subj-row { background: var(--glass-3); border: 0; border-radius: 16px; box-shadow: var(--card-shadow); transition: transform .45s var(--spring), box-shadow .3s; transform: none; } .fact:hover, .subj-row:hover { transform: translateY(-2px); box-shadow: var(--lift-shadow); border: 0; } .fact b, .hero-avg, .hw-left, .big, .cal-sum b { font-family: var(--rounded); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* Кнопки — капсулы; переключатели — как в iOS */ .btn { border: 0; border-radius: 980px; background: var(--glass-2); color: var(--accent); font-weight: 600; padding: 8px 16px; transition: transform .35s var(--spring), background .2s; } .btn:hover { background: color-mix(in srgb, var(--glass-2) 60%, var(--hair-2)); } .btn.primary { background: var(--accent); color: #fff; } .btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); } .btn.danger { background: color-mix(in srgb, var(--m2) 12%, transparent); color: var(--m2); } .btn:active, .seg-ctl button:active { transform: scale(.96); } .seg-ctl button { border: 0; border-radius: 980px; background: var(--glass-2); color: var(--ink-2); font-weight: 500; box-shadow: none; } .seg-ctl button:hover { color: var(--ink); } .seg-ctl button.on { background: var(--accent); color: #fff; box-shadow: none; } .link { color: var(--accent); font-weight: 500; } .in, input.in, textarea.in, .date-in { border: 0; border-radius: 10px; background: var(--glass-2); color: var(--ink); } .in:focus, .date-in:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } /* Оценки — мягкие плашки */ .mark { border-radius: 8px; font-family: var(--rounded); font-weight: 600; } /* Домашка: карточки и круглые галочки как в «Напоминаниях» */ .hwc { background: var(--glass-3); border: 0; border-radius: 16px; box-shadow: var(--card-shadow); } .hwc:hover { background: var(--glass-3); box-shadow: var(--lift-shadow); } .hwc .check, .hw-check .check { border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--soft) 60%, transparent); background: transparent; } .hwc.done .check, .w-hw.done .check { background: var(--accent); border-color: var(--accent); } .hwc-when { background: var(--glass-2); } .day-strip { background: var(--glass) !important; border: 0; box-shadow: var(--card-shadow); border-radius: 16px; } .strip-sel { background: var(--accent); box-shadow: none; } /* Полоска уровня под шапкой */ .xpl-lv { background: var(--accent); border-radius: 7px; font-family: var(--rounded); } .xpl-bar { height: 4px; background: var(--accent-soft); } .xpl-bar i { background: linear-gradient(90deg, var(--ring-1), var(--ring-2)); } /* Кнопка на сайте дневника */ .launcher { background: var(--glass-3); border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .14); } .launcher-mark { background: var(--brand); color: #fff; border-radius: 9px; } .launcher::before { display: none; } .tip { background: rgba(28, 28, 30, .92); border-radius: 9px; } /* 3D-иконки (Fluent Emoji, MIT) */ .e3d { display: inline-block; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12)); } .e3d.off { filter: grayscale(1) opacity(.4); } .page .more-btn { justify-content: flex-start; width: 100%; }