/* SmartCore — общая шапка и меню (sc-header.css). Версия 2026-10-11 (Fable). Пара к sc-header.js.
 * Берёт цвета и шрифты из общих токенов (smartcore-tokens.css), а если у части их нет — запасные значения той же палитры.
 * Тема: <html data-theme="dark|light">; без атрибута — по prefers-color-scheme. */
.sc-top {
  --sch-bg: var(--bg2, #10203C); --sch-line: var(--line2, #1D3358); --sch-line2: var(--line, #274067); --sch-panel: var(--panel, #142848);
  --sch-fg: var(--fg, #F3F6FB); --sch-muted: var(--muted, #A9B4C6); --sch-accent: var(--accent, #F5A524); --sch-on: var(--on-accent, #0B1730);
  --sch-display: var(--display, 'Rubik', Arial, sans-serif); --sch-body: var(--body, 'IBM Plex Sans', Arial, sans-serif);
  --sch-shadow: var(--shadow, 0 12px 40px rgba(0, 0, 0, .35));
}
:root[data-theme="light"] .sc-top { --sch-bg: var(--bg2, #EDF1F7); --sch-line: var(--line2, #E8EDF5); --sch-line2: var(--line, #DCE3EE); --sch-panel: var(--panel, #FFFFFF); --sch-fg: var(--fg, #0B1730); --sch-muted: var(--muted, #4A5872); --sch-shadow: var(--shadow, 0 12px 40px rgba(11, 23, 48, .10)); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sc-top { --sch-bg: var(--bg2, #EDF1F7); --sch-line: var(--line2, #E8EDF5); --sch-line2: var(--line, #DCE3EE); --sch-panel: var(--panel, #FFFFFF); --sch-fg: var(--fg, #0B1730); --sch-muted: var(--muted, #4A5872); --sch-shadow: var(--shadow, 0 12px 40px rgba(11, 23, 48, .10)); }
}

.sc-top, .sc-top * { box-sizing: border-box; }
.sc-top { position: relative; z-index: 20; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 16px; background: var(--sch-bg); color: var(--sch-fg); border-bottom: 1px solid var(--sch-line); font-family: var(--sch-body); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.sc-top button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; margin: 0; }
.sc-top :focus-visible { outline: 2px solid var(--sch-accent); outline-offset: 2px; }
.sc-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sc-brand { display: flex; align-items: center; gap: 10px; color: var(--sch-fg); text-decoration: none; flex: none; }
.sc-logo { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--accent, #F5A524), #FFD27A); display: grid; place-items: center; color: #0B1730; font-family: var(--sch-display); font-weight: 700; font-size: 15px; }
.sc-brand b { font-family: var(--sch-display); font-weight: 600; font-size: 17px; letter-spacing: .01em; }
.sc-brand .sc-sub { color: var(--sch-muted); font-size: 13px; font-weight: 600; }
.sc-nav { display: flex; align-items: center; gap: 2px; margin-left: 6px; min-width: 0; }
.sc-nav a, .sc-nav .sc-logout { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; color: var(--sch-muted); text-decoration: none; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.sc-nav a:hover, .sc-nav .sc-logout:hover { background: rgba(127, 127, 127, .10); color: var(--sch-fg); }
.sc-nav a[aria-current="page"] { background: var(--sch-panel); color: var(--sch-fg); box-shadow: inset 0 -3px 0 var(--sch-accent); }
.sc-nav .sc-ext { width: 12px; height: 12px; opacity: .55; }
.sc-nav .sc-logout[hidden] { display: none; }
.sc-grow { flex: 1; }
.sc-tools { display: flex; align-items: center; gap: 6px; }
.sc-tools[hidden] { display: none; }
.sc-ikon { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sch-line2); background: var(--sch-panel); color: var(--sch-fg); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.sc-ikon:hover { border-color: var(--sch-accent); }
.sc-ikon[aria-pressed="true"] { background: var(--sch-accent); color: var(--sch-on); border-color: var(--sch-accent); }
.sc-ikon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-lang { display: inline-flex; border: 1px solid var(--sch-line2); border-radius: 999px; overflow: hidden; background: var(--sch-panel); flex: none; }
.sc-lang button { padding: 7px 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--sch-muted); }
.sc-lang button[aria-pressed="true"] { background: var(--sch-accent); color: var(--sch-on); }
.sc-theme { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sch-line2); background: var(--sch-panel); color: var(--sch-fg); display: grid; place-items: center; flex: none; }
.sc-theme:hover { border-color: var(--sch-accent); }
.sc-theme .sc-sun, .sc-theme .sc-moon { grid-area: 1 / 1; transition: opacity .2s, transform .3s; }
/* тёмная тема → показываем солнце (переключить на светлую); светлая → луну */
.sc-theme .sc-sun { opacity: 1; transform: none; } .sc-theme .sc-moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="light"] .sc-theme .sc-sun { opacity: 0; transform: rotate(60deg) scale(.6); } :root[data-theme="light"] .sc-theme .sc-moon { opacity: 1; transform: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .sc-theme .sc-sun { opacity: 0; transform: rotate(60deg) scale(.6); }
  :root:not([data-theme="dark"]) .sc-theme .sc-moon { opacity: 1; transform: none; }
}
.sc-menu { display: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--sch-line2); background: var(--sch-panel); color: var(--sch-fg); place-items: center; flex: none; }
@media (max-width: 760px) {
  .sc-top { padding: 0 12px; gap: 6px; }
  .sc-brand b, .sc-brand .sc-sub { display: none; }
  .sc-menu { display: grid; }
  .sc-nav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 8px; background: var(--sch-bg); border-bottom: 1px solid var(--sch-line); box-shadow: var(--sch-shadow); }
  .sc-top.open .sc-nav { display: flex; }
  .sc-nav a, .sc-nav .sc-logout { padding: 12px 14px; font-size: 16px; }
  .sc-lang button { padding: 7px 8px; font-size: 11px; }
  .sc-ikon, .sc-theme { width: 34px; height: 34px; }
}
@media (max-width: 480px) {
  /* узкий телефон: логотип + до 4 своих иконок + язык + тема + меню должны влезть в 375px */
  .sc-top { gap: 4px; padding: 0 10px; }
  .sc-tools { gap: 4px; }
  .sc-ikon, .sc-theme, .sc-menu { width: 32px; height: 32px; }
  .sc-ikon svg { width: 18px; height: 18px; }
  .sc-lang button { padding: 6px 6px; font-size: 10.5px; letter-spacing: .02em; }
}
@media (prefers-reduced-motion: reduce) { .sc-top * { transition: none !important; } }