:root {
  --blue: #1647b9;
  --blue-deep: #0b2e79;
  --blue-dark: #071d4c;
  --blue-light: #eaf1ff;
  --cyan: #28a7e8;
  --red: #f0443e;
  --ink: #101b36;
  --muted: #68738b;
  --line: #dfe5ef;
  --surface: #f5f7fb;
  --white: #fff;
  --green: #138a62;
  --green-soft: #e3f7ef;
  --danger: #c93a3a;
  --danger-soft: #fff0ef;
  --shadow: 0 18px 55px rgba(16, 39, 88, .12);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--surface); font-family: Inter, Arial, Helvetica, sans-serif; line-height: 1.55; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
main { min-height: calc(100vh - 162px); }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.narrow-container { width: min(840px, calc(100% - 40px)); margin: 54px auto 80px; }
.muted { color: var(--muted); }
.text-success { color: var(--green); }
.text-danger { color: var(--danger); }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(17,42,98,.09); backdrop-filter: blur(14px); }
.header-inner { width: min(1260px, calc(100% - 36px)); min-height: 82px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-logo { width: 52px; height: 52px; display: grid; place-items: center; background: var(--blue); border-radius: 13px 13px 13px 3px; overflow: hidden; }
.brand-logo img { width: 42px; height: 42px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text strong { font-size: 23px; letter-spacing: .03em; color: var(--blue-deep); }
.brand-text small { margin-top: 7px; font-weight: 800; font-size: 9px; letter-spacing: .16em; color: var(--muted); }
.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav a, .nav-logout { border: 0; background: none; text-decoration: none; padding: 12px 15px; border-radius: 999px; color: #44506a; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.main-nav a:hover, .main-nav a.active { background: var(--blue-light); color: var(--blue); }
.nav-logout:hover { background: #fff1f0; color: var(--danger); }
.main-nav form { margin: 0; }
.menu-button { display: none; border: 0; background: var(--blue-light); color: var(--blue); border-radius: 10px; width: 44px; height: 44px; font-size: 20px; }

.site-footer { min-height: 80px; padding: 22px max(24px, calc((100vw - 1180px)/2)); display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--blue-dark); color: rgba(255,255,255,.72); font-size: 12px; }
.site-footer div { display: flex; flex-direction: column; }
.site-footer strong { color: white; font-size: 13px; }

.flash-stack { position: fixed; z-index: 100; top: 96px; right: 22px; display: grid; gap: 10px; width: min(390px, calc(100vw - 44px)); }
.flash { padding: 14px 17px; border-radius: 12px; box-shadow: var(--shadow); background: white; border-left: 5px solid var(--blue); font-weight: 700; animation: flash-in .25s ease; }
.flash-success { border-color: var(--green); }
.flash-warning { border-color: #d99a00; }
.flash-danger { border-color: var(--danger); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } }

.eyebrow { display: block; color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; }
.eyebrow.light { color: rgba(255,255,255,.74); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; }

.hero, .page-hero, .result-hero { position: relative; overflow: hidden; color: white; background: linear-gradient(120deg, var(--blue-deep), var(--blue) 64%, #236ed7); }
.hero::after, .page-hero::after { content: ""; position: absolute; right: -80px; top: -160px; width: 520px; height: 520px; border: 2px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 72px rgba(255,255,255,.035), 0 0 0 145px rgba(255,255,255,.025); }
.hero-grid { position: relative; z-index: 2; min-height: 430px; display: grid; grid-template-columns: 1.5fr .7fr; align-items: center; gap: 70px; }
.hero h1, .page-hero h1, .result-hero h1 { font-size: clamp(39px, 5.4vw, 72px); letter-spacing: -.045em; margin-bottom: 22px; max-width: 930px; }
.hero p, .page-hero p, .result-hero p { max-width: 690px; color: rgba(255,255,255,.77); font-size: 17px; }
.page-hero.compact .container { position: relative; z-index: 2; min-height: 300px; padding-block: 56px 50px; display: flex; flex-direction: column; justify-content: center; }
.page-hero.compact h1 { font-size: clamp(38px, 5vw, 64px); margin-bottom: 15px; }
.admin-hero { background: linear-gradient(120deg, #071d4c, #123d94 70%, #1e61c5); }
.back-link { align-self: flex-start; text-decoration: none; font-size: 11px; font-weight: 900; letter-spacing: .12em; margin-bottom: 30px; }
.back-link.light { color: rgba(255,255,255,.72); }
.back-link:hover { color: white; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.hero-tags span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: 12px; font-weight: 800; color: rgba(255,255,255,.82); }
.hero-tags .tag-success { background: rgba(44, 221, 157, .18); border-color: rgba(64, 235, 169, .35); color: white; }

.progress-orbit { display: grid; place-items: center; }
.progress-ring { --progress: 0; width: 218px; height: 218px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle closest-side, #1647b9 76%, transparent 78% 100%), conic-gradient(#fff calc(var(--progress) * 1%), rgba(255,255,255,.18) 0); box-shadow: 0 24px 70px rgba(0,0,0,.15); }
.progress-ring strong { font-size: 48px; letter-spacing: -.05em; line-height: 1; }
.progress-ring span { color: rgba(255,255,255,.65); font-weight: 700; font-size: 12px; margin-top: 7px; text-transform: uppercase; letter-spacing: .12em; }

.dashboard-section, .admin-container { padding-block: 65px 85px; }
.section-heading { margin-bottom: 30px; }
.section-heading h2 { font-size: clamp(31px, 4vw, 48px); letter-spacing: -.04em; margin: 0; }
.split-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
.mini-stats { display: flex; gap: 12px; }
.mini-stats span { min-width: 145px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 13px; background: white; color: var(--muted); font-size: 12px; }
.mini-stats strong { color: var(--blue-deep); font-size: 20px; display: block; }

.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.module-card { position: relative; min-height: 390px; display: flex; flex-direction: column; padding: 28px; background: white; border: 1px solid #e5e9f1; border-radius: var(--radius); box-shadow: 0 8px 30px rgba(23,51,103,.06); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.module-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.module-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--blue); }
.module-card.completed::before { background: var(--green); }
.module-card.locked { background: #f0f2f6; color: #788195; box-shadow: none; }
.module-card.locked::before { background: #aeb6c3; }
.module-number { font-size: 54px; line-height: 1; font-weight: 900; letter-spacing: -.06em; color: #dce6fa; }
.completed .module-number { color: #d5efe5; }
.locked .module-number { color: #dce0e7; }
.module-status { position: absolute; top: 31px; right: 27px; }
.status { display: inline-block; padding: 7px 10px; border-radius: 999px; font-size: 9px; letter-spacing: .12em; font-weight: 900; }
.status.current { background: var(--blue-light); color: var(--blue); }
.status.success { background: var(--green-soft); color: var(--green); }
.status.muted-status { background: #e4e7ec; color: #717b8e; }
.module-card h3 { font-size: 25px; margin: 26px 0 13px; letter-spacing: -.03em; }
.module-card p { color: var(--muted); font-size: 14px; flex-grow: 1; }
.module-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.best-result { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.best-result strong { color: var(--ink); }
.card-link { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; font-size: 11px; font-weight: 900; letter-spacing: .08em; color: var(--blue); }
.card-link span { font-size: 21px; }
.card-link.disabled { color: #8b94a5; font-size: 9px; }

.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 35px; padding-block: 58px 90px; align-items: start; }
.lesson-list { display: grid; gap: 20px; }
.lesson-card { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.lesson-top { display: flex; gap: 18px; align-items: flex-start; }
.lesson-index { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px 14px 14px 4px; background: var(--blue); color: white; font-size: 18px; font-weight: 900; }
.lesson-top h3 { margin: 2px 0 6px; font-size: 22px; }
.duration { color: var(--blue); font-size: 11px; font-weight: 800; }
.lesson-card > p { color: var(--muted); margin: 18px 0; }
.video-player, .video-frame { width: 100%; border-radius: 15px; background: #061127; margin-top: 20px; overflow: hidden; }
.video-player { max-height: 520px; }
.video-frame { aspect-ratio: 16 / 9; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-placeholder { margin-top: 20px; min-height: 160px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 17px; background: linear-gradient(135deg, #e8eefb, #f6f8fc); color: var(--blue-deep); }
.video-placeholder > span { width: 55px; height: 55px; display: grid; place-items: center; background: white; border-radius: 50%; box-shadow: 0 7px 22px rgba(20,60,130,.14); color: var(--blue); padding-left: 3px; }
.video-placeholder div { display: flex; flex-direction: column; }
.video-placeholder small { color: var(--muted); }
.content-sidebar { position: sticky; top: 108px; display: grid; gap: 18px; }
.test-callout { padding: 29px; border-radius: var(--radius); color: white; background: linear-gradient(145deg, var(--blue-deep), var(--blue)); box-shadow: var(--shadow); }
.test-callout h3 { font-size: 27px; margin: 0 0 13px; }
.test-callout p { color: rgba(255,255,255,.72); font-size: 14px; }
.attempt-card { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 25px; }
.attempt-card h3 { font-size: 19px; margin-bottom: 18px; }
.attempt-row { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line); font-size: 12px; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 47px; padding: 13px 21px; border: 1px solid transparent; border-radius: 12px; text-decoration: none; font-size: 11px; letter-spacing: .1em; font-weight: 900; transition: .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue); color: white; box-shadow: 0 10px 24px rgba(22,71,185,.22); }
.button-primary:hover { background: var(--blue-deep); }
.button-white { background: white; color: var(--blue-deep); }
.button-outline { color: var(--blue); border-color: #b8c9ed; background: white; }
.button-wide { width: 100%; }

.auth-page { background: var(--blue-deep); }
.auth-page .site-header { position: relative; background: var(--blue-deep); border-bottom-color: rgba(255,255,255,.1); }
.auth-page .brand-text strong, .auth-page .brand-text small { color: white; }
.auth-page .brand-logo { background: rgba(255,255,255,.12); }
.auth-page .site-footer { display: none; }
.auth-shell { min-height: calc(100vh - 82px); display: grid; grid-template-columns: 1.2fr .8fr; }
.auth-promo { position: relative; overflow: hidden; padding: clamp(45px, 7vw, 105px); display: flex; flex-direction: column; justify-content: center; color: white; background: linear-gradient(125deg, #081f50, #1647b9); }
.auth-promo::before { content: ""; position: absolute; width: 580px; height: 580px; border: 2px solid rgba(255,255,255,.11); border-radius: 50%; right: -280px; bottom: -280px; box-shadow: 0 0 0 80px rgba(255,255,255,.03), 0 0 0 160px rgba(255,255,255,.025); }
.auth-promo > * { position: relative; z-index: 2; }
.auth-promo h1 { font-size: clamp(38px, 5vw, 70px); letter-spacing: -.055em; margin-bottom: 25px; }
.auth-promo p { max-width: 650px; color: rgba(255,255,255,.72); font-size: 17px; }
.promo-stats { display: flex; gap: 45px; margin-top: 40px; }
.promo-stats div { display: flex; flex-direction: column; }
.promo-stats strong { font-size: 46px; line-height: 1; }
.promo-stats span { color: rgba(255,255,255,.6); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.auth-card { padding: clamp(35px, 6vw, 78px); display: flex; flex-direction: column; justify-content: center; background: white; }
.auth-card h2 { font-size: clamp(31px, 4vw, 50px); letter-spacing: -.045em; margin-bottom: 12px; }
.auth-card-wide { padding-inline: clamp(35px, 5vw, 70px); }
.auth-link { margin-top: 22px; color: var(--muted); font-size: 13px; text-align: center; }
.auth-link a { color: var(--blue); font-weight: 800; }

.stack-form { display: grid; gap: 18px; }
.stack-form label { display: grid; gap: 7px; color: #33405a; font-size: 12px; font-weight: 800; }
.stack-form small { font-weight: 500; color: var(--muted); }
input, textarea, select { width: 100%; color: var(--ink); border: 1px solid #cfd7e5; background: white; border-radius: 11px; outline: none; }
input, select { min-height: 48px; padding: 10px 13px; }
textarea { padding: 13px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(22,71,185,.10); }
input:disabled { background: #eff2f7; }
.form-grid { display: grid; gap: 15px; }
.form-grid.two { grid-template-columns: repeat(2, 1fr); }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.form-error { margin-bottom: 17px; padding: 13px 15px; background: var(--danger-soft); border-left: 4px solid var(--danger); color: var(--danger); border-radius: 9px; font-weight: 700; font-size: 13px; }
.check-label { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 10px !important; }
.check-label input { width: 19px; min-height: 19px; accent-color: var(--blue); }
.form-actions { display: flex; gap: 12px; margin-top: 7px; }
.form-panel { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(25px, 4vw, 42px); box-shadow: 0 8px 35px rgba(22,54,110,.06); }
.admin-form-panel { margin-bottom: 40px; }
.upload-box { padding: 22px; border: 2px dashed #bdcae3; border-radius: 14px; background: #f8faff; }
.upload-box p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.current-file { margin: 12px 0; font-size: 12px; color: var(--blue); font-weight: 800; }

.test-container { width: min(900px, calc(100% - 40px)); padding-block: 55px 90px; }
.test-form { display: grid; gap: 22px; }
.question-card { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 5vw, 40px); }
.question-number { color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .15em; margin-bottom: 16px; }
.question-card h2 { font-size: clamp(21px, 3vw, 30px); letter-spacing: -.025em; margin-bottom: 24px; }
.option-list { display: grid; gap: 10px; }
.option-item { display: flex; align-items: center; gap: 13px; min-height: 55px; padding: 12px 15px; border: 1px solid #d9e0ec; border-radius: 12px; cursor: pointer; transition: .15s ease; }
.option-item:hover { border-color: #99afe0; background: #f8faff; }
.option-item input { position: absolute; opacity: 0; width: 0; min-height: 0; }
.radio-mark { width: 21px; height: 21px; border: 2px solid #aab5c8; border-radius: 50%; flex: 0 0 auto; }
.option-item:has(input:checked) { border-color: var(--blue); background: var(--blue-light); color: var(--blue-deep); }
.option-item input:checked + .radio-mark { border: 6px solid var(--blue); }
.test-submit { display: flex; align-items: center; gap: 18px; padding-top: 15px; }
.test-submit span { color: var(--muted); font-size: 12px; }

.result-hero.passed { background: linear-gradient(120deg, #07563e, #15956a); }
.result-hero.failed { background: linear-gradient(120deg, #692322, #c4413e); }
.result-grid { min-height: 350px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }
.score-badge { width: 210px; height: 210px; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,.08); }
.score-badge strong { font-size: 55px; line-height: 1; }
.score-badge span { margin-top: 8px; color: rgba(255,255,255,.7); font-size: 12px; }
.result-content { padding-block: 45px 85px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 55px; }
.review-list { display: grid; gap: 15px; }
.review-card { background: white; border: 1px solid var(--line); border-left: 5px solid var(--green); border-radius: 15px; padding: 22px 25px; }
.review-card.wrong { border-left-color: var(--danger); }
.review-card h3 { font-size: 18px; margin: 10px 0 15px; }
.review-card p { margin: 5px 0; color: var(--muted); font-size: 13px; }
.review-status { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.wrong .review-status { color: var(--danger); }
.explanation { margin-top: 14px; padding: 13px 15px; background: #f4f7fc; border-radius: 10px; color: #46536d; font-size: 13px; }

.profile-layout { display: grid; grid-template-columns: 300px 1fr; gap: 25px; padding-block: 55px 85px; align-items: start; }
.profile-card { position: sticky; top: 110px; padding: 31px 24px; text-align: center; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.avatar { width: 100px; height: 100px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; color: white; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-size: 31px; font-weight: 900; }
.profile-card h2 { font-size: 21px; margin-bottom: 7px; }
.profile-card p { color: var(--muted); font-size: 12px; word-break: break-word; }
.role-chip { display: inline-block; padding: 7px 11px; border-radius: 999px; background: var(--blue-light); color: var(--blue); font-size: 9px; letter-spacing: .1em; font-weight: 900; }

.admin-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 28px; }
.admin-action { display: grid; grid-template-columns: auto 1fr auto; gap: 17px; align-items: center; min-height: 115px; padding: 24px; color: white; background: linear-gradient(135deg, var(--blue-deep), var(--blue)); border-radius: var(--radius); text-decoration: none; transition: .2s ease; }
.admin-action:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.admin-action > span { font-size: 31px; color: rgba(255,255,255,.35); font-weight: 900; }
.admin-action div { display: flex; flex-direction: column; }
.admin-action strong { font-size: 15px; letter-spacing: .04em; }
.admin-action small { color: rgba(255,255,255,.65); }
.admin-action b { font-size: 25px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.stat-card { min-height: 135px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; background: white; border: 1px solid var(--line); border-radius: 16px; }
.stat-card span { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.stat-card strong { color: var(--blue-deep); font-size: 45px; line-height: 1; }
.table-panel { background: white; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panel-heading { padding: 25px 27px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0; font-size: 27px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { padding: 15px 18px; text-align: left; border-bottom: 1px solid #e9edf4; font-size: 12px; vertical-align: middle; }
th { color: var(--muted); background: #f7f9fc; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
td small { color: var(--muted); }
.table-status { display: inline-block; padding: 6px 9px; border-radius: 999px; background: #eceff4; color: #68738a; font-weight: 900; }
.table-status.ok { background: var(--green-soft); color: var(--green); }
.table-status.bad { background: var(--danger-soft); color: var(--danger); }
.empty-cell { text-align: center; color: var(--muted); padding: 30px; }
.row-actions { display: flex; gap: 10px; align-items: center; }
.row-actions a, .row-actions button { color: var(--blue); border: 0; background: none; padding: 0; font-size: 11px; font-weight: 800; }
.row-actions button { color: var(--danger); }
.row-actions form { margin: 0; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 25px; }
.toolbar h2 { font-size: 34px; margin: 0 0 7px; }
.admin-module-list { display: grid; gap: 16px; }
.admin-module-card { display: grid; grid-template-columns: 74px 1fr auto; gap: 22px; align-items: center; padding: 24px; background: white; border: 1px solid var(--line); border-radius: 18px; }
.admin-module-order { display: grid; place-items: center; width: 64px; height: 64px; color: white; background: var(--blue); border-radius: 16px 16px 16px 4px; font-size: 23px; font-weight: 900; }
.admin-module-info h3 { margin: 9px 0; font-size: 22px; }
.admin-module-info p { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.admin-module-buttons { display: grid; gap: 7px; min-width: 120px; }
.admin-module-buttons a, .admin-module-buttons button { width: 100%; border: 1px solid #cad5e9; background: white; border-radius: 8px; padding: 8px 10px; color: var(--blue); text-decoration: none; text-align: center; font-size: 9px; letter-spacing: .08em; font-weight: 900; }
.admin-module-buttons button { color: var(--danger); border-color: #ebc4c2; }
.inline-status { display: flex; }
.question-admin-list { display: grid; gap: 16px; }
.question-admin-card { background: white; border: 1px solid var(--line); border-radius: 17px; padding: 24px; }
.question-admin-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.question-admin-card h3 { font-size: 20px; margin: 17px 0; }
.question-admin-card ol { color: var(--muted); font-size: 13px; padding-left: 22px; }
.correct-option { color: var(--green); font-weight: 800; }
.card-actions { display: flex; gap: 15px; margin-top: 18px; }
.card-actions a, .card-actions button { border: 0; background: none; color: var(--blue); text-decoration: none; font-size: 10px; font-weight: 900; letter-spacing: .08em; padding: 0; }
.card-actions button { color: var(--danger); }
.card-actions form { margin: 0; }
.options-editor { border: 1px solid var(--line); border-radius: 14px; padding: 19px; }
.options-editor legend { padding: 0 8px; color: var(--ink); font-weight: 900; }
.options-editor p { color: var(--muted); font-size: 11px; }
.option-edit-row { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 10px; margin-top: 9px; }
.option-edit-row input[type="radio"] { width: 20px; min-height: 20px; accent-color: var(--blue); }
.inline-user-form { display: flex; align-items: center; gap: 8px; }
.inline-user-form select { width: 145px; min-height: 37px; padding: 6px 9px; }
.mini-check { display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.mini-check input { width: 17px; min-height: 17px; accent-color: var(--blue); }
.small-button { border: 0; border-radius: 8px; background: var(--blue); color: white; padding: 9px 11px; font-size: 10px; font-weight: 800; }

.empty-state { padding: 45px; text-align: center; background: white; border: 1px dashed #bac5d8; border-radius: var(--radius); color: var(--muted); }
.empty-state h3 { color: var(--ink); }
.not-found { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.not-found > span { color: #d9e3f7; font-size: 130px; font-weight: 900; line-height: 1; }
.not-found h1 { font-size: 38px; }
.not-found p { color: var(--muted); }

@media (max-width: 1000px) {
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .content-layout { grid-template-columns: 1fr; }
  .content-sidebar { position: static; grid-template-columns: 1fr 1fr; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-promo { min-height: 470px; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-card { position: static; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-module-card { grid-template-columns: 64px 1fr; }
  .admin-module-buttons { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 760px) {
  .container, .narrow-container, .test-container { width: min(100% - 24px, 1180px); }
  .header-inner { width: calc(100% - 24px); min-height: 70px; }
  .brand-logo { width: 45px; height: 45px; }
  .brand-logo img { width: 36px; height: 36px; }
  .brand-text strong { font-size: 19px; }
  .brand-text small { font-size: 8px; }
  .menu-button { display: block; }
  .main-nav { position: absolute; top: 69px; left: 12px; right: 12px; display: none; flex-direction: column; align-items: stretch; padding: 12px; background: white; box-shadow: var(--shadow); border-radius: 15px; }
  .main-nav.open { display: flex; }
  .main-nav a, .nav-logout { width: 100%; text-align: left; }
  .hero-grid { min-height: 500px; grid-template-columns: 1fr; gap: 25px; padding-block: 50px; }
  .progress-orbit { justify-content: start; }
  .progress-ring { width: 150px; height: 150px; }
  .progress-ring strong { font-size: 35px; }
  .split-heading, .toolbar { align-items: flex-start; flex-direction: column; }
  .mini-stats { width: 100%; }
  .mini-stats span { min-width: 0; flex: 1; }
  .module-grid, .admin-actions { grid-template-columns: 1fr; }
  .content-sidebar { grid-template-columns: 1fr; }
  .form-grid.two, .form-grid.three { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; padding-block: 45px; }
  .score-badge { width: 150px; height: 150px; }
  .score-badge strong { font-size: 40px; }
  .admin-module-card { grid-template-columns: 52px 1fr; gap: 13px; padding: 18px; }
  .admin-module-order { width: 50px; height: 50px; font-size: 18px; }
  .admin-module-buttons { grid-template-columns: repeat(2, 1fr); }
  .inline-user-form { flex-wrap: wrap; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .hero h1, .page-hero.compact h1, .result-hero h1 { font-size: 34px; }
  .auth-promo { padding: 40px 24px; min-height: 420px; }
  .auth-card { padding: 38px 22px; }
  .promo-stats { gap: 25px; }
  .module-grid { grid-template-columns: 1fr; }
  .mini-stats { flex-direction: column; }
  .module-card { min-height: 360px; }
  .question-card { padding: 23px 18px; }
  .test-submit { align-items: stretch; flex-direction: column; }
  .test-submit .button { width: 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 110px; }
  .stat-card strong { font-size: 36px; }
  .form-actions { flex-direction: column; }
  .form-actions .button { width: 100%; }
}

.top-gap-small { padding-top: 0; }
.admin-actions-3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid-5 { grid-template-columns: repeat(5, 1fr); }
.profile-main-stack { display: grid; gap: 25px; }
.search-inline { display: flex; gap: 10px; align-items: center; }
.search-inline input { min-width: 280px; }

.certificate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.certificate-card { display: flex; flex-direction: column; gap: 14px; min-height: 250px; padding: 24px; background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 28px rgba(23,51,103,.05); }
.certificate-card h3 { font-size: 24px; margin: 0; }
.certificate-card p { color: var(--muted); flex-grow: 1; }
.certificate-card-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.final-certificate-card { background: linear-gradient(135deg, #ffffff, #f4f8ff); border-color: #cfe0ff; }
.certificate-mini-card .button { margin-top: 10px; }

.certificate-success-panel { margin-bottom: 34px; padding: 24px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; background: white; border: 1px solid var(--line); border-radius: 20px; }
.certificate-success-panel h2 { margin: 0 0 10px; font-size: 28px; }
.certificate-success-panel p { color: var(--muted); margin-bottom: 0; }
.certificate-success-actions { display: grid; gap: 12px; }

.certificate-list-compact { display: grid; gap: 14px; }
.certificate-list-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: #fbfcff; }
.certificate-list-row strong { display: block; margin-bottom: 6px; }
.certificate-list-row p { margin: 0 0 5px; color: var(--ink); }
.certificate-list-row small { color: var(--muted); }

.verify-result { margin-top: 24px; padding: 28px; border-radius: 18px; background: white; border: 1px solid var(--line); }
.success-box { border-color: #cae8db; background: #f7fcf9; }
.error-box { border-color: #f0cecb; background: #fff7f6; }
.verify-result h2 { font-size: 30px; margin-bottom: 16px; }

.certificate-page-wrap { padding: 30px 0 80px; }
.certificate-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.certificate-toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.certificate-sheet { width: min(1100px, calc(100% - 40px)); margin: 0 auto; background: white; border-radius: 28px; box-shadow: 0 24px 65px rgba(12, 38, 90, .14); }
.certificate-border { position: relative; padding: 38px; border: 12px solid #f3f7ff; border-radius: 28px; overflow: hidden; }
.certificate-topline { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(90deg, var(--blue-deep), var(--blue), var(--cyan)); }
.certificate-header { display: grid; grid-template-columns: 90px 1fr; gap: 24px; align-items: center; margin-bottom: 34px; }
.certificate-logo-box { width: 90px; height: 90px; display: grid; place-items: center; border-radius: 20px 20px 20px 6px; background: var(--blue); }
.certificate-logo-box img { width: 72px; height: 72px; object-fit: contain; }
.certificate-kicker { color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.certificate-header h1 { color: var(--blue-deep); font-size: clamp(40px, 6vw, 60px); letter-spacing: -.05em; margin: 0 0 8px; }
.certificate-subtitle { color: #4c5a77; font-size: 18px; margin: 0; }
.certificate-body { text-align: center; padding: 30px 20px 18px; }
.certificate-presented { color: var(--muted); font-size: 18px; margin-bottom: 15px; }
.certificate-name { font-size: clamp(34px, 5vw, 52px); font-weight: 900; line-height: 1.05; color: var(--blue-deep); margin-bottom: 14px; }
.certificate-award-text { color: #435271; font-size: 20px; margin-bottom: 10px; }
.certificate-program { font-size: clamp(24px, 4vw, 36px); line-height: 1.18; color: var(--ink); font-weight: 800; margin-bottom: 18px; }
.certificate-extra { max-width: 760px; margin: 0 auto; color: var(--muted); }
.certificate-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.certificate-meta-card { padding: 18px; border-radius: 18px; background: #f7f9fe; border: 1px solid #dce5f5; }
.certificate-meta-card span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.certificate-meta-card strong { color: var(--blue-deep); font-size: 18px; word-break: break-word; }
.certificate-footer-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-top: 32px; }
.certificate-signature { min-width: 250px; }
.signature-line { width: 240px; max-width: 100%; height: 1px; background: #20386d; margin-bottom: 10px; }
.certificate-signature span { color: var(--ink); font-weight: 800; }
.certificate-verify-box { max-width: 420px; text-align: right; }
.certificate-verify-box span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; margin-bottom: 8px; }
.certificate-verify-box strong { display: block; color: var(--blue); margin-bottom: 6px; }
.certificate-verify-box small { color: var(--muted); word-break: break-all; }

@media (max-width: 1000px) {
  .certificate-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .admin-actions-3 { grid-template-columns: 1fr; }
  .certificate-success-panel { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .certificate-grid { grid-template-columns: 1fr; }
  .search-inline { width: 100%; flex-direction: column; align-items: stretch; }
  .search-inline input { min-width: 0; }
  .certificate-toolbar { align-items: flex-start; flex-direction: column; }
  .certificate-header { grid-template-columns: 1fr; }
  .certificate-logo-box { width: 76px; height: 76px; }
  .certificate-logo-box img { width: 60px; height: 60px; }
  .certificate-meta-grid { grid-template-columns: 1fr; }
  .certificate-footer-row, .certificate-list-row { align-items: flex-start; flex-direction: column; }
  .certificate-verify-box { text-align: left; }
  .stats-grid-5 { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  .site-header, .site-footer, .flash-stack, .certificate-toolbar { display: none !important; }
  body { background: white; }
  main { min-height: auto; }
  .certificate-page-wrap { padding: 0; }
  .certificate-sheet { width: 100%; box-shadow: none; border-radius: 0; }
  .certificate-border { border-width: 8px; border-radius: 0; }
}

/* Premium certificate redesign */
.certificate-sheet-premium {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.98)),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(22,71,185,0.018) 34px 35px),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(22,71,185,0.018) 34px 35px);
}
.certificate-corner {
  position: absolute;
  width: 94px;
  height: 94px;
  border-color: rgba(22,71,185,.24);
  border-style: solid;
  pointer-events: none;
}
.corner-top-left { left: 26px; top: 26px; border-width: 3px 0 0 3px; border-top-left-radius: 28px; }
.corner-top-right { right: 26px; top: 26px; border-width: 3px 3px 0 0; border-top-right-radius: 28px; }
.corner-bottom-left { left: 26px; bottom: 26px; border-width: 0 0 3px 3px; border-bottom-left-radius: 28px; }
.corner-bottom-right { right: 26px; bottom: 26px; border-width: 0 3px 3px 0; border-bottom-right-radius: 28px; }
.premium-border {
  background:
    radial-gradient(circle at 50% 0%, rgba(40,167,232,.09), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.98));
  border: 1px solid rgba(22,71,185,.12);
  box-shadow: inset 0 0 0 10px rgba(243,247,255,.88), inset 0 0 0 11px rgba(22,71,185,.08);
}
.certificate-watermark {
  position: absolute;
  inset: 120px 0 auto 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.certificate-watermark img {
  width: min(420px, 44vw);
  opacity: .055;
  filter: grayscale(100%) contrast(1.2);
}
.certificate-identity-bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 20px 4px 10px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.premium-header {
  position: relative;
  z-index: 2;
  grid-template-columns: 94px 1fr 150px;
  align-items: center;
  padding-top: 10px;
}
.premium-logo-box {
  border-radius: 22px 22px 22px 8px;
  box-shadow: 0 14px 34px rgba(22,71,185,.22);
}
.certificate-badge-seal {
  justify-self: end;
  width: 136px;
  height: 136px;
  padding: 10px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, var(--blue), #225ed0, var(--cyan), var(--blue));
  box-shadow: 0 18px 36px rgba(10,46,121,.2);
}
.certificate-badge-seal-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: white;
  border: 2px dashed rgba(22,71,185,.28);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--blue-deep);
  line-height: 1.1;
}
.certificate-badge-seal-inner strong {
  display: block;
  font-size: 19px;
  letter-spacing: .08em;
}
.certificate-badge-seal-inner span {
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5772ac;
}
.premium-body {
  position: relative;
  z-index: 2;
  padding-top: 34px;
}
.certificate-highlight-line {
  width: min(260px, 70%);
  height: 4px;
  margin: 8px auto 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--cyan), transparent);
}
.premium-meta-grid {
  position: relative;
  z-index: 2;
  margin-top: 30px;
}
.premium-meta-grid .certificate-meta-card {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(242,247,255,.95));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.premium-footer-row {
  position: relative;
  z-index: 2;
  align-items: stretch;
  margin-top: 30px;
  padding: 22px 0 4px;
  border-top: 1px solid rgba(22,71,185,.1);
}
.certificate-signature-block,
.certificate-center-note,
.premium-verify-box {
  flex: 1 1 0;
}
.certificate-signature-title,
.certificate-center-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
  margin-bottom: 10px;
}
.certificate-center-note {
  text-align: center;
  padding-inline: 16px;
}
.certificate-center-note strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}
.premium-verify-box {
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(22,71,185,.08), rgba(40,167,232,.08));
  border: 1px solid rgba(22,71,185,.11);
}
@media (max-width: 1000px) {
  .premium-header { grid-template-columns: 94px 1fr; }
  .certificate-badge-seal { grid-column: 1 / -1; justify-self: start; width: 110px; height: 110px; }
  .premium-footer-row { flex-direction: column; }
  .certificate-center-note { text-align: left; padding-inline: 0; }
}
@media (max-width: 760px) {
  .certificate-identity-bar { gap: 8px 18px; font-size: 10px; }
  .premium-header { grid-template-columns: 1fr; }
  .certificate-badge-seal { justify-self: center; }
  .certificate-corner { width: 54px; height: 54px; }
  .premium-border { box-shadow: inset 0 0 0 6px rgba(243,247,255,.88), inset 0 0 0 7px rgba(22,71,185,.08); }
}
@media print {
  .certificate-corner { border-color: rgba(22,71,185,.35); }
  .certificate-watermark img { opacity: .045; }
}

/* Platform v2 additions */
.compact-section { padding-block: 48px 10px; }
.top-heading { margin-top: 52px; }
.deadline-banner { margin-top: 22px; display: inline-flex; gap: 8px; padding: 11px 15px; border-radius: 12px; font-size: 13px; }
.light-deadline { color: white; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }
.module-schedule { display: grid; gap: 5px; margin: 12px 0; color: var(--muted); font-size: 11px; font-weight: 800; }
.admin-schedule { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.announcement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.announcement-list { display: grid; gap: 18px; }
.announcement-card { padding: 22px; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 25px rgba(23,51,103,.05); }
.announcement-card > span, .announcement-meta { color: var(--muted); font-size: 11px; font-weight: 800; }
.announcement-card h3, .announcement-card h2 { margin: 12px 0; }
.announcement-card p { white-space: pre-wrap; color: #4d5971; margin-bottom: 0; }
.announcement-card-wide { padding: 28px; }
.announcement-meta { display: flex; justify-content: space-between; gap: 20px; }

.tutor-work-hero .hero-grid { min-height: 390px; }
.report-state-card { justify-self: center; width: min(300px, 100%); padding: 28px; border-radius: 22px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }
.report-state-card span { color: rgba(255,255,255,.65); font-weight: 900; }
.report-state-card strong { display: block; margin: 12px 0; font-size: 25px; }
.report-state-card p { margin: 0; font-size: 13px; }
.quick-action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quick-action-card { min-height: 210px; padding: 25px; text-decoration: none; background: white; border: 1px solid var(--line); border-radius: 20px; transition: .2s; }
.quick-action-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.quick-action-card > span { color: #b9cae9; font-size: 32px; font-weight: 900; }
.quick-action-card h3 { margin: 25px 0 10px; font-size: 22px; }
.quick-action-card p { color: var(--muted); }
.report-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; padding-block: 55px 85px; }

.verification-panel, .application-status-card { margin-top: 70px; text-align: center; }
.verification-panel h1, .application-status-card h1 { font-size: 38px; }


.application-data { margin-top: 28px; padding: 18px; display: grid; gap: 5px; background: #f6f8fc; border-radius: 14px; }
.application-list { display: grid; gap: 18px; }
.application-card { padding: 24px; background: white; border: 1px solid var(--line); border-radius: 18px; }
.application-card-head { display: flex; justify-content: space-between; gap: 20px; }
.application-card h3 { margin: 12px 0 5px; font-size: 23px; }
.application-card p { color: var(--muted); }
.application-flags { display: flex; gap: 22px; flex-wrap: wrap; padding: 13px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.application-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.application-actions form { display: grid; gap: 9px; }

.admin-actions-grid { grid-template-columns: repeat(3, 1fr); }
.user-role-form { display: grid; grid-template-columns: 145px minmax(140px, 1fr) auto auto; gap: 8px; align-items: center; }
.report-admin-list { display: grid; gap: 18px; }
.report-admin-card { padding: 24px; background: white; border: 1px solid var(--line); border-radius: 18px; }
.report-admin-head { display: flex; justify-content: space-between; gap: 20px; }
.report-admin-head h3 { margin: 12px 0 4px; }
.report-admin-head p { color: var(--muted); }
.report-content-text { margin-top: 15px; padding: 18px; white-space: pre-wrap; background: #f7f9fc; border-radius: 14px; color: #46536d; }
.target-role-box { border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 10px; }
.target-role-box legend { padding: 0 8px; font-weight: 900; }
.profile-group { margin-top: 15px; }

.chat-layout-single { padding-block: 48px 80px; }
.direct-chat-layout { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 20px; padding-block: 48px 80px; align-items: stretch; }
.chat-panel, .contact-list { background: white; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.contact-list { padding: 16px; max-height: 700px; overflow-y: auto; }
.contact-list h3 { padding: 8px; }
.contact-item { display: grid; grid-template-columns: 45px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; text-decoration: none; }
.contact-item:hover, .contact-item.active { background: var(--blue-light); }
.contact-avatar { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: white; font-weight: 900; }
.contact-item strong, .contact-item small { display: block; }
.contact-item small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.chat-dialog-title { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.chat-dialog-title strong, .chat-dialog-title span { display: block; }
.chat-dialog-title span { color: var(--muted); font-size: 11px; }
.chat-messages { min-height: 450px; max-height: 620px; overflow-y: auto; padding: 22px; display: grid; align-content: start; gap: 12px; background: #f5f7fb; }
.chat-message { max-width: min(700px, 86%); padding: 12px 15px; border-radius: 15px 15px 15px 4px; background: white; border: 1px solid var(--line); }
.chat-message.mine { justify-self: end; border-radius: 15px 15px 4px 15px; background: var(--blue-light); border-color: #ccdcfa; }
.chat-message-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 7px; font-size: 10px; }
.chat-message-head span { color: var(--muted); }
.chat-message p { margin: 0; white-space: pre-wrap; }
.chat-compose { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 17px; border-top: 1px solid var(--line); }
.chat-compose textarea { resize: vertical; }
.dialogue-placeholder { margin: 50px; }

.certificate-clean-preview { width: min(1120px, calc(100% - 40px)); margin: 0 auto; aspect-ratio: 1.414 / 1; padding: 20px; background: white; border: 2px solid var(--blue-deep); box-shadow: var(--shadow); }
.certificate-clean-inner { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--cyan); padding: 34px; background: radial-gradient(circle at center, rgba(40,167,232,.05), transparent 50%); }
.certificate-clean-logo { width: 62px; height: 58px; object-fit: contain; }
.certificate-clean-university { margin-top: 12px; color: var(--blue); font-weight: 900; font-size: 12px; letter-spacing: .06em; }
.certificate-clean-school { color: var(--muted); font-weight: 900; font-size: 10px; letter-spacing: .13em; margin-top: 5px; }
.certificate-clean-preview h1 { margin: 25px 0 7px; color: var(--blue-deep); font-size: clamp(38px, 5vw, 64px); }
.certificate-clean-subtitle { color: var(--muted); font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.certificate-clean-preview p { margin: 22px 0 8px; color: var(--muted); }
.certificate-clean-name { color: var(--blue-deep); font-size: clamp(28px, 4vw, 46px); font-weight: 900; }
.certificate-clean-title { max-width: 850px; color: var(--ink); font-size: clamp(21px, 3vw, 34px); font-weight: 800; }
.certificate-clean-meta { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.certificate-clean-meta > div { padding: 13px; background: var(--surface); border-radius: 12px; }
.certificate-clean-meta span, .certificate-clean-meta strong { display: block; }
.certificate-clean-meta span { color: var(--muted); font-size: 9px; text-transform: uppercase; font-weight: 900; }
.certificate-clean-meta strong { margin-top: 5px; color: var(--blue-deep); font-size: 12px; }
.certificate-clean-verify { margin-top: 18px; color: var(--muted); font-size: 9px; word-break: break-all; }

@media (max-width: 1000px) {
  .announcement-grid, .quick-action-grid, .admin-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .report-layout { grid-template-columns: 1fr; }
  .direct-chat-layout { grid-template-columns: 250px minmax(0,1fr); }
  .user-role-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .announcement-grid, .quick-action-grid, .admin-actions-grid, .application-actions { grid-template-columns: 1fr; }
  .direct-chat-layout { grid-template-columns: 1fr; }
  .contact-list { max-height: 320px; }
  .chat-compose { grid-template-columns: 1fr; }
  .chat-message { max-width: 94%; }
  .certificate-clean-preview { aspect-ratio: auto; min-height: 720px; }
  .certificate-clean-meta { grid-template-columns: 1fr; }
  .admin-schedule { grid-template-columns: 1fr; }
}

/* User-uploaded avatars */
.avatar,
.contact-avatar,
.chat-message-avatar {
  overflow: hidden;
}
.avatar img,
.contact-avatar img,
.chat-message-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.profile-avatar { border: 4px solid #e4edff; box-shadow: 0 12px 28px rgba(16, 57, 139, .14); }
.avatar-upload-block { display: grid; grid-template-columns: 92px 1fr; gap: 20px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #f8faff; }
.avatar-preview { width: 86px; height: 86px; margin: 0; font-size: 25px; }
.avatar-upload-block label { margin: 0; }
.avatar-upload-block input[type="file"] { margin-top: 8px; padding: 9px; background: white; }
.avatar-remove { margin-top: 12px !important; color: var(--danger); }
.contact-avatar { flex: 0 0 43px; }
.dialog-avatar { width: 48px; height: 48px; }
.chat-dialog-title { display: flex; align-items: center; gap: 13px; }
.chat-message { display: flex; align-items: flex-start; gap: 10px; padding: 10px; }
.chat-message.mine { flex-direction: row-reverse; }
.chat-message-avatar { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: white; font-size: 11px; font-weight: 900; border: 2px solid white; box-shadow: 0 3px 10px rgba(16, 43, 101, .13); }
.chat-message-content { min-width: 0; padding: 2px 4px; flex: 1; }
.chat-message.mine .chat-message-content { text-align: right; }
.chat-message.mine .chat-message-head { flex-direction: row-reverse; }

/* Formal SochiGU certificate preview */
.formal-certificate-preview {
  width: min(1180px, calc(100% - 32px));
  aspect-ratio: 1.414 / 1;
  margin: 0 auto;
  padding: 22px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 24px 65px rgba(16, 48, 115, .14);
  color: #123b83;
}
.formal-certificate-frame {
  position: relative;
  height: 100%;
  padding: 3.1% 5.3% 2.2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 3px solid #123b83;
  outline: 1px solid #7ea8e8;
  outline-offset: -10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(38, 110, 214, .035), transparent 38%),
    linear-gradient(180deg, #fff, #fcfdff);
}
.formal-certificate-frame::before,
.formal-certificate-frame::after {
  content: "";
  position: absolute;
  top: 5%;
  bottom: 5%;
  width: 7%;
  opacity: .28;
  background: repeating-radial-gradient(ellipse at center, transparent 0 9px, rgba(49, 112, 204, .18) 10px 11px, transparent 12px 18px);
}
.formal-certificate-frame::before { left: -3%; }
.formal-certificate-frame::after { right: -3%; }
.formal-certificate-logo { width: 7.5%; min-width: 56px; max-width: 88px; aspect-ratio: 1; margin-bottom: .8%; }
.formal-certificate-logo img { width: 100%; height: 100%; object-fit: contain; }
.formal-certificate-university { font-size: clamp(9px, 1vw, 15px); font-weight: 800; letter-spacing: .045em; color: #1654b4; }
.formal-certificate-divider,
.formal-certificate-flourish { width: 49%; display: flex; align-items: center; gap: 10px; margin: .9% 0; color: #1858bb; }
.formal-certificate-divider span,
.formal-certificate-flourish span { height: 1px; flex: 1; background: #92b6e9; }
.formal-certificate-divider b { font-size: clamp(11px, 1.4vw, 20px); }
.formal-certificate-frame h1 { margin: .3% 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 7vw, 94px); line-height: .94; letter-spacing: .035em; font-weight: 600; color: #103d8d; }
.formal-certificate-subtitle { margin-top: .8%; font-family: Georgia, "Times New Roman", serif; font-size: clamp(13px, 1.7vw, 26px); color: #174da2; }
.formal-certificate-flourish { width: 36%; margin: 1.1% 0 .7%; color: #81a8df; }
.formal-certificate-name { max-width: 90%; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 4.6vw, 70px); line-height: 1.08; letter-spacing: .05em; color: #16499b; }
.formal-certificate-frame > p { margin: .5% 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(11px, 1.35vw, 19px); color: #345b98; }
.formal-certificate-program { max-width: 86%; font-family: Georgia, "Times New Roman", serif; font-size: clamp(12px, 1.55vw, 23px); color: #234f98; }
.formal-certificate-meta { width: 72%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; margin-top: auto; padding-top: 1.5%; }
.formal-certificate-meta > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.formal-certificate-meta i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #edf4ff; color: #1452b0; font-style: normal; font-size: 18px; }
.formal-certificate-meta span { font-family: Georgia, "Times New Roman", serif; font-size: clamp(9px, 1.05vw, 15px); color: #315a9c; }
.formal-certificate-meta strong { width: 100%; padding: 5px 2px; border-bottom: 1px solid #6994d5; font-size: clamp(8px, .95vw, 14px); color: #113e8b; overflow-wrap: anywhere; }
.formal-certificate-meta strong.valid { color: #16845e; }
.formal-certificate-signature { width: 78%; display: grid; grid-template-columns: 1fr .8fr .35fr; gap: 4%; align-items: end; margin-top: 1.5%; font-family: Georgia, "Times New Roman", serif; font-size: clamp(8px, .9vw, 13px); color: #234f98; }
.formal-certificate-signature b { height: 1px; background: #5f8fd2; }
.formal-certificate-verify { margin-top: 1.1%; font-size: clamp(7px, .75vw, 11px); color: #46699f; overflow-wrap: anywhere; }

.formal-certificate-qr { position: absolute; right: 3.2%; bottom: 3.2%; width: clamp(48px, 6.2vw, 88px); display: grid; justify-items: center; gap: 3px; color: #103d8d; text-decoration: none; font-size: clamp(5px, .52vw, 8px); font-weight: 900; letter-spacing: .08em; }
.formal-certificate-qr img { width: 100%; height: auto; display: block; background: #fff; padding: 3px; border-radius: 4px; }

@media (max-width: 760px) {
  .avatar-upload-block { grid-template-columns: 1fr; }
  .avatar-preview { margin-inline: auto; }
  .formal-certificate-preview { padding: 8px; width: calc(100% - 16px); }
  .formal-certificate-frame { padding-inline: 3%; }
  .formal-certificate-meta { width: 90%; gap: 2%; }
  .formal-certificate-meta i { width: 24px; height: 24px; font-size: 12px; }
  .formal-certificate-signature { width: 90%; }
}

/* v4: brand, chat live updates, BBCode */
.brand-logo { background: transparent !important; border-radius: 0 !important; overflow: visible !important; }
.brand-logo img { width: 50px; height: 50px; object-fit: contain; }
.brand-text strong { text-transform: none; letter-spacing: -.02em; }
.brand-text strong span { color: var(--blue); }
.brand-text small { text-transform: none; letter-spacing: .08em; }
.nav-messages { display: inline-flex !important; align-items: center; gap: 7px; }
.unread-indicator { display: none; min-width: 19px; height: 19px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 999px; background: #e72929; color: #fff; font-size: 10px; line-height: 19px; font-weight: 900; box-shadow: 0 0 0 3px rgba(231,41,41,.12); }
.unread-indicator.visible { display: inline-flex; }
.contact-copy { min-width: 0; flex: 1; }
.contact-unread { min-width: 23px; height: 23px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; color: white; background: #e72929; font-size: 11px; font-weight: 900; }
.chat-messages { max-height: 590px; overflow-y: auto; scroll-behavior: smooth; }
.chat-compose { grid-template-columns: 1fr auto !important; align-items: end; }
.chat-compose .bb-toolbar { grid-column: 1 / -1; }
.send-icon-button { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--blue); color: white; box-shadow: 0 8px 20px rgba(22,71,185,.22); transition: transform .15s ease, background .15s ease; }
.send-icon-button:hover { transform: translateY(-2px); background: var(--blue-deep); }
.send-icon-button svg { width: 25px; height: 25px; fill: currentColor; }
.bb-toolbar { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px; border: 1px solid var(--line); border-radius: 11px; background: #f7f9fd; }
.bb-toolbar button { min-width: 32px; height: 31px; padding: 0 8px; border: 1px solid #d4dced; border-radius: 7px; background: white; color: var(--blue-deep); font-size: 12px; font-weight: 800; }
.bb-toolbar button:hover { border-color: var(--blue); color: var(--blue); }
.bb-content { color: inherit; word-break: break-word; }
.bb-content p { margin: 0; }
.bb-content a { color: var(--blue); }
.bb-center { text-align: center; }.bb-left { text-align: left; }.bb-right { text-align: right; }
.bb-quote { margin: 9px 0; padding: 10px 13px; border-left: 4px solid var(--blue); background: #f2f6ff; color: #46536d; border-radius: 0 8px 8px 0; }
.bb-code { margin: 9px 0; padding: 12px; overflow-x: auto; border-radius: 9px; background: #0c1830; color: #eef4ff; font-family: Consolas, monospace; font-size: 12px; }
.bb-image { max-width: min(100%, 620px); max-height: 520px; display: block; margin: 10px 0; border-radius: 12px; object-fit: contain; }
.bb-list { margin: 8px 0; padding-left: 25px; }
.announcement-cover { width: 100%; max-height: 520px; object-fit: cover; border-radius: 16px; margin-bottom: 20px; }
.announcement-image-preview img { max-width: 100%; max-height: 340px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); }
.announcement-body { line-height: 1.65; }
@media (max-width: 760px) { .chat-compose { grid-template-columns: 1fr auto !important; } .send-icon-button { width: 44px; height: 44px; } }

/* v5: full BBCode editor and live updates */
.bb-toolbar-shell { grid-column: 1 / -1; min-width: 0; }
.bb-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px;
  border: 1px solid #d9e1ef;
  border-radius: 13px;
  background: #f7f9fd;
}
.bb-tool-group { display: inline-flex; align-items: center; gap: 4px; padding-right: 7px; border-right: 1px solid #dce3ef; }
.bb-tool-group:last-child, .bb-tool-group-end { border-right: 0; padding-right: 0; }
.bb-tool-group-end { margin-left: auto; }
.bb-tool-selects { flex-wrap: wrap; }
.bb-toolbar button,
.bb-tool-select {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #d1daeb;
  border-radius: 8px;
  background: white;
  color: var(--blue-deep);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.bb-toolbar button:hover,
.bb-toolbar button.active,
.bb-tool-select:hover,
.bb-tool-select:focus { border-color: var(--blue); color: var(--blue); outline: none; }
.bb-tool-select { min-width: 108px; cursor: pointer; }
.bb-size-select { min-width: 82px; }
.bb-color-group { gap: 7px; }
.bb-color-tool {
  position: relative;
  width: 38px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d1daeb;
  border-radius: 8px;
  background: white;
  color: var(--blue-deep);
  font-weight: 900;
  cursor: pointer;
}
.bb-color-tool span { transform: translateY(-2px); }
.bb-color-tool input { position: absolute; left: 5px; right: 5px; bottom: 3px; width: 28px; height: 5px; min-height: 0; padding: 0; border: 0; opacity: 1; cursor: pointer; }
.bb-background-tool { background: #fff8ce; }
.bb-preview-toggle { min-width: 112px !important; }
.bb-preview {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid #d9e1ef;
  border-radius: 13px;
  background: white;
}
.bb-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 14px; border-bottom: 1px solid #e4e9f2; background: #f8faff; }
.bb-preview-head strong { color: var(--blue-deep); font-size: 12px; }
.bb-preview-head span { color: var(--muted); font-size: 10px; }
.bb-preview > .bb-content { min-height: 70px; max-height: 380px; overflow: auto; padding: 16px; }
.bb-background { padding: 1px 3px; border-radius: 3px; }
.bb-justify { text-align: justify; }
.bb-heading { margin: .45em 0; color: var(--blue-deep); font-weight: 900; line-height: 1.15; }
.bb-heading-1 { font-size: 2em; }
.bb-heading-2 { font-size: 1.55em; }
.bb-heading-3 { font-size: 1.25em; }
.bb-spoiler { margin: 9px 0; overflow: hidden; border: 1px solid #d8e1f0; border-radius: 9px; background: #f8faff; }
.bb-spoiler summary { padding: 9px 12px; color: var(--blue-deep); font-weight: 800; cursor: pointer; }
.bb-spoiler > div { padding: 11px 13px; border-top: 1px solid #dfe6f1; background: white; }
.bb-hr { height: 1px; margin: 14px 0; border: 0; background: #cdd8e9; }
.bb-content sub, .bb-content sup { font-size: .72em; }

/* Keep the Telegram-like send icon strictly inside its button. */
.send-icon-button { flex: 0 0 48px; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; padding: 0 !important; overflow: hidden; }
.send-icon-button svg { display: block; flex: 0 0 25px; width: 25px !important; min-width: 25px !important; max-width: 25px !important; height: 25px !important; min-height: 25px !important; max-height: 25px !important; }
.send-icon-button:disabled { opacity: .55; cursor: wait; transform: none; }

.live-toast-stack {
  position: fixed;
  z-index: 160;
  top: 96px;
  right: 20px;
  width: min(390px, calc(100vw - 32px));
  display: grid;
  gap: 11px;
  pointer-events: none;
}
.live-toast {
  position: relative;
  min-height: 92px;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 12px;
  align-items: center;
  overflow: hidden;
  padding: 13px 13px 17px;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255,255,255,.98);
  border: 1px solid #dce4f0;
  border-left: 5px solid var(--blue);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(11,36,89,.19);
  pointer-events: auto;
  animation: live-toast-in .28s ease both;
}
.live-toast:hover { border-color: #b8cae8; transform: translateY(-1px); }
.live-toast.leaving { animation: live-toast-out .25s ease both; }
.live-toast-image,
.live-toast-icon { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; }
.live-toast-icon { display: grid; place-items: center; color: white; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-size: 24px; font-weight: 900; }
.live-toast-copy { min-width: 0; }
.live-toast-copy > span { display: block; margin-bottom: 3px; color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.live-toast-copy strong { display: block; overflow: hidden; color: var(--blue-deep); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.live-toast-copy p { display: -webkit-box; margin: 5px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.live-toast-close { align-self: start; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: #7a8599; background: #f1f4f8; font-size: 18px; line-height: 1; }
.live-toast-close:hover { color: var(--danger); background: #fff0ef; }
.live-toast-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--blue); transform-origin: left; animation: live-toast-progress var(--toast-duration) linear forwards; }
.live-toast-error { border-left-color: var(--danger); }
.live-toast-error .live-toast-icon, .live-toast-error .live-toast-progress { background: var(--danger); }
@keyframes live-toast-in { from { opacity: 0; transform: translateX(34px) scale(.98); } }
@keyframes live-toast-out { to { opacity: 0; transform: translateX(34px) scale(.98); } }
@keyframes live-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 760px) {
  .bb-tool-group { border-right: 0; padding-right: 0; }
  .bb-tool-group-end { width: 100%; margin-left: 0; }
  .bb-preview-toggle { width: 100%; }
  .live-toast-stack { top: 80px; right: 12px; width: calc(100vw - 24px); }
  .live-toast { grid-template-columns: 48px 1fr auto; }
  .live-toast-image, .live-toast-icon { width: 48px; height: 48px; }
}

/* v6: light/dark theme, presence, typing and browser notification prompt */
html { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --blue: #5d8cff;
  --blue-deep: #9db8ff;
  --blue-dark: #061026;
  --blue-light: #16284d;
  --cyan: #46b9f4;
  --ink: #eef4ff;
  --muted: #9daac1;
  --line: #293751;
  --surface: #091326;
  --white: #101d33;
  --green: #4bd3a0;
  --green-soft: #12392f;
  --danger: #ff7474;
  --danger-soft: #3a1d24;
  --shadow: 0 18px 55px rgba(0,0,0,.35);
}

.theme-toggle {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--blue);
  background: var(--white);
  font-size: 18px;
  box-shadow: 0 7px 20px rgba(17,46,103,.08);
  transition: transform .18s ease, background .18s ease;
}
.theme-toggle:hover { transform: translateY(-2px) rotate(8deg); background: var(--blue-light); }

.presence-dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  flex: 0 0 10px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: #98a2b5;
  box-shadow: 0 0 0 1px rgba(9,26,59,.08);
}
.presence-dot.online {
  background: #20c77a;
  box-shadow: 0 0 0 4px rgba(32,199,122,.13);
}
.contact-avatar-wrap { position: relative; flex: 0 0 auto; display: inline-grid; }
.contact-presence-dot { position: absolute; right: -1px; bottom: 1px; width: 12px; height: 12px; }
.contact-presence-label { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.25; }
.chat-presence-bar {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--white) 92%, var(--blue) 8%);
  font-size: 12px;
  font-weight: 700;
}
.typing-indicator {
  display: none;
  margin-left: auto;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  animation: typing-pulse 1.25s ease-in-out infinite;
}
.typing-indicator.visible { display: inline-block; }
.chat-dialog-title .typing-indicator { margin: 4px 0 0; }
@keyframes typing-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

.notification-permission {
  position: fixed;
  z-index: 170;
  right: 20px;
  bottom: 20px;
  width: min(470px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: color-mix(in srgb, var(--white) 96%, var(--blue) 4%);
  box-shadow: 0 24px 65px rgba(4,20,50,.28);
  animation: live-toast-in .28s ease both;
}
.notification-permission[hidden] { display: none !important; }
.notification-permission-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: var(--blue-light); font-size: 23px; }
.notification-permission strong { display: block; margin-bottom: 4px; color: var(--blue-deep); }
.notification-permission p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.notification-permission-actions { display: grid; gap: 6px; }
.notification-permission-actions .button { min-height: 40px; padding: 9px 14px; }
.notification-later { padding: 5px; border: 0; color: var(--muted); background: transparent; font-size: 11px; }
.notification-later:hover { color: var(--blue); }
.live-toast-message { border-left-color: #8b5cf6; }
.live-toast-message .live-toast-progress { background: #8b5cf6; }

html[data-theme="dark"] body { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .site-header { background: rgba(9,19,38,.94); border-bottom-color: rgba(150,176,225,.13); }
html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .nav-logout { color: #b7c3d8; }
html[data-theme="dark"] .main-nav a:hover,
html[data-theme="dark"] .main-nav a.active { color: #dce7ff; background: #172846; }
html[data-theme="dark"] .brand-text strong { color: #eef4ff; }
html[data-theme="dark"] .brand-text small { color: #8fa0bd; }
html[data-theme="dark"] .flash,
html[data-theme="dark"] .mini-stats span,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .lesson-card,
html[data-theme="dark"] .attempt-card,
html[data-theme="dark"] .form-panel,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .table-panel,
html[data-theme="dark"] .admin-module-card,
html[data-theme="dark"] .question-admin-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .certificate-card,
html[data-theme="dark"] .certificate-success-panel,
html[data-theme="dark"] .verify-result,
html[data-theme="dark"] .announcement-card,
html[data-theme="dark"] .quick-action-card,
html[data-theme="dark"] .application-card,
html[data-theme="dark"] .report-admin-card,
html[data-theme="dark"] .chat-panel,
html[data-theme="dark"] .contact-list,
html[data-theme="dark"] .chat-message,
html[data-theme="dark"] .bb-preview,
html[data-theme="dark"] .live-toast { background: #101d33; border-color: #293751; color: #eef4ff; }
html[data-theme="dark"] .module-card.locked { background: #111a2b; color: #8793a8; }
html[data-theme="dark"] .auth-card { background: #101d33; }
html[data-theme="dark"] .auth-card h2,
html[data-theme="dark"] .stack-form label { color: #eef4ff; }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { color: #eef4ff; background: #0c172a; border-color: #35435c; }
html[data-theme="dark"] input:disabled { background: #172033; }
html[data-theme="dark"] .button-white,
html[data-theme="dark"] .button-outline,
html[data-theme="dark"] .admin-module-buttons a,
html[data-theme="dark"] .admin-module-buttons button { color: #c9d8ff; background: #14233c; border-color: #344768; }
html[data-theme="dark"] .bb-toolbar,
html[data-theme="dark"] .bb-preview-head,
html[data-theme="dark"] .chat-presence-bar { background: #0d1a2f; border-color: #293751; }
html[data-theme="dark"] .bb-toolbar button,
html[data-theme="dark"] .bb-tool-select,
html[data-theme="dark"] .bb-color-tool { color: #d9e5ff; background: #14233c; border-color: #354764; }
html[data-theme="dark"] .bb-background-tool { background: #3a3420; }
html[data-theme="dark"] .bb-quote { color: #c2cee0; background: #172744; }
html[data-theme="dark"] .bb-spoiler { background: #0d1a2f; border-color: #30405a; }
html[data-theme="dark"] .bb-spoiler > div { background: #101d33; border-color: #30405a; }
html[data-theme="dark"] .contact-item:hover,
html[data-theme="dark"] .contact-item.active { background: #172744; }
html[data-theme="dark"] .chat-message.mine { background: #17376c; border-color: #26509a; }
html[data-theme="dark"] .table-panel th { background: #0d1a2f; }
html[data-theme="dark"] .table-panel tr:hover td { background: #14233c; }
html[data-theme="dark"] .video-placeholder { background: linear-gradient(135deg, #15243c, #0e1a2d); }
html[data-theme="dark"] .video-placeholder > span { background: #1a2b47; }
html[data-theme="dark"] .live-toast-copy strong,
html[data-theme="dark"] .notification-permission strong { color: #d9e5ff; }
html[data-theme="dark"] .notification-permission { background: #101d33; border-color: #2c3c57; }
html[data-theme="dark"] .main-nav.open { background: #101d33; }
html[data-theme="dark"] .site-footer { background: #050b17; }
html[data-theme="dark"] .formal-certificate-frame,
html[data-theme="dark"] .certificate-sheet,
html[data-theme="dark"] .certificate-clean-preview { color-scheme: light; }

@media (max-width: 900px) {
  .notification-permission { grid-template-columns: 45px 1fr; }
  .notification-permission-actions { grid-column: 1 / -1; grid-template-columns: 1fr auto; }
}
@media (max-width: 760px) {
  .theme-toggle { width: 100%; border-radius: 12px; }
  .notification-permission { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
  .typing-indicator { margin-left: 0; width: 100%; }
  .chat-presence-bar { flex-wrap: wrap; }
}

/* v7: Barsik support assistant */
.barsik-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 96;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 7px 16px 7px 7px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #1647b9, #287ae8);
  box-shadow: 0 18px 42px rgba(22, 71, 185, .32);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.barsik-launcher:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(22, 71, 185, .4); }
.barsik-launcher-face {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  font-size: 23px;
}
.barsik-panel {
  position: fixed;
  right: 22px;
  bottom: 86px;
  z-index: 97;
  width: min(410px, calc(100vw - 28px));
  height: min(650px, calc(100vh - 120px));
  display: grid;
  grid-template-rows: auto auto 1fr auto auto auto;
  overflow: hidden;
  border: 1px solid #d8e2f3;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(17, 44, 93, .25);
  transform-origin: right bottom;
  animation: barsik-open .2s ease-out;
}
.barsik-panel[hidden] { display: none !important; }
@keyframes barsik-open { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.barsik-header {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 14px 15px;
  color: #fff;
  background: linear-gradient(135deg, #123a9d, #266ed4);
}
.barsik-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(255,255,255,.16);
  font-size: 26px;
}
.barsik-header strong { display: block; font-size: 17px; }
.barsik-header span { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: rgba(255,255,255,.8); font-size: 11px; }
.barsik-header span i { width: 8px; height: 8px; border-radius: 50%; background: #48e291; box-shadow: 0 0 0 3px rgba(72,226,145,.16); }
.barsik-clear,
.barsik-close {
  border: 0;
  color: rgba(255,255,255,.88);
  background: transparent;
  cursor: pointer;
}
.barsik-clear { font: inherit; font-size: 11px; font-weight: 800; }
.barsik-close { width: 32px; height: 32px; border-radius: 10px; font-size: 24px; line-height: 1; }
.barsik-clear:hover,
.barsik-close:hover { color: #fff; background: rgba(255,255,255,.12); }
.barsik-notice {
  padding: 10px 14px;
  color: #60708d;
  background: #f4f7fd;
  border-bottom: 1px solid #e1e8f4;
  font-size: 11px;
  line-height: 1.45;
}
.barsik-messages {
  min-height: 0;
  overflow-y: auto;
  padding: 15px;
  scroll-behavior: smooth;
  background:
    radial-gradient(circle at 12% 7%, rgba(40,122,232,.055), transparent 25%),
    #fbfcff;
}
.barsik-message { display: flex; margin: 0 0 12px; }
.barsik-message.user { justify-content: flex-end; }
.barsik-bubble {
  max-width: 84%;
  padding: 11px 13px;
  border: 1px solid #dce5f3;
  border-radius: 16px 16px 16px 5px;
  color: #1c2b49;
  background: #fff;
  box-shadow: 0 5px 16px rgba(29,55,104,.05);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.48;
}
.barsik-message.user .barsik-bubble {
  color: #fff;
  background: linear-gradient(135deg, #1647b9, #286fda);
  border-color: transparent;
  border-radius: 16px 16px 5px 16px;
}
.barsik-message.urgent .barsik-bubble {
  color: #6d241d;
  background: #fff1ef;
  border-color: #f3b5ad;
}
.barsik-message-time { display: block; margin-top: 6px; opacity: .62; font-size: 9px; text-align: right; }
.barsik-welcome { padding: 15px; border-radius: 17px; color: #40506d; background: #eef4ff; font-size: 13px; line-height: 1.5; }
.barsik-welcome strong { display: block; margin-bottom: 4px; color: #143c98; font-size: 15px; }
.barsik-suggestions { display: flex; gap: 7px; overflow-x: auto; padding: 8px 12px 3px; background: #fff; }
.barsik-suggestions button {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #ccdaee;
  border-radius: 999px;
  color: #234a97;
  background: #f6f9ff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.barsik-suggestions button:hover { background: #eaf2ff; }
.barsik-typing { padding: 5px 15px 3px; color: #66748d; background: #fff; font-size: 11px; }
.barsik-typing span { display: inline-block; width: 5px; height: 5px; margin-right: 2px; border-radius: 50%; background: #2a69d2; animation: barsik-dot 1s infinite ease-in-out; }
.barsik-typing span:nth-child(2) { animation-delay: .15s; }
.barsik-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes barsik-dot { 0%,60%,100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-3px); opacity: 1; } }
.barsik-compose {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 8px;
  align-items: end;
  padding: 10px 12px 12px;
  background: #fff;
  border-top: 1px solid #e1e8f4;
}
.barsik-compose textarea {
  width: 100%;
  min-height: 42px;
  max-height: 120px;
  resize: none;
  padding: 10px 12px;
  border: 1px solid #cdd9eb;
  border-radius: 15px;
  color: #1d2c49;
  background: #f8faff;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
}
.barsik-compose textarea:focus { outline: 3px solid rgba(40,122,232,.12); border-color: #3d79d9; }
.barsik-compose button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #1647b9, #287ae8);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(22,71,185,.22);
}
.barsik-compose button:disabled { opacity: .55; cursor: wait; }
.barsik-compose svg { width: 21px !important; height: 21px !important; display: block; fill: currentColor; }

html[data-theme="dark"] .barsik-panel { background: #101d33; border-color: #2b3b57; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
html[data-theme="dark"] .barsik-notice { color: #aab8cf; background: #0d192b; border-color: #2a3953; }
html[data-theme="dark"] .barsik-messages { background: radial-gradient(circle at 12% 7%, rgba(55,126,234,.1), transparent 25%), #0b1628; }
html[data-theme="dark"] .barsik-bubble { color: #e7efff; background: #14243d; border-color: #2d405e; }
html[data-theme="dark"] .barsik-message.user .barsik-bubble { background: linear-gradient(135deg, #2456ba, #2b72d5); border-color: transparent; }
html[data-theme="dark"] .barsik-message.urgent .barsik-bubble { color: #ffd8d1; background: #472522; border-color: #81413b; }
html[data-theme="dark"] .barsik-welcome { color: #bfcaDC; background: #14243d; }
html[data-theme="dark"] .barsik-welcome strong { color: #bcd1ff; }
html[data-theme="dark"] .barsik-suggestions,
html[data-theme="dark"] .barsik-typing,
html[data-theme="dark"] .barsik-compose { background: #101d33; }
html[data-theme="dark"] .barsik-suggestions button { color: #c8d8ff; background: #162842; border-color: #354969; }
html[data-theme="dark"] .barsik-suggestions button:hover { background: #1b3152; }
html[data-theme="dark"] .barsik-compose { border-color: #2d3d58; }
html[data-theme="dark"] .barsik-compose textarea { color: #edf4ff; background: #0b1729; border-color: #354764; }

@media (max-width: 760px) {
  .barsik-launcher { right: 12px; bottom: 12px; min-height: 48px; padding-right: 13px; }
  .barsik-launcher-face { width: 34px; height: 34px; }
  .barsik-panel { inset: 68px 8px 8px 8px; width: auto; height: auto; border-radius: 20px; }
  .barsik-launcher-label { display: none; }
}

/* v8: Barsik avatar and streamed answer effect */
.barsik-launcher-face,
.barsik-avatar {
  overflow: hidden;
  background: #eef4ff;
  border: 1px solid rgba(255,255,255,.42);
}
.barsik-launcher-face img,
.barsik-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.08);
}
.barsik-message.assistant {
  align-items: flex-end;
  gap: 8px;
}
.barsik-message-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: block;
  object-fit: cover;
  object-position: center 30%;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #eaf2ff;
  box-shadow: 0 4px 12px rgba(22,71,185,.18);
}
.barsik-message.assistant .barsik-bubble { max-width: calc(84% - 38px); }
.barsik-message.is-streaming [data-barsik-body]::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -.12em;
  border-radius: 2px;
  background: currentColor;
  animation: barsik-caret .75s steps(1) infinite;
}
@keyframes barsik-caret { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
html[data-theme="dark"] .barsik-message-avatar {
  border-color: #182944;
  background: #14243d;
  box-shadow: 0 5px 14px rgba(0,0,0,.28);
}
@media (prefers-reduced-motion: reduce) {
  .barsik-message.is-streaming [data-barsik-body]::after { display: none; }
}

/* v8.1: complete dark treatment for chats */
html[data-theme="dark"] .chat-layout-single,
html[data-theme="dark"] .direct-chat-layout {
  color: var(--ink);
}

html[data-theme="dark"] .chat-panel,
html[data-theme="dark"] .contact-list {
  background: #0f1b2f !important;
  border-color: #2b3b57 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .contact-list h3,
html[data-theme="dark"] .chat-dialog-title strong,
html[data-theme="dark"] .chat-message-head strong {
  color: #eef4ff;
}

html[data-theme="dark"] .contact-item {
  color: #e8efff;
  border: 1px solid transparent;
}

html[data-theme="dark"] .contact-item:hover,
html[data-theme="dark"] .contact-item.active {
  color: #fff;
  background: #172744 !important;
  border-color: #2e4770;
}

html[data-theme="dark"] .contact-item small,
html[data-theme="dark"] .contact-presence-label,
html[data-theme="dark"] .chat-dialog-title span,
html[data-theme="dark"] .chat-message-head span {
  color: #9facbf;
}

html[data-theme="dark"] .contact-avatar,
html[data-theme="dark"] .chat-message-avatar {
  color: #fff;
  background: #244eaa;
  border-color: #0f1b2f;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .chat-dialog-title,
html[data-theme="dark"] .chat-presence-bar {
  color: #c8d5eb;
  background: #101e34 !important;
  border-color: #2b3b57 !important;
}

html[data-theme="dark"] .chat-messages {
  background:
    radial-gradient(circle at 8% 3%, rgba(67, 119, 224, .10), transparent 28%),
    linear-gradient(180deg, #0a1526, #0c1729) !important;
  scrollbar-color: #40516f #0c1729;
}

html[data-theme="dark"] .chat-message {
  color: #eaf1ff;
  background: #14243d !important;
  border-color: #2c405f !important;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .16);
}

html[data-theme="dark"] .chat-message.mine {
  color: #fff;
  background: linear-gradient(135deg, #204c9d, #2462bd) !important;
  border-color: #356fc9 !important;
}

html[data-theme="dark"] .chat-message .bb-content,
html[data-theme="dark"] .chat-message .bb-content p,
html[data-theme="dark"] .chat-message .bb-content span {
  color: inherit;
}

html[data-theme="dark"] .chat-message .bb-content a {
  color: #8fc0ff;
}

html[data-theme="dark"] .chat-message.mine .bb-content a {
  color: #d5e8ff;
}

html[data-theme="dark"] .chat-compose {
  background: #101e34 !important;
  border-color: #2b3b57 !important;
}

html[data-theme="dark"] .chat-compose textarea,
html[data-theme="dark"] .bb-editor-form textarea {
  color: #edf4ff !important;
  background: #0a1628 !important;
  border-color: #354866 !important;
  caret-color: #7ba6ff;
}

html[data-theme="dark"] .chat-compose textarea::placeholder,
html[data-theme="dark"] .bb-editor-form textarea::placeholder {
  color: #7f8da5;
}

html[data-theme="dark"] .chat-compose textarea:focus,
html[data-theme="dark"] .bb-editor-form textarea:focus {
  border-color: #5d8cff !important;
  outline: 3px solid rgba(93, 140, 255, .13);
}

html[data-theme="dark"] .bb-toolbar {
  background: #0d1a2f !important;
  border-color: #2b3b57 !important;
}

html[data-theme="dark"] .bb-tool-group {
  border-right-color: #2e3e59;
}

html[data-theme="dark"] .bb-toolbar button,
html[data-theme="dark"] .bb-tool-select,
html[data-theme="dark"] .bb-color-tool {
  color: #dce7fb !important;
  background: #162842 !important;
  border-color: #354969 !important;
}

html[data-theme="dark"] .bb-toolbar button:hover,
html[data-theme="dark"] .bb-toolbar button.active,
html[data-theme="dark"] .bb-tool-select:hover,
html[data-theme="dark"] .bb-tool-select:focus,
html[data-theme="dark"] .bb-color-tool:hover {
  color: #fff !important;
  background: #1c3355 !important;
  border-color: #628cf0 !important;
}

html[data-theme="dark"] .bb-background-tool {
  background: #3c3420 !important;
}

html[data-theme="dark"] .bb-preview {
  color: #eaf1ff;
  background: #101e34 !important;
  border-color: #2b3b57 !important;
}

html[data-theme="dark"] .bb-preview-head {
  background: #0d1a2f !important;
  border-color: #2b3b57 !important;
}

html[data-theme="dark"] .bb-preview-head strong,
html[data-theme="dark"] .bb-heading,
html[data-theme="dark"] .bb-spoiler summary {
  color: #c7d8ff;
}

html[data-theme="dark"] .dialogue-placeholder,
html[data-theme="dark"] .chat-panel .empty-state {
  color: #aab7cc;
  background: #101e34 !important;
  border-color: #2b3b57 !important;
}

html[data-theme="dark"] .chat-messages::-webkit-scrollbar,
html[data-theme="dark"] .contact-list::-webkit-scrollbar,
html[data-theme="dark"] .barsik-messages::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-theme="dark"] .chat-messages::-webkit-scrollbar-track,
html[data-theme="dark"] .contact-list::-webkit-scrollbar-track,
html[data-theme="dark"] .barsik-messages::-webkit-scrollbar-track {
  background: #0a1526;
}

html[data-theme="dark"] .chat-messages::-webkit-scrollbar-thumb,
html[data-theme="dark"] .contact-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] .barsik-messages::-webkit-scrollbar-thumb {
  background: #40516f;
  border: 2px solid #0a1526;
  border-radius: 999px;
}

html[data-theme="dark"] .chat-messages::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .contact-list::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .barsik-messages::-webkit-scrollbar-thumb:hover {
  background: #52688c;
}

/* v10: unified chats, uploads and production fixes */
.brand-logo { width: 58px; height: 58px; background: transparent; border-radius: 0; }
.brand-logo img { width: 54px; height: 54px; }
.unified-chat-layout { align-items: stretch; }
.chat-sidebar { max-height: 760px; overflow-y: auto; }
.chat-sidebar-section { margin-top: 18px !important; padding-top: 18px; border-top: 1px solid var(--line); }
.chat-room-item { min-height: 62px; }
.group-chat-icon, .group-chat-avatar { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px; color: white; background: linear-gradient(135deg, var(--blue-deep), var(--blue)); font-size: 19px; font-weight: 900; box-shadow: 0 7px 18px rgba(22,71,185,.18); }
.group-chat-avatar { width: 48px; height: 48px; flex-basis: 48px; }
.chat-compose-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 46px; gap: 10px; align-items: end; width: 100%; }
.chat-attach-button { width: 44px; height: 44px; display: grid; place-items: center; margin: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); background: var(--white); cursor: pointer; transition: .18s; }
.chat-attach-button:hover { color: white; background: var(--blue); border-color: var(--blue); }
.chat-attach-button input { display: none; }
.chat-attach-button span { font-size: 25px; line-height: 1; }
.chat-file-name { min-height: 18px; margin: 4px 54px 0; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-message-image { display: block; max-width: min(440px, 100%); max-height: 430px; margin-top: 10px; border-radius: 13px; object-fit: contain; background: rgba(0,0,0,.04); }
.chat-image-link { display: inline-block; }
.chat-message.system-message { max-width: 92%; margin-inline: auto; color: var(--muted); background: #f4f7fc; border-style: dashed; }
.chat-message.system-message .chat-message-avatar { background: #7d8ba5; }
.chat-readonly-notice { padding: 15px 20px; color: var(--muted); background: #f4f7fc; border-top: 1px solid var(--line); text-align: center; font-size: 13px; }
.signature-preview { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #f8faff; }
.signature-preview img { max-width: 260px; max-height: 90px; object-fit: contain; object-position: left center; }
.form-divider { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 10px 0 4px; }
.formal-signature-line { position: relative; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.formal-signature-line img { position: absolute; bottom: 7px; max-width: 120px; max-height: 42px; object-fit: contain; }
.formal-signature-line b { width: 100%; height: 1px; background: #5f8fd2; }
.formal-signature-line small { margin-top: 3px; color: #234f98; font-weight: 700; }

html[data-theme="dark"] .avatar-upload-block,
html[data-theme="dark"] .signature-preview,
html[data-theme="dark"] .form-panel,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .table-panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .announcement-card,
html[data-theme="dark"] .application-card,
html[data-theme="dark"] .report-admin-card,
html[data-theme="dark"] .quick-action-card,
html[data-theme="dark"] .module-card:not(.locked),
html[data-theme="dark"] .lesson-card,
html[data-theme="dark"] .attempt-card,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .verify-result,
html[data-theme="dark"] .certificate-card,
html[data-theme="dark"] .certificate-success-panel {
  color: var(--ink);
  background: #101e34 !important;
  border-color: #2b3b57 !important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .avatar-upload-block input[type="file"] {
  color: #edf4ff;
  background: #0a1628 !important;
  border-color: #354866 !important;
}
html[data-theme="dark"] .chat-attach-button { color: #c8d8ff; background: #162842; border-color: #354969; }
html[data-theme="dark"] .chat-attach-button:hover { color: white; background: #2457b4; }
html[data-theme="dark"] .chat-message.system-message,
html[data-theme="dark"] .chat-readonly-notice { color: #aab7cc; background: #0f1b2f !important; border-color: #2b3b57; }
html[data-theme="dark"] .chat-sidebar-section { border-color: #2b3b57; }
html[data-theme="dark"] .group-chat-icon,
html[data-theme="dark"] .group-chat-avatar { box-shadow: 0 8px 20px rgba(0,0,0,.28); }
html[data-theme="dark"] .chat-message-image { background: rgba(255,255,255,.04); }

@media (max-width: 760px) {
  .chat-compose-row { grid-template-columns: 40px minmax(0, 1fr) 42px; }
  .chat-attach-button { width: 40px; height: 40px; }
  .chat-file-name { margin-inline: 50px; }
  .chat-message-image { max-height: 320px; }
}

.admin-user-details { display: grid; gap: 26px; padding-top: 34px; padding-bottom: 60px; }
.admin-user-summary { display: flex; align-items: center; gap: 20px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.admin-user-summary h2 { margin: 0 0 6px; }
.admin-user-summary p { margin: 0 0 10px; color: var(--muted); }
.details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.detail-card { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.detail-card h3 { margin: 0 0 14px; }
.detail-card dl { display: grid; grid-template-columns: minmax(140px, .45fr) 1fr; gap: 10px 16px; margin: 0; }
.detail-card dt { color: var(--muted); }
.detail-card dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.detail-section { display: grid; gap: 14px; }
.history-row { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.history-row:last-child { border-bottom: 0; }
.history-row span { color: var(--muted); text-align: right; }
.report-list, .public-message-list { display: grid; gap: 14px; }
.profile-faculty { font-size: 14px; line-height: 1.5; color: var(--muted); }
.small-button.secondary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
html[data-theme="dark"] .admin-user-summary,
html[data-theme="dark"] .detail-card { background: var(--surface); }
@media (max-width: 860px) {
  .details-grid { grid-template-columns: 1fr; }
  .detail-card dl { grid-template-columns: 1fr; gap: 4px; }
  .detail-card dd { margin-bottom: 10px; }
  .history-row { flex-direction: column; gap: 4px; }
  .history-row span { text-align: left; }
}


/* v11.1: clean candidate cards and thematic learning visual */
.hero-learning-visual {
  justify-self: end;
  width: min(300px, 100%);
  display: grid;
  justify-items: center;
  gap: 16px;
}
.hero-learning-icon {
  position: relative;
  width: 220px;
  height: 190px;
  display: grid;
  place-items: center;
  border-radius: 34px 12px 34px 12px;
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 28px 75px rgba(3,20,58,.28), inset 0 1px 0 rgba(255,255,255,.18);
  transform: rotate(-2deg);
  overflow: hidden;
}
.hero-learning-icon::before,
.hero-learning-icon::after {
  content: "";
  position: absolute;
  width: 82px;
  height: 82px;
  border-radius: 22px;
  background: rgba(255,255,255,.07);
  transform: rotate(28deg);
}
.hero-learning-icon::before { left: -28px; top: -28px; }
.hero-learning-icon::after { right: -30px; bottom: -34px; }
.hero-learning-icon svg {
  position: relative;
  z-index: 1;
  width: 138px;
  height: 138px;
  overflow: visible;
  transform: rotate(2deg);
}
.hero-learning-icon .icon-book { fill: rgba(255,255,255,.13); stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.hero-learning-icon .icon-pages { fill: none; stroke: #a9dcff; stroke-width: 3; stroke-linecap: round; }
.hero-learning-icon .icon-cap { fill: #fff; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; }
.hero-learning-icon .icon-spark { fill: none; stroke: #69d4ff; stroke-width: 4; stroke-linecap: round; }
.hero-learning-progress {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 14px;
  color: #fff;
  background: rgba(4,27,79,.28);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}
.hero-learning-progress strong { font-size: 27px; line-height: 1; }
.hero-learning-progress span { color: rgba(255,255,255,.78); font-size: 13px; font-weight: 700; }
.module-card { min-height: 315px; }
.module-card h3 { margin-bottom: 22px; }
.admin-danger-zone {
  margin-top: 34px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid rgba(191,46,66,.28);
  border-radius: 20px;
  background: rgba(191,46,66,.055);
}
.admin-danger-zone h3 { margin: 0 0 6px; color: #a91f39; }
.admin-danger-zone p { margin: 0; color: var(--muted); }
.button-danger, .small-button.danger {
  color: #fff !important;
  background: #b92d46 !important;
  border-color: #b92d46 !important;
}
.button-danger:hover, .small-button.danger:hover { background: #961f35 !important; border-color: #961f35 !important; }
html[data-theme="dark"] .admin-danger-zone { background: rgba(224,74,96,.09); border-color: rgba(255,112,132,.28); }
html[data-theme="dark"] .admin-danger-zone h3 { color: #ff8ea0; }
@media (max-width: 760px) {
  .hero-learning-visual { justify-self: start; width: 100%; }
  .hero-learning-icon { width: 100%; max-width: 300px; height: 155px; border-radius: 26px 10px 26px 10px; }
  .hero-learning-icon svg { width: 112px; height: 112px; }
  .admin-danger-zone { align-items: stretch; flex-direction: column; }
  .admin-danger-zone .button { width: 100%; }
}


/* v11.2: production UI fixes */
.admin-actions-clean .admin-action {
  grid-template-columns: 46px minmax(0, 1fr) 56px;
  min-height: 102px;
  padding: 22px 20px;
}
.admin-actions-clean .admin-action > span {
  font-size: 22px;
  line-height: 1;
}
.admin-actions-clean .admin-action > strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: .035em;
}
.admin-action-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
}
.admin-action-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.user-filter-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(170px, 1fr));
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.user-filter-panel label { margin: 0; }
.user-filter-actions { display: flex; gap: 10px; grid-column: 1 / -1; }
.user-filter-actions .button { min-height: 42px; padding: 11px 18px; }
.filter-result-line { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.admin-user-cell { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.admin-user-cell > div:last-child { min-width: 0; display: grid; gap: 3px; }
.admin-user-cell strong, .admin-user-cell small { overflow-wrap: anywhere; }
.admin-user-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 2px solid #d9e5fb;
  box-shadow: none;
  font-size: 13px;
  letter-spacing: -.035em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.admin-user-actions { display: grid; gap: 8px; min-width: 112px; }
.admin-user-actions form { margin: 0; }
.admin-user-actions .small-button { width: 100%; min-height: 35px; }
.user-role-form { display: grid; grid-template-columns: minmax(126px, 1fr) minmax(135px, 1fr); gap: 8px; align-items: center; min-width: 285px; }
.user-role-form .mini-check { grid-column: 1 / 2; }
.user-role-form .small-button { grid-column: 2 / 3; }
.avatar:not(:has(img)) {
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  letter-spacing: -.04em;
}
.profile-avatar:not(:has(img)) { font-size: 25px; }
.auth-card, .form-panel, .profile-card, .table-panel, .detail-card, .admin-user-summary, .user-filter-panel {
  color: var(--ink);
}
html[data-theme="dark"] .user-filter-panel { background: #101e34; border-color: #2b3b57; }
html[data-theme="dark"] .admin-user-avatar { border-color: #354969; }

@media (max-width: 1100px) {
  .user-filter-panel { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .admin-actions-clean .admin-action { grid-template-columns: 38px minmax(0,1fr) 46px; min-height: 86px; }
  .admin-action-icon { width: 44px; height: 44px; border-radius: 14px; }
  .admin-action-icon svg { width: 23px; height: 23px; }
  .user-filter-panel { grid-template-columns: 1fr; padding: 16px; }
  .user-filter-actions { flex-direction: column; }
  .user-filter-actions .button { width: 100%; }
  .user-admin-table { min-width: 0; }
  .user-admin-table thead { display: none; }
  .user-admin-table, .user-admin-table tbody, .user-admin-table tr, .user-admin-table td { display: block; width: 100%; }
  .user-admin-table tr { padding: 14px; border-bottom: 1px solid var(--line); }
  .user-admin-table td { display: grid; grid-template-columns: 115px minmax(0,1fr); gap: 10px; padding: 10px 0; border: 0; }
  .user-admin-table td::before { content: attr(data-label); color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  .user-admin-table td.empty-cell { display: block; }
  .user-admin-table td.empty-cell::before { display: none; }
  .admin-user-cell { min-width: 0; }
  .user-role-form { min-width: 0; grid-template-columns: 1fr; }
  .user-role-form .mini-check, .user-role-form .small-button { grid-column: auto; }
  .admin-user-actions { min-width: 0; }
}