/* ============ ШАПКА: бренд, поиск, переключатель темы ============ */
.topbar{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px;
  animation:fadeDown .6s cubic-bezier(.2,.8,.3,1) both;}
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:none;}}
.brand{display:flex;align-items:center;gap:14px;}
.brand-mark{
  width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 24%,transparent) 0%,color-mix(in srgb,var(--accent-2) 28%,transparent) 100%);
  background:linear-gradient(140deg in oklab,color-mix(in srgb,var(--accent) 24%,transparent) 0%,color-mix(in srgb,var(--accent-2) 28%,transparent) 100%);
  border:1px solid var(--stroke-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  animation:swing 7s ease-in-out infinite;
}
@keyframes swing{0%,100%{transform:rotate(-7deg);}50%{transform:rotate(7deg);}}
.brand h1{font-family:var(--font-display);font-size:clamp(19px,2.2vw,26px);font-weight:750;letter-spacing:-.03em;line-height:1.12;
  background:linear-gradient(120deg,var(--text) 30%,color-mix(in srgb,var(--accent) 65%,var(--text)));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.brand p{color:var(--muted);font-size:13px;margin-top:3px;}
.eyebrow{display:inline-block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;font-weight:600;}

.tools{display:flex;align-items:center;gap:10px;}
.search{position:relative;}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;pointer-events:none;}
.search input{
  width:262px;height:44px;padding:0 40px 0 38px;background:var(--surface);
  border:1px solid var(--stroke);border-radius:12px;color:var(--text);font-size:14px;font-family:inherit;
  outline:none;transition:border-color .18s,background .18s,box-shadow .18s,width .25s ease;
}
.search input::placeholder{color:var(--muted-2);}
.search input:focus{border-color:var(--accent-line);background:var(--surface-2);box-shadow:0 0 0 4px var(--accent-soft);}
.search .clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:8px;
  cursor:pointer;background:transparent;color:var(--muted);font-size:15px;line-height:1;display:none;place-items:center;transition:background .15s,color .15s;}
.search .clear:hover{background:var(--surface-2);color:var(--text);}
.search.has-value .clear{display:grid;}

.theme-btn{
  width:44px;height:44px;flex:none;border-radius:12px;cursor:pointer;
  background:var(--surface);border:1px solid var(--stroke);color:var(--text);
  display:grid;place-items:center;font-size:17px;overflow:hidden;position:relative;
  transition:background .18s,border-color .18s,transform .18s;
}
.theme-btn:hover{background:var(--surface-2);border-color:var(--stroke-2);transform:translateY(-2px);}
.theme-btn:active{transform:scale(.94);}
.theme-btn span{display:block;transition:transform .5s cubic-bezier(.3,1.4,.4,1),opacity .3s;}

/* видимая рамка фокуса для клавиатурной навигации */
.theme-btn:focus-visible,.search .clear:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ============ МОБИЛЬНАЯ АДАПТАЦИЯ ============ */
@media(max-width:720px){
  .topbar{align-items:stretch;gap:14px;margin-bottom:16px;}
  .tools{width:100%;justify-content:flex-end;}
  .search{flex:1;min-width:0;}
  .search input{width:100%;}
  /* на вкладках без поиска в строке остаётся одна кнопка темы: целая
     строка ради неё — потеря высоты, поэтому уводим её в верхний угол
     шапки. Классы ставит js/nav.js вместе со скрытием поиска, а отступ
     у названия резервирует место, чтобы заголовок не заезжал под кнопку. */
  .tools.tools-solo{position:absolute;top:0;right:0;width:auto;}
  .topbar-solo .brand{padding-right:54px;}
}
@media(max-width:420px){
  .brand-mark{width:38px;height:38px;font-size:18px;border-radius:11px;}
  .theme-btn{width:40px;height:40px;}
  .search input{height:40px;font-size:13px;}
}