/* Foundation pattern components (Blueprint waves). Source: design-system-v2/handoff/project/Паттерны.dc.html Visual values (padding, font-size, etc.) governed by the handoff — on conflicts, handoff is authoritative. All colours/radii/shadows via var(--…) from tokens.css — no inline colour literals. Class prefixes: rp-ph* (page header), rp-card* (section card), rp-chip* (status chip), rp-ctx* (context badge), rp-empty2* (empty state), rp-tabs*, rp-tab* (hub tabs; rp-tabs-seg/-seg-tab/-seg-ico/-seg-lbl = the mobile «icon + short label» N-column segment control RpHubTabs renders when a RpHubTab carries Icon/Short — Финансы.dc.html), rp-fin* (wave 5 Task 2 — /finance hub + «Платежи» tab, Финансы.dc.html: rp-fin-toolbar/-panel shell, the summary row (rp-fin-summary/-spacer, the received card rp-fin-sumcard/-sumcard-label/-sumcard-row/ -sumcard-amount/-sumcard-count, the period segment rp-fin-periods/-period(--active), the status dropdown rp-fin-filterbox/-filter-ico/-filter), the desktop payments table (rp-fin-table/-thead/-row/ -date/-payer/-payer-name/-payer-sub/-item/-amount/-chev) + its ≤640px card view (rp-fin-cards/-card/ -card-top/-card-payer/-card-amount/-card-mid/-card-item/-card-meta), rp-fin-more/-none/-note; wave 5 Task 3 — «Прайс» tab: rp-fin-price-section/-sectionhead/-title/-sub/-addbtn, the packages table (rp-fin-price-table/-thead/-row/-name/-mix/-term/-vis(--accent), the hand-rolled 36×21 toggle rp-fin-price-switch(-thumb) — П-9, no BbSwitch preset matches — and rp-fin-price-edit), the read-only courses-products table (rp-fin-price-coursetable/-courserow/-courselink, no header row), their shared ≤640px card view (rp-fin-price-cards/-card/-card-top/-card-name/-card-amount/-card-meta/-card-mid), and PackageDialog's audience multi-select (rp-fin-pkg-audlist/-audrow(--picked)/-audcheck/-audname — everything else reuses rp-covw-dlg* chrome verbatim)); wave 5 Task 4 — «Приём оплат» tab (GatewayPanel): rp-gw* (rp-gw-intro, rp-gw-banner(--off)/-banner-ico/-banner-txt/-banner-title/-banner-sub/-banner-btn, rp-gw-seg/-seg-tab(--active), rp-gw-reco, rp-gw-fields/-row2/-field(--half)/-label/-input/-hint, rp-gw-details/-details-body, rp-gw-actions) and «Подписка» tab (SubscriptionPanel): rp-sub* (rp-sub-status/ -pill(--ok/--warn/--danger)/-pill-dot/-paid, rp-sub-plans/-plan(--current)/-plan-head/-plan-name/-plan-badge/ -plan-price/-plan-per, rp-sub-feats/-feat(--off)/-feat-ico, rp-sub-plan-grow, rp-sub-plan-cta(--primary/ --outline/--free), rp-sub-promo — the promo input reuses rp-gw-field/-label/-input); wave 5 Task 5 — «ИИ-кредиты» tab (AiCreditsPanel): rp-ai* (rp-ai-top/-card/-card-label, rp-ai-avail/-avail-num/-avail-meta/ -avail-note, rp-ai-promo-title/-promo-row/-promo-btn — the redeem input reuses rp-gw-input, rp-ai-discount for the percent-off-at-checkout field — reuses rp-gw-field/-label — rp-ai-section-title, the desktop pack grid rp-ai-packs/-pack/-pack-name/-pack-credits/-pack-bottom/-pack-price/-pack-buy + its ≤640px row list rp-ai-packs-m/-pack-row/-pack-row-info/-pack-row-name/-pack-row-credits/-pack-row-price/-pack-row-buy, and the desktop-only history rp-ai-history-section/-history/-history-row/-history-date/-history-kind/ -history-delta(--plus) — grid 130px 1fr 80px, no header row, LOCKED-12 (no mobile counterpart at all)), rp-btn-submit, rp-spin (submit), rp-bal* (balance widget/card/history), rp-prod* (product card), rp-seg* (segmented tabs), rp-asg* (assignment list/card), rp-sban* (success banner), rp-payrow* (payments list), rp-crs* (course card), rp-pay* (Task 6 — /pay page layout: section spacing/labels + the "Купить" grid; wave 6 Task 2 added rp-pay-kid* — the parent «За детей» blocks, Оплата.dc.html «Родитель»: the per-(child, tenant) block rp-pay-kid, its desktop head rp-pay-kid-head(--self is the «За себя» divider)/-avatar(--warm)/-name/-sub, the balance wrapper rp-pay-kid-bal(--warn = zero-balance warning tone over rp-balcard), the ≤768px accordion rp-pay-kid-acc/-acc-txt/-acc-name/-acc-bal(--warn)/-chev(--open), the collapsible body rp-pay-kid-body(--open) + mobile shop label rp-pay-kid-shoplabel, the mobile compact product rows rp-pay-kid-rows/-row/-row-info/-row-name/-row-sub/-row-buy/-row-price/-row-btn, and the honest empty-shop note rp-pay-kid-none), rp-pmt* (wave 5 Task 6 — /payments/{id} + /receipts/{id} pages, Платёж и чек.dc.html: the page wrapper rp-pmt (max-width column), the payment card rp-pmt-card + rp-pmt-crumb (role breadcrumb), the header rp-pmt-head/-head-main/-title/-ulid (mono short ULID), the 150px-1fr requisites grid rp-pmt-rows/-row (--last)/-k/-v(--strong), the destructive-outline rp-pmt-actions/-refund-btn, the refunds table rp-pmt-rf-table/-rf-thead/-rf-row/-rf-amount/-rf-date (grid 90px 90px 1fr 120px) + rp-pmt-refunds-title; RefundDialog reuses rp-covw-dlg head/close chrome + rp-sched-dlg-label/-input, adds rp-pmt-rf-dlg/ -rf-desc/-rf-fields/-rf-hint/-rf-actions/-rf-cancel/-rf-submit (destructive); the receipt card rp-pmt-rcpt-card/-rcpt-head/-rcpt-badge (accent 40px)/-rcpt-title/-rcpt-sub, the dashed товарный чек rp-pmt-rcpt-table/-rcpt-row/-rcpt-k/-rcpt-leader (dotted)/-rcpt-v(--strong)/-rcpt-total/-rcpt-total-k/ -rcpt-spacer/-rcpt-total-v, the full-width primary-outline rp-pmt-rcpt-pdf + rp-pmt-rcpt-note), rp-wk*, rp-wknav*, rp-book* (Task 7 — /my-lessons week calendar + booking dialog; wave 3 Task 5 extended the rp-wk-ev-- kinds with --group/--done/--cancelled + rp-wk-ev-top, rp-wk-ev-badge, rp-wk-ev-time--struck and the mobile rp-wkm-card-time/-chip/-sub for the tutor view; a later fix-wave added the live/«скоро» treatment — rp-wk-ev--live (desktop tint), rp-wkm-card--live/-hit/-actions/-action(--primary/--outline)/-chip--success (mobile border + chip + «Войти в занятие»/«Перенести» action row)), rp-les* (Task 8 — /lesson/{id} entity page: details/homework/summary cards + cancel dialog), rp-hwh* (Task 9 — /homework assignments hub: tabs spacing + section labels), rp-hws* (Task 10 — /homework/block/{id} focus-mode submission page: header/autosave indicator, answer + feedback cards, file tokens, quiz mini-layout, sticky mobile CTA). rp-mycrs* (Task 12 — /my-courses enrolled-only grid + shop footnote; the card itself is rp-crs*). rp-quiz* (Task 11 — /tests/take/{id} focus-mode test page: header/progress/question/options/nav + the result screen's score ring, ScoreRing.razor's .rp-quiz-ring). rp-plr* (Task 13 — /my-courses/{id} desktop two-pane player: structure aside + inline lesson panel, incl. AudioPlayerPill's rp-plr-audio* — the audio pill has no separate prefix of its own). rp-shome* (Task 14 — /home/student grid + shared card-head/link), rp-nlc* (next-lesson card), rp-crw* (course-resume widget), rp-bal-warning (low-balance strip on the RpBalanceWidget full card). rp-phome* (wave 6 Task 3 — /home/parent, Главная родителя.dc.html: the 2-col child-card grid rp-phome-grid/-card, card head rp-phome-head/-head-text/-name/-tenant + the shared initials avatar rp-phome-avatar(--warm alternating child tint, --sm week-row size), the next-lesson box rp-phome-next/-next-ico/-next-body/-next-title/-next-when/-next-none/-next-link, the balance box rp-phome-bal(--warn zero-balance tone)/-bal-body/-bal-label/-bal-num + the «Пополнить» CTA rp-phome-topup(--primary filled at zero), the tasks block rp-phome-tasks (head reuses rp-shome-card-head/-label/-link), the desktop-only week card rp-phome-week/-week-list/-week-row/ -week-when/-week-body/-week-title/-week-child/-week-none, and the no-children rp-phome-empty). rp-chw* (wave 6 Task 4 — /children-homework, Задания детей.dc.html: the per-child filter chips rp-chw-filters/-chip(--active)/-chip-av(--warm — the 20px initials circle, hidden ≤640px per LOCKED-12; one markup) and the status sections rp-chw-sec/-sec-head/-label + the section-tone counter badge rp-chw-count(--danger, --info, --success); the rows themselves are rp-asg*, which gained the optional child-initials rp-asg-avatar(--warm) rendered on both viewports; wave 6 Task 6 added the parent read-only submission view chrome rp-chw-sub/-sub-back/-sub-badge — the engine cards inside are HomeworkSubmissionDetail's own). rp-pbadge* (wave 6 Task 5 — ParentModeBadge, Режим родителя.dc.html, П-14: the inline read-only pill rp-pbadge-pill next to the /my-lessons title, the full-width strip rp-pbadge-banner(-banner-text) above /lesson/{id} content, and the LOCKED-10 info card rp-pbadge-info/-info-ico/-info-text). rp-th* (wave 3 Task 4 — /home/tutor: greeting head/actions, the desktop 1.6fr/1fr grid (today, grading queue, new-request, low-balance, week-stats cards) and the mobile hero/compact/link-card stream — see this component's own doc comment for the desktop/mobile split rationale). rp-sched* (wave 3 Task 5 — /schedule tutor page: the toolbar (title + «+ Занятие»/«+ Слот»), the nav row (‹ › + range + «Сегодня» + Неделя/День segment + legend), the desktop «День» single-day list wrapper, and the two Bb dialogs' bodies — details (rp-sched-dlg*) + conduct (rp-sched-conduct*)). rp-cld*, rp-psd* (wave 3 Task 6 — the /schedule create-lesson dialog (rp-cld*: head/close, segment, student picker/list, weekly-repeat switch, balance strip, «Дополнительно» collapse, submit — reused by the publish-slots dialog for the shared form chrome) and the publish-slots dialog extras (rp-psd*: hint + weekday multiselect)). rp-chat* (Task 3, wave 2 — /chat INBOX pane: head/search/tabs/groups/rows/avatars/foot + the desktop no-room-selected placeholder), rp-chat-shell (the two-pane/two-screen page shell, Task 4 — was chat.css's .chat-shell), rp-convo* (Task 4 — conversation pane: head/kebab/ search-nav/body/day-separators, was chat.css's .convo-*), rp-msg* (Task 4 — message row/ bubble/receipt/actions/attachments/delete, was chat.css's .msg-*), rp-composer* (Task 4 — composer wrap/field/attach/send/preview/help/disabled-notice, was chat.css's .composer-*). chat.css is DELETED — every legacy class above has an rp-* successor. rp-anncmp* (Task 5, wave 2, ОВ-2а — announcement compose: the ChatInbox header «Объявление» trigger button + the AnnouncementComposeDialog BbDialog content — head/grabber/labels/ input/textarea/validation/audience-preview/rate-limit/actions — and its ≤600px bottom-sheet variant; the standalone /announcements page is gone, replaced by this dialog + a transitional redirect, RedirectMap.cs). rp-annh* (Task 6, wave 2 — ChatInbox's manager-only «Объявления» tab: AnnouncementHistoryList's head/card/preview/chip/audience/revoke), rp-msg-annmeta* (Task 6 — the tutor's per-message read/audience/revoke meta line, replacing rp-msg-receipt on the tutor's own announcement bubble), rp-convo-newann (Task 6 — the announcement conversation header's «Новое объявление» button, tutor-only; rp-convo-chip/rp-composer-disabled are REUSED as-is for the tutor's audience chip and daily-budget footer, no new classes needed there). rp-notif* (Task 7, wave 2 — /settings/notifications restyle: push status card + the Событие/Чат/Email/Push matrix, collapsing to a card-per-event ≤600px; the Email/Push pill switch itself is NotifChannelSwitch.razor's .rp-notif-switch, not BbSwitch — see that component's doc comment). rp-menu (blueprint-pitfalls.md П-20 follow-up — shared BbDropdownMenuContent/Item/Separator skin for ALL FIVE dropdown consumers: TopBarUserMenu, TopBarScheduleWidget, TopBarChatButton, TopBarRoleSwitcher, ChatConversation's kebab; rp-tbw-chat-menu is a width:320px modifier for the messages dropdown only, combined with rp-menu, not folded into it). rp-stu* (wave 3 Task 7 — /students hub: the toolbar (title + «+ Пригласить»), the Ученики-tab filters (search + status select), the desktop roster table (rp-stu-table/-thead/-row/-user/ -avatar/-name/-bal(--danger/--warning/--success)/-muted/-chev/-rowact) + its ≤640px card view (rp-stu-cards/-card/-card-main/-card-name/-card-sub), the pending-row inline actions (rp-stu-pending-actions/-pact(--accept/--decline)), the Группы-tab card grid (rp-stu-groups/ -gcard/-gcard-head/-gcard-dot/-gcard-name/-gcard-meta/-gedit/-gnew) + paid-plan upsell (rp-stu-upsell), the Приглашения-tab list (rp-stu-inv/-inv-row/-inv-icon/-inv-main/-inv-email/ -inv-meta/-inv-act(--danger)/-inv-foot), and shared bits (rp-stu-panel, rp-stu-field, rp-stu-err, rp-stu-hint, rp-stu-check, rp-stu-members/-member/-member-remove, rp-stu-addrow, rp-stu-schedlink). Dialog CHROME is REUSED from rp-sched-dlg* (title/sub/label/input/actions/btn) — the same generic Bb-dialog primitives SchedulePage's confirm uses; only students-specific layout gets rp-stu-*.) rp-scard* (wave 3 Task 8 — /students/{id} student card page (Карточка ученика.dc.html): the breadcrumb (rp-scard-crumb/-link/-sep/-cur), the avatar+name+status+actions header (rp-scard-head/-avatar/-head-main/-name-row/-name/-sub/-actions, action buttons rp-scard-btn with --primary/--ghost), the 1.5fr/1fr desktop grid (rp-scard-grid/-col) of section cards (rp-scard-card(--pad)/-card-head/-card-title(--inline)/-card-spacer/-card-foot/-card-link(--danger)), the balance card body (rp-scard-topup, rp-scard-bal-row/-bal-num/-bal-cap, rp-scard-hist wrapping the reused rp-balhist* rows), the lesson rows (rp-scard-lesson/-lesson-when/-lesson-day/-lesson-time/ -lesson-topic), the course rows (rp-scard-crs/-crs-top/-crs-name/-crs-count/-crs-foot + the progress bar rp-scard-prog/-prog-fill), the works rows (rp-scard-work/-work-main/-work-title/-work-kind), the parent rows (rp-scard-parent/-parent-avatar/-parent-main/-parent-name/-parent-email), the muted footnote rp-scard-note, the small per-card empty text rp-scard-empty, the «Опасная зона» archive footer (rp-scard-danger/-danger-text/-danger-title/-danger-sub/-danger-btn), the loading wrap rp-scard-loading, and the «Начислить» dialog body (rp-scard-dlg/-dlg-head/-dlg-title/-dlg-spacer/ -dlg-x/-dlg-sub/-dlg-fields/-dlg-field/-dlg-preview/-dlg-preview-label/-dlg-preview-val); field/ label/input/actions/btn chrome is REUSED from rp-sched-dlg*.) rp-gq* (wave 3 Task 9 — /grading queue, Домашние задания.dc.html top screen): the toolbar (rp-gq-toolbar/-toolbar-spacer, the pill tabs rp-gq-tab(--active), the two BbDropdownMenu filter triggers rp-gq-filter — dropdown content itself reuses the shared rp-menu skin), the desktop list (rp-gq-list/-row/-avatar/-body/-title/-student/-task/-sub/-files/-age(--warn)/-chev), and the ≤768px card stream (rp-gq-mhead/-mtitle/-mbadge/-mtabs/-mtab(--active)/-mempty/-mcard/-mcard-top/ -mcard-body/-mcard-name/-mcard-task/-mcard-btn) toggled by the same shell breakpoint as rp-th-*. rp-grev* (wave 3 Task 10 — /grading/{SubmissionId} review page, Домашние задания.dc.html bottom screen): the loading wrap rp-grev-loading, the header (rp-grev-head/-head-spacer, breadcrumb rp-grev-crumb/-crumb-link/-crumb-sep/-crumb-cur, the queue position rp-grev-pos + the ‹ › nav rp-grev-nav/-navbtn(--disabled)), the 1.5fr/1fr desktop grid (rp-grev-grid/-col), the section cards (rp-grev-card(--muted/--pad)/-card-label/-card-title, the muted note rp-grev-muted), the answer card (rp-grev-answer-head/-answer-spacer/-answer-text, the «K-я попытка» chip rp-grev-attempt, file chips rp-grev-files/-file/-file-name/-file-size, the autotest review rp-grev-score/-quiz-q/-quiz-prompt/ -quiz-answer/-quiz-correct), the previous-review text rp-grev-prev-text, the decision card (the conflict banner rp-grev-conflict, the graded verdict rp-grev-verdict(--success/--warning/ --danger)/-verdict-label/-verdict-text, the auto-take-in-flight hint rp-grev-hint (pairs with rp-grev-muted), the editable form rp-grev-field-label/-textarea/-actions, the buttons rp-grev-btn(--accept/--outline) + the destructive text-link rp-grev-reject), and the student mini-card (rp-grev-stats/-cardlink); the reject-confirm dialog reuses rp-sched-dlg*. rp-tm* (wave 3 Task 11 — /tests gradebook, Тесты.dc.html): the toolbar (rp-tm-toolbar/-toolbar-spacer/ -filters/-filter/-inactive, buttons rp-tm-btn(--primary/--ghost)), the TRANSPOSED sticky-corner matrix (rp-tm-wrap/-tm, sticky rp-tm-corner + rp-tm-rowhead, columns rp-tm-colhead(--inactive)/ -colhead-inner/-colhead-main/-colhead-name/-colhead-meta, the kebab rp-tm-kebab, the badge rp-tm-badge(--muted), the student cell rp-tm-student/-student-name/-avatar, cells rp-tm-cell + the state chips rp-tm-chip(--passed/--failed/--scored/--assigned) + rp-tm-assigned/-dash, the footer rp-tm-hint), the ≤768px card view (rp-tm-cards/-card(--inactive)/-card-head/-card-name/-card-meta/ -card-chips/-card-empty), the create dialog (rp-tm-dlg/-dlg-title/-dlg-sub/-dlg-field/-dlg-label/ -dlg-input/-dlg-thr/-dlg-thr-unit/-dlg-help/-dlg-switchrow/-dlg-switchtext/-dlg-actions/-dlg-spacer, the pill switch rp-tm-sw(--on)/-sw-thumb, errors rp-tm-err), and the cell-results popup body (rp-tm-res-head/-res-list/-res-row/-res-date). The assign/results/AI dialogs keep the MudDialog shell but reuse rp-sched-dlg* for their Blueprint-styled bodies. rp-crsl* (wave 4 Task 3 — /courses list, Курсы.dc.html): the toolbar (rp-crsl-toolbar/-toolbar-spacer, the primary button rp-crsl-btn(--primary) with its responsive rp-crsl-btn-full/-btn-compact text swap ≤768px), the filter chips (rp-crsl-filters/-chip(--active), client-side Все/Черновики/Архив — no server round-trip), the card grid (rp-crsl-grid, cards rp-crsl-card(--archived) linking straight to the overview /courses/{Id}, cover rp-crsl-cover, body rp-crsl-body/-name/-meta/-row/-students/ -spacer/-price), the footer note rp-crsl-info, an empty state (RpEmpty, shared — no new classes), and the CreateCourseDialog body (rp-crsl-dlg/-dlg-head/-dlg-title/-dlg-spacer/-dlg-close/-dlg-optional/ -dlg-textarea/-dlg-note/-dlg-submit, field wrapper rp-crsl-field, errors rp-crsl-err/-err-banner); label/input chrome is REUSED from rp-sched-dlg*. rp-ted* (wave 3 Task 11 — /tests/{Id} editor): the header (rp-ted-head/-head-spacer, breadcrumb rp-ted-crumb/-crumb-link/-crumb-sep/-crumb-cur, autosave rp-ted-status(--ok/--pending/--warn), buttons rp-ted-btn(--primary)), the 1.5fr/1fr grid (rp-ted-grid), the questions column (rp-ted-questions, fields rp-ted-field/-label/-input, the inline alert rp-ted-alert, question cards rp-ted-qcard/-qhead/-qnum/-qtype/-qspacer/-qdel/-qtext, options rp-ted-opt/-opt-mark(--on/--radio)/ -opt-del, add buttons rp-ted-addopt/-addq/-ai), the right column (rp-ted-side, cards rp-ted-card/-card-title/-card-spacer/-card-count, the threshold rp-ted-thr/-thr-unit, the display row rp-ted-prow/-prow-key/-prow-val, switch rows rp-ted-switchrow/-switchtext reusing rp-tm-sw, the assignments list rp-ted-batch/-batch-aud/-batch-meta/-reslabel/-resrow/-resname, empty rp-ted-empty). Reuses rp-tm-avatar/-tm-chip for result rows and rp-tm-badge for the «новым ученикам» crumb badge. rp-covw* (wave 4 Task 4 — /courses/{Id} course overview, Обзор курса.dc.html — the П-7 product hub): the loading wrap rp-covw-loading, the page wrap rp-covw, the breadcrumb (rp-covw-crumb/-crumb-link/ -crumb-back(≤768 back-arrow)/-crumb-sep/-crumb-cur), the draft banner (rp-covw-banner/-banner-text/ -banner-btn), the header (rp-covw-head, cover rp-covw-cover(--placeholder), rp-covw-head-main, title row rp-covw-title-row/-title, the kebab trigger rp-covw-kebab, description rp-covw-desc, action buttons rp-covw-actions/-btn(--primary/--outline)), the card grid rp-covw-grid, the «Продукт» card (rp-covw-card/-card-head, rows rp-covw-row(--switch)/-row-label/-row-val(--muted)/-row-edit, the section label rp-covw-subhead, module stepper rows rp-covw-mod/-mod-title/-mod-count + the ± buttons rp-covw-step, the footer rp-covw-foot, the small empty text rp-covw-empty), and the Bb dialog bodies (price + name/description + cover) rp-covw-dlg/-dlg-head/-dlg-title/-dlg-spacer/-dlg-close/-dlg-fields/ -dlg-textarea/-dlg-hint-inline/-dlg-summary/-dlg-summary-label/-dlg-summary-val/-dlg-note/-dlg-submit, field wrapper rp-covw-field, errors rp-covw-err/-err-banner. The confirm dialog reuses rp-sched-dlg*; label/input chrome is REUSED from rp-sched-dlg*; the SequentialUnlock toggle reuses NotifChannelSwitch (rp-notif-switch); the cover engine is the shared RpImageField. Task 5 extends the same prefix: the «Озвучка» card (rp-covw-audio-head/-title, voice chips rp-covw-voice/-voice-label/-voice-chips/ -voice-chip(--active), the refresh row rp-covw-audio-refresh/-audio-btn/-audio-est, the honest hint rp-covw-hint), the «Ученики» card (full-span rp-covw-card--students, header rp-covw-students-head/ -title/-sub/-enroll-btn, desktop rows rp-covw-students-rows/-student-row/-avatar/-name/-date/-progress(-fill/-pct/ -none)/-unenroll, mobile compact rp-covw-students-cards/-student-card(-main/-name/-meta) swapped in at ≤768px), and the «Записать ученика» dialog (rp-covw-enroll-search(-input)/-list/-row(--disabled)/ -name/-chip, reusing rp-covw-dlg/-dlg-head* chrome + rp-covw-student-avatar). rp-ced* (wave 4 Task 6 — /courses/{Id}/content content-editor shell, Редактор содержания.dc.html, on ReaderLayout/no-shell): the full-screen column rp-ced/-loading, the header (rp-ced-head/-head-spacer, breadcrumb rp-ced-crumb/-crumb-link/-crumb-sep/-crumb-cur, the AI-credits chip rp-ced-credits), the body split rp-ced-body, the left tree pane (rp-ced-tree, desktop course header rp-ced-tree-head/ -course-row/-course-name/-course-meta/-course-counts/-course-actions/-course-btn(--disabled), the scroll rp-ced-tree-scroll/-tree-empty, module rows rp-ced-mod/-modrow/-mod-toggle/-mod-title/-mod-meta, lesson rows rp-ced-lesson(--active)/-lesson-title/-lesson-meta, the add-lesson affordance rp-ced-addlesson, footer rp-ced-tree-foot/-foot-btn(--accent), shared kebab rp-ced-kebab), the canvas host (rp-ced-canvas/-canvas-inner/-canvas-context), and the mobile-only pane headers rp-ced-mhead (--lesson)/-mhead-back/-mhead-main/-mhead-title/-mhead-sub/-mhead-ai swapped in by [data-mobile-pane] at ≤768px. Kebab dropdown bodies reuse rp-menu. rp-lc* (wave 4 Task 7 — the LessonCanvas block document inside rp-ced-canvas, Редактор содержания.dc.html): the title bar (rp-lc-titlebar/-title/-title-input/-pencil/-ai), the aggregate save-status line rp-lc-status, the compact cover slot rp-lc-cover, block cards (rp-lc-block/-block-icon/ -block-body/-kebab, destructive kebab item rp-lc-danger), and the «+ Блок» affordance (rp-lc-add/ -addbtn + the in-canvas popover rp-lc-add-backdrop/-add-pop/-add-grid/-add-tile/-add-ai — NOT a Bb portal, so П-15 doesn't apply). Block kebab bodies + the «✦ ИИ» dropdown reuse rp-menu. The autotest block card body is a collapsed summary rp-lc-atsum/-atsum-title/-atsum-meta/-atsum-chev (opens the in-canvas editor). Task 9 adds the «✦ ИИ» menu header rp-lc-ai-menu/-ai-head/-ai-head-bolt/-ai-head-bal/ -ai-head-top, inline AI drafts rp-lc-block--draft/-draft-badge/-draft-md/-draft-at, and the sticky accept/discard bar rp-lc-draftbar/-draftbar-icon/-draftbar-label/-draftbar-discard/-draftbar-accept. rp-gen* (wave 4 Task 9 — the AI generation dialogs «Заполнить урок», «Вопросы автотеста», «План курса», reusing rp-covw-dlg head/close chrome): rp-gen-dlg(--wide)/-dlg-title/-dlg-lead/-dlg-hint/-dlg-fields/ -dlg-label/-dlg-input/-dlg-row/-dlg-col/-dlg-foot/-dlg-bal/-dlg-btn(--ghost)/-dlg-counts, plus the outline preview list rp-gen-out-list/-out-mod/-out-modrow/-out-lesrow/-out-del. rp-atc*, rp-atf* (wave 4 Task 8 — the autotest editor IN THE CANVAS, Дизайнер курсов.dc.html «канвас: автотест»): the canvas chrome rp-atc/-atc-back/-atc-head/-atc-titlewrap/-atc-title/-atc-meta/ -atc-head-spacer, and the AutoTestForm's compact settings row rp-atf-settings/-atf-set/-atf-set-label/ -atf-thr/-atf-thr-unit + the correct-option tag rp-atf-correct-tag/-atf-ansdot, plus the «Описание задания» disclosure rp-atf-desc/-desc-toggle/-desc-label/-desc-excerpt/-desc-text (Task 8 fix-wave — PromptMarkdown is student-visible + AI-filled, so it needed an editable affordance after all). Question cards, options, add buttons + the AI button REUSE the /tests editor's rp-ted-* (qcard/qhead/qnum/qtype/ qspacer/qdel/qtext/opt/opt-mark/opt-del/addopt/addq/ai/input/alert/status/btn) and the pill switch rp-tm-sw. rp-frm* (Формула-мини-волна Task 3 — the `formula` block editor rendered INLINE in its rp-lc-block card, Дизайнер курсов.dc.html «формула»): the container rp-frm, monospace textarea rp-frm-input, char counter rp-frm-count(--over past 5000), the KaTeX preview wrapper rp-frm-preview (centers the live-typed preview, min-height keeps it from collapsing while empty — the rendered .rp-formula[data-latex] node's own card chrome is defined separately, see .rp-formula below), and the footer rp-frm-foot/-frm-error/-frm-spacer holding the explicit Save button (REUSES rp-ted-btn/-btn--primary + rp-spin from the tests-editor/ submit-button patterns). .rp-formula (Формула-мини-волна Task 4 — the KaTeX display card, katex-render.js's `data-latex` render target): centered flex, padding, overflow-x auto for wide formulas, bordered card on var(--card)/ var(--border). ONE class shared by every surface that shows a rendered formula: the tutor's live editor preview (Task 3, nested inside rp-frm-preview above), the student /content page + course player (LessonContentBody, wrapped in the usual rp-plr-block spacer), and the /read fullscreen reader (ReaderDocument, bare inside its own rp-reader-block — reader.css re-tints background/border per reading theme). KaTeX itself renders formula text in currentColor, so no extra color rule is needed for contrast across the three reading schemes. rp-set* (wave 5 Task 7 — /settings hub tabs, Настройки.dc.html, П-20: the 600px form column rp-set, the intro row rp-set-introrow + intro paragraph rp-set-intro + the framed «Открыть мой сайт» link rp-set-sitelink, the form card rp-set-card, the switch row rp-set-switchrow(--dim)/-switch(-thumb)/ -switchtext/-switch-label/-switch-cap — a bespoke 38×22 pill switch, П-9, no BbSwitch/prior preset matches the mockup size — the two-column field grid rp-set-grid2 (collapses to one column ≤640px), the field rp-set-field(--dim/--minage)/-label/-input/-hint, and the inline error rp-set-err; the Save button REUSES rp-btn-submit). Shared by SignupPolicyPanel/CancellationPolicyPanel/ RoomDefaultsSettings (hosted by VideoPanel). Wave 5 Task 8 adds the «ИИ-функции» + «Площадка» tabs: the AI narration card rp-set-aicard + the voice field rp-set-field--voice, the informational generation card rp-set-infocard/-infocard-text/-infocard-title/-infocard-cap/-infocard-chip; the read-only tenant card rp-set-tenantcard/-tenant-name/-tenant-host; and the destructive close-tenant zone rp-set-danger (--destructive-tinted border) + -danger-title (--destructive heading) + -danger-warn/-danger-warn-title/-danger-list/-danger-note (the consequences warn block, border and background color-mixed with --destructive) + -danger-lead/-danger-row/-danger-field/-danger-fullfield/ -danger-actions, plus the destructive buttons rp-btn-danger (filled) + rp-btn-danger-outline (outline) and the plain link-button rp-btn-textlink used for «Отправить код повторно». rp-site* (wave 5 Task 9 — «Мой сайт» hub §Оформление, Мой сайт.dc.html: SitePage top-action links rp-site-topbtn(--primary); the appearance tab's 300px/1fr grid rp-site (preview left-column-first on mobile via order), rp-site-loading, the controls column rp-site-controls + rp-site-group-title + the HEX field wrapper rp-site-hexfield + save button rp-site-save (reuses rp-btn-submit), the template cards rp-site-templates/-tpl(--active)/-tpl-thumb/-tpl-bar/-tpl-sub/-tpl-text/-tpl-name/-tpl-desc, the colour presets rp-site-colors/-color(--active), and the preview column rp-site-preview/-preview-head/ -preview-eyebrow/-preview-host/-preview-note + rp-site-spacer. The LIVE PREVIEW itself (SiteLivePreview) uses rp-site-pv* — its palette is HARDCODED public-landing colours (#fff/#1c1a17/#6f6a61/#8a857c/ #faf9f7/#eceae6), deliberately NOT cabinet tokens: rp-site-pv/-pv-head/-pv-logo(-img)/-pv-name/-pv-spacer/ -pv-menu/-pv-hcta/-pv-hero/-pv-hero-text/-pv-hero-cta/-pv-htitle/-pv-hsub/-pv-photo/-pv-stats/-pv-stat/ -pv-stat-num/-pv-stat-lbl/-pv-price/-pv-price-name/-pv-price-src/-pv-price-buy. Accent colour + template geometry are applied inline by the component, so these classes carry only structure/palette.) rp-land* (wave 5 Task 10 — the shared landing-block surface + edit dialog, Мой сайт.dc.html §Содержание + Онбординг.dc.html §Превью, both driving LandingPreviewSurface/LandingBlockEditDialog: the intro copy rp-land-intro; each block card rp-land-block(--off dims a hidden block), its chrome header row rp-land-chrome + the 34px accentSoft icon rp-land-ico (accent applied inline), rp-land-meta/-titlerow/ -name/-hint, the status pills rp-land-badge(--auto = «заполняется сам» accent, --empty = «не заполнен» warning-muted) each carrying a -badge-full (desktop) + -badge-short (≤640 «сам»/«пусто») text span, the visible outline rp-land-edit button + the hand-rolled 36×21 rp-land-toggle(-thumb)(--on = primary, П-9 no BbSwitch preset) + the BbDropdownMenu kebab rp-land-kebab (content reuses rp-menu), and rp-land-preview wrapping the schematic Preview/* (hidden ≤640 — chrome only on mobile). The edit dialog reuses BbDialog/ BbDialogContent (own header/close, ShowClose=false П-8): rp-land-dlg(-handle mobile pill/-head/-title/ -spacer/-close/-desc/-hint/-platform/-body), the rp-land-dlg-actions row (-tpl «Вставить шаблон»/-cancel/ -save), and a ≤640 bottom-sheet override (pinned bottom, rounded top, handle shown, П-14 transform+translate reset, П-15 nav-clearance padding-bottom).) rp-site-dom* (wave 5 Task 11 — «Мой сайт» hub §Домен, Мой сайт.dc.html: the narrow column rp-site-dom + intro copy rp-site-dom-intro, each domain card rp-site-dom-card(--primary for the read-only platform subdomain row: rp-site-dom-primary-text/-primary-label/-primary-value), the host/status header row rp-site-dom-headrow + rp-site-dom-host, the status pill rp-site-dom-badge(--success/--warning) with a -badge-full (desktop) + -badge-short (≤640 «Ожидает») text span, the TXT/DNS copy rp-site-dom-step («Шаг N») + the muted mono code block rp-site-dom-code (label spans -code-label-full «Имя:»/«Значение:» vs -code-label-short «TXT:» ≤640) + the desktop-only caption rp-site-dom-note (hidden ≤640 along with rp-site-dom-step — the mobile pending card drops both, code block + actions only), the per-row error rp-site-dom-error, the action row rp-site-dom-actions (Проверить primary + Удалить outline-neutral- border/destructive-text rp-site-dom-btn/-btn--danger — ≤640 becomes a 1fr/1fr 40px grid) + the single- button wrapper rp-site-dom-single (verified-domain «Удалить домен», ≤640 full-width/44px), the add- domain row rp-site-dom-form/-input/-add with -add-full/-add-short text («Добавить домен»/«Добавить»), and the Pro-gate upsell card rp-site-dom-upsell (reuses rp-site-dom-card + the rp-site-topbtn--primary CTA link to /finance?tab=subscription — Pro-gate logic unchanged from the MudBlazor-era panel).) rp-onb* (wave 5 Task 12 — /onboarding «сайт за минуту», Онбординг.dc.html: the focus-mode page shell rp-onb (100vh column on --background) + the sticky screen header rp-onb-header (brand rp-onb-brand/ -brand-word, phase caption rp-onb-phase, rp-onb-spacer, the brief-only accent credits chip rp-onb-credits, the ghost rp-onb-later «Заполню позже»), the scrolling body rp-onb-body; Brief phase rp-onb-brief (max-width column) — rp-onb-h1/-lead, the field label rp-onb-field/-label + controls rp-onb-textarea/-input/-select, the hint rp-onb-hint (link via var(--primary)), the two-column grid rp-onb-grid, the «Оформление» section rp-onb-section/-section-title/-logo-row, the footer rp-onb-actions with rp-onb-btn (--primary/--ghost/--outline, -btn-spin busy spinner); Generating phase rp-onb-gen/ -spark (64px accent circle, @keyframes rp-onb-pulse)/-gen-title/-gen-sub + the skeleton stack rp-onb-skeletons/-skel (cascade animation-delay); Preview phase rp-onb-preview — the accent clarify panel rp-onb-clarify/-clarify-q/-clarify-row/-clarify-input, the rp-onb-explain caption, and the rp-onb-warn all-disabled notice (footer reuses rp-onb-actions/-btn; the block cards are LandingPreviewSurface's own rp-land-* chrome, T10).) rp-prof* (wave 6 Task 7 — /profile, Профиль.dc.html, П-10 «только личное»: the centered 640px column rp-prof, the section cards rp-prof-card/-card-title, the avatar row wrapper rp-prof-avatar (centers RpImageUpload ≤600px per the mobile mockup), the neutral outline button rp-prof-btn («Сменить пароль»/«Запросить архив»), the muted card text rp-prof-text, the info-muted plate rp-prof-hint/-hint-ico/-hint-text (BOTH the manager «Ищете настройки площадки…» pointer between the cards and, with the --flow modifier, the owner closure-first plate inside the delete zone), the «Аккаунт» action rows rp-prof-row/-row-main/-row-title(--danger)/-row-sub, the delete zone rp-prof-del/-del-lead, the destructive consent checkbox rp-prof-check, and the second warn heading spacer rp-prof-warn-title2; the 152-ФЗ consequences block, code field and destructive buttons REUSE rp-set-danger-warn/-warn-title/-list + rp-set-field/-label/-input/-err/-danger-lead/ -danger-fullfield/-danger-actions + rp-btn-danger, rp-btn-danger-outline, rp-btn-textlink, rp-btn-submit). rp-rchat* (wave 7 Task 2 — RoomChatPanel, the /room/{LessonId} «Чат занятия» compact panel, Видеокомната.dc.html chat block: the column shell rp-rchat (card bg/border/radius-lg), head rp-rchat-head/-head-title, the scroll list rp-rchat-list (flex-column, gap 10px) + its loading/ empty state rp-rchat-empty, message rows rp-rchat-msg(--mine)/-msg-meta, bubbles rp-rchat-bubble (--mine accent-filled, --removed dashed-muted tombstone), and the composer row rp-rchat-composer/ -input/-send. Deliberately its own compact prefix, not a reuse of rp-msg*, rp-composer* — no avatars, receipts, attachments, or Markdown here, just author+time+text). rp-rtool* (wave 7 Task 3 — RoomToolRail, the board tool palette extracted out of WhiteboardSurface (Видеокомната.dc.html left rail): the shell rp-rtool (52px vertical column, card bg/border/ radius-lg — default desktop/phone-landscape orientation) + its rp-rtool--row modifier (horizontal row for mobile/tablet, RoomPage T4 picks which), 36px square rp-rtool-btn(--active accent fill for the selected pen/eraser tool, :disabled dimmed while !CanDraw), the divider rp-rtool-sep (26px horizontal line in the column, 22px vertical bar via rp-rtool--row), and the 24px round swatches rp-rtool-color(--active primary ring) — the 6 stroke hex values stay inline `style="background:"` (LOCKED-1: sync between peers, never a CSS token). WhiteboardSurface keeps only wb-surface/ wb-canvas — the old wb-toolbar/wb-color(-active)/wb-clear/wb-restore in app.css were Mud-era DEAD code, removed in the wave 7 Task 6 legacy-CSS sweep. rp-room* (wave 7 Task 4 — RoomPage /room/{LessonId} chrome rebuild, Видеокомната.dc.html): the full-screen shell rp-room (unchanged legacy flex-column base in app.css, still correct for the new chrome); rp-room-top (bar: rp-room-top-title/-name/-sub, rp-room-top-spacer, rp-room-top-scene — desktop-only slot for the shared scene-controls fragment, rp-room-top-users); rp-room-main (CSS Grid on desktop — 52px rail / 1fr square / 280–360px side columns; flex-column with `order` on mobile, see below); rp-room-square (the aspect-ratio:1/1 stage cell — HIGHER SPECIFICITY than the legacy `.rp-room-square` in app.css via the `.rp-room .rp-room-square` compound selector below, since app.css loads AFTER bp.css and the legacy 100cqmin rule would otherwise win the cascade and collapse it to 0×0 with no `.rp-room-stage` container-type ancestor left; `container-type:size` now lives directly on this rule so the moved rp-room-slide-* cqmin styles keep working), rp-room-overlay(--floor) (reconnecting/floor-granted pills, absolute-centered, LOCKED-12), rp-room-scenerow (mobile-only duplicate render position of the SAME scene-controls RenderFragment RoomPage builds once — safe to render twice since the fragment is stateless UI, unlike RoomChatPanel), rp-room-scenegroup/ -scenetab-lbl (reuses rp-seg/-seg-tab for the board/slides segment + rp-chip--neutral for the student's read-only stage badge), rp-room-slidenav/-slidenav-btn/-slidenav-toggle (the «‹ Слайд N / M ›» control: arrows page, the toggle button opens the picker — counter reuses rp-room-slide-counter, T5, moved to bp.css from app.css in the Task 6 legacy sweep); rp-room-side (desktop: flex-column grid item grouping tiles/hand/chat; mobile: same flex-column, just re-ordered via `order` against its main-grid siblings) with rp-room-tiles (2-col grid desktop / horizontal-scroll row mobile) — ALL participants incl. self last (LOCKED-7): rp-room-tile(--speaking)/-tile-avatar/ -tile-name/-tile-micoff/-tile-hand, and the tutor-only hover actions rp-room-tile-actions/-tile-act (--primary)/-tile-mute (LOCKED-3: "Дать маркер"/"Забрать" + mute, only on a REMOTE tile); rp-room-hand (the single raised-hand banner, replaces the old multi-row rp-room-hands queue — only the FIRST raiser shows, "+N ещё")/-hand-text/-hand-btn (reuses rp-btn-submit); rp-room-chathost (the ONE RoomChatPanel host — desktop: column via CSS; mobile: `position:absolute` bottom sheet anchored to the SAME below-stage baseline as the backdrop (top: 100vw-based, re-review fix — a vh-based height let the opaque sheet climb over the stage on short viewports) — LOCKED: never two instances) + rp-room-chat-close(-wrap, CSS-hidden on desktop); rp-room-sheetbackdrop (mobile/ tablet-portrait only, click-to-close, gated by `_isNarrow` in C# so a mid-session resize past the breakpoint can't strand it; its mobile-media `top` is pushed below the top bar + square stage — review fix, see the portrait block); the audio-hosts block is unchanged legacy CSS (no new rules); rp-room-bar(-spacer/-btn(--off)/-lbl/-hand (--active)/-chat(-dot)/-leave) — labeled pill buttons on desktop, circular icon-only + a mobile-only chat FAB on narrow/short viewports; rp-room-state(-card/-title/-body/-actions) — the unsupported/join-error full-page cards (reuses rp-btn-submit + rp-prof-btn for "Обновить"). `_isNarrow` (IBrowserViewportObserver, mirrors Calendar.razor) is the ONLY C#-driven responsive signal on this page — it exists solely because RoomChatPanel's IsVisible contract and RoomToolRail's Horizontal genuinely need to know the breakpoint; every other desktop/mobile difference below is pure CSS. Mobile/tablet-portrait breakpoint widened to <960px in wave 7 Task 6 (see the portrait block below; `max-width:959.98px`, the .02px Sm|Md-boundary split, fix round 2 Minor-4) — no longer the shell's flat 768px (П-16); the phone/narrow-landscape block near the end of this file is gated on the SAME width bracket (T6 re-review, Defect 2 — was height-only, see that block's header comment) so the two together cover the whole `_isNarrow == true` range regardless of orientation. rp-room-picker* (wave 7 Task 5 — the slide picker popup/sheet, Видеокомната.dc.html): desktop — rp-room-picker is an absolute popover anchored under the desktop-position slidenav (position:relative scoped to `.rp-room-top-scene .rp-room-slidenav` only, so the mobile-position duplicate stays static and lets the sheet override below resolve against `.rp-room` instead, same containing-block trick rp-room-chathost relies on) — rp-room-picker-head/-title (honest-data: "Слайды · {M}", no deck name — Slide carries none)/-changedeck ("Сменить колоду…", tutor-only by construction since the whole picker only ever renders for the tutor) and the 4-col rp-room-picker-grid/-num(--active ring). Closed by rp-room-pickerbackdrop, a transparent fixed click-catcher (desktop only has no equivalent to RoomChatPanel's always-a-static-column, so unlike chat this needed its own outside-click layer) — hidden for the whole `max-width:959.98px` narrow range (T6 re-review, Defect 2 — was a stale `768px`). Mobile/tablet-portrait (`_isNarrow` in C#) swaps the SAME rp-room-picker markup to a bottom sheet and reuses rp-room-sheetbackdrop verbatim for the dimming (same click-to-close backdrop the chat sheet uses) — the shared "100vw + Npx" baseline both sheets anchor to now lives once, as the `--room-sheet-top`/`--room-sheet-backdrop-top` custom properties on `.rp-room` inside the portrait media query, so neither sheet's magic number is duplicated. `rp-room-picker--overlay` (T6 re-review, Defect 1) is a SECOND rendered instance of the same markup (RoomPage.razor's `PickerPanel(overlay: true)`), a genuine `.rp-room-side` descendant, hidden (via a compound two-class selector — a flat one would lose the cascade to the portrait sheet rule and stack a duplicate sheet, fix round 2 Important-1) everywhere except the phone/narrow-landscape block below where it becomes the true `inset:0`/`border-left` panel (mirrors rp-room-chathost there); the block also hides the popover/sheet instance so only one copy is ever interactive. rp-deckpick-* (SlideDeckPickerDialog's own BbDialog body, T5): the scrollable tree rp-deckpick-tree, course/module labels rp-deckpick-course/-module, the full-width row button rp-deckpick-lesson, and the fetch-in-flight rp-deckpick-loading (reuses the global rp-spin, recolored for a --popover background same as rp-notif-loading does for --card) — the dialog chrome itself (head/title/close, empty state) reuses the generic rp-covw-dlg/-empty shell already shared by PackageDialog/CourseHeaderDialog/RefundDialog/… (no new dialog-shell CSS needed). rp-room* orientation additions (wave 7 Task 6, Видеокомната.dc.html «Планшет · вертикально» + «Телефон · горизонтально»; T6 re-review closed 2 Important review defects, see the phone/narrow-landscape block's header comment for the full Defect-2 range-coverage analysis): the mobile-portrait block above widened from `max-width:768px` to `(orientation: portrait) and (max-width:959.98px)` — the same cutoff `_isNarrow`'s MudBlazor Sm breakpoint uses, so the CSS layout and the C#-driven visibility contracts never disagree (closes a real 769–959px gap where `_isNarrow` was already "narrow" but the CSS stayed desktop-shaped). Its "desktop-only" companion queries (rp-room-chathost's `flex:1`, rp-room-chat- close-wrap's/rp-room-sheetbackdrop's `display: none`, previously `min-width:769px`) became `(orientation:landscape), (min-width:960px)` — the TRUE complement — so a tablet-portrait chat sheet (769–959.98px) keeps its dimming backdrop (previously silently display:none'd, a real bug the widened range would otherwise have re-exposed). Phone/narrow-landscape block (`orientation:landscape` + `max-width:959.98px` — re-review widened this from a `max-height:500px`-only gate, Defect 2; fix round 2 Important-2 then capped the stage at `min(100%, calc(100vw - 248px))` so near-square landscape windows keep a ≥200px side column): `.rp-room-main{display:contents}` (blueprint-pitfalls П-25) promotes the rail/rp-room-square/ rp-room-side to direct grid items of `.rp-room`, alongside its already-sibling rp-room-top/rp-room-bar, via a 3×3 grid-template-areas ("rail stage top" / "rail stage side" / "rail stage bar") — rail+stage span the full height, top/side/bar stack in the third column exactly like a "right column", with zero DOM change (RoomPageRenderTests asserts the nesting this depends on). A `.rp-room-main > .rp-rtool` override (2-class specificity beats the 1-class `.rp-rtool--row`) forces the rail back to a vertical column regardless of `_isNarrow`/`Horizontal` — the one place this page's C# breakpoint signal and its real CSS orientation disagree (`_isNarrow` is width-only), reconciled entirely in CSS per the task brief (no new RoomPage logic). Tiles go 16:9 here (LOCKED, was 16:10). Chat — already a genuine rp-room-side descendant — gets a true `inset:0`/`border-left` panel (LOCKED); re-review Defect 1 gave the slide picker the SAME treatment via its `--overlay` second instance (see rp-room-picker* above) instead of leaving it a floating popover, and this block hides the original popover/sheet instance in turn. Both lose their dimming backdrop (the stage must never darken, LOCKED) in favour of an explicit rp-room-picker-close ✕ (hidden everywhere else). rp-adm* (wave 8 Task 3 — admin shell CSS-каркас, Админ-обзор.dc.html): AdminPageHeader's rp-adm-head (flex row, h1 + chip + spacer + Actions)/-chip (the "Платформенный админ" warning-muted pill)/-head__spacer, plus three generic building blocks hub pages T4–T8 fill in: rp-adm-stats (the KPI card grid, 4 cols desktop → 2 ≤640px — T4 re-review aligned this to the rp-fin-* mobile cutoff, was 760px), rp-adm-table(-head/-row) (a grid-таблица shell whose column widths come from a `--adm-cols` custom property set on a page-specific modifier class, e.g. `.rp-adm-table--tenants`, so every hub reuses one table skin instead of a bespoke grid-template-columns each), and rp-adm-cards/-card (the ≤640px mobile fallback, same per-hub-modifier pattern). T4 (Обзор) additions living in the same block: rp-adm-tile (a stat tile is itself an `` — -label/-row/-value/-sub, -sub takes a `--success`/`--muted`/`--danger` tone modifier), rp-adm-alert (the email-failures banner-link, -text/-cta), and rp-adm-lists/-list(-empty)/-list__head(-title/-link)/ -list-row(-avatar/-dot(-active)/-body/-title(-mono)/-sub/-plan/-meta) for the two "Новые тенанты" / "Последние ошибки" panels — one shared row skin serves both an avatar+plan-pill tenant row and a dot+mono-type error row via the same -body/-title/-sub/-meta slots. rp-adm-lists collapses its 2-column grid to 1 at ≤640px (the two list cards simply stack — "карточками-стопкой" per the T4 brief, no per-row card treatment needed since each list is already its own bordered card). rp-adm* (wave 8 Task 5 additions — /admin/tenants hub, Тенанты и пользователи.dc.html): rp-adm-panel (tab-content spacing) + rp-adm-toolbar/-search(-input)/-toolbar-spacer/-count (the per-tab search box + result counter, one skin shared by all three panels; -count hides ≤640px, -search drops its 340px cap ≤640px — the mockup's mobile toolbar is search-only). rp-adm-table gains three per-hub `--adm-cols` modifiers (rp-adm-table--tenants/-users/-students) plus generic cell content classes reused across them: rp-adm-cell-stack (two-line title+sub, e.g. tenant name + slug domain)/-main/ -sub/-mono/-right/-user (avatar+name), rp-adm-avatar (round initials chip), rp-adm-rolechips (wrapping RpStatusChip row). rp-adm-rowact/-kebab is the row action cell — a BbDropdownMenu trigger button styled like rp-tm-kebab (kept as its own class rather than cross-referencing the tests-matrix page's prefix). rp-adm-more is the "Показать ещё" pagination button below a table/card list. rp-adm-card gains -top/-title/-sub for the ≤640px card body (title + wrapping chips row, then a muted meta line) and rp-adm-balance(--zero) for the lessons-remaining figure (zero tints destructive-muted, matching the mockup's balColor rule). rp-adm-accordion(-summary(-count)/-body) is a native details disclosure (no JS) for the «Ученики» tab's secondary «Приглашения» section; rp-adm-invtable(-head/-row) is its compact 5-column sub-table, collapsing to a stacked block ≤640px (its own header hides — the row already labels itself via the email/tenant/kind text). rp-adm* (wave 8 Task 6 additions — /admin/finance hub, Подписки и монетизация.dc.html): «Подписки» tab reuses rp-adm-stats/-tile verbatim for its 4 KPI tiles (plain non-link divs this time — no drill-through target per tile) plus two new tone modifiers rp-adm-tile__value--warning/--danger for a single-figure tile with no delta sub-caption (Истекают·7 дней / Просрочено — MRR intentionally carries no growth figure, honest-data: GetOverview has no historical MRR to diff against). The segment filter is its own pill-row rp-adm-filterbar/-filter(--active) — visually identical to the tutor-facing rp-fin-periods/-period(--active) but kept as its own class, same T5 precedent as rp-adm-kebab vs rp-tm-kebab. rp-adm-table gains `--adm-cols` modifier rp-adm-table--subs; the «Оплачено до» cell's tone follows the row's status via rp-adm-cell-tone--warning/--danger (plain rp-adm-cell-sub for the rest). «Планы и монетизация» tab: rp-adm-plans-grid/-plan-card(-head/-name/ -count) for the 3 plan cards, generic rp-adm-field(-label/-input) form-field pair reused by every editable number in the tab (plan price/limit/quota, and the bottom «Настройки ИИ-биллинга» trio), rp-adm-plan-chips/-plan-chip for the read-only true-only feature chips, rp-adm-plans-savebar/ -savebtn/-caption for the plans-only "Сохрань изменения" action (deliberately placed right under the plans grid, not at the tab's bottom like the mockup's single button — it only ever dispatches UpdatePlanCommand for dirty plans, never touches packs/promos/AI-config, so its position must not imply otherwise). rp-adm-section(-head/-title/-sub) + rp-adm-addbtn (mirrors rp-fin-price-addbtn) head the packs/promo/AI-billing sections; rp-adm-table gains `--adm-cols` modifiers rp-adm-table-- packs/-promos, both reusing the T5 kebab (rp-adm-rowact/-kebab) and rp-adm-cell-mono for the promo code column. The AI-billing fields wrap in rp-adm-billing-fields (flex-wrap, so 3 fields + a save button reflow ≤640px without a bespoke mobile layout). The 36×21 "Активен" toggle (packs/promos rows + both create/edit dialogs) is RpAdminSwitch.razor's rp-adm-switch(-thumb) — a hand-rolled control, see П-9 note on the component itself; rp-adm-switchrow lays a dialog's own label + switch out as a flex row inside one rp-scard-dlg-field cell (the AiCreditPackDialog/PromoCodeDialog Bb rewrites reuse rp-scard-dlg* chrome + rp-sched-dlg-label/-input verbatim — no new dialog-chrome classes needed). NO Blazor scoped CSS — components cross component boundaries (same rationale as rp-cal-*). */ /* ── 1. Page header (паттерн №1) ─────────────────────────────────────────── */ .rp-ph { display: flex; align-items: flex-start; gap: 16px; } .rp-ph-text { flex: 1; min-width: 0; } .rp-ph-eyebrow { font-size: 12px; color: var(--muted-foreground); margin-bottom: 4px; } .rp-ph-title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 2px; } .rp-ph-subtitle { font-size: 13.5px; color: var(--muted-foreground); margin: 0; } .rp-ph-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Mobile: actions wrap below the title and go full-width */ @media (max-width: 390px) { .rp-ph { flex-wrap: wrap; } .rp-ph-text { width: 100%; } .rp-ph-title { font-size: 19px; } .rp-ph-actions { width: 100%; flex-shrink: 1; } .rp-ph-actions > * { flex: 1; } } /* ── 3. Section card (паттерн №3) ────────────────────────────────────────── */ .rp-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-xs); } .rp-card-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .rp-card-title { flex: 1; font-size: 15px; font-weight: 600; margin: 0; } .rp-card-header-action { display: flex; align-items: center; } .rp-card-body { padding: 20px; } /* ── 12. Status chips (паттерн №12) ──────────────────────────────────────── */ .rp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; } .rp-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .rp-chip--info { background: var(--info-muted); color: var(--info-muted-foreground); } .rp-chip--success { background: var(--success-muted); color: var(--success-muted-foreground); } .rp-chip--warning { background: var(--warning-muted); color: var(--warning-muted-foreground); } .rp-chip--danger { background: var(--destructive-muted); color: var(--destructive-muted-foreground); } .rp-chip--neutral { background: var(--secondary); color: var(--muted-foreground); } /* ── 9. Context badge (паттерн №9) ───────────────────────────────────────── */ .rp-ctx { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-md); font-size: 13.5px; font-weight: 600; } .rp-ctx--info { background: var(--accent); color: var(--accent-foreground); } .rp-ctx--warning { background: var(--warning-muted); color: var(--warning-muted-foreground); } /* ── 8. Empty state (паттерн №8) ─────────────────────────────────────────── */ .rp-empty2 { border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 40px 24px; text-align: center; } .rp-empty2-icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; background: var(--muted); color: var(--muted-foreground); display: flex; align-items: center; justify-content: center; } .rp-empty2-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; } .rp-empty2-desc { font-size: 14px; color: var(--muted-foreground); margin: 0 0 18px; } .rp-empty2-action { display: flex; justify-content: center; } /* ── 2. Hub tabs (паттерн №2) ────────────────────────────────────────────── */ /* Desktop: underlined nav strip */ .rp-tabs-underline { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--border); } .rp-tab { padding: 14px 6px; margin-right: 14px; font-size: 14px; font-weight: 500; color: var(--muted-foreground); border-bottom: 2px solid transparent; margin-bottom: -1px; /* sit on top of container border */ cursor: pointer; user-select: none; white-space: nowrap; transition: color .15s, border-color .15s; } .rp-tab--active { font-weight: 600; color: var(--foreground); border-bottom-color: var(--primary); } /* Mobile chip row (hidden by default; shown ≤640 px) */ .rp-tabs-chips { display: none; flex-wrap: nowrap; gap: 8px; padding: 14px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } .rp-tabs-chips::-webkit-scrollbar { display: none; } .rp-tab-chip { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--secondary); color: var(--secondary-foreground); white-space: nowrap; cursor: pointer; user-select: none; } .rp-tab-chip--active { background: var(--primary); color: var(--primary-foreground); } /* Mobile segment control — «icon + short label», full width (hidden by default; shown ≤640 px). Used when RpHubTab carries Icon/Short (Финансы.dc.html); grid-template-columns set inline to repeat(N,1fr) by the component. */ .rp-tabs-seg { display: none; gap: 2px; margin: 10px 12px 4px; padding: 3px; background: var(--muted); border-radius: var(--radius-lg); } .rp-tabs-seg-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border: 0; border-radius: var(--radius-md); font: inherit; font-size: 10.5px; font-weight: 500; background: transparent; color: var(--muted-foreground); cursor: pointer; } .rp-tabs-seg-tab--active { font-weight: 700; background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); } .rp-tabs-seg-ico { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; } .rp-tabs-seg-lbl { white-space: nowrap; } @media (max-width: 640px) { .rp-tabs-underline { display: none; } .rp-tabs-chips { display: flex; } .rp-tabs-seg { display: grid; } } /* ── 5. Submit button with spinner (паттерн №5) ──────────────────────────── */ @keyframes rp-spin { to { transform: rotate(360deg); } } .rp-btn-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-width: 130px; } .rp-btn-submit:disabled { opacity: 0.7; cursor: not-allowed; } .rp-btn-submit--full { width: 100%; } /* Spinner element inside RpSubmitButton */ .rp-spin { display: inline-block; flex-shrink: 0; width: 15px; height: 15px; border: 2px solid color-mix(in srgb, var(--primary-foreground) 40%, transparent); border-top-color: var(--primary-foreground); border-radius: 50%; animation: rp-spin .7s linear infinite; } /* ── 10. Balance widget (паттерн №10) ────────────────────────────────────── */ /* Compact inline pill */ .rp-bal-compact { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); } .rp-bal-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); } .rp-bal-num { font-size: 14px; font-weight: 600; } .rp-bal-label { font-size: 13px; color: var(--muted-foreground); } /* Full card */ .rp-bal-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 20px; min-width: 220px; display: flex; flex-direction: column; } .rp-bal-card-eyebrow { font-size: 12px; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; } .rp-bal-card-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; } .rp-bal-card-num { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; } .rp-bal-card-meta { font-size: 14px; color: var(--muted-foreground); } /* Low-balance warning strip (Home widget only — /pay's own RpBalanceCard has no such state). */ .rp-bal-warning { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12.5px; color: var(--warning-muted-foreground); background: var(--warning-muted); border-radius: var(--radius-sm); padding: 6px 10px; } /* margin-top: auto pins the button to the card's bottom edge (.rp-bal-card is a flex column) so it still lines up with a sibling grid card of different height (e.g. RpNextLessonCard). */ .rp-bal-topup { width: 100%; height: 38px; margin-top: auto; border: 1.5px solid var(--primary); border-radius: var(--radius-md); background: transparent; color: var(--primary); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } /* Full balance card (RpBalanceCard) — /pay only, distinct from the compact rp-bal-* pill/card above. */ .rp-balcard { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 20px; } .rp-balcard-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--accent-foreground); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; } .rp-balcard-body { flex: 1; min-width: 180px; } .rp-balcard-name { font-size: 14.5px; font-weight: 600; } .rp-balcard-policy { font-size: 13px; color: var(--muted-foreground); margin-top: 2px; } .rp-balcard-count { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .rp-balcard-num-row { display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; } .rp-balcard-num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; } .rp-balcard-word { font-size: 13.5px; color: var(--muted-foreground); } .rp-balcard-toggle { border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; } .rp-balcard-history { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 6px 20px; margin-top: 12px; } /* Balance-history rows (RpBalanceHistory) — no outer chrome, composes into rp-balcard-history above. */ .rp-balhist-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 13.5px; } .rp-balhist-row + .rp-balhist-row { border-top: 1px solid var(--border); } .rp-balhist-date { color: var(--muted-foreground); width: 86px; flex-shrink: 0; } .rp-balhist-desc { flex: 1; } .rp-balhist-delta { font-weight: 700; color: var(--foreground); } .rp-balhist-delta--plus { color: var(--success); } @media (max-width: 640px) { .rp-balcard { padding: 16px; gap: 10px 12px; } .rp-balcard-avatar { display: none; } .rp-balcard-body { order: 2; flex-basis: 100%; } .rp-balcard-count { order: 1; flex: 1; flex-direction: row; align-items: center; gap: 10px; } .rp-balcard-num-row { justify-content: flex-start; } .rp-balcard-toggle { margin-left: auto; } } /* ── 4. Table → cards — payments list (паттерн №4 / Оплата.dc.html) ─────── */ .rp-payrow-desktop { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; } .rp-payrow-head { display: grid; grid-template-columns: 110px 1fr 110px 110px 90px; gap: 12px; padding: 10px 20px; background: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); } .rp-payrow { display: grid; grid-template-columns: 110px 1fr 110px 110px 90px; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--border); font-size: 13.5px; align-items: center; } .rp-payrow-date { color: var(--muted-foreground); } .rp-payrow-title { font-weight: 500; } .rp-payrow-amount { font-weight: 600; } .rp-payrow-receipt { color: var(--primary); font-weight: 500; text-decoration: none; font-size: 13px; } .rp-payrow-receipt--none { color: var(--muted-foreground); } /* Mobile card-per-row — hidden by default, shown ≤640px (same switch as rp-tabs-underline/chips) */ .rp-payrow-cards { display: none; flex-direction: column; gap: 8px; } .rp-payrow-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 13px 14px; } .rp-payrow-card-top { display: flex; align-items: center; gap: 8px; } .rp-payrow-card-title { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-payrow-card-amount { font-size: 13.5px; font-weight: 700; white-space: nowrap; } .rp-payrow-card-bottom { display: flex; align-items: center; gap: 8px; margin-top: 5px; } .rp-payrow-card-date { font-size: 12px; color: var(--muted-foreground); } .rp-payrow-card-spacer { flex: 1; } .rp-payrow-card-receipt { font-size: 12px; color: var(--primary); font-weight: 500; text-decoration: none; } @media (max-width: 640px) { .rp-payrow-desktop { display: none; } .rp-payrow-cards { display: flex; } } /* ── 11. Product card (паттерн №11) ──────────────────────────────────────── */ .rp-prod-card { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); display: flex; flex-direction: column; overflow: hidden; } /* Featured variant (FeaturedTag set) — border tints toward --primary, matching the "Выгодно" card. */ .rp-prod-card--featured { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); } /* Ribbon — absolute top-left, overhangs the card's top border. */ .rp-prod-tag { position: absolute; top: -9px; left: 16px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--primary); color: var(--primary-foreground); border-radius: 999px; padding: 2px 9px; } .rp-prod-cover { height: 120px; overflow: hidden; background: var(--muted); flex-shrink: 0; } .rp-prod-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .rp-prod-body { padding: 20px; display: flex; flex-direction: column; flex: 1; } .rp-prod-kind { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--accent); color: var(--accent-foreground); margin-bottom: 14px; } /* Explicit KindTone overrides the accent default above (e.g. warning for «Курс»). */ .rp-prod-kind--info { background: var(--info-muted); color: var(--info-muted-foreground); } .rp-prod-kind--success { background: var(--success-muted); color: var(--success-muted-foreground); } .rp-prod-kind--warning { background: var(--warning-muted); color: var(--warning-muted-foreground); } .rp-prod-kind--danger { background: var(--destructive-muted); color: var(--destructive-muted-foreground); } .rp-prod-kind--neutral { background: var(--secondary); color: var(--muted-foreground); } .rp-prod-name { font-size: 17px; font-weight: 600; margin: 0 0 4px; } .rp-prod-desc { font-size: 13.5px; color: var(--muted-foreground); margin: 0 0 16px; } .rp-prod-price-row { display: flex; align-items: baseline; gap: 7px; margin-bottom: 16px; } .rp-prod-price { font-size: 24px; font-weight: 700; } .rp-prod-subprice { font-size: 12px; color: var(--muted-foreground); } .rp-prod-buy { margin-top: auto; width: 100%; height: 42px; border: 0; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } /* ── 12. Top-bar widgets (паттерн №12) ───────────────────────────────────── */ /* Shared primitives */ .rp-tbw-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; /* Чат.dc.html: primary, not destructive — an unread count isn't an error state. */ background: var(--primary); color: var(--primary-foreground); font-size: 11px; font-weight: 700; line-height: 1; position: absolute; top: -5px; right: -5px; border: 2px solid var(--card); } .rp-tbw-empty { padding: 8px 14px; font-size: 13px; color: var(--muted-foreground); } .rp-tbw-overflow { padding: 4px 14px 6px; font-size: 12px; color: var(--muted-foreground); } .rp-tbw-row { display: flex; flex-direction: column; gap: 1px; } .rp-tbw-row__head { display: flex; align-items: center; gap: 6px; } .rp-tbw-row__title { font-size: 13.5px; font-weight: 600; } .rp-tbw-row__meta { font-size: 12px; color: var(--muted-foreground); } .rp-tbw-row__meta--clamp { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-tbw-unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; /* Чат.dc.html: primary, not destructive — matches .rp-tbw-badge above. */ background: var(--primary); color: var(--primary-foreground); font-size: 11px; font-weight: 700; line-height: 1; } /* Чат.dc.html's dropdown footer ("Открыть все чаты") is a primary-coloured 13.5px/600 call to action, not a regular muted menu row. Verified against the rendered menu-item markup: its own Tailwind classes (blazorblueprint.css, loaded before bp.css per App.razor) never set `color` directly on the item — it only inherits `text-popover-foreground` from the dropdown-content ancestor — so this rule is the sole `color` source for the element and needs no !important; `font-size` does collide with the item's own `.text-sm` utility class, but same-specificity + later-in-cascade (bp.css after blazorblueprint.css) settles it the same way. */ .rp-tbw-footer-link { color: var(--primary); font-size: 13.5px; font-weight: 600; } /* Schedule widget — handoff: 38px framed box, clock icon in --primary, two lines: muted 10.5px eyebrow + 12.5px semibold value. */ .rp-tbw-schedule { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px 0 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--foreground); font: inherit; cursor: pointer; position: relative; } .rp-tbw-schedule > svg { color: var(--primary); flex-shrink: 0; } .rp-tbw-schedule__lines { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; text-align: left; } .rp-tbw-schedule__label { font-size: 10.5px; color: var(--muted-foreground); } .rp-tbw-schedule__value { font-size: 12.5px; font-weight: 600; } /* Chat button — handoff: 38×38 framed square on --card, badge overhangs the corner. */ .rp-tbw-chat { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--foreground); cursor: pointer; position: relative; } /* AI credits chip — handoff: 38px accent-filled box (radius-md, not a 999px pill). */ .rp-tbw-ai { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--accent); color: var(--accent-foreground); text-decoration: none; cursor: pointer; } .rp-tbw-ai__text { font-size: 12.5px; font-weight: 600; } /* Role switcher — handoff: 38px framed box on --card, 7px primary dot + 13px/500 label. */ .rp-tbw-role { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--foreground); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; } .rp-tbw-role__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; } .rp-tbw-role__label { font-size: 13px; } /* User profile — handoff: borderless 38px button, 30px primary-filled avatar + chevron. */ .rp-tbw-profile { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 4px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--foreground); font: inherit; font-size: 13px; cursor: pointer; } .rp-tbw-profile__avatar { width: 30px !important; height: 30px !important; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--primary); color: var(--primary-foreground); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; } .rp-tbw-profile__header { display: flex; flex-direction: column; gap: 1px; } .rp-tbw-profile__name { font-size: 13.5px; font-weight: 600; } .rp-tbw-profile__email { font-size: 12px; color: var(--muted-foreground); } /* Sign-in link (unauthenticated) */ .rp-tbw-signin { display: inline-flex; align-items: center; padding: 5px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: transparent; color: var(--foreground); text-decoration: none; font-size: 14px; font-weight: 500; } /* Bb dropdown-menu skin (rp-menu) — blueprint-pitfalls.md П-20 follow-up. BbDropdownMenuItem ships flex+items-center but NO icon↔text gap, and its item padding (Tailwind px-2 py-1.5 = 8px/6px) undershoots the handoff row padding (Чат.dc.html unread- messages dropdown: rows padding 9px 10px) — dropdowns still read as cramped even after bb-compat.css restored the Mud-zeroed Tailwind utilities. rp-menu is the ONE shared skin applied to every BbDropdownMenuContent in the shell (TopBarUserMenu, TopBarScheduleWidget, TopBarChatButton, TopBarRoleSwitcher, ChatConversation's kebab). DOM shape (BlazorBlueprint.Components 3.13.0, confirmed via ilspycmd decompile — Class= on BbDropdownMenuContent lands on the outer
, not on the inner wrapper): the item list actually sits one level deeper, inside an unconditional Tailwind `.p-1` div the component renders around ChildContent. `.rp-menu > div` zeroes THAT wrapper's own padding so the 6px below (Чат.dc.html container recipe) is the only inset — otherwise the two would stack into a 10px gutter. */ .rp-menu { padding: 6px; min-width: 200px; } .rp-menu > div { padding: 0; } /* BbDropdownMenuItem renders role="menuitem" on both its
and Href variants. */ .rp-menu [role=menuitem] { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 13.5px; } .rp-menu [role=menuitem]:hover { /* Чат.dc.html uses --secondary for row hover, not Tailwind's default hover:bg-accent. */ background: var(--secondary); } /* BbDropdownMenuLabel renders role="presentation" — the handoff's uppercase muted section header idiom ("Сообщения" atop the unread-messages dropdown). */ .rp-menu [role=presentation] { padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; } /* BbDropdownMenuSeparator renders role="separator" with its own Tailwind -mx-1 (sized to the now-zeroed .p-1 wrapper's old 4px padding) — replace with a margin sized to OUR 6px inset so the rule still spans edge-to-edge. */ .rp-menu [role=separator], .rp-menu hr { margin: 6px -6px; } /* Messages dropdown only (Чат.dc.html container recipe: width 320px) — combine with rp-menu, never baked into the shared skin (every other consumer keeps rp-menu's own min-width). */ .rp-tbw-chat-menu { width: 320px; } /* ─── SidebarNav ───────────────────────────────────────────────────────────── */ .rp-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; } /* Each nav link — base state */ .rp-nav__item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-md); font-size: 14px; font-weight: 400; text-decoration: none; color: var(--foreground); background: transparent; transition: background 0.12s; } .rp-nav__item:hover { background: var(--accent); } /* Active item: accent background + foreground colour */ .rp-nav__item--active { background: var(--accent); color: var(--accent-foreground); font-weight: 500; } .rp-nav__item__icon { width: 18px; height: 18px; display: inline-flex; flex-shrink: 0; color: var(--muted-foreground); } .rp-nav__item--active .rp-nav__item__icon { color: var(--accent-foreground); } .rp-nav__item__label { flex: 1; } /* Task 12 — sidebar nav pill (grading-queue count / chat unread). Declarations are a verbatim copy of .rp-tbw-unread-badge (Чат.dc.html's pill token) minus its own positioning context — comma-joined so the two never drift; MoreSheet's pill shares the same rule. */ .rp-nav__badge, .rp-more-sheet__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 11px; font-weight: 700; line-height: 1; flex-shrink: 0; } /* Admin section divider + section heading */ .rp-nav__divider { height: 1px; background: var(--border); margin: 8px 0; } .rp-nav__section-label { font-size: 12px; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 12px; margin-bottom: 4px; } /* ─── BottomNav ────────────────────────────────────────────────────────────── */ .rp-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; padding: 8px 6px 10px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--border); z-index: 100; } /* Each item — all rendered as