/* shell-kit / tokens.base.css
   几何与层级：两壳共用，不含任何品牌色。
   约束：CSP style-src 'unsafe-inline' 允许内联样式；不引外部字体/图标。 */

:root{
  --radius:1rem;
  --radius-sm:.6rem;
  --radius-pill:999px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;

  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px;

  --nav-h:56px;
  --pill-h:40px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- 文档底色：外壳必须自己给 body 上色，
   否则会露出浏览器默认底色（深色模式下是黑蓝色） ---------- */
html[data-shell]{background:var(--background)}
html[data-shell] body{
  margin:0;
  min-height:100vh;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}

/* ---------- 导航外壳 ---------- */
.shell-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:var(--sp-3);
  height:var(--nav-h); padding:0 var(--sp-4);
  background:color-mix(in srgb, var(--background) 86%, transparent);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--border);
  font-family:var(--font-ui); color:var(--foreground);
}
.shell-brand{display:flex; align-items:center; gap:var(--sp-2); flex:none; text-decoration:none; color:inherit}
.shell-brand svg{width:30px; height:30px; display:block}
.shell-brand .word{font-size:var(--fs-lg); font-weight:700; letter-spacing:.2px}

.shell-pills{display:flex; align-items:center; gap:2px; flex:none;
  background:var(--muted); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:3px; margin-left:var(--sp-2); overflow-x:auto; scrollbar-width:none}
.shell-pills::-webkit-scrollbar{display:none}
.shell-pill{
  appearance:none; border:0; background:transparent; cursor:pointer;
  height:calc(var(--pill-h) - 6px); padding:0 var(--sp-3);
  border-radius:var(--radius-pill); white-space:nowrap;
  font:500 var(--fs-md)/1 var(--font-ui); color:var(--muted-foreground);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.shell-pill:hover{color:var(--foreground)}
.shell-pill[aria-current="page"]{background:var(--foreground); color:var(--background); font-weight:600}

.shell-links{display:flex; align-items:center; gap:var(--sp-3); flex:none; margin-left:var(--sp-2)}
.shell-link{
  appearance:none; border:0; background:transparent; cursor:pointer; padding:2px 2px;
  font:500 var(--fs-sm)/1.4 var(--font-ui); color:var(--muted-foreground); text-decoration:none;
}
.shell-link:hover{color:var(--foreground)}
.shell-link .arrow{opacity:.55; font-size:11px; margin-left:2px}

.shell-right{display:flex; align-items:center; gap:var(--sp-2); margin-left:auto; flex:none}

.shell-balance{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px;
  border:1px solid var(--border); border-radius:var(--radius-pill);
  background:var(--card); color:var(--foreground);
  font:600 var(--fs-sm)/1 var(--font-ui); cursor:pointer;
}
.shell-balance:hover{border-color:var(--ring)}
.shell-balance .sep{color:var(--muted-foreground); font-weight:400}
.shell-balance .topup{color:var(--primary)}

.shell-ibtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius-pill);
  border:1px solid transparent; background:transparent; color:var(--muted-foreground);
  font:600 var(--fs-sm)/1 var(--font-ui); cursor:pointer;
}
.shell-ibtn:hover{background:var(--muted); color:var(--foreground)}
.shell-ibtn svg{width:17px; height:17px}

.shell-avatar{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  height:34px; padding:0 10px 0 4px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--card); cursor:pointer;
  font:600 var(--fs-sm)/1 var(--font-ui); color:var(--foreground);
}
.shell-avatar .ring{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--primary); color:var(--primary-foreground); font-size:12px; font-weight:700}
.shell-avatar:hover{border-color:var(--ring)}

.shell-login{
  height:34px; padding:0 16px; border:0; border-radius:var(--radius-pill); cursor:pointer;
  background:var(--primary); color:var(--primary-foreground);
  font:600 var(--fs-sm)/1 var(--font-ui);
}
.shell-login:hover{filter:brightness(1.06)}

/* 挂载到现有页面时：旧 header 的品牌标题与外壳重复，只留状态灯与主题按钮 */
html[data-shell] #siteName{display:none}

/* ---------- 弹层 ---------- */
.shell-menu{
  position:absolute; top:calc(var(--nav-h) - 6px); right:var(--sp-4);
  min-width:190px; padding:6px; z-index:60;
  background:var(--card); color:var(--card-foreground);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.45);
  font-family:var(--font-ui);
}
.shell-menu[hidden]{display:none}
.shell-menu button{
  display:flex; align-items:center; gap:var(--sp-2); width:100%;
  padding:9px 10px; border:0; border-radius:8px; background:transparent; cursor:pointer;
  font:500 var(--fs-sm)/1.2 var(--font-ui); color:inherit; text-align:left;
}
.shell-menu button:hover{background:var(--muted)}
.shell-menu hr{border:0; border-top:1px solid var(--border); margin:6px 2px}
.shell-menu .lang-opt[aria-checked="true"]{font-weight:700; color:var(--primary)}

/* ---------- 页面容器 ---------- */
.shell-page{padding:var(--sp-5) var(--sp-4) 64px; max-width:1440px; margin:0 auto; font-family:var(--font-ui); color:var(--foreground)}
.shell-page[hidden]{display:none}
.shell-h1{font-size:var(--fs-xl); font-weight:700; margin:0 0 var(--sp-4)}
.shell-sub{color:var(--muted-foreground); font-size:var(--fs-sm); margin:0 0 var(--sp-5)}

.shell-toolbar{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-4)}
.shell-seg{display:inline-flex; gap:2px; padding:3px; background:var(--muted); border:1px solid var(--border); border-radius:var(--radius-pill)}
.shell-seg button{appearance:none; border:0; background:transparent; cursor:pointer; height:30px; padding:0 12px;
  border-radius:var(--radius-pill); font:500 var(--fs-sm)/1 var(--font-ui); color:var(--muted-foreground)}
.shell-seg button[aria-pressed="true"]{background:var(--card); color:var(--foreground); box-shadow:0 1px 2px rgba(0,0,0,.08)}

.shell-grid{display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.shell-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  transition:transform .16s var(--ease), border-color .16s var(--ease)}
.shell-card:hover{transform:translateY(-2px); border-color:var(--ring)}
.shell-card .cover{aspect-ratio:4/3; background:var(--muted); display:block; width:100%; object-fit:cover}
.shell-card .body{padding:var(--sp-3)}
.shell-card .t{font-size:var(--fs-sm); font-weight:600; margin:0 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.shell-card .p{font-size:var(--fs-xs); color:var(--muted-foreground); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

.shell-empty{padding:64px 16px; text-align:center; color:var(--muted-foreground); font-size:var(--fs-sm)}
.shell-skel{background:var(--muted); border-radius:var(--radius); height:180px; animation:sk 1.4s ease-in-out infinite}
@keyframes sk{0%,100%{opacity:.6}50%{opacity:1}}

@media (max-width:820px){
  .shell-nav{height:auto; min-height:var(--nav-h); flex-wrap:wrap; padding:8px var(--sp-3); gap:var(--sp-2)}
  .shell-links{display:none}
  .shell-pills{margin-left:0; order:3; width:100%}
  .shell-right .shell-ibtn.lang-text{display:none}
}
/* API 文档页（/console） */
.docs-group { margin: 0 0 22px; }
.docs-h2 { font-size: 15px; font-weight: 700; margin: 18px 0 10px; letter-spacing: .01em; }
.docs-row {
  display: grid; grid-template-columns: 64px minmax(180px, 300px) 1fr;
  gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font: 400 13px/1.6 var(--font-ui);
}
.docs-row:first-of-type { border-top: 1px solid var(--border); }
.docs-row code {
  font: 500 12.5px var(--font-mono); color: var(--foreground);
  word-break: break-all;
}
.docs-desc { color: var(--muted-foreground); }
.docs-m-get, .docs-m-post, .docs-m-delete {
  display: inline-block; text-align: center; border-radius: 6px;
  font: 700 10.5px/18px var(--font-mono); letter-spacing: .04em;
  padding: 0 6px; min-width: 48px;
}
.docs-m-get { background: rgba(64,160,110,.16); color: #4ea981; border: 1px solid rgba(64,160,110,.35); }
.docs-m-post { background: rgba(90,130,220,.16); color: #6f92d8; border: 1px solid rgba(90,130,220,.35); }
.docs-m-delete { background: rgba(210,90,90,.16); color: #c76a6a; border: 1px solid rgba(210,90,90,.35); }
@media (max-width: 760px) {
  .docs-row { grid-template-columns: 56px 1fr; }
  .docs-desc { grid-column: 1 / -1; padding-left: 66px; }
}

/* 查看器（openViewer） */
.viewer-mask {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.88); backdrop-filter: blur(2px);
}
.viewer-stage { display: flex; align-items: center; justify-content: center; }
.viewer-bar {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; background: rgba(20,24,30,.9);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 6px 10px;
}
.viewer-btn {
  border: 0; background: transparent; color: #e9edf5; cursor: pointer;
  font: 500 13px var(--font-ui); padding: 4px 10px; border-radius: 999px; text-decoration: none;
}
.viewer-btn:hover { background: rgba(255,255,255,.12); }
.viewer-tip {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: rgba(233,237,245,.75); font: 500 12px var(--font-ui);
}
.viewer-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: rgba(20,24,30,.7); color: #fff; font-size: 22px; cursor: pointer;
}
.viewer-nav.prev { left: 18px; }
.viewer-nav.next { right: 18px; }

/* 历史：展开的任务详情 */
.shell-task-detail {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--muted);
  font: 400 12px/1.7 var(--font-ui);
}
.shell-task-row { display: flex; gap: 10px; }
.shell-task-row .k { color: var(--muted-foreground); min-width: 46px; }
.shell-task-log {
  margin: 8px 0 0; padding: 8px; max-height: 160px; overflow: auto;
  background: rgba(0,0,0,.18); border-radius: 8px;
  font: 400 11.5px/1.6 var(--font-mono); white-space: pre-wrap; color: var(--muted-foreground);
}