/* ==========================================================
   外壳：左侧栏 / 主区 / 右侧上下文栏
   ========================================================== */
#app{height:100%}
/* 首页、登录、注册、安装这些公开页的外层。原来没给高度，登录页的 .auth{height:100%} 算出来就是内容高度，
   页面只铺到一半，下面露出 body 的灰底 */
.public{height:100%;min-height:100vh;min-height:100dvh}
.app{
  height:100%;display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  background:var(--bg);overflow:hidden;
}

/* ---------- 左侧栏 ---------- */
.side{
  display:flex;flex-direction:column;min-height:0;
  padding:22px 14px 14px;border-right:1px solid var(--line);
  background:var(--bg);
}
.brand{display:flex;align-items:baseline;gap:10px;padding:0 10px}
.brand b{font-family:var(--f-serif);font-size:23px;font-weight:700;letter-spacing:.02em}
.brand span{font-size:12px;color:var(--muted)}

.find{
  display:flex;align-items:center;gap:8px;height:36px;margin:18px 2px 0;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);
  text-align:left;transition:border-color .15s;
}
.find:hover{border-color:var(--line-2)}
.find svg{flex:none;width:15px;height:15px}
.find span{flex:1}
.find kbd{font:inherit;font-size:11px;line-height:18px;padding:0 6px;border:1px solid var(--line);border-radius:4px;color:var(--faint)}

.side-scroll{flex:1;min-height:0;overflow-y:auto;margin:0 -14px;padding:0 14px}
.side-cap{display:flex;align-items:center;margin:22px 10px 6px;font-size:12px;color:var(--muted)}
.side-cap button{margin-left:auto;border:0;background:none;color:var(--faint);font-size:12px;padding:2px 4px;border-radius:4px}
.side-cap button:hover{color:var(--ink)}

.srv{
  position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 64px;align-items:center;gap:3px 8px;
  padding:9px 10px;border:0;border-radius:8px;background:transparent;text-align:left;
  transition:background-color .18s;
}
.srv:hover{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.srv[aria-current="true"]{background:var(--surface)}
.srv-name{display:flex;align-items:center;gap:8px;font-weight:500;min-width:0}
.srv-name .ell{min-width:0}
.srv-meta{font-size:12px;color:var(--muted);padding-left:15px}
.srv svg.spark{grid-row:span 2}
.dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.dot.mid{background:var(--mid)}
.dot.high{background:var(--high)}
.dot.off{background:var(--faint)}
.dot.live{animation:livePulse 2.2s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.35}}

.nav{display:flex;flex-direction:column;gap:1px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.nav + .nav{margin-top:10px;padding-top:10px}
.nav a{
  display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:8px;
  color:var(--muted);text-decoration:none;transition:background-color .18s,color .18s;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:700}
.nav .count{margin-left:auto;font-size:12px;color:var(--faint);font-weight:400}
.nav .badge{
  margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--high);color:#fff;font-size:12px;line-height:22px;text-align:center;font-weight:500;
}
:root[data-theme="dark"] .nav .badge{color:#1A1111}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-theme="white"]) .nav .badge{color:#1A1111}}

.me{display:flex;align-items:center;gap:10px;padding:12px 6px 2px;margin-top:10px;border-top:1px solid var(--line)}
.avatar{
  flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);font-weight:700;font-size:14px;
}
.avatar.sm{width:28px;height:28px;font-size:12px;background:var(--sunk);color:var(--ink)}
.me-text{min-width:0;flex:1;line-height:1.35}
.me-text b{display:block;font-weight:500}
.me-text span{font-size:12px;color:var(--muted)}

/* ---------- 主区 ---------- */
.main{position:relative;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.topbar{display:none}
.view{flex:1;min-height:0;position:relative}

.page{height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0}
.page.has-rail{grid-template-columns:minmax(0,1fr) var(--rail-w)}
.page-main{min-width:0;min-height:0;overflow-y:auto;padding:30px 40px 56px}
.page-main.fill{display:flex;flex-direction:column;padding-bottom:28px}
.rail{
  min-width:0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:22px;
  padding:30px 24px 24px;border-left:1px solid var(--line);background:var(--surface);
}
.rail > section + section{padding-top:18px;border-top:1px solid var(--line)}
.rail h2{font-family:var(--f-serif);font-size:18px;font-weight:700}
.rail h3{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:10px}

/* 页头：一句话讲清现状 */
.head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.head-text{flex:1;min-width:0}
.ctx{font-size:13px;color:var(--muted)}
.head h1{font-family:var(--f-serif);font-size:38px;font-weight:700;line-height:1.25;margin:6px 0 4px;letter-spacing:.01em}
.head .sub{font-size:14px;color:var(--muted)}
.head-actions{display:flex;gap:8px;align-items:center;padding-bottom:4px}

/* 页面进入：只做一次、很轻 */
.page-enter .page-main > *,.page-enter .rail{animation:enterUp .34s var(--ease) both}
.page-enter .page-main > *:nth-child(2){animation-delay:.03s}
.page-enter .page-main > *:nth-child(3){animation-delay:.06s}
.page-enter .page-main > *:nth-child(n+4){animation-delay:.09s}
.page-enter .rail{animation-name:enterFade;animation-delay:.08s}
@keyframes enterUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes enterFade{from{opacity:0}to{opacity:1}}

/* ---------- 断点 ---------- */
@media (max-width:1360px){
  :root{--rail-w:316px}
  .page-main{padding:28px 32px 48px}
}
@media (max-width:1140px){
  .page.has-rail{grid-template-columns:minmax(0,1fr);overflow-y:auto;display:block}
  .page.has-rail .page-main{overflow:visible}
  .page.has-rail .rail{overflow:visible;border-left:0;border-top:1px solid var(--line);padding:26px 32px 40px}
}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{
    position:fixed;z-index:60;left:0;top:0;bottom:0;width:min(86vw,300px);
    padding-top:calc(22px + env(safe-area-inset-top,0px));padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
    background:var(--bg);box-shadow:var(--shadow-pop);
    transform:translateX(-104%);transition:transform .3s var(--ease),visibility 0s linear .3s;visibility:hidden;
  }
  .app.nav-open .side{transform:none;visibility:visible;transition:transform .3s var(--ease),visibility 0s}
  .side-scrim{position:fixed;inset:0;z-index:59;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .25s}
  .app.nav-open .side-scrim{opacity:1;pointer-events:auto}
  .topbar{
    display:flex;align-items:center;gap:6px;flex:none;height:56px;padding:0 10px 0 6px;
    border-bottom:1px solid var(--line);background:var(--bg);
  }
  .topbar .srv-pill{
    display:flex;align-items:center;gap:7px;height:36px;padding:0 12px;min-width:0;
    border:1px solid var(--line);border-radius:18px;background:var(--surface);font-weight:500;
  }
  .topbar .srv-pill .ell{max-width:34vw}
  .topbar .spacer{flex:1}
  .page-main{padding:18px 16px 96px}
  .page.has-rail .rail{padding:22px 16px 96px}
  .head h1{font-size:28px;line-height:1.3;margin-top:4px}
  .head-actions{width:100%;padding-bottom:0}
}
@media (min-width:901px){.side-scrim{display:none}}