/* Оболочка «Фокус»: приложение с боковым меню, мятный акцент, тёмная и светлая тема */
body.bz-skin-focus {
  --bz-bg: #F3F5F9; --bz-panel: #FFFFFF; --bz-soft: #EBEFF5; --bz-line: #DDE3EC;
  --bz-ink: #141B27; --bz-text: #2A3344; --bz-mute: #586274;
  --bz-acc: #0B7A54; --bz-on-acc: #FFFFFF; --bz-acc-soft: #DDF3EA; --bz-acc-ink: #0A6B4A;
  --bz-ok: #0B7A54; --bz-ok-bg: #DFF4EA; --bz-ok-ink: #075C3E;
  --bz-warn: #F2A93B; --bz-warn-bg: #FFF2DA; --bz-warn-ink: #7C4A00;
  --bz-bad: #D23A55; --bz-bad-bg: #FDE7EB; --bz-bad-ink: #A8203A;
  --bz-none: #E9EDF3; --bz-none-ink: #586274;
  --bz-radius: 16px; --bz-radius-sm: 10px;
  --bz-font: Onest, system-ui, sans-serif; --bz-font-d: Onest, system-ui, sans-serif;
  --bz-max: 1180px;
}
html[data-theme="dark"] body.bz-skin-focus {
  --bz-bg: #0E131D; --bz-panel: #151C29; --bz-soft: #1B2433; --bz-line: #243044;
  --bz-ink: #E9EEF7; --bz-text: #D4DBE8; --bz-mute: #95A0B5;
  --bz-acc: #7CE0B5; --bz-on-acc: #0B1611; --bz-acc-soft: #173A31; --bz-acc-ink: #8DE8C1;
  --bz-ok: #5ED6A2; --bz-ok-bg: #173A31; --bz-ok-ink: #8DE8C1;
  --bz-warn: #FFB547; --bz-warn-bg: #2E2616; --bz-warn-ink: #FFC56E;
  --bz-bad: #FF7D93; --bz-bad-bg: #3A1E26; --bz-bad-ink: #FFA0B0;
  --bz-none: #1B2433; --bz-none-ink: #95A0B5;
  color-scheme: dark;
}
.bz-skin-focus .bz-brand-dot { color: var(--bz-acc); }

/* каркас: боковое меню */
.bz-app { flex-direction: row; background: linear-gradient(to right, var(--bz-panel) 0 248px, var(--bz-bg) 248px); }
.bz-side-nav { width: 248px; flex: none; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--bz-line); background: var(--bz-panel); padding: 22px 14px; overflow-y: auto; }
.bz-side-top { display: flex; flex-direction: column; gap: 20px; height: 100%; }
.bz-side-top .bz-brand { padding: 0 10px; font-size: 20px; }
.bz-side-top .bz-menu { flex: 1; display: flex; }
.bz-side-top .bz-menu-body { flex: 1; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 20px; }
.bz-nav-side { flex-direction: column; gap: 2px; }
.bz-nav-side .bz-nav-a { width: 100%; padding: 0 12px; }
.bz-nav-side .bz-nav-a .bz-badge { margin-left: auto; }
.bz-nav-side .bz-nav-a.is-on { background: var(--bz-soft); color: var(--bz-ink) !important; }
.bz-nav-side .bz-nav-a.is-on::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--bz-acc); }
.bz-side-bottom { display: flex; flex-direction: column; gap: 10px; }
.bz-side-bottom .bz-theme-toggle { border-radius: var(--bz-radius-sm); justify-content: flex-start; }
.bz-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--bz-soft); }
.bz-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bz-acc-soft); color: var(--bz-acc-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.bz-user-t { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.3; }
.bz-user-t b { color: var(--bz-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-user-s { color: var(--bz-ok-ink); display: inline-flex; gap: 4px; align-items: center; }
.bz-user-out { margin-left: auto; color: var(--bz-mute) !important; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 8px; }
.bz-user-out:hover { background: var(--bz-panel); }
.bz-app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bz-app-body .bz-main { max-width: var(--bz-max); margin: 0 auto; padding-left: 32px; padding-right: 32px; padding-top: 28px; }
.bz-app-body .bz-foot-in { max-width: var(--bz-max); margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* детали стиля */
.bz-skin-focus .bz-card { border-radius: 16px; }
.bz-skin-focus .bz-btn-acc { box-shadow: 0 6px 18px color-mix(in srgb, var(--bz-acc) 30%, transparent); }
.bz-skin-focus .bz-hero-title .bz-accent { color: var(--bz-acc-ink); }
.bz-skin-focus .bz-line-n { border-radius: 10px; }
.bz-skin-focus .bz-tile { border-radius: 10px; }
.bz-skin-focus .bz-word { background: var(--bz-warn-bg); border-color: color-mix(in srgb, var(--bz-warn) 35%, transparent); }
.bz-skin-focus .bz-word .bz-tutor-ph { background: var(--bz-warn); color: #1E1400; }
.bz-skin-focus .bz-word .bz-grade { background: transparent; color: var(--bz-warn-ink); font-size: 32px; }
.bz-skin-focus .bz-hwcard { border: 1px solid color-mix(in srgb, var(--bz-warn) 35%, transparent); }
.bz-skin-focus .bz-cond { color: var(--bz-text); }
.bz-skin-focus .bz-task { position: relative; overflow: hidden; }
.bz-skin-focus .bz-task.bz-solved::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 60%, color-mix(in srgb, var(--bz-ok) 18%, transparent), transparent 60%); animation: bzFade .6s ease reverse both; }
.bz-skin-focus .bz-tutor-line { background: var(--bz-panel); }
.bz-skin-focus .bz-ring-fg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--bz-acc) 45%, transparent)); }

@media (max-width: 860px) {
  .bz-app { flex-direction: column; background: var(--bz-bg); }
  .bz-side-nav { width: auto; height: auto; position: sticky; top: 0; z-index: 30; padding: 8px 16px; border-right: 0; border-bottom: 1px solid var(--bz-line); overflow: visible; }
  .bz-side-top { flex-direction: row; justify-content: space-between; align-items: center; }
  .bz-side-top .bz-menu { flex: none; }
  .bz-side-top .bz-menu[open] > .bz-menu-body { top: 100%; }
  .bz-nav-side .bz-nav-a.is-on::before { display: none; }
  .bz-app-body .bz-main, .bz-app-body .bz-foot-in { padding-left: 16px; padding-right: 16px; }
}