/* Studentite.BG V2 - design system (tokenized 1:1 from the approved mockup). Self-hosted, no CDN/build. */

/* ---- Fonts (self-hosted, variable, Cyrillic + Latin subsets) ---- */
@font-face { font-family: 'Golos Text'; font-weight: 400 700; font-display: swap; src: url(../fonts/golostext-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 400 700; font-display: swap; src: url(../fonts/golostext-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Golos Text'; font-weight: 400 700; font-display: swap; src: url(../fonts/golostext-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Golos Text'; font-weight: 400 700; font-display: swap; src: url(../fonts/golostext-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-weight: 400 800; font-display: swap; src: url(../fonts/unbounded-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 400 800; font-display: swap; src: url(../fonts/unbounded-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Unbounded'; font-weight: 400 800; font-display: swap; src: url(../fonts/unbounded-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Unbounded'; font-weight: 400 800; font-display: swap; src: url(../fonts/unbounded-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF; }

/* ---- Tokens ---- */
:root {
  --font-display: 'Unbounded', 'Golos Text', system-ui, sans-serif;
  --font-body: 'Golos Text', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --c-primary: #377FA9; --c-primary-d: #2B5F82;
  --c-navy: #14344E; --c-navy-d: #0D2334;
  --c-link: #2B6A8F;
  --c-accent: #F07B5D; --c-accent-strong: #D9603F;
  --c-teal: #2FA39A; --c-teal-d: #1F7A72;
  --c-amber: #F2B33D;

  --c-page: #F4F8FA; --c-surface: #FFFFFF;
  --c-border: #E2ECF2; --c-divider: #EDF3F7; --c-hairline: #DEE9F0;
  --c-ink: #14344E; --c-text: #3E5B72; --c-muted: #7A93A6; --c-muted-2: #587489; --c-faint: #9AB0C0;
  --c-navy-text: #C9DCE9; --c-navy-muted: #8FAEC3; --c-navy-head: #6F93AB;

  --c-tint-blue: #EAF2F7; --c-surface-2: #E4EEF4;

  --r-pill: 999px; --r-card: 16px; --r-feature: 18px; --r-banner: 20px; --r-input: 12px; --r-tile: 13px; --r-thumb: 8px;
  --sh-card: 0 1px 3px rgba(20,52,78,.05);
  --sh-float: 0 18px 44px rgba(0,0,0,.14);
  --sh-cta: 0 4px 12px rgba(240,123,93,.35);

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 150ms; --dur: 220ms;

  --nav-h: 116px; --container: 1360px; --pad: 40px;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--c-page); color: var(--c-ink); font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; color: var(--c-ink); line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
a { color: var(--c-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
/* Hover-accent only for plain content links; classed anchors (buttons, pills,
   nav, cards) keep their own color so button text never turns invisible. */
a:not([class]):hover { color: var(--c-accent-strong); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }
[x-cloak] { display: none !important; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.u-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.u-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* ---- Buttons ---- */
.btn { --bg: var(--c-surface); --fg: var(--c-ink); --bd: var(--c-border); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 1.5px solid var(--bd); border-radius: var(--r-input); background: var(--bg); color: var(--fg); font: 600 14px/1 var(--font-body); cursor: pointer; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.btn:hover { transform: translateY(-1px); color: var(--fg); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--accent { --bg: var(--c-accent); --fg: #fff; --bd: transparent; box-shadow: var(--sh-cta); }
.btn--accent:hover { --bg: var(--c-accent-strong); }
.btn--primary { --bg: var(--c-primary); --fg: #fff; --bd: transparent; }
.btn--teal { --bg: var(--c-teal); --fg: #fff; --bd: transparent; }
.btn--teal:hover { --bg: var(--c-teal-d); }
.btn--ghost { --bg: transparent; --fg: var(--c-ink); --bd: #D8E4EC; }
.btn--sm { min-height: 40px; padding: 9px 18px; }

/* ---- Form controls ---- */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font: 600 13px var(--font-body); color: var(--c-ink); }
.label .req { color: var(--c-accent-strong); }
.input, .select, .textarea { width: 100%; border: 1.5px solid #D8E4EC; border-radius: var(--r-input); background: #fff; color: var(--c-ink); font: 400 14.5px var(--font-body); padding: 11px 14px; transition: border-color var(--dur-fast) var(--ease-out); }
.input::placeholder, .textarea::placeholder { color: var(--c-faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(55,127,169,.12); }
.textarea { resize: vertical; min-height: 120px; }
.select { appearance: none; padding-right: 40px; background-repeat: no-repeat; background-position: right 12px center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237A93A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.field__hint { font: 400 12px var(--font-body); color: var(--c-muted); }
.field__err { font: 500 12.5px var(--font-body); color: var(--c-accent-strong); }
.check { display: flex; align-items: flex-start; gap: 10px; font: 400 13.5px var(--font-body); color: var(--c-text); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--c-primary); flex: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.btn--block { width: 100%; min-height: 48px; }
.btn--danger { background: #fff; border: 1.5px solid #F0C4BE; color: #C0392B; }
.btn--danger:hover { border-color: #C0392B; background: #FDECEA; }
.owner-tools h3 { margin-bottom: 12px; }

/* ---- Auth ---- */
.auth-wrap { display: flex; justify-content: center; align-items: stretch; gap: 32px; padding-block: 44px; flex-wrap: wrap; }
.auth-card { width: 640px; max-width: 100%; background: #fff; border: 1px solid var(--c-border); border-radius: 22px; box-shadow: 0 10px 32px rgba(20,52,78,.1); }
/* Full-screen auth portal: dark brand panel left, tabbed form right. */
.auth-screen { min-height: 100vh; display: grid; grid-template-columns: 44% 56%; background: #fff; transition: grid-template-columns .35s var(--ease-out); }
.auth-screen.is-reg { grid-template-columns: 34% 66%; }
.auth-brand { background: linear-gradient(160deg, #14344E, #0D2334); color: #fff; padding: 52px 56px; display: flex; flex-direction: column; }
.auth-brand__logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 800 17px var(--font-display); }
.auth-brand__logo .brand__mark { width: 38px; height: 38px; border-radius: 11px; background: var(--c-primary); display: grid; place-items: center; color: #fff; }
.auth-brand__logo b { color: var(--c-primary); }
.auth-brand__body { margin: auto 0; max-width: 440px; }
.auth-brand__body h1 { color: #fff; font: 800 clamp(28px, 3vw, 40px)/1.14 var(--font-display); }
.auth-brand__body p { margin-top: 18px; color: var(--c-navy-text); font: 400 16px/1.65 var(--font-body); }
.auth-brand__points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.auth-brand__points li { display: flex; align-items: center; gap: 11px; color: #C9DCE9; font: 500 14px var(--font-body); }
.auth-brand__points svg { flex: none; color: var(--c-teal); }
.auth-brand__foot { color: var(--c-navy-muted); font: 500 12px var(--font-body); }
.auth-main { display: flex; justify-content: center; align-items: center; padding: 44px 40px; }
.auth-panel { width: 100%; max-width: 400px; transition: max-width .35s var(--ease-out); }
.auth-screen.is-reg .auth-panel { max-width: 660px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; background: var(--c-surface-2); padding: 5px; border-radius: 13px; margin-bottom: 26px; }
.auth-tab { border: 0; background: none; padding: 11px; border-radius: 9px; font: 700 14px var(--font-body); color: var(--c-muted-2); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.auth-tab.is-on { background: #fff; color: var(--c-ink); box-shadow: 0 1px 3px rgba(20,52,78,.12); }
.auth-main .auth-form { width: 100%; padding: 0; }
/* register: grouped sections */
.auth-section + .auth-section { margin-top: 24px; }
.auth-section__head { display: flex; align-items: center; gap: 9px; font: 700 11px var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--c-divider); }
.auth-section__head span { width: 20px; height: 20px; border-radius: 6px; background: var(--c-tint-blue); color: var(--c-primary); display: grid; place-items: center; font: 700 11px var(--font-display); }
.auth-section .reg-grid { margin-top: 0; }
/* modern avatar uploader (preview + pick/remove) */
.avatar-up { display: flex; align-items: center; gap: 16px; }
.avatar-up__drop { width: 74px; height: 74px; border-radius: 50%; border: 2px dashed #C9D9E4; background: #F6FAFC; display: grid; place-items: center; color: var(--c-muted); cursor: pointer; overflow: hidden; flex: none; transition: border-color .15s, background .15s; }
.avatar-up__drop:hover { border-color: var(--c-primary); background: #EEF5F9; }
.avatar-up__drop img { width: 100%; height: 100%; object-fit: cover; }
.avatar-up__title { font: 600 13px var(--font-body); color: var(--c-ink); }
.avatar-up__acts { display: flex; gap: 8px; margin-top: 8px; }
.avatar-up__btn { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 9px; border: 1.5px solid #D8E4EC; background: #fff; color: var(--c-link); font: 600 12.5px var(--font-body); cursor: pointer; }
.avatar-up__btn:hover { background: #EAF2F7; }
.avatar-up__btn--rm { color: #C0392B; border-color: #F0C4BE; }
@media (max-width: 860px) {
  .auth-screen, .auth-screen.is-reg { grid-template-columns: 1fr; }
  .auth-brand { padding: 34px 26px; }
  .auth-brand__body { margin: 20px 0; max-width: none; }
  .auth-brand__body h1 { font-size: 26px; }
  .auth-brand__points { display: none; }
  .auth-main { padding: 32px 24px; }
  .auth-screen.is-reg .auth-panel { max-width: 100%; }
}
.auth-form { padding: 32px 34px; }
.auth-form h1 { font-size: 19px; font-weight: 700; }
.auth-form .field { margin-top: 16px; }
.pwd { position: relative; }
.pwd .input { padding-right: 42px; }
.pwd .toggle { position: absolute; right: 10px; bottom: 8px; background: none; border: 0; color: var(--c-faint); cursor: pointer; padding: 4px; display: grid; place-items: center; }
.auth-opts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.auth-foot { text-align: center; font: 400 12.5px var(--font-body); color: var(--c-muted); margin-top: 16px; }
.auth-foot a { font-weight: 700; color: var(--c-link); }
.register-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.register-head h1 { font-size: 19px; font-weight: 700; }
.pill-free { padding: 5px 13px; border-radius: var(--r-pill); background: #E7F6F4; color: var(--c-teal-d); font: 600 11.5px var(--font-body); white-space: nowrap; }
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 20px; }
.reg-grid .full { grid-column: 1 / -1; }
.interests { border: 1.5px solid #D8E4EC; border-radius: 11px; padding: 11px 12px; display: flex; flex-wrap: wrap; gap: 7px; min-height: 46px; align-items: center; }
.chip-add { padding: 6px 13px; border-radius: var(--r-pill); border: 1px dashed #C9D9E4; color: var(--c-muted); font: 500 12px var(--font-body); background: none; cursor: pointer; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font: 400 12.5px/1.5 var(--font-body); color: #43617A; }
.consent a { color: var(--c-link); font-weight: 600; }
@media (max-width: 560px) { .reg-grid { grid-template-columns: 1fr; } }

/* ---- Register role selector ---- */
.seg-role { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-role__opt { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border: 1.5px solid var(--c-border); border-radius: var(--r-input); font: 600 13.5px var(--font-body); color: var(--c-text); cursor: pointer; }
.seg-role__opt.active { border-color: var(--c-primary); background: #EAF2F7; color: var(--c-ink); }

/* ---- Page hero band (list pages) ---- */
.page-hero { color: #fff; padding-block: 36px; }
.page-hero--mat { background: linear-gradient(120deg, #14344E 45%, #2E6F9C); }
.page-hero--q { background: linear-gradient(120deg, #14344E, #2C6188); }
.page-hero h1 { color: #fff; font-size: 26px; font-weight: 700; }
.page-hero .sub { font: 400 14px/1.6 var(--font-body); color: #9DBACD; margin-top: 6px; max-width: 640px; }
.flash-banner { background: #E1F5EE; border-bottom: 1px solid #9FE1CB; color: #0F6E56; text-align: center; padding: 12px 20px; font: 500 14px var(--font-body); }

/* ---- Question detail ---- */
.qd-asker { display: flex; align-items: center; gap: 12px; }
.qd-asker__name { font: 700 14px var(--font-body); color: var(--c-ink); }
.qd-asker__meta { font: 400 12px var(--font-body); color: var(--c-muted); margin-top: 2px; }
.qd-ans__title { font: 800 18px var(--font-display); color: var(--c-ink); margin-bottom: 14px; }
.qd-answers { display: flex; flex-direction: column; gap: 14px; }
.qd-answer { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 18px 20px; }
.qd-answer--accepted { border-color: var(--c-teal); box-shadow: inset 0 0 0 1px var(--c-teal); }
.qd-answer__head { display: flex; align-items: center; gap: 10px; }
.qd-answer__name { font: 600 13.5px var(--font-body); color: var(--c-ink); }
.qd-answer__date { font: 400 12px var(--font-body); color: var(--c-faint); }
.qd-accepted { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 600 12px var(--font-body); color: var(--c-teal-d); background: #E1F5EE; padding: 4px 10px; border-radius: var(--r-pill); }
.qd-answer__body { margin-top: 10px; font: 400 14px/1.65 var(--font-body); color: var(--c-text); }
.qd-empty { padding: 32px 24px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); }
.qd-answer__actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
/* Material-page comments */
/* Comments live in the main grid column (row 2), under the content card - like the question answers (qa-main). */
.comments-sec { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.detail-layout > .detail-card { grid-column: 1; grid-row: 1; }
.detail-layout > .comments-sec { grid-column: 1; grid-row: 2; }
.detail-layout > .dside { grid-column: 2; grid-row: 1 / 3; align-self: start; }
.cmt-foot { margin-top: 18px; }
.cmt-login { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 16px 22px; box-shadow: var(--sh-card); }
.cmt-login span { font: 500 14px var(--font-body); color: var(--c-muted); }
@media (max-width: 480px) { .cmt-login { flex-direction: column; align-items: stretch; text-align: center; } }
.qd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--c-border); border-radius: var(--r-pill); background: #fff; color: var(--c-text); font: 600 12.5px var(--font-body); cursor: pointer; }
.qd-btn:hover { border-color: var(--c-primary); color: var(--c-ink); }
.qd-btn--on { background: #E1F5EE; border-color: var(--c-teal); color: var(--c-teal-d); }
.qd-count { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--font-body); color: var(--c-muted); }

/* ---- Messages (modern messenger, 3-pane) ---- */
.msg-hero { background: linear-gradient(120deg, #14344E 45%, #3A5F8C); }
.msg-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 30px 0; flex-wrap: wrap; }
.msg-hero h1 { font: 700 26px var(--font-display); color: #fff; }
.msg-hero p { font: 400 14.5px/1.6 var(--font-body); color: #9DBACD; margin-top: 8px; max-width: 620px; }
.msg-hero__acts { display: flex; align-items: center; gap: 10px; flex: none; }
.msg-newbtn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 11px; background: var(--c-accent); color: #fff; font: 700 13.5px var(--font-body); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.msg-newbtn:hover { color: #fff; }
.msg-ghostbtn { padding: 11px 20px; border-radius: 11px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); font: 600 13.5px var(--font-body); color: #fff; }
.msg-ghostbtn:hover { color: #fff; }

.msg-app { display: grid; grid-template-columns: 352px 1fr 300px; height: calc(100vh - var(--nav-h) - 190px); min-height: 540px; background: #fff; border: 1px solid var(--c-border); border-radius: 20px; overflow: hidden; box-shadow: 0 6px 24px rgba(20,52,78,.06); margin: 24px 0 40px; }

/* list */
.msg-list { border-right: 1px solid var(--c-divider); display: flex; flex-direction: column; min-height: 0; }
.msg-list__top { padding: 18px 20px 14px; }
.msg-tabs { display: flex; background: #F1F6F9; border-radius: 11px; padding: 4px; margin-bottom: 14px; }
.msg-tab { flex: 1; text-align: center; padding: 8px; border-radius: 8px; font: 500 12.5px var(--font-body); color: var(--c-muted); }
.msg-tab--on { background: #fff; color: var(--c-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(20,52,78,.1); }
.msg-search { display: flex; align-items: center; gap: 9px; border: 1.5px solid var(--c-border); border-radius: 11px; background: #F8FBFC; padding: 10px 13px; }
.msg-search input { border: 0; background: transparent; outline: none; width: 100%; font: 400 13px var(--font-body); color: var(--c-ink); }
.msg-convs { flex: 1; overflow-y: auto; min-height: 0; }
.msg-conv { display: flex; gap: 12px; padding: 14px 20px; border-left: 3px solid transparent; }
.msg-conv:hover { background: var(--c-page); }
.msg-conv--on { background: #EEF5F9; border-left-color: var(--c-primary); }
.msg-conv__av { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--font-body); }
.msg-conv__mid { flex: 1; min-width: 0; }
.msg-conv__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.msg-conv__name { font: 600 13.5px var(--font-body); color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv__name--b { font-weight: 700; }
.msg-conv__time { font: 500 11px var(--font-body); color: var(--c-faint); flex: none; }
.msg-conv__prev { font: 400 12.5px var(--font-body); color: var(--c-muted-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv__prev--unread { font-weight: 600; color: var(--c-ink); }
.msg-badge { flex: none; min-width: 18px; height: 18px; border-radius: 999px; background: var(--c-accent); color: #fff; font: 700 10.5px var(--font-body); display: grid; place-items: center; padding: 0 5px; }
.msg-empty-list { padding: 40px 22px; text-align: center; color: var(--c-muted); font: 500 13px var(--font-body); }

/* thread */
.msg-thread { display: flex; flex-direction: column; min-height: 0; background: #FBFDFE; }
.msg-thread__head { display: flex; align-items: center; gap: 13px; padding: 15px 22px; border-bottom: 1px solid var(--c-divider); background: #fff; }
.msg-thread__av { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--font-body); }
.msg-thread__nm { font: 700 15px var(--font-body); color: var(--c-ink); }
.msg-thread__sub { font: 500 12px var(--font-body); color: var(--c-muted); margin-top: 2px; }
.msg-thread__back { display: none; }
.msg-bubbles { flex: 1; overflow-y: auto; min-height: 0; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.msg-daypill { text-align: center; }
.msg-daypill span { padding: 5px 14px; border-radius: 999px; background: var(--c-tint-blue); color: var(--c-muted); font: 500 11px var(--font-body); }
.msg-row { display: flex; gap: 10px; max-width: 74%; }
.msg-row--mine { flex-direction: column; align-items: flex-end; max-width: 100%; gap: 5px; }
.msg-mini-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 10px var(--font-body); flex: none; align-self: flex-end; }
.msg-bubble { background: #fff; border: 1px solid var(--c-hairline); border-radius: 16px 16px 16px 5px; padding: 12px 16px; font: 400 13.5px/1.55 var(--font-body); color: #2A3F52; white-space: pre-line; }
.msg-row--mine .msg-bubble { max-width: 74%; background: linear-gradient(135deg, #377FA9, #2B6A8F); border: 0; color: #fff; border-radius: 16px 16px 5px 16px; }
.msg-meta { font: 500 10.5px var(--font-body); color: var(--c-faint); margin-top: 5px; padding-left: 4px; }
.msg-row--mine .msg-meta { padding: 0 4px 0 0; }
.msg-thread__empty { margin: auto; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; }

/* compose */
.msg-compose { padding: 14px 20px; border-top: 1px solid var(--c-divider); background: #fff; }
.msg-composebar { display: flex; align-items: flex-end; gap: 10px; background: #F1F6F9; border: 1.5px solid var(--c-border); border-radius: 14px; padding: 7px 8px 7px 16px; }
.msg-composebar textarea { flex: 1; border: 0; background: transparent; outline: none; resize: none; font: 400 13.5px var(--font-body); color: var(--c-ink); padding: 8px 0; max-height: 120px; }
.msg-sendbtn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; border: 0; background: var(--c-accent); color: #fff; box-shadow: 0 4px 12px rgba(240,123,93,.35); cursor: pointer; flex: none; }

/* details */
.msg-details { border-left: 1px solid var(--c-divider); padding: 24px 22px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
.msg-details__id { display: flex; flex-direction: column; align-items: center; text-align: center; }
.msg-details__av { width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; font: 800 22px var(--font-display); color: #fff; }
.msg-details__nm { font: 700 15px var(--font-body); color: var(--c-ink); margin-top: 12px; }
.msg-details__sub { font: 400 12px var(--font-body); color: var(--c-muted); margin-top: 3px; }
.msg-details__acts { display: flex; gap: 8px; margin-top: 12px; }
.msg-details__acts a, .msg-details__acts button { padding: 8px 16px; border-radius: 10px; font: 600 12px var(--font-body); cursor: pointer; border: 0; }
.msg-profilebtn { background: var(--c-tint-blue); color: var(--c-link); }
.msg-blockbtn { background: #fff; border: 1.5px solid #F3D3C9 !important; color: var(--c-accent-strong); }
.msg-blockbtn--on { background: var(--c-accent-strong); color: #fff; border-color: var(--c-accent-strong) !important; }
.msg-dsec__t { font: 700 12px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 10px; }
.msg-safety { margin-top: auto; display: flex; align-items: flex-start; gap: 9px; padding: 13px 15px; border-radius: 12px; background: #FDF6EC; border: 1px solid #F3E2C0; font: 400 11.5px/1.5 var(--font-body); color: #9A6E14; }
.msg-share-tip { padding: 15px 16px; border-radius: 12px; background: var(--c-tint-blue); border: 1px solid var(--c-border); }
.msg-share-tip__t { font: 700 12.5px var(--font-body); color: var(--c-ink); }
.msg-share-tip p { font: 400 11.5px/1.5 var(--font-body); color: var(--c-text); margin-top: 5px; }
.mp-follow { padding: 10px 18px; border-radius: 11px; border: 0; background: var(--c-accent-strong); color: #fff; font: 700 13px var(--font-body); cursor: pointer; white-space: nowrap; }
.mp-follow--on { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }

@media (max-width: 1080px) {
  .msg-app { grid-template-columns: 320px 1fr; }
  .msg-details { display: none; }
}
@media (max-width: 720px) {
  .msg-app { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .msg-list { border-right: 0; }
  .msg-app--open .msg-list { display: none; }
  .msg-app:not(.msg-app--open) .msg-thread { display: none; }
  .msg-thread { height: calc(100vh - var(--nav-h) - 60px); }
  .msg-thread__back { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--c-border); flex: none; }
}
.page-hero .searchbar { margin-top: 20px; max-width: 760px; box-shadow: none; }

/* ---- Materials search ---- */
.mat-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding-block: 28px 48px; align-items: start; }
.frail { display: flex; flex-direction: column; gap: 14px; }
.fcard { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 20px 22px; }
.fcard h3 { font: 700 13px var(--font-body); color: var(--c-ink); margin: 0; }
.facet { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; font: 500 13.5px var(--font-body); color: var(--c-text); }
.facet label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.facet .cnt { margin-left: auto; color: var(--c-faint); font-weight: 400; }
.facet input { width: 17px; height: 17px; accent-color: var(--c-primary); flex: none; }
.fmore { color: var(--c-link); font-weight: 600; font-size: 13px; margin-top: 8px; display: inline-block; }
.fchips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.facet__row { display: flex; align-items: center; gap: 10px; color: var(--c-text); text-decoration: none; padding: 3px 0; transition: color .12s; }
.facet__row:hover { color: var(--c-brand); }
.facet__row.is-on { color: var(--c-brand); font-weight: 700; }
.fchip { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid #D8E4EC; color: #43617A; font: 500 12px var(--font-body); background: none; cursor: pointer; text-decoration: none; transition: border-color .12s, background .12s, color .12s; }
a.fchip:hover { border-color: #B4C9D7; }
.fchip.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; }
.fchip[aria-pressed="true"] { background: var(--c-primary); color: #fff; border-color: transparent; font-weight: 600; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.results-head .cnt { font: 500 13.5px var(--font-body); color: var(--c-muted-2); }
.results-head .cnt b { color: var(--c-ink); }
.sort { display: inline-flex; align-items: center; gap: 12px; font: 500 13px var(--font-body); color: #43617A; }
.sort-btn { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid #D8E4EC; border-radius: 10px; padding: 8px 13px; background: #fff; font: 600 13px var(--font-body); color: var(--c-ink); cursor: pointer; }
.rlist { display: flex; flex-direction: column; gap: 12px; }
.rcard { display: flex; gap: 20px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 20px 22px; box-shadow: var(--sh-card); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.rcard:hover { border-color: #C9DCE8; box-shadow: 0 8px 22px rgba(20,52,78,.1); transform: translateY(-1px); }
a.rcard h3 { transition: color .15s; }
a.rcard:hover h3 { color: var(--c-brand); }
.rthumbs { display: flex; gap: 5px; flex: none; }
.rthumb { position: relative; width: 74px; height: 98px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, #FBFDFE, #EAF2F7); border: 1px solid #C9D9E4; }
.rthumb::before, .rthumb::after, .rthumb i { content: ""; position: absolute; height: 3px; border-radius: 2px; background: #D5E2EB; }
.rthumb::before { inset: 10px 9px auto 9px; height: 5px; background: #B4C9D7; }
.rthumb::after { inset: 20px 14px auto 9px; }
.rthumb i { inset: 28px 20px auto 9px; }
.rthumb .fb { position: absolute; bottom: 7px; left: 10px; padding: 2px 7px; border-radius: 4px; color: #fff; font: 700 9px var(--font-body); }
.mstack { display: flex; flex-direction: column; gap: 5px; }
.mpage { width: 30px; height: 40px; border-radius: 5px; background: #EAF2F7; border: 1px solid #D5E2EB; }
.mpage.more { background: #DCE9F1; display: grid; place-items: center; font: 700 9px var(--font-body); color: var(--c-muted-2); }
.rbody { flex: 1; min-width: 0; }
.rtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rtop h3 { font: 700 16.5px/1.35 var(--font-body); color: var(--c-ink); margin: 0; }
.pbadge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: #EAF6F0; color: var(--c-teal-d); font: 600 12px var(--font-body); flex: none; white-space: nowrap; }
.rtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rmeta { display: flex; align-items: center; gap: 18px; margin-top: 14px; font: 500 12.5px var(--font-body); color: var(--c-muted); }
.rmeta .who { display: inline-flex; align-items: center; gap: 8px; }
.rmeta .avatar { width: 22px; height: 22px; font-size: 9px; }
.rmeta .st { margin-left: auto; display: inline-flex; gap: 14px; }
.rmeta .st .dl { color: var(--c-link); font-weight: 600; }
.rmeta .st .th { color: #D9915B; font-weight: 600; }
.pagin { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.pagin a, .pagin span { min-width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font: 500 13.5px var(--font-body); color: #43617A; background: #fff; border: 1px solid #D8E4EC; }
.pagin .cur { background: var(--c-primary); color: #fff; border-color: transparent; font-weight: 600; }
@media (max-width: 900px) { .mat-layout { grid-template-columns: 1fr; } .frail { flex-direction: row; flex-wrap: wrap; } .frail .fcard { flex: 1; min-width: 230px; } }
@media (max-width: 560px) { .rcard { flex-direction: column; } .rmeta { flex-wrap: wrap; } }

/* ---- Breadcrumb ---- */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font: 500 12.5px var(--font-body); padding-block: 24px 18px; }
.crumbs a, .crumbs .cur { padding: 7px 13px; border-radius: var(--r-pill); }
.crumbs a { background: #fff; border: 1px solid var(--c-border); color: #43617A; display: inline-flex; align-items: center; gap: 7px; }
.crumbs .cur { background: #DCE9F1; color: var(--c-ink); font-weight: 600; }
.crumbs .sep { color: #B4C9D7; display: inline-flex; }
.crumbs--hero { padding-block-start: 2px; } /* hero already has .ahero top padding */

/* ---- Material detail ---- */
.detail-layout { display: grid; grid-template-columns: 1fr 380px; column-gap: 24px; padding-bottom: 48px; align-items: start; }
.detail-card { background: #fff; border: 1px solid var(--c-border); border-radius: 18px; overflow: hidden; }
.detail-card__head { padding: 26px 30px; border-bottom: 1px solid var(--c-divider); }
.detail-card__head h1 { font-size: 22px; font-weight: 700; line-height: 1.3; }
.detail-card__head .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.viewer { background: #E9F0F5; padding: 28px; display: flex; flex-direction: column; align-items: center; }
.viewer__pager { display: flex; align-items: center; gap: 18px; }
.pg-arrow { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #D8E4EC; display: grid; place-items: center; color: #43617A; cursor: pointer; flex: none; }
.sheet { position: relative; width: 420px; max-width: 100%; height: 560px; background: #fff; border-radius: 10px; box-shadow: 0 14px 36px rgba(20,52,78,.16); overflow: hidden; }
.sheet .ln { position: absolute; border-radius: 3px; height: 7px; background: #E4EEF4; }
.sheet .hb { position: absolute; border-radius: 3px; height: 14px; }
.sheet .img { position: absolute; inset: 232px 48px 200px 48px; background: #EAF2F7; border-radius: 8px; display: grid; place-items: center; color: #B4C9D7; }
.sheet .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 75%); }
.sheet .lock-cta { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 9px 18px; border-radius: var(--r-pill); background: var(--c-navy); color: #fff; font: 600 12.5px var(--font-body); white-space: nowrap; }
.viewer__thumbs { display: flex; align-items: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.pthumb { width: 44px; height: 58px; border-radius: 6px; background: #fff; border: 1px solid #D8E4EC; display: grid; place-items: center; color: #7A93A6; }
.pthumb.active { border: 2px solid var(--c-primary); box-shadow: 0 4px 10px rgba(20,52,78,.12); }
.pthumb.locked { background: linear-gradient(180deg, #fff, #EAF2F7); }
.viewer__cap { font: 500 12.5px var(--font-body); color: var(--c-muted-2); margin-left: 10px; }
.viewer__cap b { font-weight: 700; }
.detail-card__desc { padding: 24px 30px; }
.detail-card__desc h3 { font: 700 14px var(--font-body); margin: 0 0 8px; }
.detail-card__desc p { font: 400 14px/1.7 var(--font-body); color: var(--c-text); margin: 0; }
.dside { display: flex; flex-direction: column; gap: 16px; }
.sdcard { background: #fff; border: 1px solid var(--c-border); border-radius: 18px; padding: 24px 26px; }
.sdcard h3 { font: 700 13px var(--font-body); margin: 0 0 14px; }
.file-id { display: flex; align-items: center; gap: 12px; }
.file-badge { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font: 800 11px var(--font-body); flex: none; background: #FDEBE5; color: #C4563B; }
.file-id .nm { font: 700 15px var(--font-body); word-break: break-all; }
.file-id .mt { font: 400 12.5px var(--font-body); color: var(--c-muted); margin-top: 2px; }
.dl-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.dl-secondary .btn { min-height: 42px; padding-inline: 8px; }
.file-stats { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-divider); font: 500 12.5px var(--font-body); color: var(--c-muted); }
.similar { display: flex; flex-direction: column; gap: 2px; }
.similar a { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; padding: 9px 8px; margin: 0 -8px; border-radius: 10px; transition: background .14s; }
.similar a:hover { background: var(--c-surface-2); }
.similar a > span:last-child { min-width: 0; }
.similar .cov { width: 34px; height: 44px; border-radius: 5px; flex: none; display: grid; place-items: center; color: #fff; font: 800 9px var(--font-body); }
.similar .t { display: block; font: 600 13px/1.35 var(--font-body); color: var(--c-ink); transition: color .12s; }
.similar a:hover .t { color: var(--c-brand); }
.similar .m { display: block; font: 400 11.5px var(--font-body); color: var(--c-muted); margin-top: 2px; }
/* Modern "Подобни въпроси" sidebar item */
.simq { display: flex; align-items: flex-start; gap: 11px; padding: 10px; margin: 0 -10px; border-radius: 12px; text-decoration: none; transition: background .14s; }
.simq + .simq { margin-top: 2px; }
.simq:hover { background: var(--c-surface-2); }
.simq__ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #EAF4FB; color: var(--c-brand); }
.simq__tt { min-width: 0; }
.simq__tt b { display: block; font: 600 13px/1.35 var(--font-body); color: var(--c-ink); transition: color .12s; }
.simq:hover .simq__tt b { color: var(--c-brand); }
.simq__tt small { display: block; font: 400 11.5px var(--font-body); color: var(--c-muted); margin-top: 3px; }
/* Copyright notice on the material (download) screen */
.copyright-note p { font: 400 12px/1.6 var(--font-body); color: var(--c-muted); margin-top: 4px; }
.copyright-note a { display: inline-block; margin-top: 10px; font: 600 12px var(--font-body); color: var(--c-link); text-decoration: none; }
.copyright-note a:hover { text-decoration: underline; }
.copyright-note h3 { display: flex; align-items: center; gap: 7px; }
.copyright-note h3 svg { color: var(--c-brand); }
@media (max-width: 900px) { .detail-layout { grid-template-columns: 1fr; } .detail-layout > .detail-card, .detail-layout > .comments-sec, .detail-layout > .dside { grid-column: auto; grid-row: auto; } }

/* ---- Header / nav ---- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); }
/* --- top row: brand | actions --- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--c-ink); white-space: nowrap; flex: none; text-decoration: none; }
.brand__mark { width: 40px; height: 40px; border-radius: var(--r-tile); display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c-primary), var(--c-primary-d)); }
.brand__mark svg { width: 22px; height: 22px; }
.brand b { color: var(--c-primary); font-weight: 700; }
.brand__txt { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 14px; white-space: nowrap; }
.brand__txt small { font: 600 8px var(--font-body); letter-spacing: .155em; color: #8299AB; white-space: nowrap; }

/* action pill: two CTAs */
.nav-cta { display: flex; align-items: center; gap: 6px; padding: 5px; background: var(--c-navy); border-radius: 13px; }
.nav-cta a { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border-radius: 10px; font: 700 13px var(--font-body); white-space: nowrap; text-decoration: none; }
.nav-cta__on { background: var(--c-accent); color: #fff; }
.nav-cta__off { color: #CFE2ED; }
.nav-cta__off:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav__div { width: 1px; height: 28px; background: var(--c-border); flex: none; }

/* notification bells */
.nav-bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #F1F6F9; border: 1px solid #E4EDF3; color: #5A7488; text-decoration: none; flex: none; transition: background-color .15s, color .15s, border-color .15s; }
.nav-bell:hover { background: var(--c-tint-blue); color: var(--c-ink); }
.nav-bell.is-on { background: #E7F0F6; border-color: #CFE0EC; color: var(--c-link); }
.nav-bell__dot { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--c-accent-strong); color: #fff; font: 700 9.5px var(--font-body); display: grid; place-items: center; border: 2px solid #fff; box-sizing: border-box; }

/* --- bottom row: primary nav --- */
.nav-bar { display: flex; align-items: center; height: 52px; border-top: 1px solid var(--c-divider); }
.nav__links { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; }
.nav__link { padding: 8px 14px; border-radius: 10px; color: #4A6274; font-weight: 500; font-size: 13.5px; white-space: nowrap; text-decoration: none; }
.nav__link:hover { background: var(--c-tint-blue); color: var(--c-ink); }
.nav__link[aria-current="page"] { background: var(--c-tint-blue); color: var(--c-ink); font-weight: 600; }

/* Priority+ navigation: overflow items collapse into an "Още" dropdown (carry-over from SimpleShop). */
.nav-list { display: flex; align-items: center; gap: 2px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.nav-list > li { display: flex; flex: none; }
.nav-priority-hidden { display: none; }
.nav-more { position: relative; }
.nav-more-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 0; background: none; cursor: pointer; color: #43617A; font: 500 13.5px var(--font-body); border-radius: var(--r-pill); white-space: nowrap; }
.nav-more-trigger:hover { background: var(--c-tint-blue); color: var(--c-ink); }
.nav-more .caret { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: .65; }
.nav-more-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--sh-float); z-index: 50; }
.nav-more-dropdown .dropdown-item { display: block; padding: 9px 12px; border-radius: 9px; color: #43617A; font: 500 13.5px var(--font-body); text-decoration: none; white-space: nowrap; }
.nav-more-dropdown .dropdown-item:hover { background: var(--c-tint-blue); color: var(--c-ink); }
.nav-more-dropdown .dropdown-item.active { background: var(--c-tint-blue); color: var(--c-ink); font-weight: 600; }
.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav__toggle { display: none; }

/* ---- Logged-in user menu (right side, mirrors the old site's session dropdown) ---- */
.usermenu { position: relative; }
.usermenu__trigger { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border: 1px solid transparent; border-radius: var(--r-pill); background: none; cursor: pointer; color: var(--c-ink); font: 600 13.5px var(--font-body); white-space: nowrap; transition: background-color .15s, border-color .15s; }
.usermenu__trigger:hover { background: var(--c-tint-blue); border-color: var(--c-border); }
.usermenu__name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.usermenu__caret { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -3px 3px 0 0; opacity: .55; }
.usermenu__pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 236px; padding: 8px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--sh-float); z-index: 50; }
.usermenu__head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 10px; text-decoration: none; }
.usermenu__id { display: flex; flex-direction: column; min-width: 0; }
.usermenu__id b { font: 700 13.5px var(--font-body); color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usermenu__id small { font: 500 11.5px var(--font-body); color: var(--c-link); }
.usermenu__sep { height: 1px; background: var(--c-divider); margin: 4px 6px; }
.usermenu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 9px; color: #43617A; font: 500 13.5px var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; text-align: left; }
.usermenu__item svg { color: #7C93A6; flex: none; }
.usermenu__item:hover { background: var(--c-tint-blue); color: var(--c-ink); }
.usermenu__item:hover svg { color: var(--c-primary); }
.usermenu__item.is-on { background: var(--c-tint-blue); color: var(--c-ink); font-weight: 600; }
.usermenu__item.is-on svg { color: var(--c-primary); }
.usermenu__item--out { color: #C4563B; }
.usermenu__item--out svg { color: #C4563B; }
.usermenu__item--out:hover { background: #FDEBE5; color: #C4563B; }

/* ---- Hero ---- */
.hero { position: relative; background: var(--c-navy); color: #fff; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 82% 12%, rgba(55,127,169,.42), transparent 55%), radial-gradient(circle at 20% 112%, rgba(47,163,154,.20), transparent 55%); }
.hero__grid { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; padding-block: 64px 56px; }
.hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font: 500 12.5px var(--font-body); color: #A9C8DB; margin-bottom: 22px; }
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; }
.hero h1 { color: #fff; font-size: clamp(32px, 4.6vw, 54px); font-weight: 700; line-height: 1.1; }
.hero h1 .hl { color: #7CC0E8; background: none; padding: 0; border-radius: 0; }
.hero__sub { color: #B9D2E2; font-size: 16.5px; line-height: 1.6; margin: 16px 0 0; max-width: 520px; }
.searchbar { display: flex; align-items: center; gap: 4px; background: #fff; border-radius: var(--r-card); padding: 6px 6px 6px 20px; margin-top: 28px; max-width: 600px; box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.searchbar svg { color: var(--c-muted); flex: none; }
.searchbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 15px var(--font-body); color: var(--c-text); padding: 12px 8px; }
.searchbar input::placeholder { color: var(--c-faint); }
.searchbar .btn { min-height: 0; padding: 12px 26px; font-size: 15px; box-shadow: none; }
.hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.hero__tags .lbl { font: 500 12.5px var(--font-body); color: #7A99AE; }
.tag-o { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.2); color: #CFE2ED; font: 500 12.5px var(--font-body); }
.tag-o:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Hero rotating word (изпита / курсовата / сесията) */
/* Rotating hero word - 1:1 with the mockup: 3 words stacked in one inline-grid cell,
   cross-faded on a 9s cycle staggered by 3s. ALWAYS animates (project rule: never gate
   motion behind prefers-reduced-motion). Word sits at line end (br after) so the
   widest-word grid width never leaves a gap. */
.hero-rot { position: relative; display: inline-grid; vertical-align: bottom; }
.hero-rot > span { grid-area: 1 / 1; opacity: 0; animation: heroWord 12s ease-in-out infinite; }
.hero-rot > span:nth-child(1) { color: #7CC0E8; animation-delay: 0s; }
.hero-rot > span:nth-child(2) { color: #F0A35D; animation-delay: 3s; }
.hero-rot > span:nth-child(3) { color: #5FC9BE; animation-delay: 6s; }
.hero-rot > span:nth-child(4) { color: #B78BE6; animation-delay: 9s; }
@keyframes heroWord { 0% { opacity: 0; transform: translateY(14px); } 3% { opacity: 1; transform: translateY(0); } 22% { opacity: 1; transform: translateY(0); } 25%, 100% { opacity: 0; transform: translateY(-14px); } }

/* Reusable user avatar (photo when available, else monogram) */
.uav { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #3E86AE, #2B6A8F); color: #fff; font-weight: 700; flex: none; line-height: 1; }
.uav img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hero social proof */
.hero__proof { display: flex; align-items: center; gap: 15px; margin-top: 26px; }
.hero__avatars { display: flex; }
.hero__avatars .av { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--c-navy); display: grid; place-items: center; font: 700 11px var(--font-body); color: #fff; overflow: hidden; background: #243C52; }
.hero__avatars .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__avatars .av + .av { margin-left: -11px; }
.hero__avatars .a1 { background: #377FA9; }
.hero__avatars .a2 { background: #2FA39A; }
.hero__avatars .a3 { background: #6A5ACD; }
.hero__avatars .a4 { background: #C4563B; }
.hero__avatars .more { background: #243C52; color: #9DBACD; font-size: 10px; }
.hero__proof p { margin: 0; font: 500 13px/1.5 var(--font-body); color: #9DBACD; }
.hero__proof p b { color: #fff; }

/* Hero floating cards */
.hero__cards { position: relative; height: 360px; pointer-events: none; }
.hero__cards .fcard { position: absolute; background: #fff; color: var(--c-ink); box-shadow: var(--sh-float); animation: heroFloat 6s ease-in-out infinite; will-change: transform; }
.hero__cards .fcard--video { animation-delay: -.5s; }
.hero__cards .fcard--q { animation-delay: -3s; }
.hero__cards .fcard--m { animation-delay: -4.5s; }
.hero__cards .fcard--count { animation-delay: -1.8s; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.fcard--video { top: 10px; left: 0; display: flex; gap: 11px; align-items: center; border-radius: 14px; padding: 11px 15px; }
.fcard--video .thumb { width: 46px; height: 32px; border-radius: 7px; background: var(--c-navy); display: grid; place-items: center; color: var(--c-accent); flex: none; }
.fcard--video .t { font: 600 12.5px var(--font-body); }
.fcard--video .s { font: 400 11px var(--font-body); color: var(--c-muted); margin-top: 2px; }
.fcard--q { top: 0; right: 0; width: 330px; border-radius: var(--r-feature); padding: 18px; }
.fcard--q .row { display: flex; align-items: center; gap: 10px; }
.fcard--q .nm { font: 600 13.5px var(--font-body); }
.fcard--q .tm { font: 400 12px var(--font-body); color: var(--c-muted); }
.fcard--q .body { font: 400 13.5px/1.5 var(--font-body); color: var(--c-text); margin: 12px 0 0; }
.fcard--q .acts { display: flex; gap: 8px; margin-top: 14px; }
.fcard--m { bottom: 34px; left: 0; width: 300px; border-radius: var(--r-feature); padding: 16px 18px; display: flex; gap: 12px; }
.fcard--m .t { font: 600 13.5px var(--font-body); }
.fcard--m .s { font: 400 12px var(--font-body); color: var(--c-muted); margin-top: 3px; }
.fcard--m .stats { display: flex; gap: 10px; margin-top: 7px; font: 500 11.5px var(--font-body); color: var(--c-teal); }
.fcard--m .stats .amb { color: var(--c-amber); }
.fcard--count { bottom: 0; right: 56px; display: inline-flex; align-items: center; gap: 9px; background: var(--c-teal); color: #fff; border-radius: var(--r-pill); padding: 10px 18px; font: 600 13px var(--font-body); box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.mini-btn { padding: 8px 16px; border-radius: 10px; font: 600 12.5px var(--font-body); border: 0; cursor: pointer; }
.mini-btn--pri { background: var(--c-primary); color: #fff; }
.mini-btn--soft { background: var(--c-tint-blue); color: var(--c-link); }

/* ---- Book/file thumbnail (pure CSS) ---- */
.paper { position: relative; background: linear-gradient(180deg, #EAF2F7, #D8E4EC); border: 1px solid #C9D9E4; border-radius: 6px; flex: none; }
.paper::before, .paper::after, .paper i { content: ""; position: absolute; height: 3px; border-radius: 2px; background: #C9D9E4; }
.paper::before { inset: 8px 7px auto 7px; background: #B4C9D7; }
.paper::after { inset: 16px 11px auto 7px; }
.paper i { inset: 24px 12px auto 7px; }

/* ---- Section header ---- */
.sec { background: var(--c-page); padding-block: 52px 0; }
.sec.tail { padding-bottom: 56px; }
.errpage { min-height: 54vh; display: grid; place-items: center; text-align: center; padding-bottom: 56px; }
.errpage__inner { max-width: 520px; }
.errpage .code { font-family: var(--font-display); font-weight: 800; font-size: 72px; color: var(--c-primary); line-height: 1; }
.errpage h1 { font-size: 28px; margin-top: 10px; }
.errpage p { color: var(--c-muted); margin: 12px 0 24px; }
.sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.sec__head h2 { font-size: 24px; font-weight: 700; }
.sec__head .sub { margin: 6px 0 0; font: 400 14px var(--font-body); color: var(--c-muted-2); }
.sec__link { font: 600 14px var(--font-body); color: var(--c-link); white-space: nowrap; }
.sec__head--plain { max-width: none; margin: 0; padding-inline: 0; }
.sec__grid { display: grid; gap: 16px; max-width: var(--container); margin: 22px auto 0; padding-inline: var(--pad); }

/* ---- Stats strip (home only - scoped so the bare `.stats` bg does not leak
   onto the .stats bars on detail heroes / profiles) ---- */
section.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-hairline); border-bottom: 1px solid var(--c-hairline); }
.stat { background: #fff; padding: 26px 40px; }
.stat .n { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--c-primary); }
.stat .l { font: 500 13px var(--font-body); color: var(--c-muted); margin-top: 4px; }

/* ---- Video lessons ---- */
.vid-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vid-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.vid-card:hover { transform: translateY(-3px); box-shadow: var(--sh-float); }
.vid-card__thumb { height: 110px; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 30px; }
.g-coral { background: linear-gradient(135deg, #F07B5D, #D9603F); }
.g-teal  { background: linear-gradient(135deg, #2FA39A, #1F7A72); }
.g-blue  { background: linear-gradient(135deg, #377FA9, #2B5F82); }
.g-blue2 { background: linear-gradient(135deg, #2B5F82, #14344E); }
.g-navy  { background: linear-gradient(135deg, #14344E, #0D2334); }
.vid-card__body { padding: 14px 16px; }
.vid-card__body .t { font: 600 13.5px var(--font-body); color: var(--c-ink); }
.vid-card__body .m { font: 400 12px var(--font-body); color: var(--c-muted); margin-top: 4px; }

/* ---- Questions + sidebar ---- */
.q-layout { display: grid; grid-template-columns: 1fr 380px; gap: 24px; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.q-list { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.q-row { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 16px 20px; }
.q-row .txt { flex: 1; min-width: 0; }
.q-row .l1 { font: 500 14.5px var(--font-body); color: var(--c-ink); }
.q-row .l1 b { font-weight: 700; }
.q-row .l2 { font: 400 12.5px var(--font-body); color: var(--c-muted); margin-top: 3px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--font-body); flex: none; }
.av-med { background: #E4EEF4; color: #377FA9; }
.av-ped { background: #E2F3F1; color: #1F7A72; }
.av-ikon { background: #FBF1DC; color: #9A6E14; }
.av-psi { background: #EDE9FB; color: #6A5ACD; }
.side { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.cta-card { background: var(--c-primary); color: #fff; border-radius: var(--r-feature); padding: 28px; }
.cta-card h3 { color: #fff; font-size: 19px; font-weight: 700; line-height: 1.3; }
.cta-card p { font: 400 13.5px/1.6 var(--font-body); color: #CFE2ED; margin: 10px 0 0; }
.cta-card .btn { margin-top: 18px; background: #fff; color: var(--c-link); border-color: transparent; font-weight: 700; box-shadow: none; }
.review-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 24px 26px; }
.review-card__head { display: flex; align-items: center; gap: 10px; }
.review-card__head .ic { width: 34px; height: 34px; border-radius: 10px; background: #FBF1DC; color: var(--c-amber); display: grid; place-items: center; }
.review-card__head .t { font: 700 14px var(--font-body); }
.review-card blockquote { margin: 14px 0 0; font: italic 400 13.5px/1.65 var(--font-body); color: var(--c-text); }
.review-card .who { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.review-card .who .avatar { width: 30px; height: 30px; font-size: 11px; }
.review-card .who .nm { font: 600 12.5px var(--font-body); }
.review-card .who .nm span { font-weight: 400; color: var(--c-muted); }

/* ---- Chips ---- */
.chip-cat { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--r-pill); font: 600 12px var(--font-body); }
.cat-med { background: #FDEBE5; color: #C4563B; }
.cat-ped { background: #E2F3F1; color: #1F7A72; }
.cat-ikon { background: #FBF1DC; color: #9A6E14; }
.cat-psi { background: #EDE9FB; color: #6A5ACD; }
.cat-net { background: #EAF2F7; color: #2B6A8F; }
.chip-tag { display: inline-flex; padding: 4px 10px; border-radius: var(--r-pill); font: 500 11px var(--font-body); background: #EAF2F7; color: #43617A; }
.ans { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: var(--r-pill); font: 700 12.5px var(--font-body); border: 1px solid transparent; }
.ans--zero { background: #FFF3EF; border-color: #F8CDBF; color: #D9603F; }
.ans--ok { background: #E7F6F4; border-color: #BEE5E0; color: #1F7A72; }

/* ---- Textbook banner ---- */
.tbanner { display: flex; align-items: center; gap: 28px; max-width: var(--container); margin-inline: auto; padding: 30px 36px; border-radius: var(--r-banner); color: #fff; background: linear-gradient(120deg, #2FA39A, #1F7A72); }
.tbanner__ic { width: 52px; height: 52px; border-radius: var(--r-card); background: rgba(255,255,255,.15); display: grid; place-items: center; flex: none; }
.tbanner__tx { flex: 1; }
.tbanner__tx h3 { color: #fff; font-size: 18px; font-weight: 700; }
.tbanner__tx p { margin: 5px 0 0; font: 400 14px var(--font-body); color: #D3EEEA; }
.tbanner .btn { background: #fff; color: var(--c-teal-d); border-color: transparent; font-weight: 700; box-shadow: none; }

/* ---- News ---- */
.news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.toggle { display: inline-flex; background: var(--c-surface-2); border-radius: var(--r-pill); padding: 4px; }
.toggle button { padding: 8px 18px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--c-muted-2); font: 500 13px var(--font-body); cursor: pointer; }
.toggle button[aria-selected="true"] { background: #fff; color: var(--c-ink); font-weight: 600; box-shadow: 0 2px 6px rgba(20,52,78,.12); }
.news-head-right { display: flex; align-items: center; gap: 16px; }
.news-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; }
.news-card__img { height: 150px; background: linear-gradient(135deg, #DCE9F1, #C9D9E4); display: grid; place-items: center; color: #8FA9BC; overflow: hidden; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
a.news-card:hover .news-card__img img { transform: scale(1.04); }
.news-card__img span { display: inline-flex; align-items: center; gap: 9px; font: 500 12px var(--font-body); }
.news-card__body { padding: 18px 24px 20px; }
.news-card__body h3 { font-size: 15px; font-weight: 700; line-height: 1.4; margin-top: 10px; }
.news-card__body .date { font: 500 12px var(--font-body); color: var(--c-faint); margin-top: 10px; }
.chip-cat.sm { padding: 4px 11px; font-size: 11px; }

/* ---- Materials ---- */
.mat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mat-card { display: block; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 20px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.mat-card:hover { border-color: #C9DCE8; box-shadow: 0 10px 26px rgba(20,52,78,.1); transform: translateY(-2px); }
a.mat-card:hover h3 { color: var(--c-brand); }
.mat-card h3 { transition: color .15s; }
.mat-card__top { display: flex; gap: 14px; }
.mat-card .file { width: 52px; height: 66px; }
.mat-card .file .badge { position: absolute; bottom: 6px; left: 8px; padding: 1px 6px; border-radius: 4px; color: #fff; font: 700 8.5px var(--font-body); }
.badge-pdf { background: #C4563B; } .badge-doc { background: #2B6A8F; }
.mat-card__top h3 { font: 600 14px/1.4 var(--font-body); color: var(--c-ink); }
.mat-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mat-card__foot { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-divider); font: 500 12px var(--font-body); color: var(--c-muted); }
.mat-card__foot .r { color: var(--c-link); font-weight: 600; }

/* ---- Footer ---- */
.site-footer { background: var(--c-navy); color: #fff; }
.site-footer .container { padding-block: 48px 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand .brand { color: #fff; font-size: 13px; }
.footer-brand .brand__mark { width: 36px; height: 36px; border-radius: 11px; background: var(--c-primary); }
.footer-brand .brand b { color: #6FA9CB; }
.footer-brand p { margin: 14px 0 0; font: 400 13px/1.65 var(--font-body); color: var(--c-navy-muted); max-width: 300px; }
.footer-col h4 { font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--c-navy-head); margin: 0 0 14px; }
.footer-col a { display: block; color: var(--c-navy-text); font: 400 13.5px var(--font-body); padding: 4.5px 0; }
.footer-col a:hover { color: #fff; }
.footer-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 22px; font: 400 12.5px var(--font-body); color: var(--c-navy-head); }

/* ---- Avatar sizes (monograms) ---- */
.avatar--sm { width: 34px; height: 34px; font-size: 11px; }
.avatar--xs { width: 22px; height: 22px; font-size: 9px; }

/* ============ QUESTIONS LIST (1h2) ============ */
.qhero { padding-block: 36px 0; }
.qhero__top { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.qhero__lead { max-width: 600px; }
.qhero__cta { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; border: 0; border-radius: var(--r-tile); background: var(--c-accent); color: #fff; font: 700 14.5px var(--font-body); box-shadow: 0 6px 16px rgba(0,0,0,.25); cursor: pointer; white-space: nowrap; }
.qhero__cta:hover { color: #fff; }
.qtabs { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 22px; }
.qtab { font: 600 14px var(--font-body); color: #8FA3B5; padding: 12px 4px; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; }
.qtab.active { color: #fff; border-bottom-color: var(--c-accent); }

.ql-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; padding-block: 26px 48px; }
.ql-side { display: flex; flex-direction: column; gap: 16px; }

/* feed toolbar */
.ql-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ql-search { flex: 1; display: flex; align-items: center; gap: 9px; border: 1.5px solid #D8E4EC; border-radius: var(--r-input); background: #fff; padding: 11px 16px; }
.ql-search svg { color: #9AB0C0; flex: none; }
.ql-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 13.5px var(--font-body); color: var(--c-ink); }
.ql-search input::placeholder { color: #9AB0C0; }
.ql-drop { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #D8E4EC; border-radius: var(--r-input); background: #fff; padding: 11px 15px; font: 500 13px var(--font-body); color: var(--c-ink); cursor: pointer; white-space: nowrap; }
.ql-drop svg { color: #587489; }

/* list card */
.ql-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
/* whole row is a single link (stretched-card) with hover micro-interactions */
a.ql-row { display: flex; gap: 18px; padding: 20px 24px; border-bottom: 1px solid var(--c-divider); position: relative; color: inherit; text-decoration: none; transition: background .15s; }
a.ql-row:last-child { border-bottom: 0; }
a.ql-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-primary); opacity: 0; transition: opacity .15s; }
a.ql-row:hover { background: #F6FAFD; }
a.ql-row:hover::before { opacity: 1; }
a.ql-row:hover .ql-title { color: var(--c-primary); }
a.ql-row:hover .qgo { filter: brightness(.96); }
.atile { flex: none; width: 74px; height: 74px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.atile b { font: 700 19px var(--font-display); line-height: 1; }
.atile span { font: 500 10.5px var(--font-body); }
.atile--need { background: #FFF3EF; color: #D9603F; }
.atile--ok { background: #E7F6F4; color: #1F7A72; }
.ql-body { flex: 1; min-width: 0; }
.ql-title { font: 700 15.5px var(--font-body); color: var(--c-ink); transition: color .15s; }
.ql-excerpt { font: 400 13.5px/1.6 var(--font-body); color: var(--c-text); margin-top: 6px; }
.ql-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.ql-author { margin-left: auto; display: flex; align-items: center; gap: 7px; font: 500 12px var(--font-body); color: var(--c-muted); }
.qgo { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: var(--r-pill); background: #EAF2F7; color: var(--c-link); font: 600 12.5px var(--font-body); white-space: nowrap; transition: filter .15s; }
.qgo--need { background: var(--c-primary); color: #fff; }
/* question status badge + title row (mockup 1h2) */
.ql-th { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qbadge { font: 700 10.5px var(--font-body); padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.qbadge--help { background: #FDEBE5; color: #C4563B; }
.qbadge--ok { background: #E7F6F4; color: #1F7A72; }

/* pagination */
.ql-pagin { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.ppage { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font: 500 13.5px var(--font-body); background: #fff; border: 1px solid #D8E4EC; color: #43617A; }
.ppage.active { background: var(--c-primary); color: #fff; font-weight: 600; border-color: var(--c-primary); }
.ppage.gap { border: 0; background: none; }

/* sidebar cards (shared) */
.side-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 22px 26px; }
.side-card h4 { font: 700 13px var(--font-body); color: var(--c-ink); }

/* A: module illustration */
.side-illus { border-radius: var(--r-feature); overflow: hidden; color: #fff; background: linear-gradient(135deg, #8A4936, #14344E); padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.side-illus__tile { flex: 0 0 auto; width: 80px; height: 80px; border-radius: 2px 2px 18px 2px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.18); }
.side-illus__tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.side-illus__body { min-width: 0; }
.side-illus__body .eyebrow { font: 500 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.side-illus__body h4 { font: 700 15px var(--font-display); color: #fff; margin-top: 3px; }
.side-illus__body p { font: 400 12px/1.5 var(--font-body); color: rgba(255,255,255,.7); margin: 5px 0 0; }

/* B: rules list */
.rules { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.rules .rule { display: flex; gap: 9px; font: 400 12.5px/1.55 var(--font-body); color: var(--c-text); }
.rules .rule .g { font-weight: 700; flex: none; }
.rules .g-ok { color: var(--c-teal); }
.rules .g-no { color: var(--c-accent-strong); }
.rules__foot { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--c-divider); font: 400 11.5px/1.5 var(--font-body); color: #9AB0C0; }

/* C: leaderboard */
.board { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.board__row { display: flex; align-items: center; gap: 11px; }
.board__rank { width: 18px; font: 700 13px var(--font-display); flex: none; }
.rk-1 { color: #F2B33D; } .rk-2 { color: #9AB0C0; } .rk-3 { color: #C89A6B; }
.board__who { flex: 1; min-width: 0; }
.board__who .nm { font: 600 12.5px var(--font-body); color: var(--c-ink); }
.board__who .sb { font: 400 11px var(--font-body); color: #9AB0C0; }
.board__cnt { font: 600 12px var(--font-body); color: var(--c-link); white-space: nowrap; }

/* D: questions to universities */
.vuz { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.vuz__row { display: flex; gap: 11px; align-items: flex-start; }
.vuz__row > div { min-width: 0; }
.vuz__row .avatar { flex: none; }
.vuz__row .tx { font: 500 12.5px/1.4 var(--font-body); color: var(--c-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vuz__row .tx b { color: var(--c-ink); }
.vuz__row .tm { font: 400 11px var(--font-body); color: #9AB0C0; margin-top: 2px; }
.vuz__more { display: inline-block; margin-top: 14px; font: 600 13px var(--font-body); color: var(--c-link); }

/* E: dark stats */
.side-stat { background: var(--c-navy); border-radius: var(--r-feature); padding: 22px 26px; color: #fff; }
.side-stat h4 { font: 700 13px var(--font-body); color: #fff; }
.side-stat__rows { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.side-stat__row { display: flex; justify-content: space-between; font: 500 13px var(--font-body); color: #9DBACD; }
.side-stat__row b { color: #fff; }
.side-stat__row .lbl { display: inline-flex; align-items: center; gap: 8px; }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; display: inline-block; }

/* ============ ASK FORM (1g) ============ */
.ask-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 34px 0; }
.ask-head h1 { font-size: 26px; font-weight: 700; }
.ask-head .sub { font: 400 14px/1.55 var(--font-body); color: var(--c-muted-2); margin-top: 6px; max-width: 640px; }
.ask-head__link { flex: none; padding: 11px 20px; border-radius: var(--r-pill); border: 1.5px solid #D8E4EC; background: #fff; font: 600 13.5px var(--font-body); color: var(--c-link); white-space: nowrap; }

.ask-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; padding-block: 22px 48px; }
.ask-side { display: flex; flex-direction: column; gap: 16px; }
.ask-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 30px 34px; }
.ask-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ask-cell .label, .ask-block .label { display: block; margin-bottom: 7px; }
.ask-block { margin-top: 18px; }
.ask-empty { padding: 12px 14px; border: 1px dashed var(--c-border); border-radius: var(--r-input); background: var(--c-tint-blue); font: 500 13px var(--font-body); color: var(--c-muted); }
.ask-empty a { color: var(--c-link); font-weight: 600; }

/* segmented radio */
.seg { display: flex; gap: 8px; }
.seg__opt { flex: 1; display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid #D8E4EC; border-radius: var(--r-input); background: #fff; padding: 11px 14px; font: 500 13px var(--font-body); color: #43617A; cursor: pointer; }
.seg__opt.active { border: 2px solid var(--c-primary); background: #EAF2F7; color: var(--c-ink); font-weight: 600; }
.seg__dot { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #C9D9E4; flex: none; box-sizing: border-box; }
.seg__opt.active .seg__dot { border: 5px solid var(--c-primary); }

/* char counter */
.ask-count { text-align: right; font: 400 11.5px var(--font-body); color: var(--c-faint); margin-top: 5px; }

/* image uploader */
.ask-upload { display: flex; gap: 10px; }
.upl-slot { position: relative; width: 96px; height: 72px; border-radius: 11px; border: 1.5px dashed #C9D9E4; display: grid; place-items: center; background: none; cursor: pointer; color: #9AB0C0; overflow: hidden; transition: border-color .15s, color .15s; }
.upl-slot:hover { border-color: var(--c-brand); color: var(--c-brand); }
.upl-slot--filled { border-style: solid; border-color: var(--c-brand); }
.upl-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upl-thumb { width: 100%; height: 100%; object-fit: cover; }
.upl-plus { display: grid; place-items: center; pointer-events: none; }

/* form footer */
.ask-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-divider); }
.ask-note { display: inline-flex; align-items: center; gap: 8px; font: 400 12.5px var(--font-body); color: var(--c-muted); }
.ask-note svg { color: var(--c-teal); flex: none; }
.ask-submit { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 13px 28px; border: 0; border-radius: var(--r-tile); background: var(--c-accent); color: #fff; font: 700 14.5px var(--font-body); box-shadow: 0 6px 16px rgba(240,123,93,.35); cursor: pointer; white-space: nowrap; }

/* sidebar: rules header + warning callout */
.rules-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.rules-head__chip { width: 34px; height: 34px; border-radius: 10px; background: #EAF2F7; display: grid; place-items: center; color: var(--c-primary); flex: none; }
.rule-warn { margin-top: 16px; padding: 12px 15px; border-radius: 11px; background: #FDF6EC; border: 1px solid #F3E2C0; font: 400 12px/1.55 var(--font-body); color: #9A6E14; }

/* sidebar: recently asked */
.recent { display: flex; flex-direction: column; gap: 13px; margin-top: 14px; }
.recent__row { display: flex; gap: 11px; }
.recent__row .tx { font: 500 12.5px/1.4 var(--font-body); color: var(--c-text); }
.recent__row .tx b { color: var(--c-ink); }
.recent__row .mt { font: 400 11px var(--font-body); color: var(--c-faint); margin-top: 2px; }

/* ============ NEWS (1l) ============ */
.news-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-block: 34px 0; margin-bottom: 22px; }
.news-head h1 { font-size: 26px; font-weight: 700; }
.news-head__ctl { display: flex; align-items: center; gap: 12px; }
.news-uni { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #D8E4EC; border-radius: var(--r-pill); background: #fff; padding: 10px 18px; font: 500 13px var(--font-body); color: var(--c-ink); cursor: pointer; white-space: nowrap; }
.news-uni svg { color: #587489; }
.toggle a { padding: 8px 18px; border-radius: var(--r-pill); background: transparent; color: var(--c-muted-2); font: 500 13px var(--font-body); text-decoration: none; display: inline-flex; align-items: center; }
.toggle a[aria-selected="true"] { background: #fff; color: var(--c-ink); font-weight: 600; box-shadow: 0 2px 6px rgba(20,52,78,.12); }
.news-uni-wrap { position: relative; }
.news-uni-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 300px; max-height: 340px; overflow-y: auto; background: #fff; border: 1px solid var(--c-divider); border-radius: 12px; box-shadow: 0 12px 30px rgba(20,52,78,.16); padding: 6px; }
.news-uni-menu a { display: block; padding: 9px 12px; border-radius: 8px; font: 500 13px var(--font-body); color: var(--c-text); text-decoration: none; }
.news-uni-menu a:hover { background: var(--c-surface-2); }
.news-uni-menu a.is-on { background: var(--c-surface-2); color: var(--c-ink); font-weight: 600; }
.news-pager { padding: 8px 0 48px; }
.news-empty { padding: 44px 24px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); }
.news-article__mp4 { width: 100%; border-radius: 12px; background: #000; }
.ad-detail__owner { display: flex; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-divider); }
/* Display ad slots (leaderboard header/footer + sidebar skyscraper) */
.ad-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 20px auto; }
.ad-slot__link { display: block; max-width: 100%; line-height: 0; }
.ad-slot__link img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
.ad-slot__label { font: 500 10px var(--font-body); color: var(--c-faint); text-transform: uppercase; letter-spacing: .05em; }
.ad-slot--sidebar { margin: 0; }
.ad-slot--sidebar .ad-slot__link img { border-radius: 14px; }
.qa-ans__del { margin-left: auto; }
.qa-ans__del button { background: none; border: 0; color: var(--c-faint); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.qa-ans__del button:hover { color: var(--c-danger, #d14343); }

/* category badges */
.nbadge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--r-pill); font: 600 11px var(--font-body); }
.nbadge--lg { padding: 5px 13px; font-size: 11.5px; }
.nb-accent { background: var(--c-accent); color: #fff; }
.nb-teal { background: #E2F3F1; color: #1F7A72; }
.nb-blue { background: #EAF2F7; color: #2B6A8F; }
.nb-amber { background: #FBF1DC; color: #9A6E14; }
.nb-red { background: #FDEBE5; color: #C4563B; }

.news-featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.news-lead { background: var(--c-navy); border-radius: var(--r-banner); padding: 36px; color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; }
.news-lead h2 { font: 700 24px/1.3 var(--font-display); color: #fff; margin-top: 14px; max-width: 520px; }
.news-lead p { font: 400 14px/1.6 var(--font-body); color: #B9D2E2; margin-top: 10px; max-width: 520px; }
.news-lead .meta { font: 500 12.5px var(--font-body); color: #7A99AE; margin-top: 16px; }
.news-col { display: flex; flex-direction: column; gap: 12px; }
.news-mini { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 20px 24px; }
.news-col .news-mini { flex: 1; }
.news-mini h3 { font: 700 15px/1.4 var(--font-body); color: var(--c-ink); margin-top: 10px; }
.news-mini p { font: 400 13px/1.55 var(--font-body); color: var(--c-muted-2); margin-top: 6px; }
.news-mini .date { font: 500 12px var(--font-body); color: var(--c-faint); margin-top: 10px; }
.news-compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; padding-bottom: 48px; }

/* extra gradient thumbs */
.g-bluelt { background: linear-gradient(135deg, #5B8FB4, #377FA9); }
.g-amber  { background: linear-gradient(135deg, #F2B33D, #D9915B); }

/* ============ VIDEO CHANNELS (1e) ============ */
.page-hero--vid { background: linear-gradient(120deg, #14344E 45%, #20776F); }
.vidh { padding-block: 40px 44px; }
.vidh__top { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.vidh__lead .sub { max-width: 560px; }
.vidh__lead .sub b { color: #fff; font-weight: 700; }
.vidh__stats { display: flex; gap: 28px; flex: none; align-items: stretch; }
.vidh__stat { text-align: center; }
.vidh__stat b { display: block; font: 700 24px var(--font-display); color: #fff; }
.vidh__stat span { display: block; font: 500 12px var(--font-body); color: #7A99AE; margin-top: 3px; }
.vidh__div { width: 1px; background: rgba(255,255,255,.14); }

.vid-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; padding-block: 30px 48px; }
/* LIST of channels (like the old site): square photo left, details right, whole row clickable. */
.vid-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.vid-side { display: flex; flex-direction: column; gap: 16px; }

/* Channel card (mockup 1e): vertical - full-width banner on top, body below. */
.chan { display: flex; flex-direction: column; align-items: stretch; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); overflow: hidden; box-shadow: 0 1px 3px rgba(20,52,78,.04); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.chan:hover { border-color: #C9DCE8; box-shadow: 0 10px 26px rgba(20,52,78,.1); transform: translateY(-1px); }
.chan__thumb { position: relative; width: 100%; height: 140px; border-radius: var(--r-feature) var(--r-feature) 0 0; overflow: hidden; }
.chan__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chan__mono { position: absolute; inset: 0; display: grid; place-items: center; font: 800 40px var(--font-display); color: #fff; }
.chan__mono.sm { font-size: 30px; }
.chan__count { position: absolute; bottom: 10px; right: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.3); color: #fff; font: 600 11px var(--font-body); }
.chan__body { flex: 1; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; }
.chan__body h3 { font: 700 15px var(--font-body); color: var(--c-ink); }
.chan__body p { font: 400 12.5px/1.5 var(--font-body); color: var(--c-muted); margin: 5px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chan__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.chan__foot .subs { font: 500 12px var(--font-body); color: var(--c-muted); }
a.chan .cta { padding: 7px 15px; border-radius: var(--r-pill); background: #EAF2F7; color: var(--c-link); font: 600 12.5px var(--font-body); white-space: nowrap; transition: background .15s; }
a.chan:hover .cta { background: var(--c-primary); color: #fff; }
/* dashed 'missing topic' CTA tile - last grid cell (mockup 1e) */
.chan-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; border: 1.5px dashed #C9D9E4; border-radius: var(--r-feature); padding: 24px 20px; min-height: 220px; color: inherit; text-decoration: none; }
.chan-cta__ic { width: 44px; height: 44px; border-radius: 50%; background: #EAF2F7; display: grid; place-items: center; color: var(--c-primary); }
.chan-cta h3 { font: 600 14px var(--font-body); color: var(--c-ink); }
.chan-cta p { font: 400 12.5px/1.5 var(--font-body); color: var(--c-muted); margin: 0; max-width: 210px; }
.chan-cta__btn { padding: 8px 16px; border-radius: var(--r-pill); background: var(--c-primary); color: #fff; font: 600 13px var(--font-body); }
@media (max-width: 620px) { .chan__thumb { height: 160px; } }

.side-illus--vid { background: linear-gradient(135deg, #20776F, #14344E); }
.side-illus--q { background: linear-gradient(135deg, #2C6188, #14344E); }

/* recommended lessons (gradient monogram tiles) */
.rec { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.rec__row { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.rec__tile { width: 44px; height: 44px; border-radius: 11px; overflow: hidden; display: grid; place-items: center; font: 800 15px var(--font-display); color: #fff; flex: none; }
.rec__tile img { width: 100%; height: 100%; object-fit: cover; }
.rec__txt { display: flex; flex-direction: column; min-width: 0; }
.rec__row .t { font: 600 13px var(--font-body); color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec__row .s { font: 400 11.5px var(--font-body); color: var(--c-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.rec__row:hover .t { color: var(--c-brand); }

/* ============ VIDEO PLAYER (1f) ============ */
.watch-layout { display: grid; grid-template-columns: 1fr 400px; gap: 24px; align-items: start; padding-bottom: 48px; }
.watch-main > * + * { margin-top: 16px; }
.watch-side { display: flex; flex-direction: column; gap: 16px; }

.player { position: relative; aspect-ratio: 16 / 9; background: #0D2334; border-radius: var(--r-feature); overflow: hidden; }
.player__scan { position: absolute; inset: 40px 60px; border-radius: 8px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px); }
.player__play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }
.player__play span { width: 84px; height: 84px; border-radius: 50%; background: rgba(240,123,93,.95); display: grid; place-items: center; box-shadow: 0 16px 44px rgba(0,0,0,.45); color: #fff; }
.player__bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 22px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.55)); display: flex; align-items: center; gap: 14px; color: #fff; }
.player__bar .ic { color: #fff; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; }
.player__track { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); position: relative; }
.player__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 32%; background: var(--c-accent); border-radius: 3px; }
.player__thumb { position: absolute; left: 32%; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.player__time { font: 500 12px var(--font-body); color: #fff; white-space: nowrap; }
.player__video { width: 100%; height: 100%; display: block; object-fit: contain; background: #0D2334; }
.player__badge { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(13,35,52,.72); color: #fff; font: 600 11.5px var(--font-body); backdrop-filter: blur(6px); pointer-events: none; }
.player__note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: #A9C4D6; font: 500 13.5px var(--font-body); }
.player__note svg { color: var(--c-accent); flex: none; }

/* Guest gate: preview is watchable; the full lesson needs a free account. */
.vgate { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid #F3D9A8; border-radius: var(--r-feature); background: linear-gradient(180deg, #FFF9EE, #FEF4E1); }
.vgate__ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: #FBEBCB; color: #C68A1E; }
.vgate__tx { flex: 1; min-width: 0; }
.vgate__tx .t { font: 700 14px var(--font-body); color: var(--c-ink); }
.vgate__tx .s { font: 500 12.5px var(--font-body); color: #7A6636; margin-top: 3px; }
.vgate__act { display: flex; align-items: center; gap: 9px; flex: none; }
.vgate__login { padding: 10px 16px; border-radius: 10px; border: 1.5px solid #E4CE9E; background: #fff; color: #8A6A22; font: 600 12.5px var(--font-body); text-decoration: none; }
.vgate__reg { padding: 10px 18px; border-radius: 10px; background: var(--c-accent); color: #fff; font: 600 12.5px var(--font-body); text-decoration: none; }

.btn-sub.is-on { background: #E7F6F4; color: #1F7A72; }
.btn-thx.is-on { border-color: #F3C6B7; background: #FDEBE5; color: #C4563B; }
.btn-thx[disabled] { opacity: .5; cursor: not-allowed; }
textarea.vcomm__box { color: var(--c-ink); resize: vertical; min-height: 46px; font-family: var(--font-body); }

/* Lesson comments */
.vc-item { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--c-divider); }
.vc-item:first-of-type { margin-top: 4px; }
.vc-item__body { flex: 1; min-width: 0; }
.vc-item__head { display: flex; align-items: baseline; gap: 10px; }
.vc-item__head .n { font: 600 13px var(--font-body); color: var(--c-ink); text-decoration: none; }
.vc-item__head a.n:hover { color: var(--c-link); }
.vc-item__head .t { font: 400 11.5px var(--font-body); color: var(--c-faint); }
.vc-item__body p { font: 400 13.5px/1.6 var(--font-body); color: #43617A; margin-top: 5px; white-space: pre-line; }

/* Sidebar channel card */
.vchan { display: flex; align-items: center; gap: 12px; }
.vchan__tile { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #2B5F82, #14344E); color: #fff; font: 800 14px var(--font-display); }
.vchan__tx .t { font: 700 13.5px var(--font-body); color: var(--c-ink); }
.vchan__tx .s { font: 500 12px var(--font-body); color: var(--c-muted); margin-top: 3px; }
.vchan__desc { font: 400 12.5px/1.6 var(--font-body); color: #587489; margin-top: 12px; }
.chreview { padding: 12px 0; border-top: 1px solid var(--c-divider); }
.chreview:first-of-type { border-top: 0; padding-top: 4px; }
.chreview__stars { color: var(--c-amber); font-size: 13px; letter-spacing: 1.5px; }
.chreview p { margin: 6px 0 0; font: 400 13px/1.55 var(--font-body); color: #43617A; }
.chreview__who { margin-top: 6px; font: 600 12px var(--font-body); color: var(--c-muted); }

/* My dashboard (табло) */
.dash { padding-block: 28px 56px; display: flex; flex-direction: column; gap: 32px; }
.dash-sec__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dash-sec__head h2 { font: 700 19px var(--font-display); color: var(--c-ink); }
.dash-count { padding: 2px 10px; border-radius: var(--r-pill); background: var(--c-tint-blue); color: var(--c-link); font: 700 12px var(--font-body); }
.dash-people, .dash-chans, .dash-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.dash-person, .dash-chan, .dash-file { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 12px 14px; text-decoration: none; }
.dash-person:hover, .dash-chan:hover, .dash-file:hover { border-color: var(--c-primary); }
.dash-person__id, .dash-chan__tx { display: flex; flex-direction: column; min-width: 0; }
.dash-person__id .n, .dash-chan__tx .t { font: 600 13.5px var(--font-body); color: var(--c-ink); }
.dash-person__id .u, .dash-chan__tx .m { font: 400 11.5px var(--font-body); color: var(--c-muted); margin-top: 2px; }
.dash-chan__tile { width: 46px; height: 46px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff; font: 800 14px var(--font-display); }
.dash-file__t { font: 600 13px/1.4 var(--font-body); color: var(--c-ink); }
.dash-empty { padding: 20px; background: #fff; border: 1px dashed var(--c-border); border-radius: 14px; color: var(--c-muted); font: 500 13.5px var(--font-body); text-align: center; }
.dash-empty a { color: var(--c-link); font-weight: 600; }

/* Science area teachers */
.area-teachers { display: flex; flex-direction: column; gap: 6px; }
.area-teacher { display: flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; }
.area-teacher__n { font: 600 13px var(--font-body); color: var(--c-ink); }
.area-teacher:hover .area-teacher__n { color: var(--c-link); }

/* Notifications: header bell + feed page */
.nav__bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; color: var(--c-ink); text-decoration: none; }
.nav__bell:hover { background: #EAF2F7; }
.nav__bell-dot { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--c-accent); color: #fff; font: 700 10px var(--font-body); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.feed-wrap { max-width: 760px; padding: 32px 20px 56px; }
.feed-head h1 { font: 700 24px var(--font-display); color: var(--c-ink); }
.feed-head p { font: 500 13.5px var(--font-body); color: var(--c-muted); margin-top: 6px; }
.feed-list { margin-top: 20px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); overflow: hidden; }
.feed-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid var(--c-divider); text-decoration: none; }
.feed-item:last-child { border-bottom: 0; }
.feed-item:hover { background: #F6FAFC; }
.feed-item--unread { background: #EFF6FB; }
.feed-item--unread:hover { background: #E7F1F8; }
.feed-item__ic { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; background: #E4EEF4; color: var(--c-primary); }
.feed-ic-colleague_file { background: #E2F3F1; color: #1F7A72; }
.feed-ic-colleague_question { background: #FDEBE5; color: #C4563B; }
.feed-ic-colleague_textbook { background: #FBF1DC; color: #C68A1E; }
.feed-item__tx { flex: 1; min-width: 0; }
.feed-item__tx .t { font: 600 13.5px var(--font-body); color: var(--c-ink); }
.feed-item__tx .b { font: 400 13px/1.5 var(--font-body); color: #587489; margin-top: 3px; }
.feed-item__tx .m { font: 500 11.5px var(--font-body); color: var(--c-faint); margin-top: 5px; }
.feed-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; }
.feed-empty svg { color: #C7D8E4; }
.feed-empty p { font: 600 15px var(--font-body); color: var(--c-ink); margin-top: 4px; }
.feed-empty span { font: 400 13px var(--font-body); color: var(--c-muted); max-width: 400px; }

/* News article (detail) */
.detail-side { display: flex; flex-direction: column; gap: 16px; }
.news-article { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 30px 34px; }
.news-article h1 { font: 700 27px/1.3 var(--font-display); color: var(--c-ink); margin-top: 14px; }
.news-article__meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font: 500 12.5px var(--font-body); color: var(--c-muted); }
.news-article__meta a { color: var(--c-link); }
.news-article__video { position: relative; margin-top: 22px; border-radius: var(--r-feature); overflow: hidden; aspect-ratio: 16 / 9; background: #0D2334; }
.news-article__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.news-article__cover { display: block; width: 100%; margin-top: 22px; border-radius: var(--r-feature); }

/* Lite-YouTube facade (poster + play button until clicked). */
.yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.yt-facade:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-facade__poster { position: absolute; inset: 0; }
.yt-facade__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-facade__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(6, 20, 33, .22); transition: background .18s ease; }
.yt-facade:hover .yt-facade__play { background: rgba(6, 20, 33, .10); }
.yt-facade__play svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); opacity: .92; transition: transform .18s ease, opacity .18s ease; }
.yt-facade:hover .yt-facade__play svg { transform: scale(1.06); opacity: 1; }
.news-article__body { margin-top: 22px; font: 400 15.5px/1.75 var(--font-body); color: #3E5B72; white-space: pre-line; }
.rel-news { display: block; padding: 12px 0; border-top: 1px solid var(--c-divider); text-decoration: none; }
.rel-news:first-of-type { border-top: 0; }
.rel-news__t { display: block; font: 600 13.5px/1.4 var(--font-body); color: var(--c-ink); }
.rel-news:hover .rel-news__t { color: var(--c-link); }
.rel-news__d { display: block; font: 500 11.5px var(--font-body); color: var(--c-faint); margin-top: 4px; }
.rel-news__empty { font: 400 13px var(--font-body); color: var(--c-muted); }
.rel-news__all { display: inline-block; margin-top: 14px; font: 600 13px var(--font-body); color: var(--c-link); }

/* Textbook ad (detail) */
.ad-detail { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 26px 30px; }
.ad-detail__head { display: flex; gap: 18px; align-items: flex-start; }
.ad-detail .ad-thumb { width: 58px; height: 74px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; }
.ad-detail__lead { flex: 1; min-width: 0; }
.ad-detail__lead h1 { font: 700 22px/1.35 var(--font-display); color: var(--c-ink); }
.ad-detail__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ad-detail__price { flex: none; text-align: right; }
.ad-detail__price .p { font: 800 20px var(--font-display); color: var(--c-primary); white-space: nowrap; }
.ad-detail__price .p.gift { font-size: 15px; color: var(--c-teal); }
.ad-detail__body { margin-top: 20px; font: 400 14.5px/1.7 var(--font-body); color: #3E5B72; white-space: pre-line; }
.ad-detail__meta { display: flex; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--c-divider); font: 500 12.5px var(--font-body); color: var(--c-muted); }
.seller { display: flex; align-items: center; gap: 12px; }
.seller__id .n { font: 600 14px var(--font-body); color: var(--c-ink); text-decoration: none; }
.seller__id a.n:hover { color: var(--c-link); }
.seller__cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 11px 16px; border-radius: 11px; background: var(--c-primary); color: #fff; font: 600 13.5px var(--font-body); text-decoration: none; }
.seller__note { margin-top: 12px; font: 400 12px/1.5 var(--font-body); color: var(--c-faint); }

/* Profile edit */
.field.full { grid-column: 1 / -1; }
.edit-wrap { max-width: 820px; padding-block: 28px 56px; }
.edit-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 26px 30px; margin-top: 18px; }
.edit-sec { font: 700 15px var(--font-body); color: var(--c-ink); margin: 26px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--c-divider); }
.edit-sec:first-of-type { margin-top: 0; }
.edit-checks { display: flex; flex-direction: column; gap: 14px; }
.edit-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.edit-check input { width: 16px; height: 16px; margin-top: 3px; flex: none; }
.edit-check span { display: flex; flex-direction: column; }
.edit-check b { font: 600 13.5px var(--font-body); color: var(--c-ink); }
.edit-check small { font: 400 12px var(--font-body); color: var(--c-muted); margin-top: 2px; }

.vmeta { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 24px 28px; }
.vmeta__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.vmeta .eyebrow { font: 500 12px var(--font-body); color: var(--c-muted); }
.vmeta h1 { font: 700 19px/1.35 var(--font-display); color: var(--c-ink); margin-top: 6px; }
.vmeta__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 12px; font: 500 12.5px var(--font-body); color: var(--c-muted); }
.vmeta__meta .lect { display: flex; align-items: center; gap: 6px; }
.vmeta__act { display: flex; gap: 9px; flex: none; }
.btn-sub { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 11px; background: var(--c-primary); color: #fff; font: 600 13px var(--font-body); border: 0; cursor: pointer; }
.btn-thx { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 11px; border: 1.5px solid #D8E4EC; background: #fff; color: #43617A; font: 600 13px var(--font-body); cursor: pointer; }
.btn-thx svg { color: #D9915B; }

.vcomm { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 24px 28px; }
.vcomm__h { font: 700 14.5px var(--font-body); color: var(--c-ink); }
.vcomm__h span { color: var(--c-muted); font-weight: 500; }
.vcomm__in { display: flex; gap: 12px; margin-top: 16px; }
.vcomm__box { flex: 1; border: 1.5px solid #D8E4EC; border-radius: var(--r-input); padding: 12px 16px; font: 400 13.5px var(--font-body); color: var(--c-faint); }
.vcomm__send { align-self: flex-end; padding: 11px 22px; border-radius: 11px; background: var(--c-accent); color: #fff; font: 600 13px var(--font-body); border: 0; cursor: pointer; }
.vcomm__empty { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 13px 16px; border-radius: var(--r-input); background: #EAF2F7; font: 400 13px var(--font-body); color: #43617A; }
.vcomm__empty svg { color: var(--c-primary); flex: none; }

.vplaylist { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); overflow: hidden; }
.vplaylist__h { padding: 18px 22px; border-bottom: 1px solid var(--c-divider); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vplaylist__h .t { font: 700 14px var(--font-body); color: var(--c-ink); }
.vplaylist__h .s { font: 400 12px var(--font-body); color: var(--c-muted); margin-top: 3px; }
.vplaylist__h .b { padding: 5px 11px; border-radius: var(--r-pill); background: #FDEBE5; color: #C4563B; font: 600 11px var(--font-body); white-space: nowrap; flex: none; }
.plrow { display: flex; gap: 12px; align-items: center; padding: 12px 22px; }
.plrow.active { background: #EAF2F7; border-left: 3px solid var(--c-accent); }
.plrow__thumb { width: 58px; height: 38px; border-radius: 7px; flex: none; display: grid; place-items: center; }
.plrow__thumb.done { background: #DCE9F1; color: #7A93A6; }
.plrow__thumb.now { background: var(--c-navy); color: var(--c-accent); }
.plrow__tx { flex: 1; min-width: 0; }
.plrow__tx .t { font: 500 12.5px/1.35 var(--font-body); color: #43617A; }
.plrow.active .plrow__tx .t { font-weight: 600; color: var(--c-ink); }
.plrow__tx .d { font: 400 11px var(--font-body); color: var(--c-faint); margin-top: 2px; }
.plrow.active .plrow__tx .d { color: #587489; }
.plrow__check { color: var(--c-teal); flex: none; }
.vplaylist__foot { display: block; padding: 14px 22px; border-top: 1px solid var(--c-divider); font: 600 13px var(--font-body); color: var(--c-link); }

/* ============ TEXTBOOKS (1k) ============ */
.cat-blue { background: #E4EEF4; color: #2B6A8F; }
.av-red { background: #FDEBE5; color: #C4563B; }

.book-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; padding-block: 28px 48px; }
.book-side { display: flex; flex-direction: column; gap: 16px; }
.page-hero--book { background: linear-gradient(120deg, #2FA39A, #1F7A72); }
.bookh { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.bookh .sub { color: #D3EEEA; max-width: 640px; }
.bookh__cta { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 13px 26px; border-radius: var(--r-tile); background: #fff; color: #1F7A72; font: 700 14.5px var(--font-body); box-shadow: 0 8px 20px rgba(0,0,0,.15); white-space: nowrap; }
.bookh__cta:hover { color: #1F7A72; }

.ad-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.ad-row { display: flex; gap: 18px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--c-divider); }
.ad-row:last-child { border-bottom: 0; }
.ad-thumb { width: 62px; height: 82px; border-radius: 7px; flex: none; display: grid; place-items: center; color: #fff; box-shadow: 4px 4px 0 #E4EEF4; }
.ad-body { flex: 1; min-width: 0; }
.ad-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ad-titlerow .t { font: 700 15px var(--font-body); color: var(--c-ink); }
.ad-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; font: 500 12.5px var(--font-body); color: var(--c-muted); }
.ad-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.ad-price .p { font: 700 18px var(--font-display); color: var(--c-ink); white-space: nowrap; }
.ad-price .p.gift { font-size: 16px; color: var(--c-teal); }
.ad-price .cta { padding: 8px 18px; border-radius: var(--r-pill); background: var(--c-primary); color: #fff; font: 600 12.5px var(--font-body); }

.side-illus--book { background: linear-gradient(135deg, #1F7A72, #0F3A36); }
.howto-cta { display: grid; place-items: center; height: 44px; border-radius: var(--r-input); background: var(--c-accent); color: #fff; font: 700 13.5px var(--font-body); margin-top: 16px; }
.howto-cta:hover { color: #fff; }
.utiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 2px; }
.utile { aspect-ratio: 1; border-radius: var(--r-input); display: grid; place-items: center; font: 700 12px var(--font-body); }
a.utile { text-decoration: none; }
.utile.more { background: #DCE9F1; color: #43617A; font-size: 11px; }
.side-more { display: inline-block; margin-top: 14px; font: 600 13px var(--font-body); color: var(--c-link); }

/* ============ SHARE FILE (1n) ============ */
.dropzone { border: 2px dashed #9BC0D6; border-radius: var(--r-card); background: #F6FAFC; padding: 26px 22px; display: grid; place-items: center; gap: 8px; text-align: center; min-height: 150px; }
.dropzone__ic { color: #7A9BB0; }
.dropzone__t { font: 600 14px var(--font-body); color: var(--c-ink); }
.dropzone__s { font: 400 12.5px var(--font-body); color: var(--c-muted); }
.dropzone__btn { margin-top: 4px; padding: 9px 18px; border-radius: var(--r-input); border: 1.5px solid #D8E4EC; background: #fff; color: var(--c-link); font: 600 12.5px var(--font-body); cursor: pointer; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 0; background: none; padding: 0; text-align: left; }
.switch__track { width: 40px; height: 24px; border-radius: var(--r-pill); background: #C9D9E4; position: relative; flex: none; transition: background var(--dur-fast) var(--ease-out); }
.switch__track.on { background: var(--c-teal); }
.switch__knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left var(--dur-fast) var(--ease-out); }
.switch__track.on .switch__knob { left: 19px; }
.switch__lbl { font: 500 13px var(--font-body); color: #43617A; }
.ask-legal { margin-top: 14px; font: 400 12px/1.5 var(--font-body); color: var(--c-faint); }

.rules-head__chip--warn { background: #FDEBE5; color: #C4563B; }
.shared { display: flex; flex-direction: column; gap: 13px; margin-top: 14px; }
.shared__row { display: flex; gap: 11px; align-items: center; }
.shared__thumb { width: 34px; height: 44px; border-radius: 5px; background: #EAF2F7; border: 1px solid #D5E2EB; flex: none; }
.shared__row .t { font: 600 12.5px/1.35 var(--font-body); color: var(--c-ink); }
.shared__row .m { font: 400 11px var(--font-body); color: var(--c-faint); margin-top: 2px; }
.contrib { display: flex; gap: 14px; align-items: center; }
.contrib__n { font: 700 24px var(--font-display); color: var(--c-teal); flex: none; }
.contrib__t { font: 400 12.5px/1.5 var(--font-body); color: var(--c-muted-2); }
.contrib__t b { color: var(--c-ink); }

/* ============ INFO PAGES (1o) ============ */
.info-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; padding-block: 34px 48px; }
.info-nav { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.info-nav a { padding: 12px 16px; border-radius: 11px; font: 500 14px var(--font-body); color: #43617A; border-left: 3px solid transparent; }
.info-nav a:hover { color: var(--c-ink); }
.info-nav a.active { background: #EAF2F7; font-weight: 600; color: var(--c-ink); border-left-color: var(--c-primary); }
.info-main { display: flex; flex-direction: column; gap: 18px; }
.info-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-feature); padding: 36px 40px; }
.info-card h1 { font: 700 24px var(--font-display); color: var(--c-ink); }
.info-card h2 { font: 700 16px var(--font-body); color: var(--c-ink); }
.info-lead { font: 400 15px/1.75 var(--font-body); color: var(--c-text); margin-top: 16px; max-width: 760px; }
.info-lead b, .info-prose b { color: var(--c-ink); }
.info-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.info-stat { border: 1px solid var(--c-border); border-radius: 14px; padding: 20px; }
.info-stat b { font: 700 22px var(--font-display); color: var(--c-primary); }
.info-stat span { display: block; font: 400 13px var(--font-body); color: var(--c-muted); margin-top: 5px; }
.info-callout { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding: 18px 22px; border-radius: 14px; background: #F6FAFC; border: 1px solid var(--c-border); }
.info-callout__ic { width: 44px; height: 44px; border-radius: 12px; background: #E4EEF4; display: grid; place-items: center; color: var(--c-primary); flex: none; }
.info-callout div { font: 400 13.5px/1.6 var(--font-body); color: var(--c-text); }
.info-prose h3 { font: 700 15px var(--font-body); color: var(--c-ink); margin-top: 22px; }
.info-prose h3:first-child { margin-top: 0; }
.info-prose p { font: 400 14px/1.7 var(--font-body); color: var(--c-text); margin-top: 10px; max-width: 760px; }

/* FAQ accordion */
.faq { margin-top: 16px; display: flex; flex-direction: column; }
.faq__item { padding: 15px 0; border-bottom: 1px solid var(--c-divider); }
.faq__item:last-child { border-bottom: 0; }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; border: 0; background: none; padding: 0; cursor: pointer; font: 600 14px var(--font-body); color: var(--c-ink); text-align: left; }
.faq__q.open { color: var(--c-primary); }
.faq__q svg { flex: none; color: #587489; transition: transform var(--dur-fast) var(--ease-out); }
.faq__q.open svg { color: var(--c-primary); transform: rotate(180deg); }
.faq__a { font: 400 13.5px/1.65 var(--font-body); color: var(--c-text); margin-top: 10px; max-width: 720px; }

/* contact form */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.contact-grid .full { grid-column: 1 / -1; }

/* ============ CATALOG SHARED (2a/2c hero, search, bars) ============ */
.hero-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.hero-split .sub b { color: #fff; font-weight: 700; }
.page-hero--area { background: linear-gradient(120deg, #14344E 35%, #1F7A72); }
.page-hero--uni { background: linear-gradient(120deg, #14344E 35%, #2B5F82); }
.hsearch { display: flex; align-items: center; background: #fff; border-radius: 14px; padding: 5px 5px 5px 18px; width: 400px; max-width: 100%; flex: none; }
.hsearch svg { color: #7A93A6; flex: none; }
.hsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 10px 12px; font: 400 14px var(--font-body); color: var(--c-ink); }
.hsearch input::placeholder { color: #9AB0C0; }
.hsearch button { flex: none; padding: 10px 20px; border-radius: 10px; background: var(--c-accent); color: #fff; font: 600 13.5px var(--font-body); border: 0; cursor: pointer; }

.catbar { position: sticky; top: var(--nav-h); z-index: 20; background: var(--c-page); border-bottom: 1px solid var(--c-border); padding-block: 14px; }
.catbar__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.catbar__note { margin-left: auto; font: 500 13px var(--font-body); color: var(--c-muted); }
.cchip { padding: 8px 16px; border-radius: var(--r-pill); background: #fff; border: 1px solid #D8E4EC; color: #43617A; font: 500 12.5px var(--font-body); cursor: pointer; white-space: nowrap; }
.cchip.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 600; }
.aletter { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; border: 1px solid #D8E4EC; color: #43617A; font: 600 13px var(--font-body); }
.aletter.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 700; }
.g-photo { background: linear-gradient(135deg, #DCE9F1, #C9D9E4); }

.cat-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; padding-block: 26px 48px; }
.cat-side { display: flex; flex-direction: column; gap: 16px; }
.list-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.side-illus--uni { background: linear-gradient(135deg, #2B5F82, #14344E); }
.side-illus--area { background: linear-gradient(135deg, #1F7A72, #14344E); }

/* universities list (2c) */
.uni-row { display: flex; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--c-divider); }
.uni-row:last-child { border-bottom: 0; }
.uni-thumb { width: 132px; height: 88px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #8FA9BC; }
.uni-body { flex: 1; min-width: 0; }
.uni-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uni-name .n { font: 700 15px var(--font-body); color: var(--c-ink); }
.uni-desc { font: 400 13px/1.55 var(--font-body); color: var(--c-muted-2); margin-top: 7px; max-width: 640px; }
.uni-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; font: 500 12px var(--font-body); color: var(--c-muted); }
.uni-stats b { color: var(--c-link); }
.uni-cta { align-self: center; flex: none; padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid #D8E4EC; background: #fff; color: var(--c-link); font: 600 12.5px var(--font-body); }

/* sciences catalog (2a) */
/* scroll-margin clears the sticky nav (--nav-h) + sticky alphabet bar (~62px) and
   leaves ~80px of breathing room above the letter target when jumping via #letter. */
.lgroup { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; scroll-margin-top: calc(var(--nav-h) + 170px); }
.lgroup.gap { margin-top: 26px; }
.lgroup b { font: 800 22px var(--font-display); color: var(--c-primary); }
.lgroup .rule { flex: 1; height: 1px; background: #DEE9F0; }
.area-row { display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--c-divider); }
.area-ic { flex: none; width: 48px; height: 48px; border-radius: var(--r-tile); display: grid; place-items: center; }
.area-ic--blue { background: #E4EEF4; color: #377FA9; }
.area-ic--teal { background: #E2F3F1; color: #1F7A72; }
.area-mid { flex: 1; min-width: 0; }
.area-mid .top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.area-mid .top .t { font: 700 14.5px var(--font-body); color: var(--c-ink); }
.subbed { padding: 3px 9px; border-radius: var(--r-pill); background: #E7F6F4; color: #1F7A72; font: 600 10.5px var(--font-body); white-space: nowrap; }
.area-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px; font: 500 12px var(--font-body); color: var(--c-muted); }
.area-stats b { color: var(--c-link); }
.area-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.area-right .subs { font: 500 11.5px var(--font-body); color: var(--c-muted); }
.area-right .subs b { color: var(--c-ink); }
.area-acts { display: flex; gap: 7px; }
.abtn { padding: 7px 16px; border-radius: var(--r-pill); font: 600 12.5px var(--font-body); border: 0; cursor: pointer; white-space: nowrap; }
.abtn--primary { background: var(--c-primary); color: #fff; }
.abtn--ghost { padding: 7px 14px; border: 1px solid #D8E4EC; background: #fff; color: var(--c-link); }
.abtn--sub { background: #EAF2F7; color: var(--c-link); }

/* testimonial (sidebar) */
.testi__head { display: flex; align-items: center; gap: 10px; }
.testi__star { width: 32px; height: 32px; border-radius: 10px; background: #FBF1DC; display: grid; place-items: center; color: #F2B33D; flex: none; }
.testi__quote { font: italic 400 13px/1.6 var(--font-body); color: var(--c-text); margin-top: 12px; }
.testi__author { display: flex; align-items: center; gap: 9px; margin-top: 12px; font: 600 12px var(--font-body); color: var(--c-ink); }
.testi__author .role { font-weight: 400; color: var(--c-muted); }

/* ============ HUB SHARED (2b/2d) ============ */
/* pure-CSS book thumbnail */
.bthumb { position: relative; border-radius: 6px; background: linear-gradient(180deg, #FBFDFE, #EAF2F7); border: 1px solid #C9D9E4; flex: none; overflow: hidden; }
.bthumb i { position: absolute; left: 6px; right: 6px; height: 3px; background: #D5E2EB; border-radius: 2px; }
.bthumb i.a { top: 8px; height: 4px; background: #B4C9D7; }
.bthumb i.b { top: 16px; }
.bthumb .fmt { position: absolute; bottom: 4px; left: 6px; padding: 1px 4px; border-radius: 3px; color: #fff; font: 700 7.5px var(--font-body); }

/* light tab strip (on white bg) */
.ptabs { display: flex; gap: 26px; font: 600 14px var(--font-body); flex-wrap: wrap; }
.ptab { padding: 12px 4px; color: var(--c-muted); border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; white-space: nowrap; }
.ptab.active { color: var(--c-ink); border-bottom-color: var(--c-accent); }

/* hub cards + library rows */
.upcard { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); }
.upcard.flush { overflow: hidden; }
.upcard__pad { padding: 26px 30px; }
.upcard__pad h3 { font: 700 15px var(--font-body); color: var(--c-ink); margin-bottom: 10px; }
.upcard__pad p { font: 400 13.5px/1.7 var(--font-body); color: var(--c-text); }
.uweb { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font: 600 13px var(--font-body); color: var(--c-link); }
.uweb:hover { text-decoration: underline; }
.uplib__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--c-divider); }
.uplib__head h3 { font: 700 15px var(--font-body); color: var(--c-ink); }
.uplib__head a { font: 600 13px var(--font-body); color: var(--c-link); }
.uplib-row { display: flex; gap: 16px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--c-divider); }
.uplib-row:last-child { border-bottom: 0; }
.uplib-row .body { flex: 1; min-width: 0; }
.uplib-row .body .t { font: 600 13.5px var(--font-body); color: var(--c-ink); }
.uplib-row .meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font: 500 11.5px var(--font-body); color: var(--c-muted); }
.uplib-row .meta .pv { color: var(--c-link); font-weight: 600; }
.uplib-row .st { display: flex; gap: 12px; font: 600 12px var(--font-body); flex: none; }
.uplib-row .st .dl { color: var(--c-link); }
.uplib-row .st .th { color: #D9915B; }
.side-cta { background: var(--c-primary); border-radius: var(--r-feature); padding: 24px 26px; color: #fff; }
.side-cta h4 { font: 700 16px var(--font-display); color: #fff; line-height: 1.35; }
.side-cta p { font: 400 13px/1.6 var(--font-body); color: #CFE2ED; margin: 8px 0 0; }
.side-cta a { display: inline-flex; padding: 10px 20px; border-radius: 11px; background: #fff; color: var(--c-link); font: 700 13px var(--font-body); margin-top: 14px; }
.side-cta a:hover { color: var(--c-link); }

/* ============ UNIVERSITY PROFILE (2d) ============ */
.uprofile-cover { height: 190px; display: grid; place-items: center; background: linear-gradient(120deg, #2B5F82, #14344E); }
.uprofile-cover span { display: inline-flex; align-items: center; gap: 10px; font: 500 13px var(--font-body); color: rgba(255,255,255,.45); }
.uprofile-cover svg { color: rgba(255,255,255,.5); }
.uprofile-bar { background: #fff; border-bottom: 1px solid var(--c-border); }
.uprofile-id { display: flex; align-items: flex-end; gap: 22px; transform: translateY(-26px); margin-bottom: -8px; flex-wrap: wrap; }
.uprofile-logo { width: 104px; height: 104px; border-radius: 22px; background: linear-gradient(135deg, #DCE9F1, #C9D9E4); display: grid; place-items: center; border: 4px solid #fff; box-shadow: 0 8px 20px rgba(20,52,78,.14); color: #8FA9BC; flex: none; }
.uprofile-nm { flex: 1; padding-bottom: 6px; min-width: 220px; }
.uprofile-nm h1 { font: 700 22px var(--font-display); color: var(--c-ink); }
.uprofile-nm .stats { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 7px; font: 500 13px var(--font-body); color: var(--c-muted); }
.uprofile-nm .stats b { color: var(--c-link); }
.uprofile-acts { display: flex; gap: 10px; padding-bottom: 8px; flex: none; }
.pbtn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--r-input); font: 700 13.5px var(--font-body); border: 0; cursor: pointer; white-space: nowrap; }
.pbtn--primary { background: var(--c-accent); color: #fff; box-shadow: 0 6px 16px rgba(240,123,93,.35); }
.pbtn--ghost { padding: 11px 18px; border: 1.5px solid #D8E4EC; background: #fff; color: #43617A; font-weight: 600; }
.uprofile-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; padding-block: 26px 48px; }
.uprofile-main { display: flex; flex-direction: column; gap: 16px; }
.uprofile-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.up2head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.up2head h3 { font: 700 14px var(--font-body); color: var(--c-ink); }
.up2head a { font: 600 12.5px var(--font-body); color: var(--c-link); }
.upnews { display: flex; flex-direction: column; gap: 12px; }
.upnews .t { font: 600 13px/1.4 var(--font-body); color: var(--c-ink); }
.upnews .d { font: 400 11.5px var(--font-body); color: var(--c-faint); margin-top: 3px; }
.upads .row { display: flex; justify-content: space-between; gap: 12px; }
.upads .row + .row { margin-top: 12px; }
.upads .t { font: 600 13px/1.4 var(--font-body); color: var(--c-ink); }
.upads .p { font: 700 13px var(--font-body); color: var(--c-ink); flex: none; }
.upads .p.gift { color: var(--c-teal); }

/* List items made clickable: reset link chrome + subtle hover. */
a.q-row, a.news-card, a.mcard, a.vuz__row, a.uplib-row, .upnews a, .upads a.row {
    color: inherit; text-decoration: none;
    transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s, color .15s;
}
a.news-card { display: block; }
a.q-row:hover, a.mcard:hover { border-color: #C9DCE8; box-shadow: 0 6px 18px rgba(20,52,78,.08); }
a.news-card:hover { border-color: #C9DCE8; box-shadow: 0 10px 26px rgba(20,52,78,.1); transform: translateY(-1px); }
a.news-card:hover h3 { color: var(--c-brand); }
a.mcard:hover .body .t, a.q-row:hover .l1, a.vuz__row:hover .tx, .upnews a:hover .t, .upads a.row:hover .t { color: var(--c-brand); }
a.uplib-row:hover { background: #F7FAFC; }
a.uplib-row:hover .body .t { color: var(--c-brand); }

/* Clickable sidebar rows: reset link chrome, keep text from overflowing, hover cue. */
a.board__row, a.recent__row, a.shared__row, a.actv__row {
    color: inherit; text-decoration: none; transition: color .15s, opacity .15s;
}
a.board__row > div, a.board__row .board__who, a.recent__row > div, a.shared__row > div, a.actv__row > div { min-width: 0; }
.board__who { display: flex; flex-direction: column; min-width: 0; }
.board__who .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board__who .sb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent__row .tx, .shared__row .t, .actv__row .tx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.board__row:hover .nm, a.recent__row:hover .tx b, a.shared__row:hover .t, a.actv__row:hover .tx b { color: var(--c-brand); }
a.board__row .avatar, a.recent__row .avatar, a.shared__row .shared__thumb, a.actv__row .actv__dot { flex: none; }

/* Clearly distinguishable hover for every clickable sidebar list row (Топ колеги,
   Въпроси към ВУЗ, Последно споделени, Препоръчани уроци, recent/activity): a
   highlighted pill that bleeds into the card padding so the row content itself
   does not shift. */
a.board__row, a.vuz__row, a.shared__row, a.recent__row, a.rec__row, a.actv__row {
    padding: 9px 12px; margin: 0 -12px; border-radius: 10px;
    transition: background-color .15s, color .15s;
}
a.board__row:hover, a.vuz__row:hover, a.shared__row:hover, a.recent__row:hover, a.rec__row:hover, a.actv__row:hover { background: #EDF4FA; }
a.board__row:hover .board__cnt { color: var(--c-brand); }
a.vuz__row:hover .tm { color: var(--c-link); }
a.rec__row:hover .t, a.shared__row:hover .t { color: var(--c-brand); }

/* Avatar tiles ("Нови потребители") are clickable - subtle lift on hover. */
a.utile { transition: transform .15s, box-shadow .15s; }
a.utile:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(20,52,78,.16); }

/* ============ SCIENCE DETAIL (2b) ============ */
.page-hero--detail { background: var(--c-navy); }
.ahero { padding-block: 34px 0; }
.crumbs--hero a { background: rgba(255,255,255,.1); border-color: transparent; color: var(--c-navy-text); }
.crumbs--hero .cur { background: rgba(255,255,255,.18); color: #fff; }
.crumbs--hero .sep { color: rgba(255,255,255,.4); }
.ahero-id { display: flex; align-items: center; gap: 20px; margin-top: 14px; padding-bottom: 24px; flex-wrap: wrap; }
.ahero-ic { width: 76px; height: 76px; border-radius: var(--r-banner); display: grid; place-items: center; color: #fff; border: 3px solid rgba(255,255,255,.2); flex: none; }
.ahero-tt { flex: 1; min-width: 220px; }
.ahero-tt h1 { font: 700 24px var(--font-display); color: #fff; }
.ahero-tt .stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 9px; font: 500 13px var(--font-body); color: #9DBACD; }
.ahero-tt .stats b { color: #fff; }
.ahero-acts { display: flex; gap: 10px; flex: none; }
.ahero-acts .primary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--r-input); background: var(--c-accent); color: #fff; font: 700 14px var(--font-body); box-shadow: 0 6px 16px rgba(240,123,93,.4); border: 0; cursor: pointer; }
.ahero-acts .ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--r-input); border: 1.5px solid rgba(255,255,255,.3); background: none; color: #fff; font: 600 14px var(--font-body); cursor: pointer; }

.detail-body { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; padding-block: 26px 48px; }
.dfilters { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dchips { display: flex; gap: 7px; flex-wrap: wrap; }
.dchip { padding: 7px 15px; border-radius: var(--r-pill); background: #fff; border: 1px solid #D8E4EC; color: #43617A; font: 500 12.5px var(--font-body); cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s; }
a.dchip:hover { border-color: #B4C9D7; }
.dchip.active { background: var(--c-navy); border-color: var(--c-navy); color: #fff; font-weight: 600; }
.shared__badge { width: 34px; height: 44px; border-radius: 5px; flex: none; display: grid; place-items: center; color: #fff; font: 800 9px var(--font-body); }
.dsort { font: 500 12.5px var(--font-body); color: var(--c-muted); }
.dsort b { color: var(--c-ink); }
.mlist { display: flex; flex-direction: column; gap: 11px; }
.mcard { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 16px 20px; }
.mcard .body { flex: 1; min-width: 0; }
.mcard .body .t { font: 700 14.5px var(--font-body); color: var(--c-ink); }
.mcard .meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font: 500 12px var(--font-body); color: var(--c-muted); }
.mcard .meta .pv { color: var(--c-link); font-weight: 600; }
.mcard .st { display: flex; gap: 14px; font: 600 12.5px var(--font-body); flex: none; }
.mcard .st .dl { color: var(--c-link); }
.mcard .st .th { color: #D9915B; }
.seeall { display: flex; justify-content: center; margin-top: 20px; }
.seeall a { padding: 11px 26px; border-radius: var(--r-pill); background: #fff; border: 1.5px solid #D8E4EC; font: 600 13px var(--font-body); color: var(--c-link); }

.disc { display: flex; flex-direction: column; gap: 13px; margin-top: 14px; }
.disc__row { display: flex; gap: 11px; }
.disc__row .t { font: 600 13px/1.4 var(--font-body); color: var(--c-ink); }
.disc__row .m { font: 400 11.5px var(--font-body); color: var(--c-faint); margin-top: 3px; }
.disc__foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-divider); font: 600 13px var(--font-body); color: var(--c-link); display: inline-block; }
.avstack { display: flex; margin-top: 14px; }
.avstack .avatar, .avstack .uav { border: 2px solid var(--c-primary); }
.avstack .avatar + .avatar, .avstack .uav + .uav, .avstack .uav + .more, .avstack .avatar + .more { margin-left: -8px; }
.avstack .more { background: rgba(255,255,255,.18); color: #fff; font-size: 10px; }

/* interest picker (register) */
.interests { display: flex; flex-wrap: wrap; gap: 8px; max-height: 168px; overflow-y: auto; }
.chip-check { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid #C9D9E4; font: 500 12.5px var(--font-body); color: #43617A; cursor: pointer; }
.chip-check input { width: 15px; height: 15px; accent-color: var(--c-primary); }
.chip-check:has(input:checked) { background: #EAF2F7; border-color: var(--c-primary); color: var(--c-ink); }
.auth-alert { background: #FDEBE5; border: 1px solid #F3C9BC; color: var(--c-accent-strong); border-radius: var(--r-input); padding: 10px 14px; font: 500 13px var(--font-body); margin-bottom: 14px; }
.auth-single { display: flex; justify-content: center; padding-block: 56px 72px; }
.auth-sub { font: 400 13.5px/1.6 var(--font-body); color: var(--c-muted-2); margin: 8px 0 4px; }

/* ============ GLOBAL SEARCH (2e) ============ */
.hsearch--wide { width: 100%; max-width: 720px; margin-top: 18px; }
.hl { background: #FBF1DC; color: var(--c-ink); border-radius: 3px; padding: 0 2px; }
.sr-list { display: flex; flex-direction: column; gap: 16px; }
.sr-group { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; }
.sr-ghead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--c-divider); }
.sr-ghead h3 { font: 700 14px var(--font-body); color: var(--c-ink); }
.sr-ghead h3 span { color: var(--c-muted); font-weight: 500; }
.sr-ghead a { font: 600 12.5px var(--font-body); color: var(--c-link); }
.sr-row { display: flex; align-items: center; gap: 15px; padding: 15px 24px; border-bottom: 1px solid var(--c-divider); }
.sr-row:last-child { border-bottom: 0; }
.sr-row .body { flex: 1; min-width: 0; }
.sr-row .body .t { font: 600 13.5px var(--font-body); color: var(--c-ink); }
.sr-row .meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font: 500 11.5px var(--font-body); color: var(--c-muted); }
.sr-row .meta .pv { color: var(--c-link); font-weight: 600; }
.sr-row .sub { font: 400 11.5px var(--font-body); color: var(--c-muted); margin-top: 3px; }
.sr-row .st { display: flex; gap: 12px; font: 600 12px var(--font-body); flex: none; }
.sr-row .st .dl { color: var(--c-link); }
.sr-row .st .th { color: #D9915B; }
.sr-row .prof { font: 600 12px var(--font-body); color: var(--c-link); flex: none; }
.acount { padding: 5px 12px; border-radius: var(--r-pill); font: 700 11.5px var(--font-body); flex: none; white-space: nowrap; }
.acount--empty { background: #FFF3EF; border: 1px solid #F8CDBF; color: var(--c-accent-strong); }
.acount--has { background: #E7F6F4; border: 1px solid #BEE5E0; color: var(--c-teal-d); }
.sr-row--link { text-decoration: none; color: inherit; transition: background .12s ease; }
.sr-row--link:hover { background: var(--c-tint, #F6FAFC); }
.sr-empty { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 40px 28px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); }
.side-card__text { font: 400 12.5px/1.6 var(--font-body); color: var(--c-muted); margin: 6px 0 0; }
.sr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sr-vthumb { width: 56px; height: 38px; border-radius: 7px; background: var(--c-navy); flex: none; display: grid; place-items: center; color: var(--c-accent); }
.side-illus--search { background: linear-gradient(135deg, #22506F, #14344E); }
.ql-drop--block { display: flex; align-items: center; justify-content: space-between; width: 100%; border-radius: 11px; }
.sfilters { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sfilters .muted b { color: var(--c-faint); font-weight: 500; }

/* ============ MEMBER PROFILE (3a) ============ */
.mprofile-cover { position: relative; overflow: hidden; background: var(--c-navy); padding-block: 44px 0; }
.mprofile-cover > .container { position: relative; z-index: 1; }
.mblob { position: absolute; border-radius: 50%; pointer-events: none; }
.mblob--a { width: 560px; height: 560px; top: -240px; right: -40px; background: radial-gradient(circle, rgba(55,127,169,.45), transparent 65%); }
.mblob--b { width: 380px; height: 380px; bottom: -180px; left: 30%; background: radial-gradient(circle, rgba(47,163,154,.25), transparent 65%); }
.mprofile-id { display: flex; align-items: flex-end; gap: 26px; padding-bottom: 26px; flex-wrap: wrap; }
.mp-avatar { position: relative; flex: none; }
.mp-avatar__tile { width: 116px; height: 116px; border-radius: 32px; background: linear-gradient(135deg, #2FA39A, #1F7A72); display: grid; place-items: center; font: 800 34px var(--font-display); color: #fff; border: 3px solid rgba(255,255,255,.25); overflow: hidden; }
.mp-avatar__tile img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.mp-avatar__badge { position: absolute; bottom: -7px; right: -7px; width: 34px; height: 34px; border-radius: 50%; background: var(--c-amber); border: 3px solid var(--c-navy); display: grid; place-items: center; color: #fff; }
.mp-id { flex: 1; min-width: 220px; }
.mp-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mp-name h1 { font: 700 26px var(--font-display); color: #fff; }
.mp-online { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--font-body); color: #8FD3A8; }
.mp-online .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; display: inline-block; }
.mp-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; font: 500 13.5px var(--font-body); color: #9DBACD; }
.mp-meta span { display: inline-flex; align-items: center; gap: 7px; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.mp-chip { padding: 5px 13px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #CFE2ED; font: 500 12px var(--font-body); }
.mp-acts { display: flex; gap: 10px; flex: none; padding-bottom: 6px; }
.mp-acts .msg { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--r-input); background: var(--c-accent); color: #fff; font: 700 14px var(--font-body); box-shadow: 0 6px 16px rgba(240,123,93,.4); border: 0; cursor: pointer; }
.mp-acts .more { width: 46px; height: 46px; border-radius: var(--r-input); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #CFE2ED; display: grid; place-items: center; cursor: pointer; }
.mp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.12); border-radius: 16px 16px 0 0; overflow: hidden; }
.mp-stat { background: rgba(255,255,255,.06); padding: 18px 26px; }
.mp-stat b { font: 700 22px var(--font-display); color: #fff; display: block; }
.mp-stat b.amber { color: var(--c-amber); }
.mp-stat span { font: 500 12px var(--font-body); color: #9DBACD; margin-top: 3px; display: block; }

.mp-mat { display: flex; gap: 18px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 20px 22px; }
a.mp-mat { text-decoration: none; color: inherit; transition: border-color .12s ease, box-shadow .12s ease; }
a.mp-mat:hover { border-color: #C9DCE8; box-shadow: 0 4px 14px rgba(20,52,78,.06); }
.mp-mat .body { flex: 1; min-width: 0; }
.mp-mat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.mp-mat__top .t { font: 700 15.5px/1.35 var(--font-body); color: var(--c-ink); }
.mp-mat .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mp-mat .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 11px; font: 500 12.5px var(--font-body); color: var(--c-muted); }
.mp-mat .meta .st { margin-left: auto; display: flex; gap: 14px; }
.mp-mat .meta .dl { color: var(--c-link); font-weight: 600; }
.mp-mat .meta .th { color: #D9915B; font-weight: 600; }

.ach { display: flex; flex-direction: column; gap: 13px; margin-top: 14px; }
.ach__row { display: flex; gap: 12px; align-items: center; }
.ach__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.ach__row .t { font: 600 13px var(--font-body); color: var(--c-ink); }
.ach__row .s { font: 400 11.5px var(--font-body); color: var(--c-faint); margin-top: 2px; }

.actv { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.actv__row { display: flex; gap: 10px; }
.actv__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; }
.actv__row .tx { font: 400 12.5px/1.5 var(--font-body); color: var(--c-text); }
.actv__row .tx b { color: var(--c-ink); }
.actv__row .tm { font: 400 11px var(--font-body); color: var(--c-faint); margin-top: 2px; }
.report-link { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; background: none; border: 0; padding: 4px 0; font: 500 12px var(--font-body); color: var(--c-faint); cursor: pointer; transition: color .15s; }
.report-link:hover { color: var(--c-danger, #d14343); }

/* ============ REAL SQUARE IMAGERY (legacy assets are all square: 200-600px) ============ */
/* Module illustration cards => <x-side-illus> component (.side-illus__tile frames the square). */
/* Channel card cover: cover-crop the square legacy image into the top banner. */
.chan__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* University list logo: square tile, logo CONTAINED (must not crop). */
.uni-thumb { width: 96px; height: 96px; border-radius: 12px; background: #F1F6FA; border: 1px solid var(--c-border); overflow: hidden; }
.uni-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 9px; }
/* University profile logo: contained real logo on a white tile. */
.uprofile-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; padding: 12px; background: #fff; display: block; }
/* Avatars / monogram tiles: show a real square photo when present (cover), else initials. */
.avatar img, .utile img, .rec__tile img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .vid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .q-layout, .ql-layout, .ask-grid, .vid-layout, .watch-layout, .book-layout, .cat-layout, .uprofile-grid, .detail-body { grid-template-columns: 1fr; }
  .side { flex-direction: row; }
}
@media (max-width: 680px) {
  .uprofile-two, .sr-two { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .uni-row { flex-wrap: wrap; }
  .hero-split .hsearch { width: 100%; }
}
@media (max-width: 900px) {
  .info-layout { grid-template-columns: 1fr; }
  .info-nav { flex-direction: row; flex-wrap: wrap; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .news-featured { grid-template-columns: 1fr; }
  .news-compact { grid-template-columns: 1fr; }
  .vid-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .vid-main { grid-template-columns: 1fr; }
  .vidh__top { gap: 24px; }
}
@media (max-width: 900px) {
  :root { --pad: 24px; }
  .hero__cards { display: none; }
  .hero__grid { grid-template-columns: 1fr; padding-block: 48px 44px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .news-grid, .mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  /* Collapse the bottom nav row (it toggles as an overlay from the hamburger). */
  .nav-bar { height: 0; border-top: 0; overflow: visible; }
  .nav-cta { display: none; }
  .nav__links.is-open { display: flex; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; gap: 2px; background: #fff; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: 12px var(--pad); box-shadow: var(--sh-card); z-index: 40; }
  /* On mobile the hamburger shows the full list; Priority+ collapse is desktop-only. */
  .nav__links.is-open .nav-list { flex-direction: column; align-items: stretch; width: 100%; gap: 2px; }
  .nav__links.is-open .nav-list > li { width: 100%; }
  .nav__links.is-open .nav-priority-hidden { display: flex; }
  .nav__links.is-open .nav-more { display: none !important; }
  /* Save room next to the hamburger: avatar + caret only. */
  .usermenu__name { display: none; }
}
@media (max-width: 680px) {
  .vid-grid, .news-grid, .mat-grid { grid-template-columns: 1fr; }
  .side { flex-direction: column; }
  .tbanner { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
/* Project rule (Адриан): prefers-reduced-motion is intentionally NOT honoured -
   animations always run. Do not add reduced-motion gates anywhere. */

/* ============ CHANNEL LANDING (#5a "Отворен канал") ============ */
.chero { background: linear-gradient(120deg, #14344E 45%, #20776F); padding-bottom: 0; }
.chero__id { display: flex; gap: 24px; align-items: flex-start; padding-block: 6px 30px; }
.chero__ava { width: 92px; height: 92px; border-radius: 20px; flex: none; display: grid; place-items: center; overflow: hidden; border: 3px solid rgba(255,255,255,.18); color: #fff; font: 700 30px var(--font-display); }
.chero__ava img { width: 100%; height: 100%; object-fit: cover; }
.chero__tt { flex: 1; min-width: 0; color: #fff; }
.chero__tt h1 { font: 700 28px var(--font-display); color: #fff; }
.chero__tt > p { font: 400 14.5px/1.6 var(--font-body); color: #CFE2ED; margin-top: 8px; max-width: 640px; }
.chero__stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font: 500 13px var(--font-body); color: #9DBACD; }
.chero__stats b { color: #fff; }
.chero__stats a { color: #7CC0E8; }
.chero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.chero__sub { padding: 11px 22px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font: 600 14px var(--font-body); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.chero__sub.is-on { background: rgba(74,222,128,.16); border-color: rgba(74,222,128,.5); }
.chan-body { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; padding-block: 28px 44px; }
.chan-main { min-width: 0; }
.cprog { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 16px 20px; margin-bottom: 18px; }
.cprog__h { display: flex; justify-content: space-between; font: 600 13px var(--font-body); color: var(--c-ink); }
.cprog__bar { height: 8px; border-radius: 999px; background: #E7EFF4; margin-top: 10px; overflow: hidden; }
.cprog__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-teal), var(--c-primary)); }
/* Channel content tabs (Раздели / Всички уроци / Описание) - mockup 5a */
.ctabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--c-border); overflow-x: auto; }
.ctabs button { padding: 12px 16px; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--c-muted); font: 600 14px var(--font-body); cursor: pointer; margin-bottom: -1px; white-space: nowrap; }
.ctabs button:hover { color: var(--c-ink); }
.ctabs button.on { color: var(--c-ink); border-bottom-color: var(--c-accent); }
/* dark tab variant mounted in the channel hero (mockup 5a) */
.ctabs--hero { border-top: 1px solid rgba(255,255,255,.14); border-bottom: 0; gap: 26px; margin: 22px 0 0; }
.ctabs--hero button { color: #8FB6B0; padding: 14px 4px; }
.ctabs--hero button:hover { color: #fff; }
.ctabs--hero button.on { color: #fff; border-bottom-color: var(--c-accent); }
.csecs { display: flex; flex-direction: column; gap: 12px; }
.csec { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; }
.csec__h { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 18px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; }
.csec__n { width: 30px; height: 30px; border-radius: 9px; background: #EAF2F7; color: var(--c-primary); display: grid; place-items: center; font: 700 13px var(--font-body); flex: none; }
.csec__tt { flex: 1; min-width: 0; }
.csec__tt b { display: block; font: 600 14.5px var(--font-body); color: var(--c-ink); }
.csec__tt small { font: 500 12px var(--font-body); color: var(--c-muted); }
.csec__chev { display: inline-flex; color: var(--c-muted); transition: transform .18s ease; }
.csec__chev.open { transform: rotate(180deg); }
.csec__b { border-top: 1px solid var(--c-divider); }
.csec__row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--c-divider); text-decoration: none; color: inherit; transition: background .12s ease; }
.csec__row:last-child { border-bottom: 0; }
.csec__row:hover { background: #F6FAFC; }
.csec__row.is-done { opacity: .72; }
.csec__thumb { width: 60px; height: 38px; border-radius: 7px; background: var(--c-navy); display: grid; place-items: center; color: var(--c-accent); flex: none; }
/* Section lesson list (open division, mockup 5b) */
.vlist { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; }
.vlist__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--c-divider); }
.vlist__head h3 { font: 700 14.5px var(--font-body); color: var(--c-ink); }
.vlist__prog { display: flex; align-items: center; gap: 10px; font: 500 12px var(--font-body); color: var(--c-muted); }
.vlist__bar { width: 120px; height: 7px; border-radius: 5px; background: #EAF2F7; overflow: hidden; flex: none; }
.vlist__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--c-teal), var(--c-primary)); }
.vlrow { display: flex; align-items: center; gap: 16px; padding: 13px 22px; border-bottom: 1px solid var(--c-divider); text-decoration: none; color: inherit; transition: background .12s ease; }
.vlrow:last-child { border-bottom: 0; }
.vlrow:hover { background: #F6FAFC; }
.vlrow.is-now { background: #EEF5F9; border-left: 3px solid var(--c-accent); }
.vlrow__thumb { width: 72px; height: 46px; border-radius: 8px; background: var(--c-navy); display: grid; place-items: center; color: var(--c-accent); flex: none; }
.vlrow.is-done .vlrow__thumb { opacity: .72; }
.vlrow__tx { flex: 1; min-width: 0; }
.vlrow__tx b { display: block; font: 600 13.5px var(--font-body); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlrow__tx small { display: block; font: 400 11.5px var(--font-body); color: var(--c-muted); margin-top: 3px; }
.csec__lt { flex: 1; min-width: 0; font: 500 13.5px var(--font-body); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csec__lec { font: 500 11.5px var(--font-body); color: var(--c-muted); flex: none; }
.csec-empty { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 36px 24px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); }
.pill { padding: 4px 11px; border-radius: 999px; font: 700 11px var(--font-body); background: #EEF2F5; color: #7A93A6; flex: none; white-space: nowrap; }
.pill.sm { padding: 3px 10px; font-size: 10.5px; }
.pill--ok { background: #E2F3F1; color: #1F7A72; }
.pill--wip { background: #FFF3EF; color: var(--c-accent-strong); }
.cabout { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 22px 24px; margin-top: 18px; }
.cabout h3 { font: 700 16px var(--font-display); color: var(--c-ink); }
.cabout__b { margin-top: 10px; font: 400 14.5px/1.7 var(--font-body); color: #3E5B72; white-space: pre-line; }
.cmeta { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cmeta__row { display: flex; justify-content: space-between; gap: 12px; font: 500 13px var(--font-body); color: var(--c-muted); }
.cmeta__row a, .cmeta__row b { color: var(--c-ink); font-weight: 600; text-align: right; }
.cmeta__row a { color: var(--c-link); }
.crev__head { display: flex; align-items: center; justify-content: space-between; }
.crev__avg { display: inline-flex; align-items: center; gap: 4px; font: 700 13px var(--font-body); color: var(--c-amber); }
.crev { display: flex; gap: 11px; padding-top: 13px; margin-top: 13px; border-top: 1px solid var(--c-divider); }
.crev:first-of-type { border-top: 0; margin-top: 6px; }
.crev__b b { display: block; font: 600 13px var(--font-body); color: var(--c-ink); }
.crev__b p { font: 400 12.5px/1.5 var(--font-body); color: var(--c-muted); margin-top: 2px; }
.crel { display: flex; align-items: center; gap: 11px; padding: 9px 0; text-decoration: none; color: inherit; border-top: 1px solid var(--c-divider); }
.crel:first-of-type { border-top: 0; }
.crel__ava { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; font: 700 13px var(--font-body); flex: none; }
.crel__tt b { display: block; font: 600 13px var(--font-body); color: var(--c-ink); }
.crel__tt small { font: 500 11.5px var(--font-body); color: var(--c-muted); }
@media (max-width: 940px) { .chan-body { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .chero__id { flex-direction: column; } .chero__ava { width: 72px; height: 72px; } }
.chero__eyebrow { font: 600 12px var(--font-body); color: #7CC0E8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.crazdel { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.crazdel__i { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; text-decoration: none; color: var(--c-ink); font: 500 13px var(--font-body); }
.crazdel__i:hover { background: #F6FAFC; }
.crazdel__i.on { background: #EAF2F7; color: var(--c-primary); font-weight: 600; }
.crazdel__n { width: 24px; height: 24px; border-radius: 7px; background: #EAF2F7; color: var(--c-primary); display: grid; place-items: center; font: 700 11px var(--font-body); flex: none; }
.crazdel__i.on .crazdel__n { background: var(--c-primary); color: #fff; }
.crazdel__back { display: inline-block; margin-top: 12px; font: 600 12.5px var(--font-body); color: var(--c-link); text-decoration: none; }
.csec__open { display: block; padding: 11px 18px; font: 600 12.5px var(--font-body); color: var(--c-link); text-decoration: none; border-top: 1px solid var(--c-divider); }
.csec__open:hover { background: #F6FAFC; }

.vdesc { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 20px 24px; margin-top: 16px; font: 400 14.5px/1.7 var(--font-body); color: #3E5B72; white-space: pre-line; }
.edit-avatar { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.edit-avatar__pick { display: flex; flex-direction: column; gap: 6px; cursor: pointer; align-items: flex-start; }
.edit-avatar__hint { font: 500 12px var(--font-body); color: var(--c-muted); }

/* ============ QUESTION DETAIL (#6a "Отворен въпрос") ============ */
.qa-wrap { padding-block: 24px 44px; }
.qa-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.qa-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.qa-side { display: flex; flex-direction: column; gap: 16px; }
.qa-q { background: #fff; border: 1px solid var(--c-border); border-radius: 18px; padding: 26px 30px; }
.qa-q__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.qa-status { padding: 5px 12px; border-radius: 999px; font: 700 11.5px var(--font-body); margin-left: auto; white-space: nowrap; }
.qa-status--help { background: #FFF3EF; border: 1px solid #F8CDBF; color: var(--c-accent-strong); }
.qa-status--ok { background: #E7F6F4; border: 1px solid #BEE5E0; color: var(--c-teal-d); }
.qa-q h1 { font: 700 23px/1.3 var(--font-display); color: var(--c-ink); }
.qa-asker { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.qa-asker__name { font: 600 14px var(--font-body); color: var(--c-ink); text-decoration: none; }
.qa-asker__name:hover { color: var(--c-link); }
.qa-asker__meta { font: 400 12px var(--font-body); color: var(--c-muted); margin-top: 2px; }
.qa-q__body { margin-top: 18px; font: 400 14.5px/1.75 var(--font-body); color: #2A3F52; white-space: pre-line; }
.qa-q__shots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.qa-shot { width: 132px; height: 100px; border-radius: 12px; overflow: hidden; border: 1px solid var(--c-line); background: #F4F8FB; }
.qa-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.qa-shot:hover img { transform: scale(1.04); }
.qa-q__bar { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--c-divider); }
.qa-abtn { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid #D8E4EC; border-radius: 11px; background: #fff; padding: 9px 16px; font: 600 12.5px var(--font-body); color: #43617A; cursor: pointer; }
.qa-abtn:hover { border-color: #C9DCE8; }
.qa-abtn--muted { border: 0; color: var(--c-muted); padding: 9px 4px; }
.qa-abtn--danger { color: #C0392B; border-color: #F0C4BE; background: #fff; }
.qa-abtn--danger:hover { border-color: #C0392B; background: #FDECEA; }
.qa-ans__edit { margin-top: 12px; }
.qa-ans__editfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.qa-ans__editfoot > div { display: inline-flex; gap: 8px; }
.qa-report { margin-left: auto; position: relative; }
.qa-report__form { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--sh-float); padding: 12px; z-index: 30; }
.qa-answers { display: flex; flex-direction: column; gap: 14px; }
.qa-answers__head { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.qa-answers__head h2 { font: 700 17px var(--font-display); color: var(--c-ink); }
.qa-ans { background: #fff; border: 1px solid var(--c-border); border-radius: 18px; overflow: hidden; }
.qa-ans--accepted { border: 1.5px solid #BEE5E0; }
.qa-ans__banner { display: flex; align-items: center; gap: 8px; background: #E7F6F4; color: var(--c-teal-d); font: 700 12px var(--font-body); padding: 10px 24px; }
.qa-ans__row { display: flex; gap: 16px; padding: 22px 24px; }
.qa-score { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #D9915B; flex: none; padding-top: 2px; }
.qa-score b { font: 700 18px var(--font-display); color: #43617A; line-height: 1; }
.qa-ans--accepted .qa-score { color: var(--c-teal); }
.qa-ans--accepted .qa-score b { color: var(--c-teal-d); }
/* follow-question CTA card (mockup 6a) */
.qa-follow { position: relative; overflow: hidden; background: linear-gradient(135deg, #377FA9, #2B6A8F); border-radius: var(--r-feature); padding: 24px 26px; color: #fff; }
.qa-follow::after { content: ''; position: absolute; top: -80px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.08); }
.qa-follow h4 { color: #fff; font: 700 17px var(--font-display); position: relative; }
.qa-follow p { margin: 8px 0 14px; font: 400 13px/1.55 var(--font-body); color: #CFE2ED; position: relative; }
.qa-follow__btn { position: relative; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--c-link); border: 0; border-radius: var(--r-pill); padding: 10px 18px; font: 600 13px var(--font-body); cursor: pointer; }
.qa-follow__btn:hover { background: #EAF2F7; }
.qa-ans__main { flex: 1; min-width: 0; }
.qa-ans__head { display: flex; align-items: center; gap: 11px; }
.qa-ans__name { font: 600 14px var(--font-body); color: var(--c-ink); text-decoration: none; }
.qa-ans__name:hover { color: var(--c-link); }
.qa-ans__date { font: 400 12px var(--font-body); color: var(--c-muted); margin-top: 2px; }
.qa-ans__body { margin-top: 14px; font: 400 14px/1.7 var(--font-body); color: #2A3F52; white-space: pre-line; }
.qa-ans__shot { display: inline-block; margin-top: 12px; max-width: 220px; border-radius: 12px; overflow: hidden; border: 1px solid var(--c-line); background: #F4F8FB; }
.qa-ans__shot img { display: block; width: 100%; height: auto; transition: transform .2s; }
.qa-ans__shot:hover img { transform: scale(1.03); }
.qa-ans__actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.qa-tbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #E2ECF2; border-radius: 9px; background: #fff; padding: 7px 13px; font: 600 12.5px var(--font-body); color: #43617A; cursor: pointer; }
.qa-tbtn:hover { border-color: #C9DCE8; }
.qa-tbtn--on { background: #E7F6F4; border-color: #BEE5E0; color: var(--c-teal-d); }
.qa-tcount { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--font-body); color: var(--c-muted); }
.qa-empty { background: #fff; border: 1px solid var(--c-border); border-radius: 18px; padding: 34px 24px; text-align: center; color: var(--c-muted); font: 500 14px var(--font-body); }
.qa-pager { margin-top: 4px; }
.qa-form { background: #fff; border: 1px solid var(--c-border); border-radius: 18px; padding: 22px 24px; }
.qa-form h3 { font: 700 14.5px var(--font-body); color: var(--c-ink); }
.qa-form__row { display: flex; gap: 12px; margin-top: 12px; }
.qa-form__box { flex: 1; min-width: 0; }
.qa-form__box .textarea { min-height: 80px; }
.qa-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.qa-attach { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; border: 1.5px dashed #C9D9E4; color: var(--c-muted); font: 500 13px var(--font-body); cursor: pointer; max-width: 55%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: border-color .15s, color .15s; }
.qa-attach:hover { border-color: var(--c-brand); color: var(--c-brand); }
.qa-attach--on { border-style: solid; border-color: var(--c-brand); color: var(--c-brand); }
.qa-err { color: var(--c-accent-strong); font: 500 12.5px var(--font-body); margin-top: 6px; }
.qa-askcta p { font: 600 14px var(--font-body); color: var(--c-ink); margin-bottom: 12px; }
@media (max-width: 940px) { .qa-grid { grid-template-columns: 1fr; } }

/* ============ FILE CONTENT PREVIEW ============ */
/* Document viewer (mockup #1c): real extracted text on a white "page" over a soft backdrop. */
.fviewer { background: #E9F0F5; padding: 28px; }
.fviewer__stage { display: flex; align-items: center; justify-content: center; gap: 18px; }
.fviewer__arrow { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #D8E4EC; display: grid; place-items: center; color: #43617A; cursor: pointer; transition: box-shadow .15s, opacity .15s; }
.fviewer__arrow:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(20,52,78,.14); }
.fviewer__arrow:disabled { opacity: .35; cursor: default; }
.fpage { position: relative; width: 420px; max-width: 100%; background: #fff; border-radius: 10px; box-shadow: 0 14px 36px rgba(20,52,78,.16); overflow: hidden; }
.fpage__view { height: min(560px, 72vh); overflow: hidden; }
.fpage__doc { padding: 34px 40px; font: 400 14px/1.7 var(--font-body); color: #33475B; word-break: break-word; transition: transform .3s ease; will-change: transform; }
.fpage__doc p { margin: 0 0 12px; }
.fpage__doc h1, .fpage__doc h2, .fpage__doc h3, .fpage__doc h4, .fpage__doc h5, .fpage__doc h6 { font-family: var(--font-display); color: var(--c-ink); margin: 16px 0 8px; font-size: 16px; }
.fpage__doc table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; display: block; overflow-x: auto; }
.fpage__doc td, .fpage__doc th { border: 1px solid var(--c-divider); padding: 5px 9px; text-align: left; white-space: nowrap; }
.fpage__doc pre { white-space: pre-wrap; font: 400 13px/1.6 ui-monospace, SFMono-Regular, monospace; color: #33475B; margin: 0; }
.fpage__doc section { margin-bottom: 16px; }
.fpage__doc section h4 { font-size: 12.5px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.fpage__gate { position: absolute; inset: auto 0 0 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; padding: 90px 12px 22px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 72%); }
.fpage__pill { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 999px; background: #14344E; color: #fff; font: 600 12.5px var(--font-body); text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 6px 16px rgba(20,52,78,.28); }
.fpage__pill:hover { background: #1B4A6A; }
.fpage__pill--dl { background: var(--c-accent); box-shadow: 0 6px 16px rgba(240,123,93,.35); }
.fpage__pill--dl:hover { background: var(--c-accent-strong); }
.fpage__pill--ghost { background: #fff; color: #43617A; border: 1.5px solid #D8E4EC; box-shadow: none; }
.fpage__pill--ghost:hover { background: #F4F8FB; }
.fviewer__strip { display: flex; align-items: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.fthumb { position: relative; width: 44px; height: 58px; border-radius: 6px; background: #fff; border: 1px solid #D8E4EC; flex: none; cursor: pointer; padding: 0; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.fthumb:hover { border-color: #B4C9D7; }
.fthumb.is-active { border: 2px solid #377FA9; box-shadow: 0 4px 10px rgba(20,52,78,.12); }
.fthumb__pg { position: absolute; top: 5px; left: 0; right: 0; text-align: center; font: 700 10px var(--font-body); color: #93A9BA; }
.fthumb.is-active .fthumb__pg { color: #377FA9; }
.fthumb i { position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: #E4EEF4; }
.fthumb i:nth-of-type(1) { top: 24px; }
.fthumb i:nth-of-type(2) { top: 31px; right: 14px; }
.fthumb i:nth-of-type(3) { top: 38px; }
.fthumb i:nth-of-type(4) { top: 45px; right: 12px; }
.fthumb--locked { background: linear-gradient(180deg, #fff, #EAF2F7); display: grid; place-items: center; color: #7A93A6; cursor: default; overflow: visible; }
.fthumb--locked:hover { border-color: #D8E4EC; }
.fviewer__cap { margin-left: 10px; font: 500 12.5px/1.4 var(--font-body); color: #587489; }
.fviewer--none { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--c-muted); padding: 48px 24px; }
.fviewer--none p { font: 500 14px var(--font-body); max-width: 340px; margin: 0; }
@media (max-width: 560px) { .fviewer { padding: 16px; } .fviewer__stage { gap: 8px; } .fviewer__arrow { width: 34px; height: 34px; } .fpage__doc { padding: 22px 22px; } }

/* ============ NOTIFICATIONS (Известия 8a + Въпроси 8b) ============ */
.nfeed-hero { padding-block: 30px; }
.nfeed-hero__row { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.nfeed-hero__btn { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 11px; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.22); color: #fff; font: 600 13px var(--font-body); white-space: nowrap; text-decoration: none; }
.nfeed-hero__btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.nfeed { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; padding-block: 26px 48px; }
.nfeed-tabs { display: inline-flex; background: #E7EEF3; border-radius: 11px; padding: 4px; margin-bottom: 18px; }
.nfeed-tab { padding: 8px 16px; border-radius: 8px; color: #587489; font: 500 12.5px var(--font-body); text-decoration: none; }
.nfeed-tab.is-on { background: #fff; color: var(--c-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(20,52,78,.12); }
.nfeed-group-h { font: 600 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #9AB0C0; margin: 2px 4px 10px; }
.nfeed-group-h + .nfeed-card { margin-bottom: 22px; }
.nfeed-card { background: #fff; border: 1px solid var(--c-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
a.nfeed-row { display: flex; gap: 15px; align-items: center; padding: 15px 20px; border-bottom: 1px solid #F1F5F8; color: inherit; text-decoration: none; transition: background-color .15s; }
a.nfeed-row:last-child { border-bottom: 0; }
a.nfeed-row:hover { background: #F7FAFC; }
.nfeed-row.is-unread { background: #F7FAFC; }
.nfeed-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; flex: none; }
.nfeed-row.is-unread .nfeed-dot { background: var(--c-accent-strong); }
.nfeed-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; background: #E4EEF4; color: var(--c-link); }
.nfeed-ic.feed-ic-thanks { background: #FBF1DC; color: #D9915B; }
.nfeed-ic.feed-ic-question_area, .nfeed-ic.feed-ic-question_uni { background: #E2F3F1; color: #1F7A72; }
.nfeed-tx { flex: 1; min-width: 0; }
.nfeed-tx .t { font: 600 14px/1.5 var(--font-body); color: #2A3F52; }
.nfeed-tx .b { font: 400 12.5px/1.5 var(--font-body); color: var(--c-muted); margin-top: 2px; }
.nfeed-tx .m { font: 400 12px var(--font-body); color: #9AB0C0; margin-top: 3px; }
.nfeed-go { flex: none; padding: 9px 16px; border-radius: 10px; background: #F1F6F9; color: #43617A; font: 600 12.5px var(--font-body); }
a.nfeed-row:hover .nfeed-go { background: var(--c-tint-blue); color: var(--c-ink); }
.nfeed-empty { background: #fff; border: 1px solid var(--c-border); border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 54px 24px; color: var(--c-muted); }
.nfeed-empty p { font: 600 15px var(--font-body); color: var(--c-ink); margin: 4px 0 0; }
.nfeed-empty span { font: 400 13px/1.6 var(--font-body); max-width: 380px; }
.nfeed-side { display: flex; flex-direction: column; gap: 16px; }
.nfeed-count { display: flex; gap: 14px; align-items: center; }
.nfeed-count__n { font: 700 22px var(--font-display); color: var(--c-accent-strong); }
.nfeed-count__t { font: 400 12.5px/1.5 var(--font-body); color: #587489; }
.nfeed-links { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.nfeed-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #43617A; font: 500 13.5px var(--font-body); text-decoration: none; }
.nfeed-link svg { color: #7C93A6; }
.nfeed-link:hover { background: var(--c-tint-blue); color: var(--c-ink); }
.nfeed-link.is-on { background: var(--c-tint-blue); color: var(--c-ink); font-weight: 600; }
.nfeed-link.is-on svg { color: var(--c-primary); }

/* Въпроси (8b) question cards */
.nq-list { display: flex; flex-direction: column; gap: 12px; }
a.nq-card { display: flex; gap: 15px; align-items: center; background: #fff; border: 1px solid var(--c-border); border-radius: 16px; padding: 17px 20px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.nq-card:hover { border-color: #C9DCE8; box-shadow: 0 8px 22px rgba(20,52,78,.08); }
.nq-card--need { background: #F7FAFC; }
/* received-questions layout + sidebar (mockup 8b) */
.nq-col { min-width: 0; }
.nq-dot { flex: none; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: transparent; }
.nq-dot.is-on { background: var(--c-accent); }
.nq-areas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.nq-manage { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-divider); font: 600 13px var(--font-body); color: var(--c-link); }
.nq-promo { position: relative; overflow: hidden; background: var(--c-primary); border-radius: var(--r-feature); padding: 22px 24px; color: #fff; }
.nq-promo::after { content: ''; position: absolute; top: -70px; right: -50px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.1); }
.nq-promo h4 { color: #fff; font: 700 15px var(--font-display); position: relative; }
.nq-promo p { margin: 8px 0 0; font: 400 13px/1.6 var(--font-body); color: #CFE2ED; position: relative; }
.nq-mid { flex: 1; min-width: 0; }
.nq-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.nq-name { font: 700 14.5px var(--font-body); color: var(--c-ink); }
.nq-date { font: 400 12.5px var(--font-body); color: #7A93A6; }
.nq-theme { font: 600 14px/1.4 var(--font-body); color: #2A3F52; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.nq-card:hover .nq-theme { color: var(--c-brand); }
.nq-chips { display: flex; align-items: center; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.nq-ans { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 52px; border-radius: 12px; }
.nq-ans b { font: 700 17px var(--font-display); line-height: 1; }
.nq-ans span { font: 500 9.5px var(--font-body); }
.nq-ans--need { background: #FFF3EF; border: 1px solid #F8CDBF; color: #D9603F; }
.nq-ans--ok { background: #E7F6F4; border: 1px solid #BEE5E0; color: #1F7A72; }
.nq-btn { flex: none; padding: 10px 20px; border-radius: 11px; background: var(--c-link); color: #fff; font: 600 13px var(--font-body); }
.nq-btn--ghost { background: #EAF2F7; color: var(--c-link); }
@media (max-width: 900px) { .nfeed { grid-template-columns: 1fr; } .nfeed-side { order: -1; } }