/* ============================================================================
 *  RUDN Connect 🎓 — public/assets/css/style.css
 * ============================================================================
 *  One stylesheet, no build step, no framework. Sections:
 *
 *    1. tokens         7. tables, lists, timelines
 *    2. reset + base   8. people/profile cards
 *    3. layout         9. groups, chat, notifications
 *    4. header + nav  10. pagination, flash, notices
 *    5. buttons      11. admin
 *    6. cards, tiles 12. auth shell, responsive, motion
 *
 *  Palette: deep navy, academic blue, emerald accent. Dark by default with a
 *  light variant driven by [data-theme] on <html>.
 * ========================================================================== */

/* ------------------------------------------------------------- 0. fonts
   Self-hosted Manrope + Inter (SIL OFL) — the CSP allows font-src 'self'
   only, so the Google Fonts stylesheet never loaded and the brand faces
   fell back to system fonts. Subsets are split by unicode-range: a Russian
   page fetches the cyrillic + latin pair, an English page latin alone.
   Generated from fonts.googleapis.com, 2026-10-25. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./inter-400-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./inter-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('./inter-500-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('./inter-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('./inter-600-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('./inter-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./inter-700-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./inter-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./manrope-700-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./manrope-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('./manrope-800-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('./manrope-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------- 1. tokens */
:root {
    --bg:            #08111d;
    --bg-soft:       #0c1727;
    --card:          #101d2e;
    --card-raised:   #142235;
    --border:        #22334a;
    --border-soft:   #1a293d;

    --text:          #e8eef7;
    --text-body:     #c3d0e0;
    --muted:         #8fa3bd;

    --primary:       #1a6fb5;
    --primary-hover: #2a85cf;
    --primary-soft:  rgba(26, 111, 181, .16);
    --accent:        #f0a92c;

    --success:       #27a879;
    --warning:       #d99424;
    --danger:        #e2554a;
    --info:          #3f8fce;

    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 18px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
    --shadow-md: 0 8px 28px rgba(0,0,0,.32);

    --font-display: "Manrope","Plus Jakarta Sans",Inter,"Segoe UI",sans-serif;
    --font-body:    Inter,"Segoe UI",Roboto,-apple-system,sans-serif;
    --font-mono:    ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;

    --wrap: 1200px;
}

[data-theme="light"] {
    --bg:            #f4f7fb;
    --bg-soft:       #eef2f8;
    --card:          #ffffff;
    --card-raised:   #f7f9fc;
    --border:        #dfe6ef;
    --border-soft:   #e9eef5;

    --text:          #0f172a;
    --text-body:     #33415a;
    --muted:         #64748b;

    --primary:       #155f9e;
    --primary-hover: #0f4c80;
    --primary-soft:  rgba(21, 95, 158, .08);
    --accent:        #b8760f;

    --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --shadow-md: 0 10px 30px rgba(15,23,42,.08);
}

/* ------------------------------------------- language accent (EN blue / RU red)
   The interface carries the visitor's language in its colour: English keeps
   the academic blue, Russian switches every action to red. Only the primary
   tokens change, so buttons, links, focus rings, chips and the landing's
   accent line all follow — the rest of the palette is language-neutral.
   Both reds keep AA contrast against the white button label (5.4:1 dark,
   5.9:1 light); the light theme needs the deeper third value for links. */
html[lang^="ru"] {
    --primary:       #c9413a;
    --primary-hover: #e2554a;
    --primary-soft:  rgba(226, 85, 74, .16);
}
html[lang^="ru"][data-theme="light"] {
    --primary:       #b3261e;
    --primary-hover: #8f1d17;
    --primary-soft:  rgba(179, 38, 30, .10);
}

/* ------------------------------------------------------- 2. reset + base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text-body);
    font: 15.5px/1.62 var(--font-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- photographic page background -----------------------------------------
   The refinery photo sits fixed behind everything. The theme-aware overlay
   keeps AA contrast for text in both modes: near-opaque navy in dark, a
   lighter wash in light mode. Cards, the header and the footer stay solid
   surfaces so lists and forms remain fully readable over the image. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(8,17,29,.78), rgba(8,17,29,.92)),
        url("../img/bg-refinery.jpg") center 30%/cover no-repeat;
}

[data-theme="light"] body::before {
    background:
        linear-gradient(180deg, rgba(244,247,251,.82), rgba(244,247,251,.93)),
        url("../img/bg-refinery.jpg") center 30%/cover no-repeat;
}

@media print {
    body::before { display: none; }
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--text);
    line-height: 1.22;
    margin: 0 0 .5em;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.3rem); font-weight: 800; }
h2 { font-size: 1.28rem; font-weight: 700; }
h3 { font-size: 1.02rem; font-weight: 700; }

p { margin: 0 0 1em; }
a { color: var(--primary-hover); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono { font-family: var(--font-mono); font-size: .88em; }
code { color: var(--text); }

hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }

::selection { background: var(--primary); color: #fff; }

:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 2px; border-radius: 4px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

.muted  { color: var(--muted); }
.small  { font-size: .875rem; }
.strong { font-weight: 600; color: var(--text); }
.block  { display: block; }
.link   { color: var(--primary-hover); }
.text-warn { color: var(--warning); }

/* ---------------------------------------------------------- 3. layout */
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.main { flex: 1 0 auto; padding-block: 28px 64px; }

.section { margin-block: 40px; }
.section-title { margin-bottom: 6px; }
.section-sub { color: var(--muted); margin-bottom: 24px; }

.page-head {
    display: flex; flex-wrap: wrap; gap: 16px;
    align-items: flex-start; justify-content: space-between;
    margin-bottom: 22px;
}
.page-head h1 { margin-bottom: 4px; }
.page-head p { margin: 0; }

.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.gap-sm { gap: 8px; }
.gap-md { gap: 14px; }
.stack { display: flex; flex-direction: column; gap: 16px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-bottom: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.grid-2.tight { gap: 14px; }
.grid-2 + .grid-2, .grid-2 + section, section + .grid-2 { margin-top: 18px; }

.stat-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px; background: var(--border); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; margin-block: 26px;
}
.stat-item { background: var(--card); padding: 18px 20px; }
.stat-item b { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--text); }
.stat-item span { color: var(--muted); font-size: .84rem; }

/* ---- weather chip + oil & gas ticker -----------------------------------
   Server-rendered: the page ships with the numbers already in it, so no
   client-side fetch, no CSP exception, and a slow upstream costs at most
   one render's timeout (the models cache and fall back). */
.market-section { margin-top: 0; }

.weather-chip {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 20px;
    padding: 8px 16px;
    margin-bottom: 18px;
    color: var(--text);
    font-weight: 600;
    transition: all .3s cubic-bezier(.25, 1, .5, 1);
}
[data-theme="light"] .weather-chip {
    background: rgba(255, 255, 255, .35);
    border-color: rgba(255, 255, 255, .55);
}

/* hover: the chip lifts and swells; the temperature warms to the RUDN blue */
.weather-chip:hover, .weather-chip:focus-visible {
    transform: scale(1.08);
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 10px 28px -6px rgba(15, 23, 42, .35);
}
.weather-chip:hover .weather-temp, .weather-chip:focus-visible .weather-temp {
    font-size: 1.22rem;   /* ~19.5px */
    color: #2a85cf;
}
.weather-temp { font-family: var(--font-display); font-size: 1.1rem; }
.weather-city { color: var(--text); }
.weather-cond { color: var(--muted); font-weight: 500; font-size: .88rem; }

/* weather glyphs: sun, cloud, fog, rain, snow, storm — pure CSS, no images */
.weather-icon {
    width: 22px; height: 22px; position: relative; display: inline-block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.weather-icon::before, .weather-icon::after {
    content: ""; position: absolute; border-radius: 50%;
}
.wi-clear::before {
    inset: 2px 6px; background: radial-gradient(circle at 35% 35%, #ffe49a, #f0a92c);
    box-shadow: 0 0 12px 2px rgba(240, 169, 44, .45);
}
.wi-clear::after { display: none; }
.wi-partly::before {
    inset: 0 8px 6px 2px; background: radial-gradient(circle at 35% 30%, #ffe49a, #f0a92c);
}
.wi-partly::after {
    left: 4px; right: 0; bottom: 0; height: 12px; border-radius: 8px;
    background: linear-gradient(180deg, #c3d0e0, #8fa3bd);
}
.wi-cloudy::before, .wi-fog::before, .wi-drizzle::before, .wi-rain::before, .wi-snow::before, .wi-storm::before {
    left: 0; right: 0; top: 3px; height: 13px; border-radius: 8px;
    background: linear-gradient(180deg, #c3d0e0, #8fa3bd);
}
.wi-cloudy::after { display: none; }
.wi-fog::after, .wi-drizzle::after, .wi-rain::after, .wi-snow::after, .wi-storm::after {
    left: 3px; right: 3px; bottom: 1px; height: 4px; border-radius: 2px;
    background: repeating-linear-gradient(90deg, #8fa3bd 0 4px, transparent 4px 7px);
}
.wi-rain::after, .wi-drizzle::after { background: repeating-linear-gradient(90deg, #3f8fce 0 4px, transparent 4px 7px); }
.wi-snow::after { background: repeating-linear-gradient(90deg, #e8eef7 0 3px, transparent 3px 7px); }
.wi-storm::before { background: linear-gradient(180deg, #9aa8be, #5b6b85); }
.wi-storm::after { background: repeating-linear-gradient(90deg, #e2b53c 0 4px, transparent 4px 7px); }

/* ---- weather chip (Yandex-Weather look): [icon][city][temp][updated] --------
   Flat, stroke-only SVG glyphs in the RUDN blue; no gradients, no shadows,
   no fills — the exact opposite of the old CSS-drawn emoji-style icons. */
.weather-location-block {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 20px;
    padding: 4px 12px;
    margin: 0;
    color: var(--text);
    cursor: default;
    flex: none;
    white-space: nowrap;
    flex-wrap: nowrap;
    overflow: hidden;
    transition: all .3s cubic-bezier(.25, 1, .5, 1);
}
[data-theme="light"] .weather-location-block {
    background: rgba(255, 255, 255, .35);
    border-color: rgba(255, 255, 255, .55);
}

/* icon slot: fixed 24x24 box — inline SVG by default, an API <img> when the
   controller provides one; either way the layout never jumps */
.weather-icon-wrapper {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex: none;
}
.weather-icon-svg {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; line-height: 1;
    color: #0055a4;                       /* the RUDN blue strokes */
}
.weather-icon-svg svg { width: 24px; height: 24px; display: block; flex: none; }
.weather-icon-img { width: 24px; height: 24px; object-fit: contain; display: block; }

/* [city, country] — two stacked lines, 14px, grey; temperature 18px bold
   deep-navy; updated 12px light grey, all on one centred row */
.location-info {
    display: inline-flex; flex-direction: column; justify-content: center;
    line-height: 1.15;
    min-width: 0;
}
.location-city   { font-size: 14px; font-weight: 600; color: #333333; }
[data-theme="dark"] .location-city { color: #e2e8f0; }  /* AA on the dark ribbon */
.location-country { font-size: 11px; color: #999999; }

.weather-location-block .weather-temp {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 700; line-height: 1;
    color: #003366;
}
[data-theme="dark"] .weather-location-block .weather-temp { color: #7fb3e8; }

.weather-updated { font-size: 12px; line-height: 1; color: #999999; }

.weather-location-block:hover, .weather-location-block:focus-visible {
    background: rgba(255, 255, 255, .18);
}

/* ---- old landing-page weather glyph system (kept for the home market card) */
.weather-chip .weather-icon { width: 22px; height: 22px; position: relative; display: inline-block; }
.weather-chip:hover, .weather-chip:focus-visible {
    transform: scale(1.08);
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 10px 28px -6px rgba(15, 23, 42, .35);
}

/* hover: swell + lift + temperature pops to the RUDN blue */
.weather-location-block:hover, .weather-location-block:focus-visible {
    background: rgba(255, 255, 255, .2);
}
.weather-location-block:hover .weather-temp { color: #2a85cf; }

@media (max-width: 900px) {
    .weather-location-block .weather-updated { display: none; }   /* time drops first */
    .weather-location-block .location-country { display: none; }
}
@media (max-width: 768px) {
    .weather-location-block .location-info { display: none; }    /* mobile: icon + temperature */
    .weather-location-block .weather-updated { display: none; }
}
@media (max-width: 560px) {
    /* Phones keep the chip in the ribbon too: icon + degrees, no label noise. */
    .weather-location-block { padding: 3px 9px; gap: 5px; }
    .weather-location-block .weather-temp { font-size: 14px; }
    .weather-icon-wrapper,
    .weather-icon-svg,
    .weather-icon-svg svg { width: 19px; height: 19px; }

    /* The ribbon carries more now (weather + language + two toggles + two
       actions). Let it flow onto a second line instead of clipping the
       account buttons off the right edge, and give the weather chip room by
       folding the two cosmetic toggles away on phones. */
    .nav { row-gap: 8px; }
    .nav-actions { flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
    .lang-switch { padding: 1px; }
    .lang-switch a { padding: 3px 7px; }
    .nav-actions .btn { padding: 6px 10px; font-size: .78rem; }
    .nav-actions [data-sound-toggle],
    .nav-actions [data-theme-toggle] { display: none; }
    .weather-location-block { order: -1; }   /* weather reads first in the ribbon */
}

/* ticker: four benchmark cards, brand-coloured like the feature system */
.ticker-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.ticker-item {
    --tk: var(--primary);
    position: relative;
    display: flex; align-items: center; gap: 10px;
    background: color-mix(in srgb, var(--card) 96%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ticker-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--tk) 55%, var(--border));
    box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--tk) 30%, transparent);
}
.ti-brent { --tk: #38bdf8; }
.ti-wti   { --tk: #fbbf24; }
.ti-gas   { --tk: #34d399; }
.ti-ttf   { --tk: #a78bfa; }
[data-theme="light"] .ti-brent { --tk: #0284c7; }
[data-theme="light"] .ti-wti   { --tk: #b45309; }
[data-theme="light"] .ti-gas   { --tk: #059669; }
[data-theme="light"] .ti-ttf   { --tk: #7c3aed; }

.ticker-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: color-mix(in srgb, var(--tk) 12%, transparent);
    flex: none;
}
.ticker-mark svg { width: 20px; height: 20px; }

.ticker-name {
    font-family: var(--font-display); font-weight: 700;
    color: var(--text); font-size: .95rem;
}
.ticker-price { font-family: var(--font-display); color: var(--text); font-size: 1.05rem; font-weight: 800; }
.ticker-change { font-size: .8rem; font-weight: 700; margin-left: auto; }
.ticker-change.up   { color: var(--success); }
.ticker-change.down { color: var(--danger); }
.ticker-full {
    display: block; width: 100%;
    color: var(--muted); font-size: .74rem; font-weight: 500;
}
.ticker-stale .ticker-item { opacity: .85; }
.ticker-note { margin-top: 10px; }

/* --------------------------------------------------- 4. header + nav */
/* ---- header ribbon: glassmorphism -----------------------------------------
   A translucent frosted band: blur(10px) over a white/black wash, hairline
   light border and a soft inner shadow. Both themes keep the photo behind
   visible while all ribbon content stays readable. */
.site-header {
    position: sticky; top: 0; z-index: 20;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .10);
}
[data-theme="light"] .site-header {
    border-bottom-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .25);
}

/* compact ribbon: 48px (mobile keeps 44) — the content, not the bar, rules */
.nav { display: flex; align-items: center; gap: 14px; min-height: 48px; }
@media (max-width: 768px) {
    .nav { min-height: 44px; gap: 10px; }
}

.nav-logo { display: flex; align-items: center; gap: 10px; color: var(--text); }
.nav-logo:hover { text-decoration: none; }
.nav-logo-mark { display: block; width: 34px; height: 34px; object-fit: contain; border-radius: var(--radius-sm); }
.nav-logo-text strong { font-family: var(--font-display); font-weight: 800; display: block; }
.nav-logo-text small { color: var(--muted); font-size: .72rem; display: block; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.nav-links a {
    color: var(--muted); padding: 8px 11px; border-radius: var(--radius-sm);
    font-weight: 500; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px;
}
.nav-links a:hover { color: var(--text); background: var(--card); text-decoration: none; }
.nav-links a.active { color: var(--text); background: var(--primary-soft); }

/* HOME as an icon-only link: 22px house, centred, all states preserved */
.nav-home {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0;
}
.nav-home svg { width: 22px; height: 22px; display: block; flex: none; }
.nav-home:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 2px; }

/* header logo: defensive sizing so the ribbon can never collapse around it */
.nav-logo-mark {
    object-fit: cover; display: block; max-width: 100%; height: auto;
    min-width: 34px; min-height: 34px;
}

/* language switch: the ACTIVE chip carries its language's identity colour —
   RU answers in red, EN keeps the default. Server-rendered class, no JS, so
   there is nothing to flicker on load. */
.lang-switch a.active { background: var(--primary); color: #fff; }
.lang-switch a.lang-ru.active { background: #c9413a; color: #fff; }

.nav-toggle {
    display: none; background: none; border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius-sm); padding: 6px 10px; cursor: pointer; font-size: 1.1rem;
}

.nav-actions {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: nowrap;                /* the ribbon row clips instead of wrapping */
    overflow: hidden;
}

.badge-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--danger); color: #fff;
    border-radius: 999px; font-size: .72rem; font-weight: 700;
}

.lang-switch { display: flex; gap: 2px; border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.lang-switch a {
    padding: 3px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600;
    color: var(--muted); letter-spacing: .03em;
}
.lang-switch a.active { background: var(--primary); color: #fff; }
.lang-switch a:hover { text-decoration: none; }

.icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); cursor: pointer; padding: 6px 9px; line-height: 1; font-size: 1rem;
}
.icon-btn:hover { border-color: var(--primary); }

.nav-bell .badge-dot {
    position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
    border-radius: 999px; background: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent);
}

.user-chip { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.user-chip-role {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    padding: 3px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
}
.role-admin    { border-color: var(--accent); color: var(--accent); }
.role-teacher  { border-color: var(--success); color: var(--success); }
.role-employer { border-color: var(--info); color: var(--info); }
.role-alumni   { border-color: var(--primary); color: var(--primary-hover); }

/* avatars */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px; flex: 0 0 auto;
    background: var(--primary-soft); color: var(--primary-hover);
    font-family: var(--font-display); font-weight: 800; font-size: .95rem;
    letter-spacing: .02em;
}
.avatar-sm { width: 32px; height: 32px; font-size: .78rem; }
.avatar-lg { width: 76px; height: 76px; font-size: 1.5rem; }
/* uploaded photo instead of initials: cover-fit, same circle */
.avatar-img { object-fit: cover; display: inline-block; background: none; }
.avatar-group { background: var(--primary-soft); color: var(--primary-hover); font-size: 1.1rem; }

/* ------------------------------------------------------- 5. buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font: 600 .92rem/1 var(--font-body);
    padding: 10px 16px; border-radius: var(--radius);
    border: 1px solid transparent; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .06s;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }

.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); }

.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--card); color: var(--text); }

.btn-stop  { background: transparent; color: var(--danger); border-color: var(--border); }
.btn-stop:hover { background: var(--danger); color: #fff; }
.btn-start { background: var(--primary-soft); color: var(--success); }
.btn-start:hover { background: var(--success); color: #fff; }

.btn-sm { padding: 6px 11px; font-size: .84rem; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

.btn-icon {
    padding: 5px 8px; border-radius: var(--radius-sm); background: transparent;
    border: 1px solid var(--border); color: var(--muted); font-size: .9rem;
}
.btn-icon:hover { color: var(--text); border-color: var(--primary); }
.btn-icon.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.inline-form { display: inline; }
.action-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.select-compact { padding: 5px 8px; font-size: .84rem; }

/* ------------------------------------------------- 6. cards + tiles */
.card {
    background: color-mix(in srgb, var(--card) 96%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 22px;
}
.card-title { font-size: 1.02rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.count-pill {
    font-size: .74rem; font-weight: 700; color: var(--muted);
    background: var(--card-raised); border: 1px solid var(--border);
    padding: 2px 8px; border-radius: 999px;
}

.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.tile { display: flex; flex-direction: column; gap: 4px; color: var(--text-body); }
.tile:hover { text-decoration: none; }
.tile-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.tile-value { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.tile-alert { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    perspective: 1200px;
}

/* ---- feature cards: one accent hue per capability --------------------------
   The six --feat-* pairs are the color-coded identity system. Light-mode hues
   sit slightly darker than their dark-mode counterparts to hold AA contrast
   for the icon glyph; body text stays on --muted in both themes, so only the
   icon needs the per-theme tune. */
.feature-card {
    --feat:        var(--primary);
    --feat-soft:   var(--primary-soft);
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 26px 22px 22px;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature-card::before {           /* corner glow, fades in on hover */
    content: "";
    position: absolute; inset: -40% -20% auto auto;
    width: 220px; height: 220px;
    background: radial-gradient(closest-side, var(--feat-soft), transparent 70%);
    opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.feature-card::after {            /* thin gradient top border */
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--feat), transparent);
    opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.feature-card:hover, .feature-card:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--feat) 55%, var(--border));
    box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--feat) 32%, transparent);
}
.feature-card:hover::before,
.feature-card:hover::after,
.feature-card:focus-within::before,
.feature-card:focus-within::after { opacity: 1; }

.feature-num {
    position: absolute; top: 16px; right: 18px;
    font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
    color: color-mix(in srgb, var(--feat) 55%, transparent);
    letter-spacing: .08em;
}
.feature-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 14px;
    color: var(--feat);
    background: color-mix(in srgb, var(--feat) 12%, transparent);
    transition: transform .25s ease;
}
.feature-card:hover .feature-chip,
.feature-card:focus-within .feature-chip { transform: scale(1.07); }
.feature-chip svg { width: 22px; height: 22px; }

.feature-card b {
    display: block; font-family: var(--font-display);
    font-size: 1.02rem; color: var(--text); margin: 6px 0 0;
}
.feature-card p { margin: 0; color: var(--muted); font-size: .92rem; }

/* per-card accents (dark theme values) */
.feat-profile  { --feat: #818cf8; --feat-soft: rgba(99, 102, 241, .22); }
.feat-sections { --feat: #a78bfa; --feat-soft: rgba(139, 92, 246, .22); }
.feat-verify   { --feat: #34d399; --feat-soft: rgba(16, 185, 129, .22); }
.feat-connect  { --feat: #38bdf8; --feat-soft: rgba(14, 165, 233, .22); }
.feat-groups   { --feat: #fbbf24; --feat-soft: rgba(245, 158, 11, .22); }
.feat-messages { --feat: #fb7185; --feat-soft: rgba(244, 63, 94, .22); }

[data-theme="light"] .feat-profile  { --feat: #4f46e5; --feat-soft: rgba(99, 102, 241, .12); }
[data-theme="light"] .feat-sections { --feat: #7c3aed; --feat-soft: rgba(139, 92, 246, .12); }
[data-theme="light"] .feat-verify   { --feat: #059669; --feat-soft: rgba(16, 185, 129, .12); }
[data-theme="light"] .feat-connect  { --feat: #0284c7; --feat-soft: rgba(14, 165, 233, .12); }
[data-theme="light"] .feat-groups   { --feat: #b45309; --feat-soft: rgba(245, 158, 11, .14); }
[data-theme="light"] .feat-messages { --feat: #be123c; --feat-soft: rgba(244, 63, 94, .12); }

/* entrance: fade + rise, 80ms stagger, only when scrolled into view */
@media (prefers-reduced-motion: no-preference) {
    .feature-card {
        opacity: 0; transform: translateY(18px);
    }
    .feature-card.is-in {
        opacity: 1; transform: translateY(0);
        transition:
            opacity .5s ease,
            transform .5s cubic-bezier(.22, .61, .36, 1),
            border-color .25s ease,
            box-shadow .25s ease;
    }
    .feature-card.is-in:nth-child(2) { transition-delay: .08s; }
    .feature-card.is-in:nth-child(3) { transition-delay: .16s; }
    .feature-card.is-in:nth-child(4) { transition-delay: .24s; }
    .feature-card.is-in:nth-child(5) { transition-delay: .32s; }
    .feature-card.is-in:nth-child(6) { transition-delay: .40s; }
    .feature-card.is-in:hover { transform: translateY(-4px); }
}

.cta-card { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.cta-card h2 { margin-bottom: 6px; }
.cta-card p { margin: 0; }

.form-card fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.form-card legend {
    font-family: var(--font-display); font-weight: 700; color: var(--text);
    padding: 0; margin-bottom: 14px; font-size: 1rem;
}
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.queue-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 18px; padding: 14px 18px; color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.queue-banner:hover { text-decoration: none; background: var(--card-raised); }

.empty-state { text-align: center; padding: 46px 24px; }
.empty-icon { font-size: 42px; margin: 0 0 10px; }
.empty-state h2 { margin-bottom: 6px; }
.empty-state .btn { margin-top: 8px; }

/* --------------------------------------------------- 7. tables + lists */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }

.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table thead th {
    text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--muted); font-weight: 700; padding: 12px 14px;
    border-bottom: 1px solid var(--border); white-space: nowrap;
    background: var(--card-raised);
}
.table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--card-raised); }
.table-compact tbody td, .table-compact thead th { padding: 8px 10px; }
.col-actions { text-align: right; white-space: nowrap; }
.table-log td { vertical-align: top; }

.row-outcome-denied td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.row-outcome-error  td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

.detail-list { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.detail-list.spaced { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.detail-list > div { display: grid; grid-template-columns: 40% 1fr; gap: 10px; align-items: baseline; }
.detail-list dt { color: var(--muted); font-size: .84rem; }
.detail-list dd { margin: 0; color: var(--text); }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.timeline li { padding-left: 16px; border-left: 2px solid var(--border); }
.timeline-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.timeline-head b { color: var(--text); }
.timeline p { margin: 0; }

.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.bar-list li { display: grid; grid-template-columns: 140px 1fr 40px; gap: 10px; align-items: center; font-size: .9rem; }
.bar-track { height: 8px; border-radius: 999px; background: var(--border-soft); overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.bar-value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.audit-feed { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.audit-feed li { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.audit-action { color: var(--primary-hover); }
.audit-who { color: var(--text); }

/* ------------------------------------------- 8. people/profile cards */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.person-card { display: flex; flex-direction: column; gap: 12px; color: var(--text-body); }
.person-card:hover { text-decoration: none; border-color: var(--primary); }
.person-head { display: flex; gap: 12px; align-items: center; }
.person-head b { color: var(--text); display: block; }
.person-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.person-place { margin: 0; }
.person-rep { margin: 0; color: var(--accent); }

.profile-head .avatar-lg { flex: 0 0 auto; }

.tag {
    display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .76rem;
    background: var(--primary-soft); color: var(--primary-hover); font-weight: 600;
}
.tag-quiet { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.tag-ok    { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.tag-wait  { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }
.tag-rep   { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
    border: 1px solid var(--border); border-radius: 999px; font-size: .84rem; color: var(--text-body);
}
a.chip:hover { text-decoration: none; border-color: var(--primary); }
.chip-count {
    font-size: .72rem; font-weight: 700; color: var(--muted);
    background: var(--card-raised); border-radius: 999px; padding: 1px 7px;
}

.skill-dots { display: inline-flex; gap: 2px; }
.skill-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--border); }
.skill-dots span.on { background: var(--primary-hover); }

.certificate-row, .section-row, .request-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--border-soft);
}
.certificate-row:last-child, .section-row:last-child, .request-row:last-child { border-bottom: 0; }
.request-row { padding: 12px 0; }
.request-body { flex: 1; }

.add-section { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.add-section summary { cursor: pointer; color: var(--primary-hover); font-size: .88rem; }
.add-section form { margin-top: 14px; }

.stage-card { text-align: center; position: relative; overflow: hidden; }
.stage-card b { font-family: var(--font-display); }
.stage-card .stage-count {
    font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--text);
    margin: 6px 0 0;
}
.stage-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--primary); }
.stage-card.stage-graduate::before { background: var(--info); }
.stage-card.stage-alumni::before   { background: var(--accent); }
.stage-card.stage-professional::before { background: var(--success); }

/* ------------------------------------- 9. groups, chat, notifications */
.group-layout { align-items: start; }
.group-layout .forum { min-height: 300px; }

.post-form { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }

.post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.post-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.post-head > div { flex: 1; }
.post-title { margin: 0 0 6px; font-size: 1.02rem; color: var(--text); }
.post-body { margin: 0; }

.member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.member-row { display: flex; align-items: center; gap: 10px; color: var(--text-body); }
.member-row:hover { text-decoration: none; }
.member-row b { color: var(--text); display: block; }
.member-row > span:last-child { margin-left: auto; }

.thread-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.thread {
    display: flex; align-items: center; gap: 14px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; color: var(--text-body);
}
.thread:hover { text-decoration: none; border-color: var(--primary); }
.thread-body { flex: 1; min-width: 0; }
.thread-body b { color: var(--text); }
.thread-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.thread-unread { border-left: 3px solid var(--primary); }
.thread-unread .thread-body b { color: var(--primary-hover); }

.chat-card { display: flex; flex-direction: column; }
.chat { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chat-row { display: flex; }
.chat-mine { justify-content: flex-end; }
.chat-theirs { justify-content: flex-start; }
.chat-bubble {
    max-width: 72%; padding: 10px 14px; border-radius: var(--radius);
    background: var(--card-raised); border: 1px solid var(--border);
}
.chat-mine .chat-bubble { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.chat-bubble p { margin: 0 0 4px; color: var(--text); }
.chat-time { display: block; font-size: .72rem; color: var(--muted); }
.chat-empty { text-align: center; padding: 40px 0; }

.chat-form { display: flex; gap: 10px; align-items: flex-end; }
.chat-form textarea { flex: 1; resize: vertical; min-height: 56px; }
.chat-form .btn { align-self: flex-end; }

.notification-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notification-list > li {
    display: flex; align-items: center; gap: 12px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 16px;
}
.notification-list > .notification-unread { border-left: 3px solid var(--primary); }
.notification-link { display: flex; align-items: center; gap: 12px; flex: 1; color: var(--text-body); min-width: 0; }
.notification-link:hover { text-decoration: none; }
.notification-icon { font-size: 20px; }
.notification-body { flex: 1; color: var(--text); }
.notification-unread .notification-body { color: var(--primary-hover); }

/* ------------------------------- 10. pagination, flash, notices */
.pagination-bar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
    margin-top: 16px;
}
.pagination-summary { margin: 0; }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.page-link {
    padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-body); font-size: .88rem; background: var(--card);
}
.page-link:hover { border-color: var(--primary); text-decoration: none; }
.page-link.current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.page-link.disabled { opacity: .45; cursor: not-allowed; }
.page-gap { color: var(--muted); padding-inline: 4px; }

.flash {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 16px; border-radius: var(--radius); margin-bottom: 14px;
    border: 1px solid var(--border); background: var(--card); color: var(--text-body);
}
.flash-icon { flex: 0 0 auto; }
.flash-success { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.flash-error   { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); }
.flash-warning { border-color: color-mix(in srgb, var(--warning) 50%, var(--border)); }
.flash-info    { border-color: color-mix(in srgb, var(--info) 45%, var(--border)); }

.notice { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border); margin: 0 0 16px; font-size: .9rem; color: var(--text-body); }
.notice-warning { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--text); }

/* forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > label { font-size: .84rem; font-weight: 600; color: var(--text); }
.field input, .field select, .field textarea {
    width: 100%; padding: 10px 12px;
    background: var(--bg-soft); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; font-size: .94rem;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .75; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.field input:disabled, .field select:disabled { opacity: .55; cursor: not-allowed; }
.field textarea { resize: vertical; min-height: 72px; }
.field-grow { flex: 1 1 240px; }
.field-actions { justify-content: flex-end; flex: 0 0 auto; }

.hint { margin: 0; font-size: .78rem; color: var(--muted); }
.req { color: var(--danger); }

.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600;
    border: 1px solid var(--border); color: var(--text-body); white-space: nowrap;
}
.badge-role-admin    { border-color: var(--accent); color: var(--accent); }
.badge-role-teacher  { border-color: var(--success); color: var(--success); }
.badge-role-employer { border-color: var(--info); color: var(--info); }
.badge-user-active    { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); color: var(--success); }
.badge-user-suspended { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); }
.badge-outcome-success { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); color: var(--success); }
.badge-outcome-denied  { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); color: var(--warning); }
.badge-outcome-error   { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }

/* -------------------------------------------------------- 11. admin */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 18px;
}
.filter-bar .field { margin-bottom: 0; }

/* hero (landing) */
.hero {
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px;
    align-items: center; margin-block: 28px 34px;
}
.hero-copy h1 { margin-bottom: 14px; }
.hero .lead { font-size: 1.06rem; max-width: 60ch; }
.hero-actions { margin-top: 22px; gap: 10px; }
.hero-media {
    display: flex; align-items: center; justify-content: center;
    min-height: 300px; border-radius: var(--radius-lg);
    background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--primary) 25%, transparent), transparent 60%), var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
}
.hero-media picture { display: flex; width: 100%; height: 100%; }
.hero-emblem {
    width: 100%; height: 100%; min-height: 300px; object-fit: cover;
    display: block; border-radius: inherit;
}

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--muted); font-weight: 600; margin-bottom: 12px;
}

/* ---- 11c. avatar upload (My Profile) ---------------------------------------
   One interactive block: the round photo with a pencil affordance, a plain
   button beside it, and a dialog with preview + upload. Palette follows the
   sidebar tokens: RUDN blue on white, muted grey text. */
.avatar-block {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 20px;
}
.avatar-photo {
    position: relative;
    width: 132px; height: 132px;
    border-radius: 50%;
    border: 0; padding: 0;
    background: none; cursor: pointer;
    flex: 0 0 auto;
    transition: box-shadow .3s cubic-bezier(.25, 1, .5, 1), transform .3s cubic-bezier(.25, 1, .5, 1);
}
.avatar-photo img,
.avatar-photo .avatar {
    width: 132px; height: 132px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.avatar-photo:hover,
.avatar-photo:focus-visible {
    box-shadow: 0 0 0 4px var(--sb-hover, #e6f0ff), 0 12px 26px -10px rgba(0, 85, 164, .45);
    transform: translateY(-2px);
}
.avatar-photo:focus-visible { outline: 2px solid #0055a4; outline-offset: 3px; }
.avatar-xl { font-size: 2.1rem; }
.avatar-pencil {
    position: absolute; right: 4px; bottom: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #0055a4; color: #fff;
    font-size: .9rem;
    box-shadow: 0 2px 8px rgba(0, 51, 102, .4);
    pointer-events: none;
}
.avatar-block-text { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.avatar-modal {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .5);
    padding: 20px;
}
.avatar-modal[hidden] { display: none; }
.avatar-modal-card {
    width: 100%; max-width: 360px;
    background: #ffffff; color: #333333;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .55);
    display: flex; flex-direction: column; gap: 14px;
    align-items: center;
}
.avatar-modal-card h3 { color: #003366; margin: 0; font-size: 1.1rem; }
.avatar-preview {
    width: 180px; height: 180px; border-radius: 50%;
    overflow: hidden;
    background: #f1f5fb;
    display: flex; align-items: center; justify-content: center;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-preview .avatar { width: 180px; height: 180px; border-radius: 50%; font-size: 2.6rem; }
.avatar-pick { position: relative; overflow: hidden; }
.avatar-error {
    margin: 0; color: #c0392b; font-size: .85rem; text-align: center;
}
.avatar-modal-actions { display: flex; gap: 10px; justify-content: center; }
@media (max-width: 560px) {
    .avatar-block { flex-direction: column; align-items: flex-start; }
}

.admin-ribbon-wrap { margin-bottom: 22px; }
.admin-ribbon-mobile { display: none; }

/* ---- 11d. admin ribbon -------------------------------------------------------
   The admin console's second ribbon, directly under the header. A deep
   slate bar with rounded corners and an inset shadow — the "quietly
   expensive" look of a university corporate dashboard. Per-tab designer
   hue (--tab-hue, inline) colours ONLY the icon and its underline; the
   label stays #CBD5E1 in every state, hover included, so long sessions
   stay easy on the eyes. */
.admin-tabs {
    display: flex; align-items: stretch; justify-content: center; gap: 4px;
    min-height: 56px;
    margin: 10px auto 0;
    max-width: var(--wrap);
    padding: 0 10px;
    background: #1e293b;
    border-radius: 12px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .3);
    overflow-x: auto;                       /* <768px: horizontal scroll */
    scroll-behavior: smooth; overscroll-behavior-x: contain;
    white-space: nowrap;
    scrollbar-width: thin;
}

.admin-tab {
    --tab-hue: #3b82f6;
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 0 16px;
    color: #cbd5e1;                          /* constant — never changes */
    font-size: 14px; font-weight: 500; line-height: 1.4;
    white-space: nowrap;
    border-radius: 8px;
    transition: background-color .2s cubic-bezier(.25, 1, .5, 1),
                filter .2s cubic-bezier(.25, 1, .5, 1);
}
/* hairline dividers between the items */
.admin-tab + .admin-tab { border-left: 1px solid rgba(255, 255, 255, .08); }

.admin-tab-icon {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tab-hue);
    transition: filter .2s cubic-bezier(.25, 1, .5, 1), color .2s ease;
}
.admin-tab-icon svg { width: 22px; height: 22px; display: block; flex: none; }

/* hover: soft wash + slightly brighter icon + 2px underline of its own hue */
.admin-tab:hover,
.admin-tab:focus-visible {
    background: rgba(255, 255, 255, .06);
    color: #cbd5e1;
    text-decoration: none;
}
.admin-tab:hover .admin-tab-icon { filter: brightness(1.15); }
.admin-tab:hover::after,
.admin-tab:focus-visible::after {
    content: "";
    position: absolute; left: 14px; right: 14px; bottom: 8px;
    height: 2px; border-radius: 4px;
    background: var(--tab-hue);
}

/* active: stronger wash, glowing icon, 3px underline — text untouched */
.admin-tab.is-active { background: rgba(255, 255, 255, .12); }
.admin-tab.is-active .admin-tab-icon {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tab-hue) 55%, transparent));
}
.admin-tab.is-active::after {
    content: "";
    position: absolute; left: 14px; right: 14px; bottom: 8px;
    height: 3px; border-radius: 4px;
    background: var(--tab-hue);
}

.admin-tab:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }

/* 768–991px: compact — smaller icons, tighter rhythm, smaller text */
@media (max-width: 991px) and (min-width: 768px) {
    .admin-tabs { gap: 2px; }
    .admin-tab { padding: 0 10px; font-size: 13px; }
    .admin-tab-icon svg { width: 18px; height: 18px; }
}

/* <768px: the ribbon becomes a full-width scrolling strip with side padding,
           and the content gets a little air below it */
@media (max-width: 767px) {
    .admin-ribbon-wrap { padding-inline: 0; margin-bottom: 14px; }
    .admin-tabs { border-radius: 0; margin-top: 0; }
    .admin-ribbon-mobile { display: block; height: 10px; }
}

@media print { .admin-tabs { display: none; } }

/* ---- 11e. graduation year picker --------------------------------------------
   Dependency-free year picker for the profile form. A styled button opens a
   popover with a 4-column scrollable grid of years, newest first. The hidden
   input with name="graduation_year" keeps the payload byte-compatible. */
.year-picker { position: relative; }

.year-picker-button {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: var(--card-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: 500 .95rem var(--font-body);
    text-align: left;
    cursor: pointer;
}
.year-picker-button:hover { border-color: var(--primary); }
.year-picker-button:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 2px; }
.year-picker-placeholder { color: var(--muted); }
.year-picker-chevron { color: var(--muted); font-size: .8rem; }

.year-picker-clear {
    position: absolute; right: 38px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--muted);
    cursor: pointer; font-size: .9rem; line-height: 1;
}
.year-picker-clear:hover { color: var(--danger); background: var(--primary-soft); }

.year-picker-popover {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
    width: min(320px, 90vw);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 10px;
}
.year-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    max-height: 264px;                 /* ~6 rows visible, the rest scrolls */
    overflow-y: auto;
    scrollbar-width: thin;
}
.year-picker-cell {
    padding: 8px 4px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font: 500 .88rem var(--font-body);
    cursor: pointer;
    text-align: center;
}
.year-picker-cell:hover { background: var(--primary-soft); }
.year-picker-cell:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: -2px; }
.year-picker-cell.is-selected {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 700;
}

.year-picker-error {
    margin: 6px 0 0; color: var(--danger); font-size: .82rem;
}

@media (max-width: 560px) {
    .year-picker-popover { width: 100%; }
    .year-picker-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .year-picker-cell, .year-picker-button { transition: none; }
}
@media print { .year-picker-popover { display: none; } }

/* ---- 11f. messenger (three-pane LinkedIn-style layout) ----------------------
   [list | thread | details]. The list is server-rendered with every thread;
   search filters it client-side. Palette: calm slate surfaces + indigo/violet
   accents for selection and action, teal for online/connected. Nothing here
   relies on colour alone — current/unread also carry aria + weight. */
.messenger {
    --ms-bg:      #f6f7fb;
    --ms-panel:   #ffffff;
    --ms-border:  #e4e7f0;
    --ms-accent:  #4f46e5;   /* indigo — selection, send */
    --ms-accent-2:#7c3aed;   /* violet — hover tint */
    --ms-teal:    #0d9488;   /* online / connected dot */
    --ms-radius:  14px;

    display: grid;
    grid-template-columns: 258px minmax(0, 1fr) 280px;   /* narrower list, wider thread */
    gap: 14px;
    min-height: 70vh;
    background: var(--ms-bg);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    overflow: hidden;
}
[data-theme="dark"] .messenger {
    --ms-bg:     #0c1727;
    --ms-panel:  #101d2e;
    --ms-border: #22334a;
}

.messenger-list {
    background: var(--ms-panel);
    border-right: 1px solid var(--ms-border);
    display: flex; flex-direction: column;
    min-height: 0;
}
.messenger-list-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 16px 8px;
}
.messenger-title { font-family: var(--font-display); font-size: 1.15rem; margin: 0; }
.messenger-compose svg { width: 18px; height: 18px; }
.messenger-compose { color: var(--ms-accent); border-color: color-mix(in srgb, var(--ms-accent) 40%, var(--ms-border)); }

.messenger-search {
    display: flex; align-items: center; gap: 8px;
    margin: 6px 14px 10px;
    padding: 0 10px;
    background: var(--ms-bg);
    border: 1px solid var(--ms-border);
    border-radius: 10px;
}
.messenger-search svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.messenger-search input {
    border: 0; background: none; outline: none;
    padding: 9px 0; width: 100%;
    color: var(--text); font: 500 .88rem var(--font-body);
}
.messenger-search input::placeholder { color: var(--muted); }
.messenger-search:focus-within { border-color: var(--ms-accent); }

.messenger-tabs {
    display: flex; gap: 4px;
    padding: 0 14px 10px;
    border-bottom: 1px solid var(--ms-border);
}
.messenger-tab {
    flex: 1; text-align: center;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--muted);
    font-size: .84rem; font-weight: 600;
}
.messenger-tab:hover { background: color-mix(in srgb, var(--ms-accent) 8%, transparent); color: var(--text); text-decoration: none; }
.messenger-tab.is-active { background: color-mix(in srgb, var(--ms-accent) 14%, transparent); color: var(--ms-accent); }

.messenger-threads {
    list-style: none; margin: 0; padding: 6px;
    overflow-y: auto; flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: thin;
}
.messenger-thread {
    display: flex; align-items: center; gap: 10px;
    padding: 10px;
    border-radius: 10px;
    color: var(--text-body);
}
.messenger-thread:hover { background: color-mix(in srgb, var(--ms-accent-2) 7%, transparent); text-decoration: none; }
.messenger-thread:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: -2px; }
.messenger-thread.is-current {
    background: color-mix(in srgb, var(--ms-accent) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--ms-accent);
}
.messenger-thread.is-unread .messenger-thread-body b { color: var(--text); }
.messenger-thread-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.messenger-thread-body b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messenger-thread-preview {
    font-size: .8rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.messenger-thread.is-unread .messenger-thread-preview { color: var(--text-body); font-weight: 600; }
.messenger-thread-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }

/* compact thread time: clock icon + "5м"-style abbreviation, muted, small.
   The full phrase stays available as the hover tooltip (title attr). */
.messenger-thread-time {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--muted); font-size: .76rem; line-height: 1;
    white-space: nowrap;
}
.messenger-time-icon { width: 12px; height: 12px; opacity: .75; flex: none; }
.messenger-thread.is-unread .messenger-thread-time { color: var(--text-body); }

.messenger-empty {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 40px 20px; text-align: center; color: var(--muted);
}
.messenger-empty-art { width: 120px; height: auto; }
.messenger-empty p { margin: 0; }

/* ---- availability: avatar + presence dot (online teal / offline grey).
   The tooltip and the sr-only text always spell the status out; colour is
   only the second signal. */
.messenger-avatar-wrap { position: relative; flex: none; }
.messenger-presence {
    position: absolute; right: -2px; bottom: -2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2.5px solid var(--ms-panel);
    display: inline-flex; align-items: center; justify-content: center;
}
.messenger-presence-dot { width: 6px; height: 6px; border-radius: 50%; background: #9aa6b8; }
.messenger-presence.is-online .messenger-presence-dot {
    background: var(--ms-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-teal) 25%, transparent);
}
.messenger-presence.is-online { cursor: help; }
.messenger-presence.is-offline { cursor: help; }
.messenger-no-results { padding: 18px 16px; margin: 0; text-align: center; color: var(--muted); font-size: .88rem; }

/* ---- thread pane ---- */
.messenger-thread-pane {
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ms-accent) 3%, var(--ms-panel)), var(--ms-panel) 160px);
    min-width: 0; min-height: 0;
}
.messenger-thread-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ms-border);
    background: var(--ms-panel);
}
.messenger-back { display: none; }
.messenger-thread-title { flex: 1 1 auto; min-width: 0; }
.messenger-thread-title h2 { font-size: 1rem; margin: 0; }
.messenger-thread-title p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messenger-details-toggle svg { width: 16px; height: 16px; }

.messenger-history {
    list-style: none; margin: 0; padding: 18px 22px;
    flex: 1 1 auto; overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
    min-height: 0;
    scrollbar-width: thin;
}
.messenger-history-empty { align-items: center; justify-content: center; }

.chat-day {
    align-self: center;
    padding: 3px 14px;
    background: color-mix(in srgb, var(--ms-accent) 8%, transparent);
    border-radius: 999px;
    color: var(--muted); font-size: .74rem; font-weight: 600;
}

/* bubbles: mine indigo, theirs panel — plus alignment so colour never alone */
.chat-row { display: flex; }
.chat-row.chat-mine { justify-content: flex-end; }
.chat-row.chat-theirs { justify-content: flex-start; }
.chat-bubble {
    max-width: min(72%, 520px);
    padding: 9px 13px;
    border-radius: 14px;
    background: var(--card-raised);
    border: 1px solid var(--ms-border);
}
.chat-mine .chat-bubble {
    background: linear-gradient(135deg, var(--ms-accent), color-mix(in srgb, var(--ms-accent-2) 70%, var(--ms-accent)));
    border-color: transparent;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-theirs .chat-bubble { border-bottom-left-radius: 4px; }
.chat-bubble p { margin: 0 0 3px; font-size: .92rem; line-height: 1.45; }
.chat-time { font-size: .68rem; opacity: .75; display: block; }
.chat-mine .chat-time { text-align: right; }

/* ---- message priority: a small badge above the bubble text.
   Urgent = coral with alert icon; Attention = amber with info icon.
   Clicking the badge removes it (client-side; reload restores the sender's
   marking). The marker itself ([!]/[?]) is stripped from the displayed text. */
.chat-priority {
    display: inline-flex; align-items: center; gap: 5px;
    margin: 0 0 6px;
    padding: 3px 9px 3px 7px;
    border: 0; border-radius: 999px;
    font: 700 .68rem/1 var(--font-body);
    letter-spacing: .04em; text-transform: uppercase;
    cursor: pointer;
}
.chat-priority svg { width: 12px; height: 12px; }
.chat-priority.is-urgent { background: #fee2e2; color: #b91c1c; }
.chat-priority.is-urgent:hover { background: #fecaca; }
.chat-priority.is-attention { background: #fef3c7; color: #b45309; }
.chat-priority.is-attention:hover { background: #fde68a; }
.chat-theirs .chat-priority.is-urgent { background: #fecdd3; color: #9f1239; }
.chat-theirs .chat-priority.is-attention { background: #fde9b8; color: #92400e; }
.chat-priority:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }

.chat-bubble.is-urgent { border-color: color-mix(in srgb, #ef4444 45%, var(--ms-border)); }
.chat-bubble.is-attention { border-color: color-mix(in srgb, #f59e0b 45%, var(--ms-border)); }

/* composer: priority toggle + send, stacked */
.messenger-composer-side { display: flex; flex-direction: column; gap: 6px; align-self: flex-end; }
.messenger-priority-btn {
    width: 44px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none;
    border: 1px solid var(--ms-border);
    border-radius: 10px;
    color: var(--muted);
    cursor: pointer;
}
.messenger-priority-btn svg { width: 16px; height: 16px; }
.messenger-priority-btn:hover { color: #b45309; border-color: color-mix(in srgb, #f59e0b 45%, var(--ms-border)); }
.messenger-priority-btn:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
.messenger-priority-btn.is-armed { color: #b91c1c; border-color: color-mix(in srgb, #ef4444 55%, var(--ms-border)); background: #fee2e2; }

.messenger-composer {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--ms-border);
    background: var(--ms-panel);
}
.messenger-composer textarea {
    flex: 1 1 auto; resize: none;
    border: 1px solid var(--ms-border);
    border-radius: 12px;
    background: var(--ms-bg);
    color: var(--text);
    padding: 10px 14px;
    font: 500 .92rem/1.4 var(--font-body);
}
.messenger-composer textarea:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 1px; }
.messenger-send {
    background: linear-gradient(135deg, var(--ms-accent), var(--ms-accent-2));
    border: 0;
    flex: none;
    width: 44px; height: 44px;           /* icon-only square, touch-friendly */
    padding: 0;
}
.messenger-send svg { width: 18px; height: 18px; }
.messenger-composer-locked { margin: 0; padding: 14px 16px; border-top: 1px solid var(--ms-border); }

/* ---- details pane ---- */
.messenger-details {
    background: var(--ms-panel);
    border-left: 1px solid var(--ms-border);
    padding: 18px 16px;
    overflow-y: auto;
    min-height: 0;
}
.messenger-details[hidden] { display: none; }
.messenger-details-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.messenger-details-card h3 { font-size: 1.02rem; margin: 8px 0 0; }
.messenger-details-status {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 4px 0 8px;
    font-size: .8rem; font-weight: 600; color: var(--muted);
    padding: 3px 10px;
    border: 1px solid var(--ms-border);
    border-radius: 999px;
}
.messenger-details-status.is-connected { color: var(--ms-teal); border-color: color-mix(in srgb, var(--ms-teal) 40%, var(--ms-border)); }
.messenger-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.is-connected .messenger-dot { background: var(--ms-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-teal) 20%, transparent); }

.messenger-details-list { width: 100%; margin: 8px 0; text-align: left; }
.messenger-details-list div { padding: 7px 0; border-bottom: 1px solid var(--ms-border); }
.messenger-details-list dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.messenger-details-list dd { margin: 2px 0 0; font-size: .88rem; color: var(--text-body); }

.messenger-details-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }

/* ---- responsive ---- */
@media (max-width: 1200px) {
    .messenger { grid-template-columns: 270px minmax(0, 1fr); }
    .messenger-details { display: none; }        /* tablet: panel collapses */
    .messenger-details.is-open { display: block; position: absolute; right: 14px; top: 14px; bottom: 14px; width: 280px; z-index: 30; box-shadow: var(--shadow-md); }
    .messenger { position: relative; }
}
@media (max-width: 820px) {
    .messenger { grid-template-columns: 1fr; }
    .messenger-list { border-right: 0; }
    .messenger-thread-pane { display: none; }
    .messenger.has-open-thread .messenger-list { display: none; }
    .messenger.has-open-thread .messenger-thread-pane { display: flex; }
    .messenger-back { display: inline-flex; }     /* the way back to the list */
}
@media print { .messenger-list, .messenger-details { display: none; } }

/* ---- 11g. registration wizard (Industrial Digital Identity) -----------------
   Three-step register: Identity → Security → Agreements. Palette: petroleum
   navy base (inherited), steel text, energy-amber progress, tech-cyan focus.
   All steps live in one form; the payload is unchanged. */
.register-card {
    --rw-amber:   #e7a92b;
    --rw-cyan:    #2bc8d9;
    --rw-steel:   #a8b4be;
    --rw-navy:    #0b3048;
    position: relative;
    border-top: 3px solid var(--rw-amber);
}
.register-card .auth-title { margin-top: 6px; }

.register-progress {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 18px;
}
.register-progress-label {
    font: 700 .74rem/1 var(--font-mono);
    letter-spacing: .08em;
    color: var(--rw-steel);
    white-space: nowrap;
}
.register-progress-bar {
    flex: 1 1 auto; height: 5px;
    background: color-mix(in srgb, var(--rw-steel) 22%, transparent);
    border-radius: 999px;
    overflow: hidden;
}
.register-progress-bar [data-register-fill] {
    display: block; height: 100%; width: 33%;
    background: linear-gradient(90deg, var(--rw-amber), var(--rw-cyan));
    border-radius: 999px;
    transition: width .3s cubic-bezier(.25, 1, .5, 1);
}

.register-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.register-step[hidden] { display: none; }
.register-step-legend {
    display: flex; align-items: center; gap: 10px;
    padding: 0 0 12px;
    font: 800 .8rem/1 var(--font-display);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--rw-steel);
}
.register-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border: 1px solid var(--rw-amber);
    border-radius: 8px;
    color: var(--rw-amber);
    font: 700 .8rem/1 var(--font-mono);
}
.register-step .field.has-error input,
.register-step .field.has-error select { border-color: var(--danger); }
.register-step-error { color: var(--danger); font-size: .84rem; margin: 0; }
.register-step-hint { margin: 4px 0 0; }

.register-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 8px;
}
.register-nav-spacer { flex: 1 1 auto; }

/* password field with the eye toggle inside */
.pwd-field { position: relative; }
.pwd-field input { width: 100%; padding-right: 44px; }
.pwd-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 6px;
    color: var(--muted); cursor: pointer;
}
.pwd-toggle svg { width: 17px; height: 17px; }
.pwd-toggle:hover { color: var(--text); }
.pwd-toggle.is-revealed { color: var(--rw-cyan); }
.pwd-toggle:focus-visible { outline: 2px solid var(--rw-cyan); outline-offset: 2px; }

/* strength meter — NIST style: length + common-list, no char-class bingo */
.pwd-meter { margin: 10px 0 4px; }
.pwd-meter-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    margin-bottom: 5px;
}
.pwd-meter-title {
    font: 700 .66rem/1 var(--font-mono);
    letter-spacing: .12em; color: var(--rw-steel);
}
.pwd-meter-label { font-size: .8rem; font-weight: 600; color: var(--text); }
.pwd-meter-bar {
    height: 6px;
    background: color-mix(in srgb, var(--rw-steel) 22%, transparent);
    border-radius: 999px; overflow: hidden;
}
.pwd-meter-bar [data-meter-fill] {
    display: block; height: 100%; width: 0%;
    border-radius: 999px;
    transition: width .3s cubic-bezier(.25, 1, .5, 1), background-color .3s ease;
}
.pwd-meter-bar .is-weak { background: var(--danger); }
.pwd-meter-bar .is-fair { background: var(--warning); }
.pwd-meter-bar .is-strong { background: var(--success); }
.pwd-meter-bar .is-very { background: linear-gradient(90deg, var(--rw-cyan), var(--rw-amber)); }

.pwd-actions { display: flex; }
.pwd-generate {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px;
    background: color-mix(in srgb, var(--rw-cyan) 10%, transparent);
    border: 1px dashed color-mix(in srgb, var(--rw-cyan) 55%, transparent);
    border-radius: 9px;
    color: var(--rw-cyan);
    font: 600 .8rem var(--font-body);
    cursor: pointer;
}
.pwd-generate svg { width: 15px; height: 15px; }
.pwd-generate:hover { background: color-mix(in srgb, var(--rw-cyan) 20%, transparent); }
.pwd-generate:focus-visible { outline: 2px solid var(--rw-cyan); outline-offset: 2px; }

/* ---- dice-toss generator: idle pulse / 3-phase toss / green lock ---- */
.die-stage {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    perspective: 90px;
    flex: none;
}
.die-ring-svg { position: absolute; inset: -2px; width: 36px; height: 36px; }
.die-ring-track {
    fill: none;
    stroke: color-mix(in srgb, var(--rw-steel) 35%, transparent);
    stroke-width: 2.5;
    opacity: 0;
}
.die-ring-fill {
    fill: none;
    stroke: #3B82F6;
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0;
    transition: stroke .3s ease, opacity .3s ease;
}
.pwd-generate.is-tossing .die-ring-track,
.pwd-generate.is-done .die-ring-track,
.pwd-generate.is-done .die-ring-fill { opacity: 1; }
.pwd-generate.is-done .die-ring-fill { stroke: #22C55E; }

.die-cube { display: block; width: 24px; height: 24px; transform-origin: 50% 50%; }
.die-cube svg { display: block; width: 100%; height: 100%; }
.die-front { fill: #f8fafc; }
.die-pip { fill: #3B82F6; }

/* idle: soft ambient glow pulse, 2s loop */
.pwd-generate:not(.is-tossing) .die-cube {
    animation: die-idle 2s ease-in-out infinite;
}
@keyframes die-idle {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0)); }
    50%      { filter: drop-shadow(0 0 5px rgba(59, 130, 246, .5)); }
}

/* the toss: phase A rise&rotate (ease-out) → phase B drop&settle (ease-in) */
.pwd-generate.is-tossing .die-cube {
    animation: die-toss 1.2s both;
}
@keyframes die-toss {
    0% {
        transform: translateY(0) scale(1) rotateY(0deg) rotateX(0deg);
        animation-timing-function: cubic-bezier(.2, .8, .4, 1);
    }
    50% {
        transform: translateY(-12px) scale(1.35) rotateY(360deg) rotateX(180deg);
        animation-timing-function: cubic-bezier(.6, .05, .8, .3);
    }
    100% {
        transform: translateY(0) scale(1) rotateY(720deg) rotateX(360deg);
    }
}

/* shards: burst at 70% of the toss, fade by the end */
.die-shards { position: absolute; inset: 0; pointer-events: none; }
.die-shards i {
    position: absolute; left: 50%; top: 50%;
    width: 5px; height: 5px;
    border-radius: 1.5px;
    background: #D7DDE2;
    opacity: 0;
    transform: translate(-50%, -50%);
}
.die-shards i:nth-child(2) { background: #E7A92B; }
.die-shards i:nth-child(4) { background: #3B82F6; }
.die-shards.is-burst i { animation: die-shard .55s ease-out forwards; }
.die-shards.is-burst i:nth-child(1) { --tx: -26px; --ty: -16px; }
.die-shards.is-burst i:nth-child(2) { --tx: 24px;  --ty: -22px; }
.die-shards.is-burst i:nth-child(3) { --tx: 28px;  --ty: 12px; }
.die-shards.is-burst i:nth-child(4) { --tx: 18px;  --ty: 24px; }
.die-shards.is-burst i:nth-child(5) { --tx: -22px; --ty: 20px; }
.die-shards.is-burst i:nth-child(6) { --tx: -28px; --ty: 8px; }
@keyframes die-shard {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.4) rotate(120deg); }
}
@media (prefers-reduced-motion: reduce) {
    .pwd-generate.is-tossing .die-cube { animation: none; }
    .die-shards.is-burst i { animation: none; opacity: 0; }
}

/* passkey teaser chip under the password tools */
.passkey-chip {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 2px 0 0;
    padding: 6px 12px 6px 8px;
    background: color-mix(in srgb, var(--rw-cyan) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--rw-cyan) 35%, transparent);
    border-radius: 999px;
    color: var(--rw-steel);
    font: 600 .78rem var(--font-body);
    align-self: flex-start;
}
.passkey-chip img { border-radius: 6px; display: block; }
.pwd-mismatch { color: var(--danger); font-size: .82rem; margin: 4px 0 0; }

/* agreements: two labeled groups, checkboxes outside the payload */
.register-agreements { display: flex; flex-direction: column; gap: 9px; }
.register-agreements-head {
    margin: 8px 0 2px;
    font: 700 .68rem/1 var(--font-mono);
    letter-spacing: .12em; color: var(--rw-steel);
}
.register-agree {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 12px;
    background: color-mix(in srgb, var(--rw-steel) 7%, transparent);
    border: 1px solid var(--ms-border, var(--border));
    border-radius: 10px;
    color: var(--text-body); font-size: .86rem;
    cursor: pointer;
}
.register-agree:hover { border-color: color-mix(in srgb, var(--rw-cyan) 45%, transparent); }
.register-agree input { margin-top: 2px; accent-color: var(--rw-cyan); width: 16px; height: 16px; flex: none; }
.register-agree:focus-within { outline: 2px solid var(--rw-cyan); outline-offset: 2px; }
.register-agree-error { color: var(--danger); font-size: .84rem; margin: 0; }

/* decorative engineering readout under the form */
.register-readout {
    margin-top: 22px;
    padding: 12px 14px;
    border: 1px dashed color-mix(in srgb, var(--rw-steel) 40%, transparent);
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 4px;
    font: 500 .68rem/1.5 var(--font-mono);
    letter-spacing: .08em;
    color: var(--rw-steel);
}
.register-readout-title { font-weight: 700; color: var(--rw-amber); margin-bottom: 2px; }
.register-readout-row { display: flex; justify-content: space-between; gap: 12px; }
.register-readout-row .is-ok { color: var(--success); }

/* mobile: steps stay compact */
@media (max-width: 560px) {
    .register-nav { flex-direction: row; }
    .register-nav .btn { flex: 1 1 auto; justify-content: center; }
    .register-readout { display: none; }        /* decoration off on phones */
}

/* ---- pipeline pig strip (aside decoration, login + register) ------------- */
.auth-pipeline {
    margin-top: auto;
    padding-top: 18px;
    opacity: .55;
}
.auth-pipeline svg { display: block; width: 100%; height: 40px; }
.auth-pig { animation: pig-run 16s linear infinite; }
@keyframes pig-run {
    from { transform: translateX(0); }
    to   { transform: translateX(196px); }
}
@media (prefers-reduced-motion: reduce) {
    .auth-pig { animation: none; }
}

/* (The oil panorama — base, drifting tanker, flickering flare — was removed
   from the auth aside per request. Its rules went with it; the three webp
   assets remain on disk, listed as unused by tools/build logs until the
   project decides their fate.) */

/* ------------------------------------------------------- 12. auth shell + responsive */
.auth-body { display: block; }

/* ---- 11b. dashboard sidebar ----------------------------------------------
   Vertical cabinet menu under the ribbon. Its palette is deliberately its
   own: the rows sit on a solid near-white surface in both themes, text on
   #333333 with RUDN blue #0055A4 for hover/active, so the AA contrast holds
   regardless of the dark photographic page background. The 4px rail and the
   soft blue row fill mark the current page without adding any borders. */
.dash-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.dash-content { min-width: 0; }

/* The ribbon keeps only Home / admin links; the seven member items live in
   the sidebar (layout/app.php), so the .nav-links row no longer needs the
   old member anchors. .nav-burger below opens the sidebar on small screens. */
.nav-burger { display: none; }

.dash-sidebar {
    /* the sidebar's own small token set, per the RUDN corporate palette */
    --sb-bg:      #ffffff;
    --sb-hover:   #e6f0ff;
    --sb-blue:    #0055a4;
    --sb-blue-deep: #003366;
    --sb-text:    #333333;
    --sb-muted:   #64748b;
    --sb-badge:   #ff4d4f;
    --sb-motion:  cubic-bezier(.25, 1, .5, 1);
    --sb-width:   248px;

    position: sticky; top: 66px;       /* 48px ribbon + breathing room */
    background: var(--sb-bg);
    border: 1px solid #e9eef5;
    border-radius: var(--radius);
    padding: 8px;
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
    width: var(--sb-width);
    transition: width .3s var(--sb-motion);
    overflow: hidden;
}
[data-theme="dark"] .dash-sidebar {
    /* dark theme: the same construction on a tinted surface, AA kept */
    --sb-bg:    #101d2e;
    --sb-hover: #16283d;
    --sb-text:  #c3d0e0;
    --sb-muted: #8fa3bd;
    --sb-badge: #ff6b6d;
    border-color: var(--border);
}

.sidebar-toggle {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    margin: 0 0 6px;
    padding: 6px 8px;
    border: 0; border-radius: var(--radius-sm);
    background: none;
    color: var(--sb-muted);
    font-size: .8rem; font-weight: 600; letter-spacing: .02em;
    cursor: pointer;
    white-space: nowrap; overflow: hidden;
    transition: color .3s var(--sb-motion), background-color .3s var(--sb-motion);
}
.sidebar-toggle:hover,
.sidebar-toggle:focus-visible { color: var(--sb-blue); background: var(--sb-hover); }
.sidebar-toggle-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform .3s var(--sb-motion); }
.sidebar-toggle-label { overflow: hidden; text-overflow: ellipsis; }
.sidebar-toggle:focus-visible { outline: 2px solid var(--sb-blue); outline-offset: 2px; }

/* collapsed (icon-only) mode: driven by .collapsed on .dash-sidebar, set by
   the toggle button or by sessionStorage on load. The grid column follows the
   same transition so the content does not jump. */
.dash-sidebar.collapsed { --sb-width: 64px; }
.dash-layout:has(> .dash-sidebar.collapsed) { grid-template-columns: 64px minmax(0, 1fr); }
.dash-sidebar.collapsed .sidebar-toggle { justify-content: center; }
.dash-sidebar.collapsed .sidebar-toggle-label { display: none; }
.dash-sidebar.collapsed .sidebar-toggle-icon { transform: rotate(180deg); }
.dash-sidebar.collapsed .sidebar-link { justify-content: center; padding: 10px 8px; gap: 0; }
.dash-sidebar.collapsed .sidebar-label { display: none; }
.dash-sidebar.collapsed .sidebar-badge { position: absolute; top: 3px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .62rem; }
.dash-sidebar.collapsed .sidebar-icon { margin: 0; }
/* icon pull only makes sense when a label follows it */
.dash-sidebar.collapsed .sidebar-link:hover .sidebar-icon { transform: none; }
/* keep the aria-label readable in every mode: the icon is decorative, the link carries the name */
.sidebar-toggle-icon + .sidebar-toggle-label { }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }

.sidebar-link {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--sb-text);
    font-size: .92rem; font-weight: 500;
    text-align: left;
    transition: background-color .3s var(--sb-motion), color .3s var(--sb-motion);
    animation: sidebar-item-in .4s var(--sb-motion) both;
    animation-delay: calc(var(--sb-index, 0) * .05s);
}
.sidebar-item { animation: inherit; }
.sidebar-item:nth-child(1) { --sb-index: 0; }
.sidebar-item:nth-child(2) { --sb-index: 1; }
.sidebar-item:nth-child(3) { --sb-index: 2; }
.sidebar-item:nth-child(4) { --sb-index: 3; }
.sidebar-item:nth-child(5) { --sb-index: 4; }
.sidebar-item:nth-child(6) { --sb-index: 5; }
.sidebar-item:nth-child(7) { --sb-index: 6; }

@keyframes sidebar-item-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sidebar-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex: 0 0 auto;
    color: var(--sb-muted);
    transition: color .2s ease, transform .3s var(--sb-motion);
}
.sidebar-icon svg { width: 21px; height: 21px; }
.sidebar-label { flex: 1 1 auto; min-width: 0; }

/* hover: ONLY the icon reacts — each row has its own identity hue (RUDN
   corporate range), while the label stays #333333 and the row stays white.
   The per-item colour lives on the <li> as a custom property so the hover
   rule stays one line. */
.sidebar-item        { --sb-hue: #0055a4; }   /* Dashboard — RUDN blue  */
.sidebar-item:nth-child(2) { --sb-hue: #2e7d32; }   /* My cabinet — green  */
.sidebar-item:nth-child(3) { --sb-hue: #1565c0; }   /* People — deep blue   */
.sidebar-item:nth-child(4) { --sb-hue: #ef6c00; }   /* Jobs — orange       */
.sidebar-item:nth-child(5) { --sb-hue: #7b1fa2; }   /* Groups — purple     */
.sidebar-item:nth-child(6) { --sb-hue: #d32f2f; }   /* Messages — red      */
.sidebar-item:nth-child(7) { --sb-hue: #c2185b; }   /* My profile — maroon */

.sidebar-link:hover,
.sidebar-link:focus-visible {
    background: #ffffff;                 /* row deliberately unchanged */
    color: var(--sb-text);               /* label stays dark grey      */
    text-decoration: none;
}
.sidebar-link:hover .sidebar-icon,
.sidebar-link:focus-visible .sidebar-icon {
    color: var(--sb-hue);                /* only the glyph recolours   */
    transform: translateX(-2px);
}

/* active: 4px blue rail on the left, wash, bold text; the rail breathes */
.sidebar-item.is-active .sidebar-link {
    background: var(--sb-hover);
    color: var(--sb-blue-deep);
    font-weight: 700;
}
.sidebar-item.is-active .sidebar-link::before {
    content: "";
    position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 4px; border-radius: 2px;
    background: var(--sb-blue);
    animation: sidebar-rail-pulse 3s ease-in-out infinite;
}
.sidebar-item.is-active .sidebar-icon { color: var(--sb-blue); }
@keyframes sidebar-rail-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .8; }
}

/* unread badge: red dot that pulses gently on hover */
.sidebar-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: var(--sb-badge); color: #fff;
    font-size: .72rem; font-weight: 700; line-height: 1;
}
.sidebar-link:hover .sidebar-badge { animation: sidebar-badge-pulse 1.6s ease-in-out infinite; }
@keyframes sidebar-badge-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-badge) 45%, transparent); }
    50%      { transform: scale(1.08); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sb-badge) 0%, transparent); }
}

/* keyboard: an explicit ring on top of the row treatment */
.sidebar-link:focus-visible {
    outline: 2px solid var(--sb-blue);
    outline-offset: 2px;
}

@media (max-width: 1000px) {
    .dash-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
    .dash-layout:has(> .dash-sidebar.collapsed) { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (max-width: 820px) {
    .dash-layout { grid-template-columns: 1fr; gap: 14px; }
    .dash-layout:has(> .dash-sidebar.collapsed) { grid-template-columns: 1fr; }
    .dash-sidebar { position: static; }

    /* mobile: the sidebar is closed by default and opens icon-only, driven by
       the burger in the ribbon (.nav-burger). */
    .nav-burger {
        display: inline-flex; align-items: center; justify-content: center;
        position: fixed; top: 52px; left: 10px; z-index: 30;
        width: 38px; height: 38px;
        border: 1px solid #e9eef5; border-radius: var(--radius-sm);
        background: var(--card); color: var(--text); cursor: pointer;
        box-shadow: var(--shadow-sm);
    }
    .dash-sidebar {
        display: none;
        position: fixed; top: 96px; left: 10px; z-index: 29;
        width: 64px;                      /* icon-only from the first frame */
        box-shadow: var(--shadow-md);
    }
    .dash-sidebar.open { display: block; }
    .dash-sidebar .sidebar-toggle-label { display: none; }
    .dash-sidebar .sidebar-toggle { justify-content: center; }
    .dash-sidebar .sidebar-link { justify-content: center; padding: 11px 8px; gap: 0; }
    .dash-sidebar .sidebar-label { display: none; }
    .dash-sidebar .sidebar-badge { position: absolute; top: 3px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .62rem; }
    .dash-sidebar .sidebar-nav { flex-direction: column; flex-wrap: nowrap; }
    .dash-sidebar .sidebar-item { --sb-index: 0 !important; }
    .dash-sidebar .sidebar-item.is-active .sidebar-link::before { left: 0; right: auto; top: 6px; bottom: 6px; width: 4px; height: auto; }
    .dash-sidebar .sidebar-link:hover .sidebar-icon { transform: none; }
}
@media (max-width: 560px) {
    .dash-sidebar { padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-link, .sidebar-icon, .sidebar-badge { animation: none; transition: none; }
    .sidebar-item.is-active .sidebar-link::before { animation: none; }
}
@media print {
    .dash-sidebar { display: none; }
    .dash-layout { display: block; }
}

/* Split layout: the shell is exactly one viewport tall with a single row
   that cannot grow (minmax(0,1fr) — the same idiom as .dash-layout), so
   the brand column never moves while .auth-panel owns the page's scroll.
   height (not min-height) is what locks the row: an auto-sized row would
   grow with the form and push the aside off-screen instead of scrolling. */
.auth-shell {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    grid-template-rows: minmax(0, 1fr);
    height: 100vh;
}

/* Decorative corner photo above the brand block (register/login aside).
   It melts into the aside's dark navy: rounded far corner, a soft mask that
   fades the right edge, and no border — a photograph, not a card.
   Compact by design: a 190px-tall photo plus the scene ate 410px of a
   720px viewport, so the photo is capped (never more than ~22vh) and the
   column reclaims that height for the copy. */
.auth-corner-photo {
    display: block;
    width: min(340px, 100%);
    max-height: clamp(120px, 20vh, 176px);
    object-fit: cover;
    object-position: left center;
    border-radius: 14px;
    margin: 0 0 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
    opacity: .92;
}

/* Compact brand column. The panorama is gone, so the stack is short enough
   that the deliberate choice is SHRINK-TO-CONTENT: the copy keeps its natural
   height and the column centres it (justify-content:center). Stretching the
   primary block would mean enlarging type or spacing beyond the compacted
   scales — filler, not layout. Vertical rhythm is the 4/8 base: 8px between
   related lines, 16px between groups, one clamp per edge. */
.auth-aside {
    background:
        radial-gradient(120% 90% at 12% 8%, color-mix(in srgb, var(--primary) 25%, transparent), transparent 55%),
        linear-gradient(160deg, #0e2338 0%, #08111d 60%);
    padding: clamp(24px, 4vh, 48px) 40px;
    display: flex; flex-direction: column; justify-content: center;
    gap: 16px;
    border-right: 1px solid var(--border);
    overflow: hidden;
    min-height: 0;
}
[data-theme="light"] .auth-aside { background: linear-gradient(160deg, #0e2338 0%, #08111d 65%); }

.auth-brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.auth-brand-mark { display: block; width: 38px; height: 38px; object-fit: contain; border-radius: var(--radius-sm); }
.auth-brand strong { font-family: var(--font-display); font-weight: 800; display: block; }
.auth-brand small { color: rgba(255,255,255,.68); font-size: .78rem; }
.auth-headline { color: #fff; font-size: 1.6rem; margin: 0; line-height: 1.2; }
.auth-blurb { color: rgba(255,255,255,.74); max-width: 46ch; font-size: .92rem; line-height: 1.55; margin: 0; }
.auth-points {
    margin: 0; padding-left: 20px; color: rgba(255,255,255,.8);
    display: flex; flex-direction: column; gap: 8px;
    font-size: .86rem; line-height: 1.45;
}

/* The form column IS the page's scroll container (height:100vh shell +
   one locked row above). min-height:0 is required — a grid item defaults
   to min-height:auto, which would defeat the row's minmax(0,1fr) and
   push the shell past the viewport. No background: the refinery photo
   behind (body::before, z-index:-2) must stay visible through the column.
   Centering uses auto margins on the first/last children, NOT
   justify-content:center — a centered flex column inside a scroll
   container clips the overflowing TOP of the content and it cannot be
   scrolled back into reach. Auto margins center when it fits and collapse
   naturally when it does not. The bottom padding is raised so the last
   control clears the fixed utility cluster in the bottom-right corner. */
.auth-panel {
    padding: 48px 48px 168px;
    display: flex; flex-direction: column; align-items: center;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scroll-padding-bottom: 168px;
}
.auth-panel > :first-child { margin-top: auto; }
.auth-panel > :last-child  { margin-bottom: auto; }
.auth-card { width: 100%; max-width: 440px; }
.auth-title { margin-bottom: 6px; }
.auth-switch { margin-top: 18px; }

/* ---- OAuth sign-in buttons (login page) -----------------------------------
   A provider sign-in is a different act from the optional-connections
   section below: these buttons establish a SESSION. They render only while
   the capability matrix reports a ready oauth2 service, so an installation
   without credentials shows no button at all — never a disabled lookalike. */
.oauth-signin { margin-top: 22px; }
.oauth-signin-title {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 12px; font-size: .8rem; font-weight: 600;
    color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
}
.oauth-signin-title::before,
.oauth-signin-title::after {
    content: ""; flex: 1 1 auto; height: 1px; background: var(--border);
}
.oauth-signin-row { display: flex; flex-wrap: wrap; gap: 10px; }
.oauth-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px 8px 8px; border-radius: 12px;
    background: var(--card); border: 1px solid var(--border);
    color: var(--text); font-weight: 600; font-size: .92rem;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.oauth-btn .provider-mark { flex: none; }
.oauth-btn:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
    transform: translateY(-1px);
}
.oauth-btn:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}
@media (max-width: 480px) {
    .oauth-signin-row { flex-direction: column; }
    .oauth-btn { justify-content: center; width: 100%; }
}

/* ---- vertical utility cluster, pinned to the bottom-right corner ----------
   Language on top, then sound, then theme — stacked, one per row, 8px apart,
   equal 44px hit targets. Fixed to the VIEWPORT (the right panel scrolls
   independently, so anchoring to the panel would scroll the controls out of
   reach). Safe-area insets are honoured; on mobile the cluster un-pins and
   flows below the form so it never covers the submit button. */
.auth-footer.auth-cluster {
    position: fixed;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 8px;
    z-index: 40;
    margin: 0;
}
.auth-cluster .lang-switch { border-radius: 999px; padding: 3px; }
.auth-cluster .lang-switch a {
    min-width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
}
.auth-cluster .icon-btn {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; line-height: 1;
    border-radius: 999px;
}
.auth-cluster .icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.auth-cluster .lang-switch a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
[data-theme="dark"] .auth-cluster .icon-btn:focus-visible,
[data-theme="dark"] .auth-cluster .lang-switch a:focus-visible { outline-color: var(--primary-hover); }

.demo-accounts { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 14px; }
.demo-accounts summary { cursor: pointer; color: var(--muted); font-size: .86rem; }
.demo-accounts p { margin: 10px 0 6px; }
.demo-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.site-footer {
    border-top: 1px solid var(--border);
    margin-top: auto;
    overflow: hidden;
}

/* the RUDN Connect banner image with the footer text laid over it in black */
.footer-banner-wrap {
    position: relative;
    margin-top: 26px;
    overflow: hidden;
}
.footer-banner {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(1.05);
}
.footer-banner-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-block: 14px;
    color: #000;                       /* everything over the photo is black */
    background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.60));
}

.fb-name { color: #000; font-size: 1rem; margin: 0; }
.fb-blurb { color: rgba(0,0,0,.78); font-size: .78rem; margin: 2px 0 0; max-width: 62ch; }
.fb-meta { color: rgba(0,0,0,.75); font-size: .72rem; }
.fb-meta span { font-size: .72rem; }

.footer-inner {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: space-between; align-items: flex-start;
}
.footer-meta { display: flex; flex-direction: column; gap: 2px; text-align: right; }

/* author + test-page notice (also over the photo, black) */
.footer-author {
    border-top: 1px solid rgba(0,0,0,.18);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}
.footer-author-line { margin: 0; color: rgba(0,0,0,.82); font-size: .74rem; }
.footer-test-notice {
    margin: 0;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .68rem; font-weight: 600;
    color: #000;
    padding: 2px 9px;
    border: 1px solid rgba(0,0,0,.35);
    border-radius: 999px;
    background: rgba(255,255,255,.35);
}
.footer-meta { display: flex; flex-direction: column; gap: 3px; text-align: right; }

/* responsive */
@media (max-width: 1000px) {
    .hero { grid-template-columns: 1fr; gap: 22px; }
    .hero-media { min-height: 180px; }
    .hero-emblem { min-height: 180px; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .auth-shell { grid-template-columns: 1fr; grid-template-rows: none; height: auto; min-height: 100vh; }
    /* Mobile: the brand column becomes a compact header block above the form.
       The body is the page scroller again — no nested scroll containers — so
       the panel's desktop scroll behaviour is undone here. */
    .auth-aside {
        display: flex;
        overflow: visible;
        min-height: 0;
        padding: 28px 20px;
        gap: 12px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    .auth-corner-photo { display: none; }
    .auth-headline { font-size: 1.35rem; }
    .auth-blurb { font-size: .92rem; }
    .auth-panel { padding: 32px 20px 48px; overflow: visible; height: auto; min-height: 0; }
    .auth-panel > :first-child { margin-top: 0; }
    .auth-panel > :last-child  { margin-bottom: 0; }
    /* Mobile: the cluster un-pins and flows below the form, horizontal again,
       so it can never cover the submit button on a small screen. */
    .auth-footer.auth-cluster {
        position: static;
        flex-direction: row; justify-content: center; align-items: center;
        gap: 12px; margin-top: 24px;
    }
    .group-layout { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .nav-toggle { display: inline-block; order: 3; margin-left: auto; }
    .nav-links {
        display: none; order: 4; width: 100%; flex-direction: column; align-items: stretch;
        gap: 2px; padding-bottom: 12px; margin-left: 0;
    }
    .nav-links.open { display: flex; }
    .nav { flex-wrap: wrap; }
    .nav-actions { order: 2; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .bar-list li { grid-template-columns: 110px 1fr 38px; }
    .footer-meta { text-align: left; }
    .user-chip { display: none; }
    .chat-form { flex-direction: column; align-items: stretch; }
    .chat-form .btn { align-self: flex-end; }
}

@media (max-width: 560px) {
    .container { padding-inline: 14px; }
    .card { padding: 16px; }
    .filter-bar { padding: 14px; }
    .stat-item { padding: 14px 16px; }
    .table thead th, .table tbody td { padding: 10px; }
    .detail-list > div { grid-template-columns: 1fr; gap: 2px; }
    .chat-bubble { max-width: 90%; }
    .certificate-row, .section-row, .request-row { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------- 13. jobs, offers, applications */
.job-card { display: flex; flex-direction: column; gap: 12px; }
.job-card:hover { border-color: var(--primary); }
.job-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.job-head b { color: var(--text); }
.job-title { font-family: var(--font-display); font-size: 1.06rem; }
.job-desc { margin: 0; color: var(--text-body); }

.offer-row { justify-content: space-between; }
.offer-main { flex: 1 1 260px; min-width: 0; }
.offer-main b { color: var(--text); }
.offer-main p { margin: 2px 0 0; }

.pre-wrap { white-space: pre-wrap; }

.cover-letter {
    margin: 14px 0 0; padding: 12px 16px;
    border-left: 3px solid var(--primary);
    background: var(--card-raised); border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text-body); font-size: .92rem;
}

.badge-job-draft     { border-color: var(--border); color: var(--muted); }
.badge-job-published { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); color: var(--success); }
.badge-job-paused    { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); color: var(--warning); }
.badge-job-closed    { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }

.badge-application-sent     { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); color: var(--warning); }
.badge-application-viewed   { border-color: color-mix(in srgb, var(--info) 45%, var(--border)); color: var(--info); }
.badge-application-accepted { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); color: var(--success); }
.badge-application-rejected { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }

/* ------------------------------------------------------------ 14. cabinet */
.cabinet-header { margin-bottom: 18px; }
.cabinet-name { margin: 0 0 4px; font-size: 1.5rem; }
.cabinet-actions { margin-left: auto; justify-content: flex-end; }

.completeness-head { justify-content: space-between; }
.completeness-head .card-title { margin-bottom: 0; }
.completeness-value { font-family: var(--font-display); font-size: 1.4rem; color: var(--primary-hover); }
.completeness-checks { margin-top: 12px; }

.row-unread { border-left: 3px solid var(--primary); padding-left: 10px; }

/* ------------------------------------------------------------- 15. résumé */
.resume-sheet {
    margin-top: 18px; padding: 40px 46px;
    background: var(--card); color: var(--text-body);
    max-width: 900px;
}
.resume-head { padding-bottom: 16px; margin-bottom: 22px; border-bottom: 2px solid var(--border); }
.resume-head h1 { margin: 0 0 4px; font-size: 1.9rem; }
.resume-headline { margin: 0 0 2px; color: var(--text); font-weight: 600; }
.resume-section { margin-bottom: 22px; }
.resume-section h2 {
    font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muted); margin-bottom: 10px;
}
.resume-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.resume-items li { padding-left: 14px; border-left: 2px solid var(--border-soft); }
.resume-items b { color: var(--text); }
.resume-detail { display: block; margin-top: 3px; max-width: 78ch; }
.resume-foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ------------------------------------------------------------ 16. card */
.business-card {
    max-width: 620px; padding: 32px;
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 55%),
        var(--card);
}
.bcard-head { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.bcard-name { margin: 0 0 2px; font-size: 1.5rem; }
.bcard-headline { margin: 0 0 4px; color: var(--text); }
.bcard-details { border-top: 1px solid var(--border); padding-top: 16px; }
.bcard-url { word-break: break-all; }
.bcard-qr { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.bcard-qr canvas { background: #fff; border-radius: var(--radius-sm); padding: 6px; flex: 0 0 auto; }
.bcard-qr p { margin: 0; max-width: 34ch; }

/* ------------------------------------------------- 17. admin additions */
.spark {
    display: flex; align-items: flex-end; gap: 2px;
    height: 64px; margin: 6px 0 10px;
    padding-bottom: 2px; border-bottom: 1px solid var(--border);
}
.spark span {
    flex: 1 1 auto; min-width: 2px;
    background: var(--primary); border-radius: 2px 2px 0 0;
    display: block;
}

.setting-row {
    display: flex; flex-wrap: wrap; gap: 14px;
    align-items: center; justify-content: space-between;
    padding: 14px 0; border-bottom: 1px solid var(--border-soft);
}
.setting-row:last-child { border-bottom: 0; }
.setting-row b { color: var(--text); }
.setting-row p { margin: 2px 0 0; }

.activity-feed li { align-items: baseline; }
.activity-icon { flex: 0 0 auto; font-size: 16px; }
.activity-text { flex: 1 1 260px; color: var(--text-body); }
.badge-event-user        { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--primary-hover); }
.badge-event-job         { border-color: color-mix(in srgb, var(--info) 45%, var(--border)); color: var(--info); }
.badge-event-application { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); color: var(--warning); }
.badge-event-certificate { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); color: var(--success); }

.delete-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.delete-form input { width: 130px; padding: 5px 8px; font-size: .84rem; }

/* ---- 11h. optional connections ------------------------------------------
   The design system for everything the word "connection" appears on: the
   onboarding section under the sign-in and registration cards, the member's
   Connected services page, and the administrator's read-only matrix.

   Tone: a professional identity product, not a social sign-up wall. Thin
   borders, one accent per state, generous spacing, no gradients and no glass.
   Every state is a WORD in a chip — colour only reinforces it, so a
   colour-blind reader loses nothing (WCAG: no colour-only indicators).

   The state chips are driven by the capability matrix, never by assumptions:
   a service that is not available is styled as quiet as the wording implies. */

.onboard-optional { width: 100%; max-width: 440px; margin-top: 34px; }

.onboard-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.onboard-divider-line {
    flex: 1 1 auto; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border) 16%, var(--border) 84%, transparent);
}
.onboard-divider-word {
    font: 700 .72rem/1 var(--font-display);
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

.onboard-title { margin: 0 0 6px; font-size: 1.14rem; }
.onboard-lead { margin: 0 0 12px; font-size: .92rem; }
.onboard-note {
    margin: 0 0 18px; padding: 9px 13px;
    font-size: .86rem; color: var(--text);
    background: var(--primary-soft);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.onboard-later { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.onboard-later-title { margin: 0 0 4px; font-weight: 600; color: var(--text); font-size: .92rem; }

/* ---- provider cards ------------------------------------------------------ */
.provider-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.provider-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
    padding: 14px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.provider-card-group { display: block; }

/* Provider icon mark: transparent background for sharp, modern brand glyphs.
   Enhances contrast across both dark and light modes, avoiding harsh white
   boxes while preserving the brand hue ring and subtle depth. */
.provider-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; flex: none;
    overflow: hidden;
    color: var(--provider-hue, var(--primary));   /* the monogram fallback */
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--provider-hue, var(--primary)) 28%, transparent);
    padding: 3px;
    box-sizing: border-box;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), filter .25s ease, border-color .25s ease;
}
.provider-mark img {
    display: block; width: 100%; height: 100%;
    object-fit: contain;
    border-radius: inherit;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.15));
}
.provider-card:hover .provider-mark {
    transform: scale(1.06);
    border-color: color-mix(in srgb, var(--provider-hue, var(--primary)) 55%, transparent);
    filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--provider-hue, var(--primary)) 30%, transparent));
}
.provider-mark-sm { width: 30px; height: 30px; border-radius: 8px; padding: 2px; }
.provider-monogram { font: 700 .95rem/1 var(--font-display); letter-spacing: .02em; }

.provider-group-head { display: flex; align-items: center; gap: 12px; }
.provider-group-hint { margin: 2px 0 0; }

.provider-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.provider-name { margin: 0; font-size: 1rem; }
.provider-sub-name { margin: 0; font-size: .94rem; }
.provider-desc { margin: 4px 0 0; font-size: .88rem; }
.provider-reason { margin: 6px 0 0; }

.provider-sub-list {
    list-style: none; margin: 12px 0 0; padding: 12px 0 0;
    border-top: 1px solid var(--border-soft);
    display: flex; flex-direction: column; gap: 14px;
}
.provider-sub { padding-left: 12px; border-left: 2px solid var(--border-soft); }

.provider-state {
    font: 700 .7rem/1 var(--font-display);
    letter-spacing: .05em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 999px;
    border: 1px solid currentColor; white-space: nowrap;
}
.provider-state-available   { color: var(--success); }
.provider-state-coming_soon { color: var(--warning); }
.provider-state-unavailable { color: var(--muted); }

.provider-more { margin-top: 10px; }
.provider-more-summary { cursor: pointer; font-size: .84rem; color: var(--primary-hover); }
.provider-facts { margin: 10px 0 0; font-size: .84rem; }
.provider-facts dt { margin-top: 10px; font-weight: 600; color: var(--text); }
.provider-facts dd { margin: 2px 0 0; }
.provider-fact-list { margin: 2px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.provider-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 0; }
.provider-links a { color: var(--primary-hover); }

/* ---- privacy reassurance ------------------------------------------------- */
.privacy-notice {
    margin-top: 18px; padding: 14px 16px;
    background: var(--card-raised); border: 1px solid var(--border); border-radius: var(--radius);
}
.privacy-title { margin: 0 0 6px; font-size: .92rem; font-weight: 600; color: var(--text); }
.privacy-body { margin: 0; font-size: .86rem; }
.privacy-points {
    margin: 10px 0 0; padding-left: 18px;
    font-size: .86rem; display: flex; flex-direction: column; gap: 4px;
}

/* ---- member page: services ---------------------------------------------- */
.integrations-optional-note {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 18px; font-size: .9rem; color: var(--muted);
}
.optional-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}

.connect-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.connect-card {
    padding: 16px;
    background: var(--card-raised); border: 1px solid var(--border); border-radius: var(--radius);
}
.connect-card-available:not(.is-connected) { border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); }
.connect-card.is-connected { border-color: color-mix(in srgb, var(--success) 36%, var(--border)); }

.connect-head { display: flex; align-items: flex-start; gap: 12px; }
.connect-identity { flex: 1 1 auto; min-width: 0; }
.connect-name { margin: 0; font-size: 1.02rem; }
.connect-service { color: var(--muted); font-weight: 500; }
.connect-desc { margin: 3px 0 0; }
.connect-status { flex: none; }

.status-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .78rem; font-weight: 600;
    color: var(--text); background: var(--card); border: 1px solid var(--border);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status-connected    { color: var(--success); border-color: color-mix(in srgb, var(--success) 38%, var(--border)); }
.status-pending      { color: var(--info);    border-color: color-mix(in srgb, var(--info) 38%, var(--border)); }
.status-failed,
.status-revoked      { color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); }
.status-disconnected { color: var(--muted); }

.connect-meta {
    margin: 12px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px;
}
.connect-meta dt { color: var(--muted); }
.connect-meta dd { margin: 0; }
.connect-reason { margin: 10px 0 0; }
.connect-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.connect-form { display: flex; flex-direction: column; gap: 10px; }
.connect-none { margin: 0; }

/* Consent is a control, not a sentence in a footer: it sits between the
   person and the button the consent is about. */
.consent-check {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
    padding: 10px 12px; font-size: .86rem; cursor: pointer;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.consent-check:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.consent-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary); }

.manual-link { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.manual-link-title { margin: 0 0 4px; font-size: .92rem; }
.manual-link-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.manual-link-form input { flex: 1 1 240px; min-width: 0; }

/* ---- retrieved values and visibility ------------------------------------ */
.entry-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.entry-title { margin: 0 0 10px; font-size: .95rem; }
.entry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.entry-row {
    display: grid; gap: 10px; padding: 12px;
    background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
}
.entry-main { min-width: 0; }
.entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.entry-label { font-weight: 600; color: var(--text); }
.entry-source,
.entry-visibility {
    font-size: .72rem; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--border); color: var(--muted);
}
.entry-source-import { color: var(--info);   border-color: color-mix(in srgb, var(--info) 36%, var(--border)); }
.entry-source-manual { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 36%, var(--border)); }
.entry-visibility.is-public { color: var(--success); border-color: color-mix(in srgb, var(--success) 36%, var(--border)); }
.entry-value { margin: 6px 0 0; font-size: .88rem; overflow-wrap: anywhere; }
.entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.visibility-form { display: flex; align-items: center; gap: 6px; }
.visibility-form select { padding: 5px 8px; font-size: .84rem; }

.scope-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.card-quiet { background: var(--card-raised); }
.admin-readonly-note { margin: 12px 0 0; }
.error-text { color: var(--danger); }

@media (min-width: 880px) {
    .entry-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

@media (max-width: 768px) {
    .connect-head { flex-direction: column; }
    .connect-status { align-self: flex-start; }
    .provider-card { padding: 12px; }
    .provider-sub { padding-left: 10px; }
    .entry-actions { flex-direction: column; align-items: stretch; }
    .visibility-form select { flex: 1 1 auto; }
}

/* ---- profile health & digital identity center ---------------------------- */
.profile-health-header { margin-bottom: 24px; }
.health-meta-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px;
}
.health-status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    font-size: .82rem; font-weight: 600;
    background: var(--card-raised); border: 1px solid var(--border); color: var(--text);
}
.health-stars-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--card-raised); border: 1px solid var(--border);
    font-size: .88rem; color: #f59e0b;
}
.health-metric-pill,
.health-trust-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    font-size: .82rem; font-weight: 600;
    background: var(--card-raised); border: 1px solid var(--border);
    color: var(--text);
}
.health-trust-pill {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}
.health-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}

/* Smart notifications */
.profile-smart-notifications {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px;
}
.smart-notif-item {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 18px; background: var(--card); border: 1px solid var(--border);
    border-left: 4px solid var(--primary); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.smart-notif-item.priority-high { border-left-color: var(--warning); }
.smart-notif-item.priority-low { border-left-color: var(--success); }
.smart-notif-body {
    display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0;
}
.smart-notif-icon {
    font-size: 1.25rem; flex: none; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); background: var(--card-raised);
    border: 1px solid var(--border);
}
.smart-notif-text { flex: 1 1 auto; min-width: 0; }
.smart-notif-title { margin: 0 0 2px; font-size: .95rem; font-weight: 600; color: var(--text); }
.smart-notif-desc { margin: 0; font-size: .84rem; color: var(--muted); }
.smart-notif-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* Digital Identity 3-Column Grid */
.digital-identity-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px; margin-bottom: 24px;
}
.identity-metric-card {
    display: flex; flex-direction: column; padding: 20px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.identity-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; margin-bottom: 16px;
}
.identity-card-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.identity-card-subtitle { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }

/* Completion visual */
.completion-visual-row {
    display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.progress-ring-container {
    position: relative; width: 80px; height: 80px; flex: none;
}
.progress-ring {
    transform: rotate(-90deg); transform-origin: 50% 50%;
}
.progress-ring-bg {
    fill: none; stroke: var(--card-raised); stroke-width: 7;
}
.progress-ring-fill {
    fill: none; stroke: var(--primary); stroke-width: 7;
    stroke-linecap: round; transition: stroke-dashoffset .4s ease;
}
.progress-ring-text {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; font-size: 1.15rem; font-weight: 800;
    color: var(--text); font-family: var(--font-display);
}
.completion-summary-text { flex: 1 1 auto; }
.milestone-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .8rem; font-weight: 600; background: var(--primary-soft);
    color: var(--primary-hover);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    margin-bottom: 4px;
}
.completion-lead-note { margin: 0; font-size: .82rem; color: var(--muted); }

/* Category Progress Bars */
.completion-categories {
    display: flex; flex-direction: column; gap: 8px; margin-top: auto;
    padding-top: 12px; border-top: 1px solid var(--border-soft);
}
.cat-progress-item { display: flex; flex-direction: column; gap: 3px; }
.cat-progress-meta {
    display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted);
}
.cat-progress-track {
    height: 5px; background: var(--card-raised); border-radius: 999px;
    overflow: hidden; border: 1px solid var(--border-soft);
}
.cat-progress-bar {
    height: 100%; background: var(--primary); border-radius: 999px;
    transition: width .3s ease;
}

/* Trust / Verification visual */
.trust-visual-row {
    display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.trust-shield-icon {
    width: 60px; height: 60px; border-radius: 50%;
    background: color-mix(in srgb, var(--success) 14%, transparent);
    border: 2px solid color-mix(in srgb, var(--success) 35%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--success); flex: none;
}
.trust-summary-text { flex: 1 1 auto; }
.trust-percent {
    font-size: 1.35rem; font-weight: 800; color: var(--text);
    font-family: var(--font-display); line-height: 1.1;
}
.trust-badge-label {
    display: inline-block; font-size: .8rem; font-weight: 600;
    color: var(--success); margin-top: 2px;
}

.trust-checklist {
    list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: 8px; margin-top: auto;
    padding-top: 12px; border-top: 1px solid var(--border-soft);
}
.trust-check-item {
    display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--text-body);
}
.trust-check-bullet {
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; flex: none;
}
.trust-check-bullet.is-passed { background: var(--success); color: #fff; }
.trust-check-bullet.is-pending {
    background: var(--card-raised); border: 1px solid var(--border); color: var(--muted);
}
.trust-source-badge {
    margin-left: auto; font-size: .72rem; padding: 2px 7px;
    border-radius: 999px; background: var(--card-raised);
    border: 1px solid var(--border); color: var(--muted);
}

/* Maturity & Badges */
.maturity-stars-row {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.stars-display {
    display: flex; gap: 4px; font-size: 1.4rem; color: #f59e0b; line-height: 1;
}
.star-icon.off { color: var(--border); opacity: .6; }
.maturity-level-name { font-size: .95rem; font-weight: 700; color: var(--text); }
.maturity-level-desc { margin: 1px 0 0; font-size: .78rem; color: var(--muted); }

.badges-showcase-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px; margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}
.badge-pill-item {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 8px 6px; background: var(--card-raised); border: 1px solid var(--border);
    border-radius: var(--radius-sm); transition: transform .2s ease, border-color .2s ease;
}
.badge-pill-item.is-unlocked {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    background: color-mix(in srgb, var(--primary-soft) 40%, var(--card-raised));
}
.badge-pill-item.is-locked { opacity: .45; filter: grayscale(1); }
.badge-glyph { font-size: 1.25rem; margin-bottom: 4px; line-height: 1; }
.badge-title-text {
    font-size: .74rem; font-weight: 600; color: var(--text); line-height: 1.2;
}

/* Next Actions Section */
.next-actions-section { margin-bottom: 24px; }
.next-actions-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px;
}
.next-action-card {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 14px 16px; background: var(--card-raised); border: 1px solid var(--border);
    border-radius: var(--radius); transition: border-color .2s ease;
}
.next-action-card:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.next-action-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px;
}
.next-gain-pill {
    padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700;
    color: #fff; background: var(--success); box-shadow: 0 1px 3px rgba(39, 168, 121, .3);
}
.next-action-title { margin: 0; font-size: .92rem; font-weight: 700; color: var(--text); }
.next-action-desc { margin: 0 0 12px; font-size: .82rem; color: var(--muted); flex: 1 1 auto; }
.next-action-btn { align-self: flex-start; }

/* Connected Services Hub */
.connected-services-hub { margin-bottom: 24px; }
.connected-privacy-banner {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    background: var(--card-raised); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 16px; font-size: .84rem; color: var(--muted);
}
.connected-privacy-icon { font-size: 1.1rem; color: var(--primary-hover); flex: none; }
.connected-services-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.service-hub-card {
    display: flex; flex-direction: column; padding: 14px 16px;
    background: var(--card-raised); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.service-hub-card.is-connected {
    border-color: color-mix(in srgb, var(--success) 36%, var(--border));
}
.service-hub-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.service-hub-info { flex: 1 1 auto; min-width: 0; }
.service-hub-name { margin: 0; font-size: .95rem; font-weight: 700; color: var(--text); }
.service-hub-status { margin-top: 2px; }
.service-hub-desc { margin: 0 0 12px; font-size: .8rem; color: var(--muted); flex: 1 1 auto; }
.service-hub-action { margin-top: auto; }

/* Responsive queries */
@media (max-width: 1024px) {
    .digital-identity-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .smart-notif-item { flex-direction: column; align-items: flex-start; }
    .smart-notif-actions { width: 100%; justify-content: flex-start; }
    .completion-visual-row, .trust-visual-row { flex-direction: column; align-items: flex-start; }
    .progress-ring-container { margin: 0 auto; }
    .profile-health-header .row.gap-sm { flex-direction: column; width: 100%; }
    .profile-health-header .row.gap-sm .btn { width: 100%; text-align: center; justify-content: center; }
}

/* ---- messaging enhancement: ticks, attachments, reactions, reply ----------
.pref-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--card-raised);
    cursor: pointer;
    transition: border-color .2s ease;
}
.pref-row:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.pref-row input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary); }
.pref-row:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
   Ticks are the delivery language: one = stored, two grey = the recipient's
   client fetched the thread, two green = read AND the recipient's receipts
   preference allows telling the sender. Colour never stands alone — each
   tick state carries a title and an aria-label. */
.chat-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    margin-top: 2px;
}
.chat-ticks { display: inline-flex; color: var(--muted); }
.chat-ticks svg { width: 15px; height: 15px; }
.chat-ticks-delivered { color: color-mix(in srgb, var(--text) 55%, var(--muted)); }
.chat-ticks-seen { color: var(--ms-accent, var(--primary)); }

.chat-quote {
    display: block; margin: 0 0 6px; padding: 5px 9px;
    border-left: 3px solid var(--ms-accent, var(--primary));
    background: color-mix(in srgb, var(--ms-accent, var(--primary)) 8%, transparent);
    border-radius: 6px; text-decoration: none;
}
.chat-quote-name { display: block; font-size: .74rem; font-weight: 700; color: var(--ms-accent, var(--primary)); }
.chat-quote-body {
    display: block; font-size: .8rem; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}

.chat-attachments {
    list-style: none; margin: 6px 0 4px; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.chat-attachment {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 9px;
    background: var(--card); border: 1px solid var(--border);
    color: var(--text); text-decoration: none; font-size: .8rem;
    transition: border-color .2s ease, background .2s ease;
}
.chat-attachment:hover { border-color: color-mix(in srgb, var(--ms-accent, var(--primary)) 45%, var(--border)); }
.chat-attachment svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.chat-attachment-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-size { flex: none; color: var(--muted); font-size: .72rem; }

.chat-reactions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px;
    min-height: 24px;
}
.chat-reaction {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 7px; border-radius: 999px;
    background: var(--card); border: 1px solid var(--border);
    font-size: .78rem; cursor: pointer;
    transition: border-color .2s ease, transform .15s ease;
}
.chat-reaction:hover { border-color: color-mix(in srgb, var(--ms-accent, var(--primary)) 45%, var(--border)); transform: translateY(-1px); }
.chat-reaction.is-mine { border-color: var(--ms-accent, var(--primary)); background: color-mix(in srgb, var(--ms-accent, var(--primary)) 12%, var(--card)); }
.chat-reaction-count { font-size: .7rem; color: var(--muted); font-weight: 600; }
.chat-reaction-add, .chat-reply-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0;
    border: 0; background: none; border-radius: 999px;
    color: var(--muted); font-size: .72rem; cursor: pointer;
    opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.chat-row:hover .chat-reaction-add, .chat-row:hover .chat-reply-btn,
.chat-reaction-add:focus-visible, .chat-reply-btn:focus-visible { opacity: 1; }
.chat-reaction-add:hover, .chat-reply-btn:hover { background: var(--card-raised); }
.chat-reply-btn svg { width: 14px; height: 14px; }
.chat-reaction-add:focus-visible, .chat-reply-btn:focus-visible,
.chat-reaction:focus-visible, .chat-reaction-pick:focus-visible {
    outline: 2px solid var(--ms-accent, var(--primary)); outline-offset: 1px;
}
.chat-reaction-add-wrap { position: relative; display: inline-flex; }
.chat-reaction-add-wrap[hidden] { display: none; }
.chat-reaction-picker {
    position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5;
    display: flex; gap: 2px; padding: 4px;
    background: var(--card-raised); border: 1px solid var(--border);
    border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.chat-reaction-pick {
    width: 28px; height: 28px; padding: 0;
    border: 0; background: none; border-radius: 50%;
    font-size: 1rem; cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.chat-reaction-pick:hover { transform: scale(1.2); background: var(--card); }

/* round send button: idle / hover / focus / sending / disabled */
.messenger-composer { flex-direction: column; align-items: stretch; }
.messenger-composer-main { display: flex; align-items: flex-end; gap: 10px; }
.messenger-composer-side { display: flex; align-items: center; gap: 8px; flex-direction: row; }
.messenger-attach-btn {
    width: 40px; height: 40px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--ms-border); border-radius: 12px;
    color: var(--muted); cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
.messenger-attach-btn svg { width: 17px; height: 17px; }
.messenger-attach-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--ms-accent, var(--primary)) 45%, var(--ms-border)); }
.messenger-attach-btn:focus-visible { outline: 2px solid var(--ms-accent, var(--primary)); outline-offset: 2px; }
.messenger-send-round {
    position: relative; flex: none;
    width: 44px; height: 44px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: linear-gradient(135deg, var(--ms-accent), var(--ms-accent-2));
    color: #fff; cursor: pointer;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ms-accent, var(--primary)) 35%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.messenger-send-round svg { width: 18px; height: 18px; }
.messenger-send-round .messenger-send-spinner { display: none; }
.messenger-send-round:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 4px 14px color-mix(in srgb, var(--ms-accent, var(--primary)) 45%, transparent); }
.messenger-send-round:focus-visible { outline: 2px solid var(--ms-accent, var(--primary)); outline-offset: 3px; }
.messenger-send-round.is-sending { filter: saturate(.6); pointer-events: none; }
.messenger-send-round.is-sending .messenger-send-icon { display: none; }
.messenger-send-round.is-sending .messenger-send-spinner { display: block; animation: messenger-spin 1s linear infinite; }
.messenger-send-round:disabled { opacity: .5; cursor: not-allowed; transform: none; }
@keyframes messenger-spin { to { transform: rotate(360deg); } }

/* staged attachment chips + reply chip */
.messenger-attachments {
    list-style: none; margin: 0 0 8px; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.messenger-attachments[hidden] { display: none; }
.messenger-attachment-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 10px; border-radius: 9px;
    background: var(--ms-bg); border: 1px solid var(--ms-border);
    font-size: .76rem; max-width: 240px;
}
.messenger-attachment-chip .chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-attachment-chip .chip-size { flex: none; color: var(--muted); font-size: .7rem; }
.messenger-attachment-chip .chip-remove {
    width: 20px; height: 20px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: none;
    color: var(--muted); cursor: pointer; font-size: .7rem;
}
.messenger-attachment-chip .chip-remove:hover { color: #b91c1c; background: color-mix(in srgb, #ef4444 15%, transparent); }
.messenger-attach-error {
    margin: 0 0 8px; font-size: .78rem; color: #b91c1c;
}
.messenger-attach-error[hidden] { display: none; }
.messenger-replying {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px; padding: 5px 10px;
    border-left: 3px solid var(--ms-accent, var(--primary));
    background: var(--ms-bg); border-radius: 6px; font-size: .78rem;
}
.messenger-replying[hidden] { display: none; }
.messenger-replying-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.messenger-replying-cancel {
    width: 20px; height: 20px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: none;
    color: var(--muted); cursor: pointer; font-size: .7rem;
}
.messenger-replying-cancel:hover { color: #b91c1c; }
.messenger-retry { flex: none; }

/* conversation search page */
.messenger-search-page { display: flex; gap: 8px; margin-bottom: 14px; }
.messenger-search-page input[type="search"] {
    flex: 1; padding: 9px 14px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--card); color: var(--text);
}
.messenger-search-count { margin: 0 0 8px; }

@media (max-width: 768px) {
    .chat-bubble { max-width: 86%; }
    .chat-reaction-add, .chat-reply-btn { opacity: 1; }
    .messenger-composer-main { flex-wrap: wrap; }
    .messenger-composer textarea { flex: 1 1 100%; }
}

/* ==========================================================================
   Circular Floating Support Widget
   ========================================================================== */
.support-widget-wrap {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.support-fab {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary, #0056b3), #003d80);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.support-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
}
.support-fab:focus-visible {
    outline: 3px solid var(--accent, #ffd200);
    outline-offset: 3px;
}
.support-fab[aria-expanded="true"] {
    background: #003d80;
}
.support-fab[aria-expanded="true"] .support-fab-icon {
    display: inline-block;
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.support-fab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 86, 179, .5);
    animation: support-pulse 2.6s infinite;
    pointer-events: none;
}
@keyframes support-pulse {
    to { box-shadow: 0 0 0 16px rgba(0, 86, 179, 0); }
}
.support-fab-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    border: 2px solid #fff;
}
.support-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.support-menu[hidden] {
    display: none;
}
.support-menu a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card, #fff);
    color: var(--text, #333);
    text-decoration: none;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    border: 1px solid var(--border, #e0e0e0);
    animation: support-pop .2s ease both;
    transition: transform .15s ease, background .15s ease;
}
.support-menu a:hover {
    transform: scale(1.12);
    background: var(--bg-hover, #f0f4f8);
}
.support-menu li:nth-child(2) a { animation-delay: .04s; }
.support-menu li:nth-child(3) a { animation-delay: .08s; }
.support-menu li:nth-child(4) a { animation-delay: .12s; }
@keyframes support-pop {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- AI assistant panel --------------------------------------------------- */
.support-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(340px, calc(100vw - 32px));
    max-height: min(520px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    background: var(--card, #fff);
    color: var(--text, #333);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
    overflow: hidden;
    animation: support-pop .18s ease both;
}
.support-widget-wrap { position: fixed; } /* panel anchors to the wrap */
.support-panel[hidden] { display: none; }

.support-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--primary, #0056b3), #003d80);
    color: #fff;
}
.support-panel-title {
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.support-panel-head-actions { display: flex; gap: 4px; }
.support-panel-iconbtn {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 15px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
}
.support-panel-iconbtn:hover { background: rgba(255, 255, 255, .18); }
.support-panel-iconbtn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

.support-panel-log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg, #f6f8fb);
    min-height: 160px;
}
.support-msg {
    max-width: 86%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.support-msg-ai {
    align-self: flex-start;
    background: var(--card, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-bottom-left-radius: 4px;
}
.support-msg-me {
    align-self: flex-end;
    background: var(--primary, #0056b3);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.support-msg-typing .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--muted, #98a2b3);
    animation: support-blink 1.2s infinite;
}
.support-msg-typing .dot:nth-child(2) { animation-delay: .2s; }
.support-msg-typing .dot:nth-child(3) { animation-delay: .4s; }
@keyframes support-blink {
    0%, 60%, 100% { opacity: .3; }
    30% { opacity: 1; }
}

.support-panel-notice {
    margin: 0;
    padding: 6px 12px;
    font-size: 11.5px;
    color: var(--muted, #667085);
    background: var(--bg, #f6f8fb);
    border-top: 1px solid var(--border, #e0e0e0);
}

.support-panel-form {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border, #e0e0e0);
    background: var(--card, #fff);
}
.support-panel-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 999px;
    background: var(--bg, #f6f8fb);
    color: var(--text, #333);
    font-size: 13.5px;
}
.support-panel-input:focus {
    outline: none;
    border-color: var(--primary, #0056b3);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, .15);
}
.support-panel-send {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary, #0056b3), #003d80);
    color: #fff;
    font-size: 16px;
    display: grid;
    place-items: center;
    transition: transform .15s ease, opacity .15s ease;
}
.support-panel-send:hover:not(:disabled) { transform: scale(1.06); }
.support-panel-send:focus-visible {
    outline: 3px solid var(--accent, #ffd200);
    outline-offset: 2px;
}
.support-panel-send:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.support-panel-send-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: support-spin .7s linear infinite;
}
@keyframes support-spin {
    to { transform: rotate(360deg); }
}

/* --- help panel: where you are, FAQ, recommendations ---------------------- */
.support-panel--help {
    width: min(360px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 48px));
}
.support-help-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
    background: var(--card, #fff);
}
.support-help-section + .support-help-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border, #e0e0e0);
}
.support-help-section h3 {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #667085);
}
.support-here {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg, #f6f8fb);
    border: 1px solid var(--border, #e0e0e0);
}
.support-faq-item {
    border-bottom: 1px solid var(--border, #e0e0e0);
}
.support-faq-item:last-child {
    border-bottom: 0;
}
.support-faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text, #333);
}
.support-faq-item summary::-webkit-details-marker { display: none; }
.support-faq-item summary::before {
    content: "›";
    flex: 0 0 auto;
    color: var(--muted, #667085);
    transition: transform .15s ease;
}
.support-faq-item[open] summary::before {
    transform: rotate(90deg);
}
.support-faq-item summary:hover {
    color: var(--primary, #0056b3);
}
.support-faq-item summary:focus-visible {
    outline: 2px solid var(--primary, #0056b3);
    outline-offset: 2px;
    border-radius: 4px;
}
.support-faq-item p {
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text, #333);
}
.support-tips {
    margin: 0;
    padding: 0;
    list-style: none;
}
.support-tips li {
    position: relative;
    padding: 0 0 10px 22px;
    font-size: 13px;
    line-height: 1.5;
}
.support-tips li::before {
    content: "✦";
    position: absolute;
    left: 2px;
    top: 0;
    color: var(--primary, #0056b3);
    font-size: 12px;
}

@media (max-width: 768px) {
    .support-widget-wrap {
        right: 16px;
        bottom: 16px;
    }
    .support-fab {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }
    .support-panel {
        width: calc(100vw - 32px);
        max-height: min(70vh, 480px);
    }
    .support-panel--help {
        width: calc(100vw - 32px);
        max-height: min(70vh, 480px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .support-panel, .support-menu a { animation: none; }
    .support-msg-typing .dot { animation: none; }
}

/* motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-header, .site-footer, .filter-bar, .action-row, .pagination-bar, .auth-aside,
    .no-print, .flash { display: none !important; }

    /* Auth pages: the one-viewport desktop shell would clip the form to a
       single printed page — unroll it back into normal document flow. */
    .auth-shell { display: block; height: auto; min-height: 0; }
    .auth-panel { overflow: visible; height: auto; min-height: 0; padding: 0; }
    .auth-footer.auth-cluster { display: none; }

    body { background: #fff; color: #000; }
    .card, .table-wrap { border-color: #ccc; box-shadow: none; }
    .container { max-width: none; padding: 0; }
    .main { padding-block: 0; }

    /* A printed CV is the sheet and nothing else: no card frame, no radius. */
    .resume-sheet {
        background: #fff; color: #000; border: 0; border-radius: 0;
        max-width: none; padding: 0; margin: 0;
    }
    .resume-sheet h1, .resume-sheet h2, .resume-sheet b, .resume-items b { color: #000; }
    .resume-section h2 { border-bottom: 1px solid #999; padding-bottom: 3px; }
    .resume-section { break-inside: avoid; }
    .resume-items li { break-inside: avoid; border-left-color: #ccc; }

    .business-card { background: #fff; color: #000; border: 1px solid #333; max-width: none; }
    .bcard-name, .bcard-headline, .bcard-details dd { color: #000; }
    .avatar { background: #eee; color: #000; }
    a { color: #000; text-decoration: none; }
}

/* ============================================================================
   v1.0 upgrade additions — messenger presence + typing
   ============================================================================ */

/* Typing indicator under the thread title; animated dots, honest text. */
.messenger-typing {
    margin: 0;
    font-size: .78rem;
    color: var(--accent, #4f46e5);
    min-height: 1em;
}
.messenger-typing:not([hidden])::after {
    content: "…";
    animation: typing-dots 1.2s steps(4, end) infinite;
}
@keyframes typing-dots {
    0% { content: ""; }
    25% { content: "·"; }
    50% { content: "··"; }
    75% { content: "···"; }
}

/* Away state: amber dot; hidden presence renders exactly like offline. */
.messenger-presence.is-away .messenger-presence-dot { background: #d97706; }
.messenger-presence.is-away { cursor: help; }

/* The presence line inside the thread header switches its data-state. */
[data-messenger-presence][data-state="online"] { color: var(--accent, #4f46e5); }

/* Respect reduced-motion: no animated dots. */
@media (prefers-reduced-motion: reduce) {
    .messenger-typing:not([hidden])::after { animation: none; content: "…"; }
}