/* ===== Темы ===== */
:root{
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f0f2f5;
  --text:#16191d; --muted:#5b646f; --border:#e2e6eb;
  --accent:#0038b8;            /* синий израильского флага */
  --accent-weak:#e8eeff; --accent-text:#0038b8;
  --hover:#eef1f6; --mark:#ffe585; --mark-text:#3a2f00;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
  --shadow-lg:0 8px 30px rgba(16,24,40,.18);
  --radius:12px;
  /* Цвет раздела: тон --h задаётся инлайном на .nav-cat/.cat-view/.art, а насыщенность+
     светлота (S L, зависят от темы) — здесь. hsl() СОБИРАЕТСЯ В САМИХ ПРАВИЛАХ (ниже),
     а НЕ тут: иначе var(--h) подставился бы по :root (всегда 214) и цвет был бы один на всех. */
  --dot-sl:60% 48%;
  --catbg-sl:62% 92%;
  --cattx-sl:58% 30%;
  --soft-sl:60% 96%;
  --header-h:70px;
}
[data-theme="dark"]{
  --bg:#0f1216; --surface:#171b21; --surface-2:#1e242c;
  --text:#e6eaef; --muted:#9aa4b2; --border:#293039;
  --accent:#5b8cff; --accent-weak:#1a2436; --accent-text:#9bb8ff;
  --hover:#1f262f; --mark:#5c4a00; --mark-text:#ffe9a6;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 10px 34px rgba(0,0,0,.55);
  --dot-sl:58% 60%;
  --catbg-sl:36% 22%;
  --cattx-sl:72% 78%;
  --soft-sl:30% 17%;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-text); text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Шапка ===== */
.top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px clamp(14px,3vw,28px);
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:13px; min-width:0}
.avatar{border-radius:50%; flex:0 0 auto; box-shadow:var(--shadow)}
.brand-text h1{margin:0; font-size:clamp(18px,2.4vw,22px); font-weight:700; letter-spacing:-.01em}
.brand-text p{margin:2px 0 0; font-size:14px; color:var(--muted)}
.icon-btn{
  flex:0 0 auto; width:42px; height:42px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  font-size:20px; line-height:1; display:grid; place-items:center; transition:background .15s;
}
.icon-btn:hover{background:var(--hover)}
[data-theme="light"] .icon-btn::before{content:"🌙"}
[data-theme="dark"]  .icon-btn::before{content:"☀️"}

/* ===== Каркас: сайдбар + контент ===== */
.layout{
  max-width:1240px; margin:0 auto; padding:0 clamp(14px,3vw,28px);
  display:grid; grid-template-columns:288px minmax(0,1fr); gap:26px; align-items:start;
}
.main{min-width:0}

/* ===== Сайдбар ===== */
.sidebar{
  position:sticky; top:var(--header-h); align-self:start;
  max-height:calc(100vh - var(--header-h)); display:flex; flex-direction:column;
  padding-top:16px;
}
.sidebar-head{display:flex; align-items:center; justify-content:space-between; padding:0 4px 8px}
.sidebar-title{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.nav-close{display:none}
.nav{overflow-y:auto; padding:2px 2px 24px; scrollbar-width:thin}

.nav-cat{margin:1px 0}
.nav-cat-head{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  border:0; background:transparent; color:var(--text); padding:9px 10px; border-radius:9px;
  font-size:14.5px; font-weight:600; line-height:1.3; transition:background .12s;
}
.nav-cat-head:hover{background:var(--hover)}
.nav-cat.active>.nav-cat-head{background:hsl(var(--h,214) var(--soft-sl)); color:hsl(var(--h,214) var(--cattx-sl))}
.nav-cat .dot{flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:hsl(var(--h,214) var(--dot-sl))}
.nav-cat-name{flex:1 1 auto; min-width:0}
.nav-cat-head .ct{flex:0 0 auto; font-size:11.5px; font-weight:600; color:var(--muted)}
.nav-cat-head .chev{
  flex:0 0 auto; width:15px; height:15px; color:var(--muted); transition:transform .18s;
}
.nav-cat.open .nav-cat-head .chev{transform:rotate(90deg)}
.nav-subs{display:none; margin:1px 0 4px 24px; padding-left:11px; border-left:2px solid var(--border)}
.nav-cat.open .nav-subs{display:block}
.nav-sub{
  display:flex; gap:8px; width:100%; text-align:left; cursor:pointer; align-items:baseline;
  border:0; background:transparent; color:var(--muted); padding:6px 9px; border-radius:8px;
  font-size:13.5px; line-height:1.35; transition:background .12s,color .12s;
}
.nav-sub:hover{background:var(--hover); color:var(--text)}
.nav-sub.active{color:hsl(var(--h,214) var(--cattx-sl)); font-weight:600}
.nav-sub .ct{margin-left:auto; font-size:11px; color:var(--muted)}

/* ===== Панель управления (поиск/табы) ===== */
.controls{
  position:sticky; top:var(--header-h); z-index:20;
  padding:16px 0 10px; background:var(--bg);
}
.controls-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.nav-toggle{
  display:none; align-items:center; gap:7px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  padding:8px 13px; border-radius:10px; font-size:14px; font-weight:600;
}
.nav-toggle svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.nav-toggle:hover{background:var(--hover)}

.tabs{display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:11px; padding:3px; gap:3px}
.tab{
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  padding:8px 18px; border-radius:8px; font-size:15px; font-weight:600; transition:.15s;
}
.tab:hover{color:var(--text)}
.tab.is-active{background:var(--surface); color:var(--accent-text); box-shadow:var(--shadow)}

.searchbar{position:relative; margin-top:12px}
.search-ico{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; pointer-events:none;
}
#q{
  width:100%; padding:13px 42px 13px 46px; font-size:16px;
  color:var(--text); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); outline:none; transition:border .15s,box-shadow .15s;
}
#q:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak)}
#q::placeholder{color:var(--muted)}
.clear-btn{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:var(--muted); font-size:15px;
}
.clear-btn:hover{background:var(--hover); color:var(--text)}

.subbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; flex-wrap:wrap}
.opts{display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:14px; color:var(--muted)}
.scope{display:flex; gap:18px}
.scope label,.exact{display:inline-flex; align-items:center; gap:6px; cursor:pointer}
.exact{padding-left:18px; border-left:1px solid var(--border)}
.scope input,.exact input{accent-color:var(--accent); margin:0; width:16px; height:16px}
.stat{margin:0; font-size:13px; color:var(--muted); min-height:1em}

/* ===== Контент ===== */
.content{padding:6px 0 56px; min-height:60vh}
.loading{color:var(--muted); padding:24px 4px}

/* Заголовок выбранного раздела */
.cat-banner{
  display:flex; align-items:center; gap:12px; margin:6px 0 6px;
  padding:8px 12px; border-radius:var(--radius);
  background:hsl(var(--h,214) var(--soft-sl)); border:1px solid var(--border);
}
.cat-banner .dot{flex:0 0 auto; width:14px; height:14px; border-radius:50%; background:hsl(var(--h,214) var(--dot-sl))}
.cat-banner h2{margin:0; font-size:20px; font-weight:700; letter-spacing:-.01em; color:hsl(var(--h,214) var(--cattx-sl))}
.cat-banner .ct{margin-left:auto; font-size:13px; font-weight:600; color:var(--muted); background:var(--surface); padding:3px 11px; border-radius:20px; border:1px solid var(--border)}

/* Подкатегории + статьи */
.sub-block{scroll-margin-top:calc(var(--header-h) + 120px)}
.sub-title{
  display:flex; align-items:baseline; gap:8px; margin:22px 0 8px;
  font-size:15px; font-weight:700; color:hsl(var(--h,214) var(--cattx-sl));
}
.sub-title::before{content:""; width:8px; height:8px; border-radius:50%; background:hsl(var(--h,214) var(--dot-sl)); flex:0 0 auto; transform:translateY(-1px)}
.sub-title .ct{font-size:12px; font-weight:600; color:var(--muted)}
.art{display:block; padding:10px 13px; border-radius:10px; border:1px solid transparent}
.art:hover{background:var(--hover); text-decoration:none; border-color:var(--border)}
.art .t{color:var(--accent-text); font-weight:600; font-size:16px; line-height:1.4}
.art .t::after{content:"↗"; font-size:12px; opacity:.45; margin-left:5px; vertical-align:top}
.art .d{display:block; margin-top:3px; color:var(--muted); font-size:14px; line-height:1.5}

/* ===== Результаты поиска ===== */
.res-src{margin:20px 0 10px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.res{padding-top:11px; padding-bottom:11px}
.res .crumb{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px}
.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; line-height:1; padding:4px 9px; border-radius:20px; white-space:nowrap;
}
.pill.cat{background:hsl(var(--h,214) var(--catbg-sl)); color:hsl(var(--h,214) var(--cattx-sl))}
.pill.cat::before{content:""; width:7px; height:7px; border-radius:50%; background:hsl(var(--h,214) var(--dot-sl))}
.pill.sub{background:var(--surface-2); color:var(--muted); border:1px solid var(--border)}
.pill.src{background:transparent; color:var(--muted); border:1px dashed var(--border)}
.empty{color:var(--muted); padding:32px 4px; text-align:center; font-size:15px}
mark{background:var(--mark); color:var(--mark-text); border-radius:3px; padding:0 1px}

/* ===== Подвал ===== */
.foot{max-width:1240px; margin:0 auto; padding:24px clamp(14px,3vw,28px) 44px; border-top:1px solid var(--border); color:var(--text); font-size:14px}
.foot p{margin:0 0 9px}
.foot .muted{color:var(--muted); font-size:13px; line-height:1.6}

/* ===== Подложка под выезжающий сайдбар (моб.) ===== */
.backdrop{position:fixed; inset:0; z-index:45; background:rgba(8,12,18,.5); backdrop-filter:blur(1px)}

/* ===== Адаптив ===== */
@media (max-width:860px){
  .layout{grid-template-columns:1fr; gap:0}
  .nav-toggle{display:inline-flex}
  .sidebar{
    position:fixed; top:0; left:0; z-index:50; width:min(86vw,340px); max-height:100vh; height:100%;
    background:var(--surface); border-right:1px solid var(--border); box-shadow:var(--shadow-lg);
    padding:14px 12px; transform:translateX(-104%); transition:transform .22s ease;
  }
  body.nav-open .sidebar{transform:translateX(0)}
  .nav-close{display:grid; place-items:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:15px; cursor:pointer}
  .sidebar-title{font-size:14px}
  .controls{top:0}
}
@media (max-width:560px){
  .brand-text p{display:none}
  .subbar{align-items:flex-start}
  .tabs{flex:1 1 auto}
  .tab{flex:1 1 0; text-align:center; padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto}}