/* ============================================================ «Библиотека знаний» · стили страницы /library (PHASE2_LIBRARY.md, §2.4) Самостоятельная страница: те же цвета, шрифты и пропорции, что у раздела «Мой проект» (pd-mp.css), но без зависимости от файлов mp/. Всё внутри #pd-lib-root, классы pd-lib-*. Фон #05070f, текст #eef1ff, акцент #92D5FF, лиловый #E9C3FF; шрифты Exo 2 (текст) и Tektur (заголовки, числа) подключает блок Tilda; без сети — системные. Экраны: каталог (плитки, на телефоне одна колонка), элемент, урок. ============================================================ */ #pd-lib-root { --lib-bg: #05070f; --lib-panel: #0b0e1a; --lib-text: #eef1ff; --lib-muted: rgba(238, 241, 255, 0.62); --lib-line: rgba(255, 255, 255, 0.1); --lib-tile: rgba(255, 255, 255, 0.04); --lib-blue: #92D5FF; --lib-lilac: #E9C3FF; --lib-green: #34d399; --lib-amber: #ffb703; --lib-red: #ff6b6b; --lib-font: "Exo 2", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --lib-font-num: "Tektur", "Exo 2", "Segoe UI", Roboto, Arial, sans-serif; position: relative; min-height: 100vh; overflow-x: hidden; overflow-x: clip; color: var(--lib-text); background: radial-gradient(900px 500px at 12% 10%, rgba(61, 107, 255, 0.14), transparent 60%), radial-gradient(700px 500px at 92% 95%, rgba(139, 92, 246, 0.12), transparent 60%), var(--lib-bg); font-family: var(--lib-font); font-size: 15px; line-height: 1.5; text-align: left; -webkit-text-size-adjust: 100%; } #pd-lib-root *, #pd-lib-root *::before, #pd-lib-root *::after { box-sizing: border-box; } #pd-lib-root [hidden] { display: none !important; } #pd-lib-root::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); } #pd-lib-root h1, #pd-lib-root h2, #pd-lib-root h3, #pd-lib-root h4, #pd-lib-root p, #pd-lib-root ul, #pd-lib-root ol, #pd-lib-root dl, #pd-lib-root dd, #pd-lib-root figure { margin: 0; } #pd-lib-root ul, #pd-lib-root ol { padding: 0; list-style: none; } #pd-lib-root button, #pd-lib-root input, #pd-lib-root select, #pd-lib-root textarea { font: inherit; letter-spacing: normal; } #pd-lib-root img { max-width: 100%; } #pd-lib-root a { color: var(--lib-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; } #pd-lib-root :focus { outline: none; } #pd-lib-root :focus-visible { outline: 2px solid var(--lib-blue); outline-offset: 2px; } #pd-lib-root .pd-lib-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } #pd-lib-root .pd-lib-app { position: relative; } /* ---- Заглушка до запуска и состояния загрузки ---- */ #pd-lib-root .pd-lib-boot, #pd-lib-root .pd-lib-state { position: relative; width: min(calc(100% - 32px), 600px); margin: 12vh auto 0; padding: 24px 28px 30px; border-radius: 20px; color: var(--lib-muted); background: rgba(8, 11, 24, 0.66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); font-size: 15px; text-align: center; overflow: hidden; } #pd-lib-root .pd-lib-state--inline { width: auto; margin: 8px 0 16px; padding: 18px 20px 24px; } #pd-lib-root .pd-lib-boot a { color: var(--lib-blue); } #pd-lib-root .pd-lib-state::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: 14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--lib-blue), transparent) 0 0 / 40% 100% no-repeat, rgba(255, 255, 255, 0.08); animation: pd-lib-scan 1.6s ease-in-out infinite alternate; } @keyframes pd-lib-scan { from { background-position: 0 0, 0 0; } to { background-position: 100% 0, 0 0; } } /* ---- Кнопки ---- */ #pd-lib-root .pd-lib-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; max-width: 100%; padding: 8px 18px; border: 0; border-radius: 999px; color: var(--lib-text); background: rgba(255, 255, 255, 0.08); font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; white-space: normal; cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } #pd-lib-root .pd-lib-btn:hover { background: rgba(255, 255, 255, 0.14); } #pd-lib-root .pd-lib-btn--primary { color: #04060f; background: linear-gradient(90deg, var(--lib-blue), var(--lib-lilac)); font-weight: 700; box-shadow: 0 10px 30px rgba(146, 213, 255, 0.22); } #pd-lib-root .pd-lib-btn--primary:hover { background: linear-gradient(90deg, var(--lib-blue), var(--lib-lilac)); transform: translateY(-1px); box-shadow: 0 14px 40px rgba(146, 213, 255, 0.36); } #pd-lib-root .pd-lib-btn--ghost { min-height: 36px; padding: 6px 16px; font-size: 13px; } #pd-lib-root .pd-lib-btn--small { min-height: 36px; padding: 6px 14px; font-size: 13px; } #pd-lib-root .pd-lib-btn--quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--lib-line); } #pd-lib-root .pd-lib-btn:disabled { opacity: 0.6; cursor: wait; transform: none; } #pd-lib-root .pd-lib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; } /* ---- Шапка портала и заголовок ---- */ #pd-lib-root .pd-lib-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 36px; color: var(--lib-muted); font-size: 13px; } #pd-lib-root .pd-lib-brand { font-family: var(--lib-font-num); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--lib-text); white-space: nowrap; } #pd-lib-root .pd-lib-brand em { margin: 0 6px; color: var(--lib-blue); font-style: normal; } #pd-lib-root .pd-lib-top-mid { flex: 1; text-align: center; } #pd-lib-root .pd-lib-shell { position: relative; width: min(100%, 1240px); margin: 0 auto; padding: 4px 36px 72px; } #pd-lib-root .pd-lib-shell--narrow { width: min(100%, 820px); padding-top: 8vh; } #pd-lib-root .pd-lib-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 0 0 18px; } #pd-lib-root .pd-lib-head-main { min-width: 0; flex: 1 1 520px; } #pd-lib-root .pd-lib-head-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; } #pd-lib-root .pd-lib-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; color: var(--lib-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } #pd-lib-root .pd-lib-crumbs a { color: var(--lib-muted); text-decoration: none; } #pd-lib-root .pd-lib-crumbs a:hover { color: var(--lib-text); } #pd-lib-root .pd-lib-crumbs span:last-child { color: var(--lib-text); overflow-wrap: anywhere; } #pd-lib-root .pd-lib-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-family: var(--lib-font-num); font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; } #pd-lib-root .pd-lib-title-main { color: var(--lib-muted); } #pd-lib-root .pd-lib-title-sep { color: rgba(146, 213, 255, 0.7); } #pd-lib-root .pd-lib-lead { max-width: 70ch; margin-top: 8px; color: var(--lib-muted); font-size: 14px; } /* ---- Общие элементы ---- */ #pd-lib-root .pd-lib-kicker { margin: 0 0 8px; color: var(--lib-blue); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; } #pd-lib-root .pd-lib-h3 { margin: 18px 0 10px; color: var(--lib-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } #pd-lib-root .pd-lib-muted { color: var(--lib-muted); } #pd-lib-root .pd-lib-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; color: var(--lib-text); background: rgba(255, 255, 255, 0.08); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; white-space: nowrap; } #pd-lib-root .pd-lib-chip--kind { color: var(--lib-blue); background: rgba(146, 213, 255, 0.12); } #pd-lib-root .pd-lib-chip--req { color: var(--lib-amber); background: rgba(255, 183, 3, 0.13); } #pd-lib-root .pd-lib-chip--rec { color: var(--lib-lilac); background: rgba(233, 195, 255, 0.14); } #pd-lib-root .pd-lib-chip--done { color: var(--lib-green); background: rgba(52, 211, 153, 0.13); } #pd-lib-root .pd-lib-chip--draft { color: var(--lib-amber); background: rgba(255, 183, 3, 0.13); } #pd-lib-root .pd-lib-chip--quiet { color: var(--lib-muted); font-weight: 600; background: rgba(255, 255, 255, 0.05); } #pd-lib-root .pd-lib-chips { display: flex; flex-wrap: wrap; gap: 6px; } #pd-lib-root .pd-lib-panel { position: relative; margin: 0 0 16px; padding: 22px 24px; border-radius: 22px; background: var(--lib-tile); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(146, 213, 255, 0.16); overflow-wrap: anywhere; } #pd-lib-root .pd-lib-panel--rec { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(233, 195, 255, 0.35); } #pd-lib-root .pd-lib-panel h2 { font-family: var(--lib-font-num); font-size: 20px; font-weight: 700; line-height: 1.25; } #pd-lib-root .pd-lib-banner { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; color: var(--lib-text); background: rgba(146, 213, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(146, 213, 255, 0.3); font-size: 14px; font-weight: 600; } #pd-lib-root .pd-lib-banner--amber { color: var(--lib-amber); background: rgba(255, 183, 3, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 183, 3, 0.5); } #pd-lib-root .pd-lib-banner--lilac { color: var(--lib-lilac); background: rgba(233, 195, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(233, 195, 255, 0.4); } #pd-lib-root .pd-lib-banner small { display: block; margin-top: 4px; color: var(--lib-muted); font-weight: 500; } #pd-lib-root .pd-lib-inline-error { margin-top: 12px; color: var(--lib-red); font-size: 14px; font-weight: 600; } #pd-lib-root .pd-lib-inline-error:empty { margin: 0; } /* пустые состояния и ошибки */ #pd-lib-root .pd-lib-empty { position: relative; max-width: 820px; margin: 0 0 16px; padding: 28px 30px; border-radius: 22px; background: var(--lib-tile); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(146, 213, 255, 0.16); overflow-wrap: anywhere; } #pd-lib-root .pd-lib-empty-title { font-family: var(--lib-font-num); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.2; } #pd-lib-root .pd-lib-empty-text { margin-top: 10px; max-width: 64ch; color: var(--lib-muted); font-size: 15px; line-height: 1.6; } #pd-lib-root .pd-lib-empty--error { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 183, 3, 0.45); } #pd-lib-root .pd-lib-empty--error .pd-lib-kicker { color: var(--lib-amber); } /* ---- Поля ---- */ #pd-lib-root .pd-lib-select, #pd-lib-root .pd-lib-input { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; color: var(--lib-text); background-color: rgba(255, 255, 255, 0.05); font-size: 15px; line-height: 1.4; } #pd-lib-root .pd-lib-select { padding-right: 40px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2392D5FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } #pd-lib-root .pd-lib-select option { color: #0a0e1e; background: #fff; } #pd-lib-root .pd-lib-input[type="search"] { -webkit-appearance: none; appearance: none; } #pd-lib-root .pd-lib-select:focus-visible, #pd-lib-root .pd-lib-input:focus-visible { outline: 2px solid var(--lib-blue); outline-offset: 1px; border-color: var(--lib-blue); } #pd-lib-root .pd-lib-field { display: grid; gap: 6px; min-width: 0; } #pd-lib-root .pd-lib-field > span { color: var(--lib-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } #pd-lib-root .pd-lib-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--lib-line); cursor: pointer; } #pd-lib-root .pd-lib-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--lib-blue); cursor: pointer; } #pd-lib-root .pd-lib-check.is-on { background: rgba(52, 211, 153, 0.08); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.45); } #pd-lib-root .pd-lib-check.is-on span { color: var(--lib-muted); text-decoration: line-through; } /* ---- Каталог: панель отбора ---- */ #pd-lib-root .pd-lib-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 16px 18px; border-radius: 20px; background: var(--lib-tile); box-shadow: inset 0 0 0 1px var(--lib-line); } #pd-lib-root .pd-lib-filters .pd-lib-select, #pd-lib-root .pd-lib-filters .pd-lib-input { min-height: 42px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; } #pd-lib-root .pd-lib-count { margin: 0 0 12px; color: var(--lib-muted); font-size: 13px; } #pd-lib-root .pd-lib-count b { color: var(--lib-text); font-family: var(--lib-font-num); } /* ---- Каталог: плитки ---- */ #pd-lib-root .pd-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; } #pd-lib-root .pd-lib-tile { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; border-radius: 20px; color: var(--lib-text); background: var(--lib-tile); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px var(--lib-line); text-decoration: none; overflow: hidden; transition: box-shadow 0.2s ease, transform 0.15s ease, background-color 0.2s ease; } #pd-lib-root .pd-lib-tile:hover { background: rgba(146, 213, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(146, 213, 255, 0.45); transform: translateY(-2px); } #pd-lib-root .pd-lib-tile.is-done { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(52, 211, 153, 0.35); } #pd-lib-root .pd-lib-cover { position: relative; aspect-ratio: 16 / 9; background: #0d1224; overflow: hidden; } #pd-lib-root .pd-lib-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } #pd-lib-root .pd-lib-cover-letter { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--lib-font-num); font-size: 56px; font-weight: 900; color: rgba(255, 255, 255, 0.92); text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); } #pd-lib-root .pd-lib-cover--c0 { background: linear-gradient(135deg, #1f4fd1, #6c3fd1); } #pd-lib-root .pd-lib-cover--c1 { background: linear-gradient(135deg, #0f7a8c, #1f4fd1); } #pd-lib-root .pd-lib-cover--c2 { background: linear-gradient(135deg, #8c2f9c, #d1428e); } #pd-lib-root .pd-lib-cover--c3 { background: linear-gradient(135deg, #b25a00, #d1a02f); } #pd-lib-root .pd-lib-cover--c4 { background: linear-gradient(135deg, #0f7a4c, #1f9e83); } #pd-lib-root .pd-lib-cover--c5 { background: linear-gradient(135deg, #7a1f3a, #c04a3f); } #pd-lib-root .pd-lib-cover-badges { position: absolute; left: 12px; top: 12px; display: flex; flex-wrap: wrap; gap: 6px; } #pd-lib-root .pd-lib-cover-badges .pd-lib-chip { background: rgba(5, 7, 15, 0.75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } #pd-lib-root .pd-lib-tile-body { display: grid; gap: 8px; align-content: start; padding: 14px 16px 16px; } #pd-lib-root .pd-lib-tile-title { font-family: var(--lib-font-num); font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } #pd-lib-root .pd-lib-tile-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--lib-muted); font-size: 13px; line-height: 1.5; } #pd-lib-root .pd-lib-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--lib-muted); font-size: 12px; } #pd-lib-root .pd-lib-meta b { color: var(--lib-text); font-family: var(--lib-font-num); font-weight: 700; } #pd-lib-root .pd-lib-tile .pd-lib-chips { margin-top: 2px; } /* прогресс */ #pd-lib-root .pd-lib-bar { position: relative; height: 6px; margin-top: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } #pd-lib-root .pd-lib-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--lib-blue), var(--lib-lilac)); } #pd-lib-root .pd-lib-bar.is-done i { background: var(--lib-green); } #pd-lib-root .pd-lib-bar-text { margin-top: 6px; color: var(--lib-muted); font-size: 12px; } #pd-lib-root .pd-lib-bar-text b { color: var(--lib-text); font-family: var(--lib-font-num); } /* «Рекомендовано вам» */ #pd-lib-root .pd-lib-recs { display: grid; gap: 10px; margin-top: 12px; } #pd-lib-root .pd-lib-rec { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--lib-line); } #pd-lib-root .pd-lib-rec-title { font-size: 15px; font-weight: 700; } #pd-lib-root .pd-lib-rec-title a { color: var(--lib-text); text-decoration: none; } #pd-lib-root .pd-lib-rec-title a:hover { color: var(--lib-blue); } #pd-lib-root .pd-lib-rec-sub { margin-top: 3px; color: var(--lib-muted); font-size: 13px; } #pd-lib-root .pd-lib-rec-sub .is-due { color: var(--lib-amber); font-weight: 600; } #pd-lib-root .pd-lib-rec-note { margin-top: 6px; padding-left: 10px; border-left: 2px solid rgba(233, 195, 255, 0.6); color: var(--lib-muted); font-size: 13px; } /* ---- Элемент: курс или материал ---- */ #pd-lib-root .pd-lib-item { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; } #pd-lib-root .pd-lib-item-cover { border-radius: 18px; overflow: hidden; background: #0d1224; box-shadow: inset 0 0 0 1px var(--lib-line); } #pd-lib-root .pd-lib-item-cover .pd-lib-cover { aspect-ratio: 16 / 10; } #pd-lib-root .pd-lib-item-cover .pd-lib-cover-letter { font-size: 72px; } #pd-lib-root .pd-lib-item-main { display: grid; gap: 14px; min-width: 0; } #pd-lib-root .pd-lib-item-summary { font-size: 16px; line-height: 1.55; color: rgba(238, 241, 255, 0.9); } #pd-lib-root .pd-lib-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 20px; } #pd-lib-root .pd-lib-fact dt { margin-bottom: 3px; color: var(--lib-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } #pd-lib-root .pd-lib-fact dd { font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } #pd-lib-root .pd-lib-item-aside { display: grid; gap: 14px; } #pd-lib-root .pd-lib-tags { display: flex; flex-wrap: wrap; gap: 6px; } #pd-lib-root .pd-lib-tags li { padding: 3px 10px; border-radius: 10px; color: var(--lib-lilac); background: rgba(233, 195, 255, 0.1); font-size: 12px; font-weight: 600; } /* модули и уроки */ #pd-lib-root .pd-lib-modules { display: grid; gap: 14px; margin-top: 8px; } #pd-lib-root .pd-lib-module { padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--lib-line); } #pd-lib-root .pd-lib-module-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 10px; } #pd-lib-root .pd-lib-module-title { font-family: var(--lib-font-num); font-size: 16px; font-weight: 700; } #pd-lib-root .pd-lib-module-title small { margin-right: 8px; color: var(--lib-blue); font-size: 12px; letter-spacing: 0.08em; } #pd-lib-root .pd-lib-module-summary { margin: -4px 0 10px; color: var(--lib-muted); font-size: 13px; } #pd-lib-root .pd-lib-lessons { display: grid; gap: 6px; } #pd-lib-root .pd-lib-lesson-link { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--lib-text); background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px transparent; text-decoration: none; transition: background-color 0.15s ease, box-shadow 0.15s ease; } #pd-lib-root .pd-lib-lesson-link:hover { background: rgba(146, 213, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(146, 213, 255, 0.4); } #pd-lib-root .pd-lib-lesson-link.is-current { background: rgba(146, 213, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(146, 213, 255, 0.5); } #pd-lib-root .pd-lib-lesson-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--lib-muted); background: rgba(255, 255, 255, 0.06); font-family: var(--lib-font-num); font-size: 12px; font-weight: 700; } #pd-lib-root .pd-lib-lesson-mark.is-done { color: #04060f; background: var(--lib-green); } #pd-lib-root .pd-lib-lesson-name { min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } #pd-lib-root .pd-lib-lesson-name small { display: block; margin-top: 1px; color: var(--lib-muted); font-size: 12px; font-weight: 500; } #pd-lib-root .pd-lib-lesson-min { color: var(--lib-muted); font-size: 12px; white-space: nowrap; } /* текст по разметке заметок (## заголовок, ! акцент, - пункт) */ #pd-lib-root .pd-lib-text p { color: rgba(238, 241, 255, 0.9); font-size: 15px; line-height: 1.65; } #pd-lib-root .pd-lib-text p + p { margin-top: 10px; } #pd-lib-root .pd-lib-text .pd-lib-sub { margin: 22px 0 10px; font-family: var(--lib-font-num); font-size: 17px; font-weight: 700; line-height: 1.3; } #pd-lib-root .pd-lib-text .pd-lib-sub:first-child { margin-top: 0; } #pd-lib-root .pd-lib-text .pd-lib-sub::before { content: ""; display: block; width: 26px; height: 2px; margin-bottom: 8px; border-radius: 2px; background: var(--lib-blue); opacity: 0.8; } #pd-lib-root .pd-lib-text .pd-lib-accent { margin: 14px 0; padding: 12px 16px; border-radius: 14px; background: rgba(146, 213, 255, 0.08); box-shadow: inset 2px 0 0 var(--lib-blue); } #pd-lib-root .pd-lib-text .pd-lib-list { display: grid; gap: 8px; margin: 12px 0; counter-reset: pdlib; } #pd-lib-root .pd-lib-text .pd-lib-list li { position: relative; padding: 10px 14px 10px 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--lib-line); font-size: 14px; line-height: 1.5; counter-increment: pdlib; } #pd-lib-root .pd-lib-text .pd-lib-list li::before { content: counter(pdlib); position: absolute; left: 12px; top: 10px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; background: rgba(146, 213, 255, 0.12); color: var(--lib-blue); font-family: var(--lib-font-num); font-size: 11px; font-weight: 700; } #pd-lib-root .pd-lib-text a { color: var(--lib-blue); } /* файлы и ссылки */ #pd-lib-root .pd-lib-files { display: grid; gap: 8px; margin-top: 10px; } #pd-lib-root .pd-lib-file { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; color: var(--lib-text); background: rgba(146, 213, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(146, 213, 255, 0.26); text-decoration: none; font-size: 14px; font-weight: 600; } #pd-lib-root .pd-lib-file:hover { background: rgba(146, 213, 255, 0.13); } #pd-lib-root .pd-lib-file::before { content: "↓"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--lib-blue); background: rgba(146, 213, 255, 0.14); font-weight: 700; } /* похожие материалы */ #pd-lib-root .pd-lib-related { display: flex; flex-wrap: wrap; gap: 8px; } #pd-lib-root .pd-lib-related a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; color: var(--lib-text); background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--lib-line); font-size: 13px; font-weight: 600; text-decoration: none; } #pd-lib-root .pd-lib-related a:hover { background: rgba(146, 213, 255, 0.1); } /* ---- Урок ---- */ #pd-lib-root .pd-lib-lesson { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 24px; align-items: start; } #pd-lib-root .pd-lib-lesson-body { display: grid; gap: 16px; min-width: 0; } #pd-lib-root .pd-lib-lesson-nav { position: sticky; top: 16px; } #pd-lib-root .pd-lib-lesson-nav .pd-lib-lessons { margin-top: 10px; } #pd-lib-root .pd-lib-lesson-nav .pd-lib-lesson-link { padding: 8px 10px; } #pd-lib-root .pd-lib-lesson-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--lib-muted); font-size: 13px; } #pd-lib-root .pd-lib-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; overflow: hidden; box-shadow: inset 0 0 0 1px var(--lib-line); } #pd-lib-root .pd-lib-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } #pd-lib-root .pd-lib-video-note { color: var(--lib-muted); font-size: 14px; } #pd-lib-root .pd-lib-hint { padding: 12px 16px; border-radius: 14px; color: var(--lib-muted); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--lib-line); font-size: 14px; } #pd-lib-root .pd-lib-hint b { color: var(--lib-text); } #pd-lib-root .pd-lib-checks { display: grid; gap: 8px; } #pd-lib-root .pd-lib-lesson-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--lib-line); } #pd-lib-root .pd-lib-lesson-foot .pd-lib-actions { margin: 0; } #pd-lib-root .pd-lib-done-note { display: inline-flex; align-items: center; gap: 8px; color: var(--lib-green); font-size: 14px; font-weight: 700; } #pd-lib-root .pd-lib-done-note::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #04060f; background: var(--lib-green); font-size: 13px; } /* тест */ #pd-lib-root .pd-lib-quiz { display: grid; gap: 14px; } #pd-lib-root .pd-lib-q { padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--lib-line); } #pd-lib-root .pd-lib-q.is-ok { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.5); } #pd-lib-root .pd-lib-q.is-bad { box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.5); } #pd-lib-root .pd-lib-q-title { margin-bottom: 10px; font-size: 15px; font-weight: 700; line-height: 1.4; } #pd-lib-root .pd-lib-q-title small { display: block; margin-top: 2px; color: var(--lib-muted); font-size: 12px; font-weight: 500; } #pd-lib-root .pd-lib-q-options { display: grid; gap: 6px; } #pd-lib-root .pd-lib-q-options .pd-lib-check { padding: 9px 12px; } #pd-lib-root .pd-lib-q-options .pd-lib-check.is-correct { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.55); } #pd-lib-root .pd-lib-q-options .pd-lib-check.is-on span { text-decoration: none; color: var(--lib-text); } #pd-lib-root .pd-lib-q-explain { margin-top: 10px; padding-left: 10px; border-left: 2px solid rgba(146, 213, 255, 0.6); color: var(--lib-muted); font-size: 13px; line-height: 1.5; } #pd-lib-root .pd-lib-q-explain.is-ok { border-color: var(--lib-green); } #pd-lib-root .pd-lib-q-explain.is-bad { border-color: var(--lib-red); } #pd-lib-root .pd-lib-score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 16px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--lib-line); } #pd-lib-root .pd-lib-score.is-pass { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.5); } #pd-lib-root .pd-lib-score.is-fail { box-shadow: inset 0 0 0 1px rgba(255, 183, 3, 0.5); } #pd-lib-root .pd-lib-score-num { font-family: var(--lib-font-num); font-size: 34px; font-weight: 900; line-height: 1; } #pd-lib-root .pd-lib-score.is-pass .pd-lib-score-num { color: var(--lib-green); } #pd-lib-root .pd-lib-score.is-fail .pd-lib-score-num { color: var(--lib-amber); } #pd-lib-root .pd-lib-score-text { font-size: 14px; } #pd-lib-root .pd-lib-score-text small { display: block; margin-top: 2px; color: var(--lib-muted); font-size: 13px; } /* сообщения */ #pd-lib-root .pd-lib-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 10001; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; } #pd-lib-root .pd-lib-toast { padding: 12px 16px; border-radius: 14px; color: var(--lib-text); background: #0f1426; box-shadow: inset 0 0 0 1px rgba(146, 213, 255, 0.35), 0 16px 40px rgba(0, 0, 0, 0.5); font-size: 14px; line-height: 1.45; pointer-events: auto; animation: pd-lib-rise 0.3s ease both; } #pd-lib-root .pd-lib-toast--ok { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.55), 0 16px 40px rgba(0, 0, 0, 0.5); } #pd-lib-root .pd-lib-toast--error { box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.65), 0 16px 40px rgba(0, 0, 0, 0.5); } @keyframes pd-lib-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* панель предпросмотра */ #pd-lib-root .pd-lib-preview { position: fixed; top: 12px; right: 12px; z-index: 10002; display: grid; gap: 8px; width: min(280px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 16px; color: var(--lib-text); background: rgba(11, 14, 26, 0.97); box-shadow: inset 0 0 0 1px rgba(255, 183, 3, 0.5), 0 20px 50px rgba(0, 0, 0, 0.55); font-size: 12px; } #pd-lib-root .pd-lib-preview b { color: var(--lib-amber); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } #pd-lib-root .pd-lib-preview-links { display: flex; flex-wrap: wrap; gap: 6px; } #pd-lib-root .pd-lib-preview-links a { padding: 4px 10px; border-radius: 999px; color: var(--lib-text); background: rgba(255, 255, 255, 0.08); font-size: 12px; font-weight: 600; text-decoration: none; } #pd-lib-root .pd-lib-preview-links a.is-on { color: var(--lib-amber); background: rgba(255, 183, 3, 0.14); } /* ---- Адаптив ---- */ @media screen and (max-width: 1199px) { #pd-lib-root .pd-lib-top-mid { display: none; } #pd-lib-root .pd-lib-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } #pd-lib-root .pd-lib-filters .pd-lib-field--q { grid-column: 1 / -1; } } @media screen and (max-width: 900px) { #pd-lib-root .pd-lib-item { grid-template-columns: minmax(0, 1fr); } #pd-lib-root .pd-lib-item-cover { width: min(100%, 360px); } #pd-lib-root .pd-lib-lesson { grid-template-columns: minmax(0, 1fr); } #pd-lib-root .pd-lib-lesson-nav { position: static; } } @media screen and (max-width: 767px) { #pd-lib-root { font-size: 14px; } #pd-lib-root .pd-lib-top { padding: 14px 16px; } #pd-lib-root .pd-lib-brand { font-size: 13px; } #pd-lib-root .pd-lib-shell { padding: 2px 16px 48px; } #pd-lib-root .pd-lib-head { align-items: stretch; } #pd-lib-root .pd-lib-head-main { flex-basis: 100%; } #pd-lib-root .pd-lib-head-side { justify-content: flex-start; } #pd-lib-root .pd-lib-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; border-radius: 16px; } #pd-lib-root .pd-lib-grid { grid-template-columns: minmax(0, 1fr); } #pd-lib-root .pd-lib-panel, #pd-lib-root .pd-lib-empty { padding: 18px 16px; border-radius: 18px; } #pd-lib-root .pd-lib-rec { grid-template-columns: minmax(0, 1fr); } #pd-lib-root .pd-lib-lesson-foot .pd-lib-actions .pd-lib-btn { flex: 1 1 auto; } #pd-lib-root .pd-lib-toasts { top: 8px; right: 8px; left: 8px; bottom: auto; width: auto; } #pd-lib-root .pd-lib-preview { top: auto; bottom: 8px; right: 8px; } } @media (prefers-reduced-motion: reduce) { #pd-lib-root .pd-lib-state::after, #pd-lib-root .pd-lib-toast { animation: none; } #pd-lib-root * { transition: none !important; scroll-behavior: auto !important; } }