/* =========================================================
   ANIMORI — app shell: grid, sidebar, topbar, content, footer
   Макет внедряется на каждую страницу через js/layout.js
   ========================================================= */

.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
  transition:grid-template-columns .2s ease;
}
.app.collapsed{ grid-template-columns:var(--sidebar-w-collapsed) 1fr; }

/* ---------- sidebar ---------- */
.sidebar{
  background:var(--bg);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:20px 16px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  z-index:30;
}
.sidebar-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-shrink:0; }
.hamburger{
  width:34px; height:34px; border-radius:8px;
  color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background .15s ease, color .15s ease;
}
.hamburger:hover{ background:var(--bg-hover); color:#fff; }
.logo{
  display:flex; align-items:center; gap:9px; min-width:0;
  height:34px; margin-left:auto; overflow:hidden;
  transition:opacity .15s ease, width .15s ease, margin .15s ease;
}
.logo-glyph{
  width:26px; height:26px; flex-shrink:0; border-radius:7px;
  background:linear-gradient(135deg,var(--accent1) 0%, var(--accent2) 100%);
  display:flex; align-items:center; justify-content:center;
}
body[data-theme="white"] .logo-glyph svg{ fill:#14141a; }
.logo-glyph svg{ width:12px; height:12px; }
.logo-word{
  font-family:var(--font-display);
  font-size:16px; font-weight:700; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; color:var(--text);
}

.nav-group{ display:flex; flex-direction:column; gap:2px; }
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:9px 10px; border-radius:8px;
  font-size:13.5px; color:var(--text-dim);
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
.nav-item .ico{
  width:17px; height:17px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; opacity:.85;
}
.nav-item:hover{ background:var(--bg-hover); color:var(--text); }
.nav-item.active{
  background:var(--accent-soft); color:#fff; font-weight:500;
  box-shadow:inset 3px 0 0 0 var(--accent1);
}
.nav-item.active .ico{ color:var(--accent1); opacity:1; }
.nav-item.sub{ padding-left:30px; }
.nav-item.sub .ico{ width:15px; height:15px; }
.nav-item .badge-count{
  margin-left:auto;
  font-size:10.5px; font-weight:600;
  background:var(--accent-soft); color:var(--accent1);
  padding:1px 7px; border-radius:20px;
  flex-shrink:0;
}
.nav-item.active .badge-count{ background:rgba(124,92,255,.16); }

.sidebar-spacer{ flex:1; }
.nav-footer{
  display:flex; flex-direction:column; gap:2px;
  border-top:1px solid var(--border); padding-top:12px; flex-shrink:0;
}
.nav-footer .nav-item{ color:var(--text-faint); font-size:13px; }

.app.collapsed .nav-item span:not(.ico),
.app.collapsed .nav-label{ display:none; }
.app.collapsed .nav-item{ justify-content:center; padding:9px; }
.app.collapsed .nav-item.sub{ padding-left:9px; }
.app.collapsed .logo{ opacity:0; width:0; margin:0; pointer-events:none; }
.app.collapsed .badge-count{ display:none; }
.app.collapsed .sidebar{ padding-left:16px; padding-right:16px; }

/* mobile drawer */
.sidebar-backdrop{ display:none; }

/* ---------- main / topbar ---------- */
.main{ display:flex; flex-direction:column; min-width:0; min-height:100vh; }
.topbar{
  display:flex; align-items:center; gap:16px;
  padding:20px 40px; max-width:1440px; margin:0 auto; width:100%;
}
.search{
  flex:1; display:flex; align-items:center; gap:10px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:8px; padding:10px 14px;
  color:var(--text-faint); font-size:13.5px;
  transition:border-color .15s ease, background .15s ease;
}
.search:focus-within{ border-color:var(--accent1); background:#17171b; outline:none; }
.search svg{ width:15px; height:15px; opacity:.6; flex-shrink:0; }
.search-input{ flex:1; background:transparent; border:none; color:var(--text); font-size:13.5px; }
.search-input::placeholder{ color:var(--text-faint); }
.search-input:focus{ outline:none; }
.kbd{
  flex-shrink:0; font-size:11px; font-weight:500; color:var(--text-faint);
  border:1px solid var(--border); border-radius:5px; padding:2px 6px; letter-spacing:.02em;
}
.topbar-actions{ display:flex; align-items:center; gap:18px; font-size:13.5px; flex-shrink:0; margin-left:24px; }
.topbar-user{ display:flex; align-items:center; gap:9px; cursor:pointer; padding:2px 0; }
.topbar-user-name{ display:flex; flex-direction:column; line-height:1.2; }
.topbar-user-name b{ font-size:13px; font-weight:600; color:var(--text); }
.topbar-user-name small{ font-size:11px; color:var(--text-faint); }
.link-muted{ color:var(--text-dim); }
.link-muted:hover{ color:var(--text); }
.lang{ color:var(--text-faint); font-size:13.5px; }

.content{ padding:6px 40px 48px; max-width:1440px; margin:0 auto; width:100%; flex:1; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 20px; border-radius:8px;
  font-size:13.5px; font-weight:500;
  transition:filter .15s ease, transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{ background:linear-gradient(120deg,var(--accent2),var(--accent1)); color:var(--on-accent); }
.btn-primary:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover{ background:var(--bg-raised); }
.btn-soft{ background:var(--accent-soft); color:var(--accent1); }
.btn-soft:hover{ filter:brightness(1.25); }
.btn-danger{ background:rgba(229,72,77,.12); color:#ff8a8d; }
.btn-danger:hover{ background:rgba(229,72,77,.2); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-sm{ padding:6px 13px; font-size:12.5px; border-radius:7px; }
.btn-lg{ padding:13px 26px; font-size:14.5px; border-radius:9px; }

/* ---------- footer ---------- */
.site-footer{ margin-top:0; border-top:1px solid var(--border); flex-shrink:0; }
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:48px;
  padding:36px 40px 28px; flex-wrap:wrap;
  max-width:1440px; margin:0 auto; width:100%;
}
.footer-brand{ max-width:320px; flex-shrink:0; }
.footer-logo{ margin-bottom:16px; margin-left:0; }
.footer-desc{ font-size:13px; line-height:1.7; color:var(--text-dim); margin-bottom:20px; }
.footer-links{ display:flex; gap:clamp(28px,5vw,64px); flex-wrap:wrap; }
.footer-col{ display:flex; flex-direction:column; gap:11px; min-width:120px; }
.footer-col-title{
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-faint); margin-bottom:3px;
}
.footer-col a{ font-size:13.5px; color:var(--text-dim); transition:color .15s ease; width:fit-content; }
.footer-col a:hover{ color:#fff; }
.footer-strip{
  border-top:1px solid var(--border); padding:14px 40px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
  font-size:12px; color:var(--text-faint); text-align:center;
  max-width:1440px; margin:0 auto; width:100%;
}
.footer-strip-dot{ opacity:.45; }

/* ---------- page transitions ---------- */
.page-transition{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.page-transition.show{ opacity:1; pointer-events:auto; }
@keyframes page-in{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
/* контент скрыт до готовности страницы, затем мягко проявляется.
   html.nx ставит ранний скрипт в <head>, js-fade добавляет layout.js */
html.nx .content{ opacity:0; }
html.nx.js-fade .content{ opacity:1; animation:page-in .5s cubic-bezier(.22,.61,.36,1) both; }

/* ---------- responsive ---------- */
@media (min-width:1800px){
  .content,.topbar{ max-width:1600px; }
}
@media (max-width:900px){
  .app{ grid-template-columns:1fr; }
  .sidebar{
    position:fixed; left:0; top:0; height:100vh; width:var(--sidebar-w);
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:var(--shadow-pop);
    background:var(--bg-panel);
  }
  .app.mobile-open .sidebar{ transform:translateX(0); }
  .sidebar-backdrop{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.55);
    opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:29;
  }
  .app.mobile-open .sidebar-backdrop{ opacity:1; pointer-events:auto; }
  .content,.topbar{ padding-left:20px; padding-right:20px; }
  .footer-top,.footer-strip{ padding-left:20px; padding-right:20px; }
}
@media (max-width:640px){
  .footer-top{ flex-direction:column; gap:32px; }
  .footer-links{ width:100%; gap:32px; }
  .footer-strip{ flex-direction:column; gap:4px; }
  .footer-strip-dot{ display:none; }
  .topbar-actions .link-muted{ display:none; }
  .topbar-actions .lang,.kbd{ display:none; }
}