/* Оболочка: боковое меню, верхняя панель, нижняя панель на телефоне. */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100dvh}
.side{background:var(--surface);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100dvh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;padding:2px 6px;color:var(--ink);text-decoration:none}
.brand b{min-width:28px;padding:0 6px;height:28px;border-radius:var(--r-sm);font-size:11px;letter-spacing:.02em;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.me{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:var(--ink)}
.me:hover{border-color:var(--line-strong)}
.me b{font-size:14px;display:block;line-height:1.3}
.me small{display:block;color:var(--muted);font-size:var(--fs-xs);line-height:1.2}
.me .sw{margin-left:auto;color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);color:var(--ink2);text-decoration:none;font-weight:500;font-size:14px;min-height:36px;transition:background-color var(--dur) var(--ease)}
.nav a:hover{background:color-mix(in srgb,var(--sunk) 60%,var(--surface))}
.nav a[aria-current="page"]{background:var(--sunk);color:var(--ink)}
.nav a .cnt{margin-left:auto;font-size:var(--fs-xs);color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.nav a .cnt.hot{background:var(--hot-bg);color:var(--hot-ink);padding:0 7px;border-radius:10px}
.nav a .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav .add{color:var(--muted)}
.sec{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:0 10px 6px}
.side .bottom{margin-top:auto}

.main{padding:22px var(--sp-8) 40px;min-width:0}
.top{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:22px}
.search{flex:1;max-width:520px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:0 var(--sp-3);color:var(--muted);min-height:40px}
.search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.search input{flex:1;min-width:0;border:0;background:transparent;font-size:14px;outline:none;color:var(--ink);height:38px}
.search input::placeholder{color:var(--muted)}
.search kbd{font:var(--fs-xs) var(--font);border:1px solid var(--line);border-radius:5px;padding:0 6px;color:var(--muted)}
.top .grow{margin-left:auto}
.mtop{display:none}
.page-h{display:flex;align-items:flex-end;gap:var(--sp-4);margin-bottom:20px;flex-wrap:wrap}
.page-h .actions{margin-left:auto;display:flex;gap:var(--sp-2)}

.tabbar{display:none}

@media (max-width:1023px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .main{padding:var(--sp-3) var(--sp-4) calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom))}
  .top{display:none}
  .mtop{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-3)}
  .mtop .ttl{font-size:22px;font-weight:700;letter-spacing:-.02em;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mtop .me-av{text-decoration:none;border-radius:50%}
  .tabbar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:30;grid-template-columns:repeat(5,1fr);background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--muted);text-decoration:none;font-weight:500;min-height:52px;border-radius:var(--r-sm)}
  .tabbar a[aria-current="page"]{color:var(--primary)}
  .page-h h1{font-size:22px}
}
.side-slot{display:contents}
.content{display:block;outline:none;min-width:0}
@media (max-width:1023px){
  .ph1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}