:root {
  --background: #f3f6f8;
  --foreground: #17232e;
  --card: #fffefe;
  --popover: #fffefe;
  --primary: #1f5f8b;
  --primary-foreground: #f7fbff;
  --secondary: #e8eef3;
  --secondary-foreground: #254257;
  --muted: #edf2f5;
  --muted-foreground: #667785;
  --accent: #e4eef5;
  --accent-foreground: #193d56;
  --destructive: #b84d61;
  --border: #dce5eb;
  --input: #d4e0e8;
  --ring: #4e8ab1;
  --sidebar: #eaf0f3;
  --sidebar-foreground: #1c2d3b;
  --sidebar-primary: #1f5f8b;
  --sidebar-primary-foreground: #f7fbff;
  --sidebar-accent: #dce8ef;
  --sidebar-accent-foreground: #193d56;
  --sidebar-border: #d4e1e8;
  --sidebar-ring: #4e8ab1;
  --radius: 0.875rem;
  --app-header-height: 3.25rem;
  --font-ui-sans: "MiSans", "Noto Sans SC", "Microsoft YaHei UI", system-ui, sans-serif;
  --font-body: var(--font-ui-sans);
  --skin-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --skin-line: #dce5eb;
  --skin-rose: #d18a69;
  --skin-plum: #1f5f8b;
  --skin-blush: #e8f0f4;
  --skin-cream: #fbfdfe;
  --skin-shadow: 0 20px 60px -46px rgb(74 43 58 / 65%);
}

:root,
:root[data-theme-preset],
html[data-theme-preset] {
  --primary: #1f5f8b !important;
  --primary-foreground: #f7fbff !important;
  --secondary: #e8eef3 !important;
  --secondary-foreground: #254257 !important;
  --ring: #4e8ab1 !important;
  --sidebar-primary: #1f5f8b !important;
  --sidebar-primary-foreground: #f7fbff !important;
  --sidebar-accent: #dce8ef !important;
  --sidebar-accent-foreground: #193d56 !important;
  --sidebar-ring: #4e8ab1 !important;
  --radius: 0.875rem !important;
  --app-header-height: 3.25rem !important;
}

html:not(.dark) :root,
html:not(.dark) :root[data-theme-preset] {
  --background: #f3f6f8 !important;
  --foreground: #17232e !important;
  --card: #fffefe !important;
  --popover: #fffefe !important;
  --muted: #edf2f5 !important;
  --muted-foreground: #667785 !important;
  --border: #dce5eb !important;
  --input: #d4e0e8 !important;
  --sidebar: #eaf0f3 !important;
  --sidebar-border: #d4e1e8 !important;
}

.dark,
.dark[data-theme-preset] {
  --background: #101920 !important;
  --foreground: #e8f0f5 !important;
  --card: #17232c !important;
  --popover: #1b2a34 !important;
  --primary: #86b9d7 !important;
  --primary-foreground: #10212e !important;
  --secondary: #213642 !important;
  --secondary-foreground: #d9e8f0 !important;
  --muted: #192832 !important;
  --muted-foreground: #93a9b8 !important;
  --accent: #243b48 !important;
  --accent-foreground: #e8f0f5 !important;
  --border: #2b404d !important;
  --input: #354d5b !important;
  --ring: #86b9d7 !important;
  --sidebar: #13212a !important;
  --sidebar-foreground: #e8f0f5 !important;
  --sidebar-primary: #86b9d7 !important;
  --sidebar-primary-foreground: #10212e !important;
  --sidebar-accent: #1d3340 !important;
  --sidebar-accent-foreground: #d8e8f1 !important;
  --sidebar-border: #2b404d !important;
  --sidebar-ring: #86b9d7 !important;
  --skin-line: #2b404d;
  --skin-rose: #d18a69;
  --skin-plum: #86b9d7;
  --skin-blush: #1d303b;
  --skin-cream: #17252e;
  --skin-shadow: 0 20px 60px -46px rgb(0 0 0 / 80%);
}

html { background: var(--background); }
body {
  background:
    radial-gradient(80% 44% at 20% -8%, color-mix(in oklab, var(--skin-blush) 55%, transparent) 0%, transparent 68%),
    radial-gradient(55% 40% at 95% 8%, color-mix(in oklab, var(--primary) 8%, transparent) 0%, transparent 72%),
    var(--background);
  font-family: var(--font-body);
  letter-spacing: 0.005em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.25;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
}
h1, h2, h3, h4 { font-family: var(--skin-serif); letter-spacing: 0.01em; }
::selection { background: color-mix(in oklab, var(--skin-rose) 28%, transparent); }

/* 内容像纸张，不像后台面板 */
[data-slot="card"] {
  position: relative;
  border-radius: 1.15rem !important;
  background-image: linear-gradient(160deg, color-mix(in oklab, var(--card) 98%, var(--skin-blush)) 0%, var(--card) 52%);
  box-shadow: var(--skin-shadow);
}
[data-slot="card"]::before {
  content: "";
  position: absolute;
  left: 0; top: 1rem; bottom: 1rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--skin-rose), color-mix(in oklab, var(--primary) 50%, transparent));
  opacity: 0.5;
}
[data-slot="table"] thead {
  background: color-mix(in oklab, var(--muted) 72%, transparent);
  color: var(--muted-foreground);
  font-weight: 500;
  letter-spacing: 0.04em;
}
[data-slot="table"] tbody tr:hover { background: color-mix(in oklab, var(--primary) 5%, transparent); }
[data-slot="status-badge"] { border-radius: 999px; }
input, textarea, [data-slot="select-trigger"] { border-radius: 0.8rem !important; }
input:focus, textarea:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 14%, transparent); }
button, a { -webkit-tap-highlight-color: transparent; }

/* 侧栏：更像安静的书桌，而不是控制台 */
[data-slot="sidebar-wrapper"] { --sidebar-width: 12.75rem; }
[data-slot="sidebar-inner"] {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--sidebar) 92%, var(--skin-blush)) 0%, var(--sidebar) 42%) !important;
  box-shadow: inset -1px 0 color-mix(in oklab, var(--sidebar-border) 72%, transparent);
}
[data-slot="sidebar-group-label"] {
  font-family: var(--skin-serif);
  letter-spacing: 0.16em;
  opacity: 0.55;
}
[data-slot="sidebar-menu-button"] { border-radius: 0.75rem; }
[data-slot="sidebar-menu-button"][data-active="true"] {
  background: color-mix(in oklab, var(--primary) 10%, transparent) !important;
  color: var(--primary) !important;
  font-weight: 600;
}
[data-slot="sidebar-menu-button"]:hover { background: color-mix(in oklab, var(--primary) 6%, transparent); }

/* 首页主视觉保留品牌感，去掉开发者终端味 */
section > div[aria-hidden="true"][style*="radial-gradient"] {
  background:
    radial-gradient(58% 48% at 22% 18%, rgb(182 111 128 / 0.30) 0%, transparent 70%),
    radial-gradient(46% 40% at 82% 12%, rgb(159 116 145 / 0.25) 0%, transparent 70%),
    radial-gradient(44% 38% at 46% 82%, rgb(107 70 95 / 0.18) 0%, transparent 72%) !important;
  opacity: 0.55 !important;
}
.dark section > div[aria-hidden="true"][style*="radial-gradient"] { opacity: 0.26 !important; }
[class*="from-blue-400"] { background-image: linear-gradient(100deg, #d18a69 0%, #a77b99 45%, #1f5f8b 100%) !important; }

/* 概览：压成真正可用的私人工作台 */
body[data-skin-page="overview"] main > div > div > div > .grid:first-child > .bg-card:first-child {
  border-color: color-mix(in oklab, var(--skin-rose) 22%, var(--border)) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 24px 70px -50px rgb(85 44 62 / 72%);
}
body[data-skin-page="overview"] main pre,
body[data-skin-page="overview"] main code { opacity: 0.16 !important; }
body[data-skin-page="overview"] main h3 { font-size: 1.45rem; line-height: 1.35; }
body[data-skin-page="overview"] main ol {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0.45rem !important;
  border-radius: 1rem !important;
}
body[data-skin-page="overview"] main ol > li {
  position: relative;
  display: block !important;
  min-width: 0;
  padding: 0 !important;
}
body[data-skin-page="overview"] main ol > li > span[aria-hidden="true"],
body[data-skin-page="overview"] main ol > li > svg:last-child,
body[data-skin-page="overview"] main ol .line-clamp-1 { display: none !important; }
body[data-skin-page="overview"] main ol > li > span:not([aria-hidden="true"]) {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
}
body[data-skin-page="overview"] main ol > li > span:not([aria-hidden="true"]) svg { width: 12px; height: 12px; }
body[data-skin-page="overview"] main ol a {
  height: 100%;
  min-height: 4.8rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem !important;
  padding: 1.45rem 0.35rem 0.65rem !important;
  text-align: center;
  border-radius: 0.8rem !important;
  background: color-mix(in oklab, var(--card) 82%, var(--skin-blush)) !important;
}
body[data-skin-page="overview"] main ol a > span { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
body[data-skin-page="overview"] main ol a > span > span:first-child { gap: 0.2rem !important; justify-content: center; }
body[data-skin-page="overview"] main ol a > span > span:first-child > span:first-child { display: none; }
body[data-skin-page="overview"] main ol a > span > span:first-child > span:last-child { font-size: 0.72rem; white-space: normal; line-height: 1.25; }
body[data-skin-page="overview"] main ol .size-7 { width: 2rem !important; height: 2rem !important; }
body[data-skin-page="overview"] .h-72,
body[data-skin-page="overview"] .h-80 { display: none !important; }
body[data-skin-page="overview"] .h-72:has(+ *),
body[data-skin-page="overview"] .h-80:has(+ *) { display: none !important; }
body[data-skin-page="overview"] main .rounded-2xl.border:has(> .border-b):has(.h-72),
body[data-skin-page="overview"] main .rounded-2xl.border:has(> .border-b):has(.h-80) { display: none !important; }

/* 对话：把标准游乐场改成陪伴式聊天 */
body[data-skin-page="playground"] main[data-slot="sidebar-inset"] {
  background:
    radial-gradient(62% 42% at 50% 8%, color-mix(in oklab, var(--skin-blush) 55%, transparent) 0%, transparent 78%),
    transparent !important;
}
body[data-skin-page="playground"] main .min-h-\[min\(520px\,calc\(100svh-18rem\)\)\] {
  min-height: min(470px, calc(100svh - 20rem)) !important;
  align-items: flex-start !important;
  padding-top: 2.4rem !important;
}
body[data-skin-page="playground"] main .min-h-\[min\(520px\,calc\(100svh-18rem\)\)\] > div > div:first-child {
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 0.2rem;
  border: 1px solid color-mix(in oklab, var(--skin-rose) 24%, var(--border));
  border-radius: 999px !important;
  color: var(--primary);
  background:
    radial-gradient(circle at 35% 28%, #fff 0%, transparent 35%),
    linear-gradient(145deg, color-mix(in oklab, var(--skin-blush) 80%, white), color-mix(in oklab, var(--primary) 14%, var(--card))) !important;
  box-shadow: 0 14px 45px -24px color-mix(in oklab, var(--primary) 55%, transparent);
}
body[data-skin-page="playground"] main .min-h-\[min\(520px\,calc\(100svh-18rem\)\)\] h2 {
  font-family: var(--skin-serif);
  font-size: 1.65rem !important;
}
body[data-skin-page="playground"] main .min-h-\[min\(520px\,calc\(100svh-18rem\)\)\] > div > div.grid.gap-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
  margin-top: 0.5rem;
}
body[data-skin-page="playground"] main .min-h-\[min\(520px\,calc\(100svh-18rem\)\)\] > div > div.grid.gap-2 button {
  min-height: 4.4rem;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column;
  gap: 0.45rem !important;
  padding: 0.75rem !important;
  border-radius: 1rem !important;
  background: color-mix(in oklab, var(--card) 90%, var(--skin-blush)) !important;
  border-color: color-mix(in oklab, var(--skin-rose) 18%, var(--border)) !important;
  box-shadow: 0 10px 28px -24px rgb(75 43 58 / 60%);
}
body[data-skin-page="playground"] main .min-h-\[min\(520px\,calc\(100svh-18rem\)\)\] > div > div.grid.gap-2 button span { font-size: 0.8rem; }
body[data-skin-page="playground"] textarea[name="message"] { min-height: 5.8rem !important; padding-left: 1rem !important; }
body[data-skin-page="playground"] [data-slot="input-group"] {
  border-radius: 1.35rem !important;
  border-color: color-mix(in oklab, var(--skin-rose) 20%, var(--border)) !important;
  box-shadow: 0 22px 65px -38px rgb(63 35 48 / 78%), 0 0 0 1px color-mix(in oklab, var(--primary) 5%, transparent) !important;
}

/* 用户/密钥/日志列表：更轻的私密卡片 */
body[data-skin-page="users"] [style*="--data-table-card-bg"],
body[data-skin-page="keys"] [data-slot="table"] tbody tr,
body[data-skin-page="logs"] [data-slot="table"] tbody tr {
  border-radius: 0.9rem;
}
body[data-skin-page="users"] [style*="--data-table-card-bg"] { padding: 0.8rem 0.7rem !important; }
body[data-skin-page="users"] [style*="--data-table-card-bg"] > div > div > div > div.text-muted-foreground { letter-spacing: 0.08em; opacity: 0.75; }
body[data-skin-page="keys"] main .rounded-lg.border.p-8,
body[data-skin-page="logs"] main .rounded-xl.border { background: color-mix(in oklab, var(--card) 94%, var(--skin-blush)); }

/* 个人页：头像区变成个人封面 */
body[data-skin-page="profile"] [data-slot="card"]:first-of-type {
  overflow: hidden;
  border-color: color-mix(in oklab, var(--skin-rose) 25%, var(--border)) !important;
  background:
    radial-gradient(70% 120% at 100% 0%, color-mix(in oklab, var(--skin-blush) 75%, transparent), transparent 70%),
    var(--card) !important;
}
body[data-skin-page="profile"] [data-slot="avatar"] { box-shadow: 0 0 0 4px color-mix(in oklab, var(--skin-blush) 72%, transparent); }

/* 移动端主导航：悬浮胶囊，中间对话按钮抬起 */
.skin-tabbar {
  position: fixed;
  left: max(0.5rem, env(safe-area-inset-left));
  right: max(0.5rem, env(safe-area-inset-right));
  bottom: max(0.5rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: flex-end;
  padding: 0.42rem 0.35rem 0.38rem;
  border: 1px solid color-mix(in oklab, var(--border) 86%, transparent);
  border-radius: 1.35rem;
  background: color-mix(in oklab, var(--card) 90%, transparent);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: 0 18px 55px -28px rgb(49 27 38 / 62%);
}
.skin-tabbar a {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.16rem;
  padding: 0.35rem 0.1rem 0.2rem;
  border-radius: 1rem;
  font-size: 0.65rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.skin-tabbar a svg { width: 1.3rem; height: 1.3rem; }
.skin-tabbar a.is-active { color: var(--primary); font-weight: 650; }
.skin-tabbar a.is-active::after {
  content: "";
  position: absolute;
  bottom: 0.05rem;
  width: 0.9rem;
  height: 2px;
  border-radius: 99px;
  background: var(--skin-rose);
}
.skin-tabbar a.skin-tab-chat {
  margin-top: -1.45rem;
  justify-content: flex-end;
  color: var(--primary);
}
.skin-tabbar a.skin-tab-chat::before {
  content: "";
  position: absolute;
  top: 0;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 25%, rgb(255 255 255 / 35%), transparent 34%),
    linear-gradient(145deg, #bd788a, #1f5f8b);
  border: 4px solid color-mix(in oklab, var(--card) 92%, transparent);
  box-shadow: 0 12px 28px -12px rgb(82 42 61 / 65%);
}
.skin-tabbar a.skin-tab-chat svg { position: relative; z-index: 1; width: 1.45rem; height: 1.45rem; color: #f7fbff; transform: translateY(0.39rem); }
.skin-tabbar a.skin-tab-chat span { margin-top: 0.28rem; color: var(--primary); }
.skin-tabbar a.skin-tab-chat.is-active::after { display: none; }

@media (max-width: 639.98px) {
  :root { --app-header-height: 3.25rem !important; }
  body { padding-bottom: 0; }
  body[data-skin-page="overview"] main[data-slot="sidebar-inset"],
  body[data-skin-page="playground"] main[data-slot="sidebar-inset"] { height: calc(100svh - var(--app-header-height) - 4.8rem) !important; }

  header {
    background: color-mix(in oklab, var(--background) 82%, transparent);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid color-mix(in oklab, var(--border) 58%, transparent);
  }
  header > div { gap: 0.2rem; padding-left: 0.45rem; padding-right: 0.45rem; }
  header button[aria-label="搜索"],
  header button[aria-label="打开主题设置"],
  header button[aria-label*="系统更新"],
  header button:has(svg.lucide-languages) { display: none !important; }
  header [class*="ms-auto"] { gap: 0; }
  header [class*="system-brand"] span { font-family: var(--skin-serif); letter-spacing: 0.06em; }
  header [class*="system-brand"] img { border-radius: 999px; box-shadow: 0 0 0 2px color-mix(in oklab, var(--skin-rose) 16%, transparent); }

  main h1, main h2 { font-size: 1.45rem; line-height: 1.3; }
  main > div { max-width: 100%; }
  [data-slot="card"] { border-radius: 1rem !important; }
  [data-slot="card"]::before { top: 0.7rem; bottom: 0.7rem; opacity: 0.42; }

  body[data-skin-page="overview"] main[data-slot="sidebar-inset"] > div > main > div:first-child {
    padding-top: 0.7rem !important;
    padding-bottom: 0.25rem !important;
  }
  body[data-skin-page="overview"] main > div > div > div > .grid:first-child > .bg-card:first-child { border-radius: 1.2rem !important; }
  body[data-skin-page="overview"] main h3 { font-size: 1.3rem; }
  body[data-skin-page="overview"] main ol a { min-height: 4.35rem; }
  body[data-skin-page="overview"] main .rounded-2xl.border:has(> .border-b):has(.h-72),
  body[data-skin-page="overview"] main .rounded-2xl.border:has(> .border-b):has(.h-80) { display: none !important; }

  body[data-skin-page="playground"] main[data-slot="sidebar-inset"] > div > main { padding-bottom: 0 !important; }
  body[data-skin-page="playground"] main .min-h-\[min\(520px\,calc\(100svh-18rem\)\)\] { padding-top: 1.5rem !important; }
  body[data-skin-page="playground"] main .min-h-\[min\(520px\,calc\(100svh-18rem\)\)\] > div > div:first-child { width: 3.8rem; height: 3.8rem; }
  body[data-skin-page="playground"] main .min-h-\[min\(520px\,calc\(100svh-18rem\)\)\] h2 { font-size: 1.45rem !important; }
  body[data-skin-page="playground"] [data-slot="input-group"] { border-radius: 1.15rem !important; }
  body[data-skin-page="playground"] textarea[name="message"] { min-height: 4.7rem !important; }

  body[data-skin-page="profile"] main[data-slot="sidebar-inset"] > div > main > div:first-child { padding-top: 0.75rem !important; }
  body[data-skin-page="profile"] [data-slot="card"]:first-of-type [data-slot="card-content"] { padding: 0.85rem !important; }
  body[data-skin-page="profile"] [data-slot="avatar"] { width: 3.2rem !important; height: 3.2rem !important; }
  body[data-skin-page="profile"] [data-slot="card"]:first-of-type .grid-cols-3 > div { padding-left: 0.55rem !important; padding-right: 0.55rem !important; }

  body[data-skin-page="users"] main[data-slot="sidebar-inset"] > div > main > div:first-child > div:first-child,
  body[data-skin-page="keys"] main[data-slot="sidebar-inset"] > div > main > div:first-child > div:first-child,
  body[data-skin-page="logs"] main[data-slot="sidebar-inset"] > div > main > div:first-child > div:first-child {
    padding-top: 0.7rem !important;
    padding-bottom: 0.35rem !important;
  }
  body[data-skin-page="users"] [style*="--data-table-card-bg"] { padding: 0.72rem 0.55rem !important; background-color: color-mix(in oklab, var(--card) 96%, transparent) !important; }
  body[data-skin-page="users"] [style*="--data-table-card-bg"] + [style*="--data-table-card-bg"] { border-top-color: color-mix(in oklab, var(--border) 55%, transparent); }

  /* 登录页：不再像通用后台登录框 */
  .relative.grid.h-svh.max-w-none {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100svh;
    background:
      radial-gradient(100% 58% at 50% 0%, color-mix(in oklab, var(--skin-blush) 65%, transparent) 0%, transparent 70%),
      var(--background);
  }
  .relative.grid.h-svh.max-w-none > a[href="/"] { position: static; margin: 2.4rem auto 0; display: flex; flex-direction: column; gap: 0.55rem; text-align: center; }
  .relative.grid.h-svh.max-w-none > a[href="/"] > div,
  .relative.grid.h-svh.max-w-none > a[href="/"] img { width: 3.8rem; height: 3.8rem; }
  .relative.grid.h-svh.max-w-none > a[href="/"] h1 { font-family: var(--skin-serif); font-size: 1.2rem; font-weight: 500; letter-spacing: 0.18em; opacity: 0.78; }
  .relative.grid.h-svh.max-w-none > .container { margin-top: 1.5rem; padding-top: 0; padding-bottom: calc(1.8rem + env(safe-area-inset-bottom, 0px)); align-items: flex-end; }
  .relative.grid.h-svh.max-w-none > .container > div { padding: 1rem 1.25rem 1.25rem; border: 1px solid color-mix(in oklab, var(--skin-rose) 18%, var(--border)); border-radius: 1.5rem; background: color-mix(in oklab, var(--card) 88%, transparent); box-shadow: 0 -20px 60px -48px rgb(63 35 48 / 75%); }
  .relative.grid.h-svh.max-w-none form input { height: 2.8rem !important; }
  .relative.grid.h-svh.max-w-none form button[type="submit"] { height: 2.8rem !important; border-radius: 0.9rem !important; }
}

@media (min-width: 640px) {
  .skin-tabbar { display: none; }
  body { padding-bottom: 0; }
  main[data-slot="sidebar-inset"] { box-shadow: 0 16px 60px -55px rgb(53 31 43 / 70%); }
}

/* ============================================================
   2026-10-29 · 第二轮：不是换皮，是重排页面关系
   ============================================================ */

.skin-page-title-wrap { min-width: 0; }
.skin-page-subtitle {
  margin: 0.25rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
}
.skin-page-intro {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  overflow: hidden;
  padding: 0.95rem 1rem;
  border: 1px solid color-mix(in oklab, var(--skin-rose) 18%, var(--border));
  border-radius: 1.15rem;
  background:
    radial-gradient(90% 160% at 100% 0%, color-mix(in oklab, var(--skin-blush) 70%, transparent), transparent 68%),
    color-mix(in oklab, var(--card) 94%, transparent);
  box-shadow: 0 14px 40px -36px rgb(85 44 62 / 62%);
}
.skin-page-intro strong {
  display: block;
  font-family: var(--skin-serif);
  color: var(--foreground);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.4;
}
.skin-page-intro p {
  margin: 0.22rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.73rem;
  line-height: 1.6;
}
.skin-intro-mark {
  display: grid;
  place-items: center;
  flex: 0 0 2.35rem;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.85rem;
  color: #fbfdfe;
  font-family: var(--skin-serif);
  font-size: 1rem;
  background: linear-gradient(145deg, #c78798, #1f5f8b);
  box-shadow: inset 0 1px rgb(255 255 255 / 28%), 0 10px 22px -16px rgb(79 42 59 / 70%);
}
.skin-key-illustration {
  display: grid;
  place-items: center;
  flex: 0 0 2.65rem;
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid color-mix(in oklab, var(--skin-rose) 24%, var(--border));
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in oklab, var(--skin-blush) 62%, var(--card));
}
.skin-key-illustration svg { width: 1.25rem; height: 1.25rem; }

/* 概览主视觉：先给情绪和入口，技术配置退到后面 */
@media (min-width: 1024px) {
  .skin-tabbar { display: none !important; }
}
body[data-skin-page="overview"] .skin-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(14rem, 0.82fr);
  align-items: center;
  min-height: 20.5rem;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border: 1px solid color-mix(in oklab, var(--skin-rose) 25%, var(--border));
  border-radius: 1.6rem;
  background:
    radial-gradient(65% 120% at 93% 4%, color-mix(in oklab, var(--skin-rose) 26%, transparent), transparent 64%),
    radial-gradient(52% 88% at 15% 110%, color-mix(in oklab, #dbb287 18%, transparent), transparent 70%),
    linear-gradient(128deg, color-mix(in oklab, var(--card) 96%, var(--skin-blush)), var(--card));
  box-shadow: 0 28px 85px -62px rgb(74 39 55 / 80%);
}
body[data-skin-page="overview"] .skin-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}
.skin-hero-copy { position: relative; z-index: 2; max-width: 31rem; }
.skin-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  color: color-mix(in oklab, var(--primary) 78%, var(--muted-foreground));
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.skin-hero-eyebrow > span {
  width: 1.55rem;
  height: 1px;
  background: currentColor;
}
body[data-skin-page="overview"] .skin-hero h1 {
  margin: 0.75rem 0 0;
  color: var(--foreground);
  font-family: var(--skin-serif);
  font-size: clamp(2.35rem, 4.7vw, 4rem);
  font-weight: 520;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
body[data-skin-page="overview"] .skin-hero-copy > p {
  margin: 0.9rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.85;
}
.skin-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.35rem;
}
.skin-hero-primary,
.skin-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.65rem;
  padding: 0 1.05rem;
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 650;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.skin-hero-primary {
  color: #f7fbff !important;
  background: linear-gradient(135deg, #aa6579, #674357);
  box-shadow: 0 12px 28px -17px rgb(88 43 62 / 72%);
}
.skin-hero-primary svg { width: 1rem; height: 1rem; }
.skin-hero-secondary {
  color: var(--foreground) !important;
  border: 1px solid color-mix(in oklab, var(--skin-rose) 22%, var(--border));
  background: color-mix(in oklab, var(--card) 75%, transparent);
}
.skin-hero-primary:active,
.skin-hero-secondary:active { transform: scale(0.97); }
.skin-hero-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.38rem 0.55rem;
  margin-top: 1.15rem;
  color: var(--muted-foreground);
  font-size: 0.66rem;
}
.skin-hero-status strong { color: color-mix(in oklab, var(--primary) 86%, var(--foreground)); font-weight: 600; }
.skin-hero-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: #6e9d76;
  box-shadow: 0 0 0 4px rgb(110 157 118 / 13%);
}
.skin-hero-art {
  position: relative;
  align-self: stretch;
  min-height: 15rem;
}
.skin-hero-orb {
  position: absolute;
  top: 50%;
  left: 52%;
  display: grid;
  place-items: center;
  width: clamp(9rem, 17vw, 13rem);
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: 45% 55% 49% 51% / 55% 43% 57% 45%;
  background:
    radial-gradient(circle at 36% 28%, rgb(255 255 255 / 75%), transparent 25%),
    linear-gradient(145deg, #f1cbd2, #b77588 52%, #68455a);
  box-shadow: inset -1rem -1.4rem 2.5rem rgb(77 42 58 / 26%), 0 34px 55px -30px rgb(83 42 61 / 78%);
  transform: translate(-50%, -50%) rotate(-7deg);
}
.skin-hero-orb::before,
.skin-hero-orb::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 68%, transparent);
}
.skin-hero-orb::before { width: 64%; height: 1px; transform: rotate(-18deg); opacity: 0.5; }
.skin-hero-orb::after { width: 1px; height: 58%; transform: rotate(24deg); opacity: 0.35; }
.skin-hero-face {
  position: relative;
  display: flex;
  gap: 1.2rem;
  transform: translateY(0.2rem);
}
.skin-hero-face i {
  width: 0.38rem;
  height: 0.6rem;
  border-radius: 999px;
  background: rgb(71 43 56 / 72%);
  box-shadow: 0 1.15rem 0 -0.11rem rgb(112 63 78 / 55%);
  animation: skin-blink 5.5s ease-in-out infinite;
}
.skin-hero-face i:last-child { animation-delay: 0.18s; }
.skin-bubble {
  position: absolute;
  z-index: 3;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 52%);
  border-radius: 1rem 1rem 1rem 0.28rem;
  color: #533746;
  background: rgb(255 250 247 / 76%);
  box-shadow: 0 14px 35px -26px rgb(66 37 51 / 74%);
  backdrop-filter: blur(10px);
  font-family: var(--skin-serif);
  font-size: 0.7rem;
  white-space: nowrap;
}
.skin-bubble-a { top: 17%; right: 0; transform: rotate(3deg); }
.skin-bubble-b { bottom: 16%; left: 0; border-radius: 1rem 1rem 0.28rem 1rem; transform: rotate(-3deg); }
.skin-spark { position: absolute; width: 0.28rem; height: 0.28rem; border-radius: 999px; background: var(--skin-rose); opacity: 0.6; }
.skin-spark-a { top: 15%; left: 16%; }
.skin-spark-b { right: 6%; bottom: 26%; width: 0.2rem; height: 0.2rem; }
.skin-spark-c { top: 38%; right: 17%; width: 0.36rem; height: 0.36rem; opacity: 0.25; }
@keyframes skin-blink { 0%, 44%, 50%, 100% { transform: scaleY(1); } 47% { transform: scaleY(0.08); } }

body[data-skin-page="overview"] main > div > div > div > .grid:first-child > .bg-card:first-child {
  border-color: color-mix(in oklab, var(--border) 90%, transparent) !important;
  box-shadow: 0 18px 55px -52px rgb(85 44 62 / 66%);
}
body[data-skin-page="overview"] main pre,
body[data-skin-page="overview"] main code { opacity: 0.08 !important; }
body[data-skin-page="overview"] main ol a { background: color-mix(in oklab, var(--card) 86%, var(--skin-blush)) !important; }

/* 用户页：先看到“人”，不是 ID 和角色枚举 */
body[data-skin-page="users"] main .divide-y:has(.skin-user-card) {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body[data-skin-page="users"] .skin-user-card {
  position: relative;
  overflow: hidden;
  padding: 0.9rem 0.85rem 0.65rem !important;
  border: 1px solid color-mix(in oklab, var(--skin-rose) 16%, var(--border)) !important;
  border-radius: 1.15rem !important;
  background:
    radial-gradient(90% 160% at 100% 0%, color-mix(in oklab, var(--skin-blush) 58%, transparent), transparent 68%),
    color-mix(in oklab, var(--card) 96%, transparent) !important;
  box-shadow: 0 15px 42px -40px rgb(80 42 59 / 72%);
}
body[data-skin-page="users"] .skin-user-card + .skin-user-card { border-top: 1px solid color-mix(in oklab, var(--skin-rose) 16%, var(--border)) !important; }
body[data-skin-page="users"] .skin-user-card > div {
  display: flex;
  align-items: flex-start;
  gap: 0.72rem;
}
body[data-skin-page="users"] .skin-user-card > div > .min-w-0.flex-1 { order: 2; }
.skin-person-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 2.55rem;
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid color-mix(in oklab, var(--skin-rose) 24%, var(--border));
  border-radius: 0.9rem;
  color: #fbfdfe;
  font-family: var(--skin-serif);
  font-size: 1rem;
  background:
    radial-gradient(circle at 34% 24%, rgb(255 255 255 / 44%), transparent 30%),
    linear-gradient(145deg, #c48797, #765065);
  box-shadow: 0 10px 24px -18px rgb(78 39 56 / 70%);
}
body[data-skin-page="users"] .skin-user-name {
  max-width: 12rem !important;
  color: var(--foreground);
  font-family: var(--skin-serif);
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}
body[data-skin-page="users"] .skin-user-card [data-slot="status-badge"] { font-size: 0.66rem; }
body[data-skin-page="users"] .skin-user-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.32rem !important;
  margin-top: 0.6rem !important;
}
body[data-skin-page="users"] .skin-user-meta > div {
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border-radius: 0.65rem;
  background: color-mix(in oklab, var(--muted) 46%, transparent);
}
body[data-skin-page="users"] .skin-user-meta > div > div:first-child {
  margin-bottom: 0.2rem !important;
  font-size: 0.56rem !important;
  letter-spacing: 0.08em !important;
  opacity: 0.66;
}
body[data-skin-page="users"] .skin-user-meta > div > div:last-child { overflow: hidden; text-overflow: ellipsis; }
body[data-skin-page="users"] .skin-user-meta [font-family\:inherit] { font-size: 0.7rem !important; }
body[data-skin-page="users"] .skin-user-meta span,
body[data-skin-page="users"] .skin-user-meta button { font-size: 0.68rem !important; }
body[data-skin-page="users"] .skin-user-card .mt-1.-mb-0\.5 { margin-top: 0.05rem !important; }
body[data-skin-page="users"] main .min-h-0.flex-1.overflow-hidden { overflow-y: auto !important; }

/* 连接凭证：空状态也要像这个产品的一部分 */
body[data-skin-page="keys"] [data-skin-key-empty] {
  position: relative;
  min-height: 15.5rem;
  overflow: hidden;
  border-color: color-mix(in oklab, var(--skin-rose) 18%, var(--border)) !important;
  background:
    radial-gradient(70% 100% at 50% 0%, color-mix(in oklab, var(--skin-blush) 72%, transparent), transparent 74%),
    color-mix(in oklab, var(--card) 96%, transparent) !important;
}
body[data-skin-page="keys"] [data-skin-key-empty]::after {
  content: "·  ·  ·";
  position: absolute;
  right: 1.4rem;
  bottom: 0.7rem;
  color: color-mix(in oklab, var(--skin-rose) 38%, transparent);
  font-family: var(--skin-serif);
  letter-spacing: 0.5em;
}
body[data-skin-page="keys"] [data-skin-key-empty] [data-slot="empty-icon"] {
  width: 4.3rem !important;
  height: 4.3rem !important;
  border-radius: 999px !important;
  color: var(--primary) !important;
  background:
    radial-gradient(circle at 34% 25%, rgb(255 255 255 / 55%), transparent 32%),
    linear-gradient(145deg, color-mix(in oklab, var(--skin-blush) 76%, white), color-mix(in oklab, var(--primary) 14%, var(--card))) !important;
  box-shadow: 0 18px 38px -28px rgb(84 42 60 / 72%);
}
body[data-skin-page="keys"] [data-skin-key-empty] [data-slot="empty-icon"] svg { width: 1.45rem !important; height: 1.45rem !important; }
body[data-skin-page="keys"] [data-slot="empty-title"] {
  font-family: var(--skin-serif);
  font-size: 1.1rem !important;
}
body[data-skin-page="keys"] [data-slot="empty-description"] {
  max-width: 20rem;
  line-height: 1.75 !important;
}
body[data-skin-page="keys"] main input { background: color-mix(in oklab, var(--card) 72%, transparent); }

/* 个人页：变成“我的空间”，账户数据下沉 */
body[data-skin-page="profile"] .skin-page-intro-profile {
  display: block;
  padding: 1.2rem 1.2rem 1.15rem;
  border: 0;
  background:
    radial-gradient(70% 130% at 100% 0%, color-mix(in oklab, var(--skin-rose) 20%, transparent), transparent 68%),
    transparent;
  box-shadow: none;
}
.skin-profile-kicker {
  color: color-mix(in oklab, var(--primary) 70%, var(--muted-foreground));
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}
body[data-skin-page="profile"] .skin-page-intro-profile h1 {
  margin: 0.45rem 0 0;
  font-family: var(--skin-serif);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 520;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
body[data-skin-page="profile"] .skin-page-intro-profile p {
  margin-top: 0.5rem;
  font-size: 0.78rem;
}
body[data-skin-page="profile"] .skin-profile-card { overflow: hidden; }
body[data-skin-page="profile"] .skin-profile-card h1 {
  max-width: min(12rem, 44vw);
  font-family: var(--skin-serif);
  font-size: 1.45rem !important;
}
body[data-skin-page="profile"] .skin-profile-card [data-slot="card-content"] > div {
  min-width: 0;
}
body[data-skin-page="profile"] .skin-profile-card [data-slot="card-content"] > div > div:last-child {
  min-width: 0;
}
body[data-skin-page="profile"] .skin-profile-card [data-slot="card-content"] > div > div:last-child > div:first-child {
  flex-wrap: wrap !important;
  overflow: hidden;
}
body[data-skin-page="profile"] .skin-profile-card [data-slot="status-badge"] {
  max-width: 100%;
  font-size: 0.67rem !important;
}
body[data-skin-page="profile"] .skin-profile-card .grid-cols-3 > div:nth-child(1) {
  background: color-mix(in oklab, var(--skin-blush) 37%, transparent);
}
body[data-skin-page="profile"] .skin-profile-card .grid-cols-3 > div:nth-child(2),
body[data-skin-page="profile"] .skin-profile-card .grid-cols-3 > div:nth-child(3) { opacity: 0.72; }
body[data-skin-page="profile"] .skin-profile-card .grid-cols-3 .font-mono { font-size: 0.92rem !important; }
body[data-skin-page="profile"] main > div:first-child { overflow-x: hidden !important; }
body[data-skin-page="profile"] main > div:first-child > div { min-width: 0; max-width: 100%; }

/* 对话页：人物感和输入区优先，不显示开发测试提示 */
body[data-skin-page="playground"] .skin-source-prompts { display: none !important; }
body[data-skin-page="playground"] .skin-chat-empty {
  position: relative;
  gap: 1rem !important;
  padding: 0.25rem 0.2rem 1.4rem;
}
.skin-chat-portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto 0.2rem;
  border: 1px solid color-mix(in oklab, var(--skin-rose) 22%, var(--border));
  border-radius: 45% 55% 48% 52% / 53% 45% 55% 47%;
  background:
    radial-gradient(circle at 34% 25%, rgb(255 255 255 / 62%), transparent 26%),
    linear-gradient(145deg, #efcbd2, #b9788a 56%, #6c485c);
  box-shadow: inset -0.55rem -0.75rem 1.5rem rgb(77 42 58 / 25%), 0 23px 45px -29px rgb(85 43 61 / 75%);
  transform: rotate(-4deg);
}
.skin-chat-orb {
  display: flex;
  gap: 0.95rem;
  transform: rotate(4deg);
}
.skin-chat-orb i {
  width: 0.3rem;
  height: 0.47rem;
  border-radius: 999px;
  background: rgb(70 42 55 / 72%);
  animation: skin-blink 5.5s ease-in-out infinite;
}
.skin-chat-orb i:last-child { animation-delay: 0.18s; }
.skin-chat-online {
  position: absolute;
  right: 0.18rem;
  bottom: 0.3rem;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: #709b76;
}
body[data-skin-page="playground"] .skin-chat-empty h2 {
  font-family: var(--skin-serif);
  font-size: 1.85rem !important;
  font-weight: 520;
  letter-spacing: -0.025em;
}
body[data-skin-page="playground"] .skin-chat-empty h2 + p {
  margin-inline: auto;
  max-width: 18rem;
  line-height: 1.75;
}
.skin-chat-starters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.15rem;
}
.skin-chat-starters button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  min-width: 0;
  min-height: 3.2rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid color-mix(in oklab, var(--skin-rose) 17%, var(--border));
  border-radius: 1rem;
  color: var(--foreground);
  background: color-mix(in oklab, var(--card) 88%, var(--skin-blush));
  box-shadow: 0 10px 24px -24px rgb(79 39 56 / 64%);
  font-family: var(--skin-serif);
  font-size: 0.77rem;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.skin-chat-starters button:active { transform: scale(0.975); border-color: var(--skin-rose); }
.skin-chat-starters button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skin-chat-starters button svg { flex: 0 0 auto; width: 0.85rem; height: 0.85rem; color: var(--skin-rose); }
.skin-chat-hint {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.63rem;
  text-align: center;
  letter-spacing: 0.03em;
}
body[data-skin-page="playground"] [data-slot="input-group"] {
  background: color-mix(in oklab, var(--card) 90%, transparent) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ============================================================
   API STORE · DESKTOP RAIL / REQUEST VISUAL
   ============================================================ */
.skin-side-rail {
  position: relative;
  display: none;
  flex: 0 0 13.25rem;
  width: 13.25rem;
  min-height: 0;
  flex-direction: column;
  padding: 1.15rem 0.8rem 0.9rem;
  overflow: hidden;
  color: var(--sidebar-foreground);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.4), transparent 13%),
    linear-gradient(180deg, var(--sidebar), color-mix(in oklab, var(--sidebar) 82%, var(--background))) !important;
  border-right: 1px solid var(--sidebar-border);
}
.skin-side-rail::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 35%, transparent), transparent 30%, transparent 72%, color-mix(in oklab, var(--skin-rose) 35%, transparent));
  pointer-events: none;
}
.skin-side-rail::after {
  content: "";
  position: absolute;
  top: 4.8rem;
  right: -2.8rem;
  width: 8rem;
  height: 8rem;
  border: 1px solid color-mix(in oklab, var(--primary) 9%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 1.3rem color-mix(in oklab, var(--primary) 2.5%, transparent), 0 0 0 2.7rem color-mix(in oklab, var(--primary) 1.7%, transparent);
  pointer-events: none;
}
.skin-rail-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.8rem;
  padding: 0.15rem 0.35rem 0.9rem;
  color: var(--sidebar-foreground) !important;
  text-decoration: none !important;
  border-bottom: 1px solid color-mix(in oklab, var(--sidebar-border) 74%, transparent);
}
.skin-rail-logo {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  padding: 0.47rem 0.42rem;
  border-radius: 0.62rem;
  background: linear-gradient(145deg, var(--primary), color-mix(in oklab, var(--primary) 70%, #0d3149));
  box-shadow: inset 0 1px rgb(255 255 255 / 20%), 0 8px 18px -13px rgb(17 58 84 / 80%);
}
.skin-rail-logo i { display: block; width: 0.23rem; border-radius: 2px; background: #dcebf4; }
.skin-rail-logo i:nth-child(1) { height: 0.48rem; opacity: 0.5; }
.skin-rail-logo i:nth-child(2) { height: 0.85rem; opacity: 0.76; }
.skin-rail-logo i:nth-child(3) { height: 1.14rem; background: var(--skin-rose); }
.skin-rail-brand > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 0.13rem; }
.skin-rail-brand b { font-family: var(--font-ui-sans); color: var(--sidebar-foreground); font-size: 0.84rem; font-weight: 760; letter-spacing: 0.13em; line-height: 1; }
.skin-rail-brand small { color: var(--muted-foreground); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.48rem; letter-spacing: 0.16em; }
.skin-rail-group { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.17rem; margin-top: 1.2rem; }
.skin-rail-group > span { padding: 0 0.62rem 0.38rem; color: color-mix(in oklab, var(--muted-foreground) 82%, transparent); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.17em; }
.skin-rail-group > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.62rem;
  min-height: 2.6rem;
  padding: 0 0.62rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  color: color-mix(in oklab, var(--sidebar-foreground) 80%, var(--muted-foreground));
  font-size: 0.73rem;
  font-weight: 510;
  text-decoration: none !important;
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}
.skin-rail-group > a svg { flex: 0 0 1.05rem; width: 1.05rem; height: 1.05rem; color: var(--muted-foreground); stroke-width: 1.55; transition: color 0.16s ease; }
.skin-rail-group > a > span { flex: 1; min-width: 0; white-space: nowrap; }
.skin-rail-group > a > b { color: color-mix(in oklab, var(--muted-foreground) 50%, transparent); font-family: ui-monospace, Consolas, monospace; font-size: 0.52rem; font-weight: 500; letter-spacing: 0.04em; }
.skin-rail-group > a:hover { color: var(--sidebar-foreground); border-color: color-mix(in oklab, var(--sidebar-border) 72%, transparent); background: color-mix(in oklab, var(--card) 38%, transparent); }
.skin-rail-group > a.is-active { color: var(--primary) !important; border-color: color-mix(in oklab, var(--primary) 17%, var(--sidebar-border)); background: color-mix(in oklab, var(--card) 64%, var(--sidebar-accent)); font-weight: 650; box-shadow: inset 0 1px rgb(255 255 255 / 36%); }
.skin-rail-group > a.is-active::before { content: ""; position: absolute; top: 0.48rem; bottom: 0.48rem; left: -0.81rem; width: 3px; border-radius: 0 4px 4px 0; background: var(--skin-rose); }
.skin-rail-group > a.is-active svg { color: var(--primary); }
.skin-rail-group > a.is-active > b { color: var(--primary); }
.skin-rail-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.58rem;
  margin-top: auto;
  padding: 0.72rem 0.6rem;
  border-top: 1px solid color-mix(in oklab, var(--sidebar-border) 72%, transparent);
}
.skin-rail-signal { width: 0.44rem; height: 0.44rem; flex: 0 0 auto; border-radius: 50%; background: #5b987c; box-shadow: 0 0 0 4px rgb(91 152 124 / 11%); }
.skin-rail-foot div { display: flex; min-width: 0; flex-direction: column; gap: 0.1rem; }
.skin-rail-foot b { color: var(--sidebar-foreground); font-size: 0.63rem; font-weight: 600; }
.skin-rail-foot small { overflow: hidden; color: var(--muted-foreground); font-family: ui-monospace, Consolas, monospace; font-size: 0.45rem; text-overflow: ellipsis; white-space: nowrap; }


body[data-skin-page="overview"] .skin-api-card {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  min-width: 0;
  padding: 0.82rem 0.9rem;
  border: 1px solid color-mix(in oklab, var(--primary) 18%, var(--border));
  border-radius: 0.85rem;
  background: color-mix(in oklab, var(--card) 90%, transparent);
  box-shadow: 0 18px 40px -30px rgb(19 66 95 / 58%), inset 0 1px rgb(255 255 255 / 48%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body[data-skin-page="overview"] .skin-api-card-main { top: 18%; left: 3%; width: 78%; transform: rotate(-2deg); }
body[data-skin-page="overview"] .skin-api-card-model { top: 46%; right: 0; width: 58%; transform: rotate(2deg); border-color: color-mix(in oklab, var(--skin-rose) 27%, var(--border)); }
body[data-skin-page="overview"] .skin-api-card-auth { right: 8%; bottom: 3%; width: 52%; transform: rotate(-1deg); }
body[data-skin-page="overview"] .skin-api-label { color: var(--muted-foreground); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.49rem; font-weight: 700; letter-spacing: 0.15em; }
body[data-skin-page="overview"] .skin-api-card code { overflow: hidden; color: var(--foreground); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.61rem; text-overflow: ellipsis; white-space: nowrap; opacity: 1 !important; }
body[data-skin-page="overview"] .skin-api-card strong { overflow: hidden; color: var(--primary); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
body[data-skin-page="overview"] .skin-api-card-main i { display: block; width: 45%; height: 0.28rem; border-radius: 99px; background: color-mix(in oklab, var(--primary) 11%, var(--muted)); }
body[data-skin-page="overview"] .skin-api-card-main i:nth-of-type(2) { width: 67%; opacity: 0.72; }
body[data-skin-page="overview"] .skin-api-card-main i:nth-of-type(3) { width: 32%; opacity: 0.5; }
.skin-api-line { position: absolute; z-index: 1; border-color: color-mix(in oklab, var(--primary) 34%, transparent); opacity: 0.66; pointer-events: none; }
.skin-api-line-a { top: 39%; left: 37%; width: 31%; border-top: 1px dashed; transform: rotate(22deg); }
.skin-api-line-b { right: 25%; bottom: 33%; width: 26%; border-top: 1px dashed; transform: rotate(-35deg); }
.skin-hero-art > .skin-spark { z-index: 3; }

/* Mobile / API-store voice overrides */
@media (max-width: 639.98px) {
  .skin-side-rail { display: none !important; }
  .skin-tabbar { background: color-mix(in oklab, var(--card) 94%, transparent) !important; }
  .skin-tabbar a.skin-tab-chat { margin-top: 0; }
  .skin-tabbar a.skin-tab-chat::before { display: none; }
  .skin-tabbar a.skin-tab-chat svg { width: 1.3rem; height: 1.3rem; color: inherit; transform: none; }
  .skin-tabbar a.skin-tab-chat span { margin-top: 0; color: inherit; }
  @media (min-width: 1024px) {
  .skin-tabbar { display: none !important; }
}

  body[data-skin-page="overview"] .skin-hero-art { width: 11rem; height: 11rem; opacity: 0.72; }
  body[data-skin-page="overview"] .skin-api-card { padding: 0.55rem 0.62rem; border-radius: 0.62rem; gap: 0.25rem; }
  body[data-skin-page="overview"] .skin-api-card code { font-size: 0.48rem; }
  body[data-skin-page="overview"] .skin-api-card strong { font-size: 0.55rem; }
  body[data-skin-page="overview"] .skin-api-label { font-size: 0.41rem; }
  body[data-skin-page="overview"] .skin-api-card-main { width: 90%; }
  body[data-skin-page="overview"] .skin-api-card-model { width: 66%; }
  body[data-skin-page="overview"] .skin-api-card-auth { width: 61%; }
}

/* ============================================================
   API STORE · FINAL SURFACE POLISH
   ============================================================ */
[data-slot="card"]::before { background: linear-gradient(180deg, var(--primary), var(--skin-rose)); opacity: 0.42; }
[class*="from-blue-400"] { background-image: linear-gradient(100deg, var(--primary) 0%, #4c82a5 52%, #244d68 100%) !important; }
.skin-hero-primary { background: linear-gradient(135deg, var(--primary), #174867) !important; }
.skin-intro-mark { background: linear-gradient(145deg, var(--primary), #173f59) !important; }
.skin-quick-grid > .skin-quick-main { background: radial-gradient(80% 160% at 100% 0%, color-mix(in oklab, var(--skin-blush) 90%, transparent), transparent 72%), color-mix(in oklab, var(--card) 92%, var(--skin-blush)) !important; }
body[data-skin-page="overview"] .skin-quick { border-color: color-mix(in oklab, var(--primary) 17%, var(--border)) !important; }
@media (min-width: 1024px) {
  .skin-tabbar { display: none !important; }
}
body[data-skin-page="overview"] .skin-hero { border-color: color-mix(in oklab, var(--primary) 18%, var(--border)) !important; background: radial-gradient(60% 110% at 94% 0%, color-mix(in oklab, var(--skin-blush) 95%, transparent), transparent 64%), radial-gradient(45% 100% at 12% 105%, color-mix(in oklab, var(--skin-rose) 10%, transparent), transparent 70%), linear-gradient(128deg, color-mix(in oklab, var(--card) 98%, var(--skin-blush)), var(--card)) !important; }
body[data-skin-page="overview"] .skin-quick { background: color-mix(in oklab, var(--card) 96%, transparent) !important; }

/* Remove the former companion-chat visual language from the debug page. */
body[data-skin-page="playground"] main[data-slot="sidebar-inset"] { background: transparent !important; }
body[data-skin-page="playground"] .skin-chat-portrait { border-radius: 0.9rem !important; color: var(--primary) !important; background: linear-gradient(145deg, color-mix(in oklab, var(--skin-blush) 60%, white), color-mix(in oklab, var(--primary) 11%, var(--card))) !important; transform: none !important; box-shadow: 0 14px 32px -26px rgb(19 66 95 / 48%) !important; }
body[data-skin-page="playground"] .skin-chat-portrait svg { width: 1.65rem; height: 1.65rem; }
body[data-skin-page="playground"] .skin-chat-online { background: var(--primary) !important; }
body[data-skin-page="playground"] .skin-chat-empty h2 { font-family: var(--font-ui-sans) !important; letter-spacing: -0.015em !important; }
body[data-skin-page="playground"] .skin-chat-starters button { font-family: var(--font-ui-sans) !important; border-color: color-mix(in oklab, var(--primary) 14%, var(--border)) !important; background: color-mix(in oklab, var(--card) 94%, var(--skin-blush)) !important; }
body[data-skin-page="playground"] .skin-chat-starters button svg { color: var(--primary) !important; }
body[data-skin-page="playground"] .skin-chat-portrait { display: none !important; }
/* 手机端：真正的单列布局、滚动和安全区 */
@media (max-width: 639.98px) {
  body[data-skin-page] main[data-slot="sidebar-inset"] {
    height: calc(100svh - var(--app-header-height) - 4.9rem - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
  }
  body[data-skin-page] main[data-slot="sidebar-inset"] > div,
  body[data-skin-page] main[data-slot="sidebar-inset"] > div > main {
    min-height: 0 !important;
    max-width: 100%;
  }
  body[data-skin-page] main[data-slot="sidebar-inset"] main > div:nth-child(2) {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  .skin-tabbar {
    bottom: max(0.38rem, env(safe-area-inset-bottom));
    border-radius: 1.25rem;
    box-shadow: 0 18px 55px -24px rgb(49 27 38 / 68%);
  }

  @media (min-width: 1024px) {
  .skin-tabbar { display: none !important; }
}
body[data-skin-page="overview"] .skin-hero {
    display: block;
    min-height: 20.5rem;
    padding: 1.3rem 1.2rem 1.1rem;
    border-radius: 1.4rem;
  }
  body[data-skin-page="overview"] .skin-hero h1 {
    margin-top: 0.6rem;
    font-size: clamp(2.15rem, 10.8vw, 2.9rem);
  }
  body[data-skin-page="overview"] .skin-hero-copy > p { margin-top: 0.7rem; font-size: 0.8rem; line-height: 1.7; }
  .skin-hero-actions { margin-top: 1rem; }
  .skin-hero-primary, .skin-hero-secondary { min-height: 2.55rem; padding-inline: 0.95rem; font-size: 0.74rem; }
  .skin-hero-status { margin-top: 0.85rem; font-size: 0.61rem; }
  .skin-hero-art {
    position: absolute;
    right: -1.15rem;
    bottom: -2.3rem;
    width: 10.5rem;
    height: 10.5rem;
    min-height: 0;
    opacity: 0.5;
    pointer-events: none;
  }
  .skin-hero-orb { width: 8.2rem; }
  .skin-bubble, .skin-spark { display: none; }
  body[data-skin-page="overview"] .skin-hero + * { margin-top: 0.1rem; }

  .skin-page-intro { padding: 0.82rem 0.86rem; border-radius: 1rem; }
  .skin-page-intro strong { font-size: 0.88rem; }
  .skin-page-intro p { font-size: 0.69rem; }
  .skin-page-subtitle { font-size: 0.68rem; }

  body[data-skin-page="users"] .skin-user-card { padding: 0.82rem 0.76rem 0.58rem !important; }
  body[data-skin-page="users"] .skin-user-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body[data-skin-page="users"] .skin-user-meta > div { padding: 0.36rem 0.44rem; }

  body[data-skin-page="keys"] [data-skin-key-empty] { min-height: 16.5rem; padding: 1.4rem 1rem; }

  body[data-skin-page="profile"] .skin-page-intro-profile { padding: 0.8rem 0.2rem 0.65rem; }
  body[data-skin-page="profile"] .skin-page-intro-profile h1 { font-size: 2.15rem; }
  body[data-skin-page="profile"] .skin-profile-card h1 { max-width: 9.5rem; font-size: 1.3rem !important; }
  body[data-skin-page="profile"] .skin-profile-card [data-slot="card-content"] { padding: 0.75rem !important; }
  body[data-skin-page="profile"] .skin-profile-card .grid-cols-3 .font-mono { font-size: 0.82rem !important; }
  body[data-skin-page="profile"] .skin-profile-card .grid-cols-3 .text-xs { font-size: 0.6rem !important; }

  body[data-skin-page="playground"] .skin-chat-empty { gap: 0.8rem !important; padding-bottom: 0.9rem; }
  .skin-chat-portrait { width: 4.25rem; height: 4.25rem; }
  body[data-skin-page="playground"] .skin-chat-empty h2 { font-size: 1.55rem !important; }
  .skin-chat-starters { gap: 0.48rem; }
  .skin-chat-starters button { min-height: 3rem; padding: 0.62rem 0.7rem; font-size: 0.72rem; }
  body[data-skin-page="playground"] textarea[name="message"] { min-height: 4.3rem !important; }
  body[data-skin-page="playground"] main > div > div[class*="mx-auto"] { padding-bottom: 0.2rem; }

  body[data-skin-page="overview"] main ol { grid-template-columns: 1fr !important; }
  body[data-skin-page="overview"] main ol a { flex-direction: row !important; justify-content: flex-start !important; text-align: left !important; }
  body[data-skin-page="overview"] main ol a > span { align-items: flex-start !important; }
}

@media (min-width: 640px) {
  @media (min-width: 1024px) {
  .skin-tabbar { display: none !important; }
}
body[data-skin-page="overview"] .skin-hero { margin-bottom: 0.1rem; }
}

body[data-skin-page="overview"] .skin-setup-guide { display: none !important; }

/* 首页快捷区：给“回来继续”一个明确的位置 */
body[data-skin-page="overview"] .skin-quick {
  padding: 1rem;
  border: 1px solid color-mix(in oklab, var(--skin-rose) 17%, var(--border));
  border-radius: 1.3rem;
  background: color-mix(in oklab, var(--card) 94%, transparent);
  box-shadow: 0 16px 45px -43px rgb(80 42 59 / 70%);
}
.skin-quick-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}
.skin-quick-head > div { min-width: 0; }
.skin-quick-head span {
  display: block;
  color: var(--muted-foreground);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.skin-quick-head strong {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--skin-serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}
.skin-quick-head > a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.25rem;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  text-decoration: none !important;
}
.skin-quick-head > a svg { width: 0.8rem; height: 0.8rem; }
.skin-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.skin-quick-grid > a {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  min-width: 0;
  min-height: 4rem;
  padding: 0.68rem;
  border: 1px solid color-mix(in oklab, var(--skin-rose) 14%, var(--border));
  border-radius: 0.95rem;
  color: var(--foreground) !important;
  background: color-mix(in oklab, var(--muted) 40%, transparent);
  text-decoration: none !important;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.skin-quick-grid > a:active { transform: scale(0.98); }
.skin-quick-grid > .skin-quick-main {
  grid-column: 1 / -1;
  min-height: 4.3rem;
  border-color: color-mix(in oklab, var(--skin-rose) 26%, var(--border));
  background:
    radial-gradient(80% 160% at 100% 0%, color-mix(in oklab, var(--skin-blush) 78%, transparent), transparent 72%),
    color-mix(in oklab, var(--card) 82%, var(--skin-blush));
}
.skin-quick-icon {
  display: grid;
  place-items: center;
  flex: 0 0 2.15rem;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.75rem;
  color: var(--primary);
  background: color-mix(in oklab, var(--card) 74%, transparent);
}
.skin-quick-icon svg { width: 1.1rem; height: 1.1rem; }
.skin-quick-grid a > span:nth-child(2) { min-width: 0; flex: 1; }
.skin-quick-grid a strong { display: block; font-size: 0.78rem; font-weight: 650; line-height: 1.4; }
.skin-quick-grid a small { display: block; overflow: hidden; margin-top: 0.12rem; color: var(--muted-foreground); font-size: 0.63rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.skin-quick-arrow { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; color: var(--skin-rose); }

/* 用户页最终覆盖：兼容变量写在 class 里的卡片 */
body[data-skin-page="users"] main .divide-y:has(.skin-user-card) {
  display: flex !important;
  flex-direction: column;
  gap: 0.65rem;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}
body[data-skin-page="users"] .skin-user-card {
  display: block !important;
  padding: 0.9rem 0.85rem 0.65rem !important;
  border: 1px solid color-mix(in oklab, var(--skin-rose) 16%, var(--border)) !important;
  border-radius: 1.15rem !important;
  background:
    radial-gradient(90% 160% at 100% 0%, color-mix(in oklab, var(--skin-blush) 58%, transparent), transparent 68%),
    color-mix(in oklab, var(--card) 96%, transparent) !important;
  box-shadow: 0 15px 42px -40px rgb(80 42 59 / 72%);
}
body[data-skin-page="users"] .skin-user-card > div { display: flex; align-items: flex-start; gap: 0.72rem; }
body[data-skin-page="users"] .skin-user-card > div > .min-w-0.flex-1 { order: 2; flex: 1; min-width: 0; }
body[data-skin-page="users"] .skin-user-card > div > .flex-none:last-child { order: 3; }

/* 对话页空状态：只留一个主形象，标题和说明成组居中 */
body[data-skin-page="playground"] .skin-chat-original-icon { display: none !important; }
body[data-skin-page="playground"] .skin-chat-empty {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch;
  text-align: center;
}
body[data-skin-page="playground"] .skin-chat-empty > .skin-chat-portrait,
body[data-skin-page="playground"] .skin-chat-empty > .grid.gap-2,
body[data-skin-page="playground"] .skin-chat-empty > .skin-chat-starters { grid-column: 1 / -1 !important; }
body[data-skin-page="playground"] .skin-chat-empty > .grid.gap-2:not(.skin-source-prompts) { justify-self: center; width: 100%; }
body[data-skin-page="playground"] .skin-chat-empty > .skin-chat-portrait { justify-self: center; }
body[data-skin-page="playground"] .skin-chat-empty > .grid.gap-2:not(.skin-source-prompts) { grid-template-columns: minmax(0, 1fr) !important; }

/* 个人页：收掉顶栏头像造成的横向溢出 */
body[data-skin-page="profile"] header [data-slot="avatar"] { flex-shrink: 0; }
@media (max-width: 639.98px) {
  body[data-skin-page="profile"] header { overflow: hidden; }
  body[data-skin-page="profile"] header > div { min-width: 0; }
  body[data-skin-page="profile"] header [class*="ms-auto"] { min-width: 0; }
  body[data-skin-page="profile"] header [data-slot="avatar"] { width: 1.9rem !important; height: 1.9rem !important; }
  body[data-skin-page="profile"] header button[data-slot="dropdown-menu-trigger"] { flex-shrink: 0; }
}






/* 手机抽屉：固定视口，Sheet 自身是唯一滚动容器，避免无限下滑与背景穿透。 */
@media (max-width: 1023.98px) {
  html,
  body {
    overscroll-behavior-y: none;
    touch-action: pan-x pan-y;
  }
  [data-slot="sheet-content"][data-side="left"] {
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    overflow: hidden !important;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
  }
  [data-slot="sheet-content"][data-side="left"] > div {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0;
    max-width: 100%;
    flex-direction: column;
    overflow: hidden;
  }
  [data-slot="sheet-content"][data-side="left"] [data-slot="sidebar-content"] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  [data-slot="sheet-content"][data-side="left"] [data-slot="sidebar-footer"] {
    flex: 0 0 auto;
  }
  [data-slot="sheet-content"][data-side="left"] [data-slot="sidebar"],
  [data-slot="sheet-content"][data-side="left"] [data-slot="sidebar-inner"],
  [data-slot="sheet-content"][data-side="left"] [data-slot="sidebar-content"] {
    max-width: 100%;
  }
  [data-slot="sheet-content"][data-side="left"] [data-slot="sidebar-inner"] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

}

/* ============================================================
   2026-10-29 · 控制台收口
   品牌只出现一次；概览以账户数据为主。
   ============================================================ */
body[data-skin-page="store"] .skin-shell,
body[data-skin-page="store"] .skin-shell-content {
  max-width: 100%;
}
.skin-overview-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  min-width: 0;
}
.skin-stat-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 7.4rem;
  padding: 1rem;
  border: 1px solid color-mix(in oklab, var(--border) 86%, transparent);
  border-radius: 1.1rem;
  background: color-mix(in oklab, var(--card) 88%, transparent);
  box-shadow: inset 0 1px rgb(255 255 255 / 52%);
}
.skin-stat-card > span {
  color: var(--muted-foreground);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.skin-stat-card > strong {
  overflow: hidden;
  margin-top: 0.55rem;
  color: var(--foreground);
  font-family: var(--font-ui-sans);
  font-size: clamp(1.14rem, 2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skin-stat-card > small {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.61rem;
}
.skin-stat-balance {
  border-color: color-mix(in oklab, var(--primary) 23%, var(--border));
  background:
    radial-gradient(120% 150% at 100% 0%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 74%),
    color-mix(in oklab, var(--card) 92%, transparent);
}
.skin-stat-balance > strong { color: color-mix(in oklab, var(--primary) 88%, var(--foreground)); }
body[data-skin-page="overview"] .skin-hero {
  grid-template-columns: minmax(12rem, 0.74fr) minmax(22rem, 1.26fr);
  min-height: auto;
  padding: clamp(1.15rem, 3vw, 1.8rem);
}
body[data-skin-page="overview"] .skin-hero h1 {
  font-family: var(--font-ui-sans);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}
body[data-skin-page="overview"] .skin-hero-copy > p { margin-top: 0.55rem; font-size: 0.76rem; line-height: 1.65; }
body[data-skin-page="overview"] .skin-hero-actions { margin-top: 1rem; }
body[data-skin-page="overview"] .skin-hero-art { display: none !important; }
@media (max-width: 1023.98px) {
  body[data-skin-page="overview"] .skin-hero { grid-template-columns: minmax(0, 1fr); }
  .skin-overview-stats { margin-top: 0.8rem; }
}
@media (max-width: 639.98px) {
  body[data-skin-page="overview"] .skin-hero {
    padding: 1rem;
    border-radius: 1.15rem;
  }
  body[data-skin-page="overview"] .skin-hero h1 { font-size: 1.45rem; }
  body[data-skin-page="overview"] .skin-hero-actions { margin-top: 0.8rem; }
  .skin-overview-stats { gap: 0.55rem; }
  .skin-stat-card { min-height: 6.45rem; padding: 0.78rem; border-radius: 0.9rem; }
  .skin-stat-card > strong { margin-top: 0.38rem; font-size: 1.05rem; }
  .skin-stat-card > small { padding-top: 0.32rem; font-size: 0.56rem; }
}

body[data-skin-page="overview"] .skin-hero {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
body[data-skin-page="overview"] .skin-hero-copy {
  max-width: none;
  margin-bottom: 1rem;
}
body[data-skin-page="overview"] .skin-overview-stats {
  width: 100%;
  max-width: 100%;
}
body[data-skin-page="overview"] .skin-quick {
  max-width: 100% !important;
}
@media (max-width: 639.98px) {
  body[data-skin-page="overview"] .skin-hero-copy { margin-bottom: 0.8rem; }
  body[data-skin-page="overview"] .skin-hero-copy > p { display: none; }
  body[data-skin-page="overview"] .skin-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  body[data-skin-page="overview"] .skin-hero-primary,
  body[data-skin-page="overview"] .skin-hero-secondary {
    min-height: 2.5rem;
    padding: 0 0.65rem;
    font-size: 0.72rem;
  }
}

/* 首页只保留品牌入口和首屏接入说明，避免加载后的长页面继续占用空间。 */
body[data-skin-home="true"] .skin-home-page > .skin-home-extra,
body[data-skin-home="true"] .skin-home-hero > div.grid > .skin-home-extra {
  display: none !important;
}
body[data-skin-home="true"] .skin-home-hero > div.grid {
  display: block !important;
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
body[data-skin-home="true"] .skin-home-hero > div.grid > div:first-child {
  align-items: center;
  text-align: center;
}
body[data-skin-home="true"] .skin-home-hero > div.grid > div:first-child > .mt-8.flex {
  justify-content: center;
}
body[data-skin-home="true"] .skin-home-hero {
  display: flex !important;
  align-items: center;
  box-sizing: border-box;
  min-height: 100vh !important;
  min-height: 100svh !important;
  padding-bottom: clamp(2rem, 7vw, 4rem) !important;
}


/* 桌面端沿用原生上下文：顶栏在上，侧栏与内容在同一行。 */
@media (min-width: 768px) {
  .skin-shell > div.flex.min-h-0.w-full.flex-1 {
    min-width: 0 !important;
  }
  .skin-shell > div.flex.min-h-0.w-full.flex-1 > [data-slot="sidebar"] {
    flex: 0 0 var(--sidebar-width, 13rem) !important;
    width: var(--sidebar-width, 13rem) !important;
  }
  .skin-shell main[data-slot="sidebar-inset"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
}

/* ============================================================
   2026-10-29 · 侧栏可读性
   分组标题不再发灰；品牌只保留顶栏主节点。
   ============================================================ */
[data-slot="sidebar-group-label"] {
  color: color-mix(in oklab, var(--sidebar-foreground) 82%, var(--muted-foreground)) !important;
  opacity: 1 !important;
  font-family: var(--font-ui-sans) !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}
.skin-native-sidebar [data-slot="sidebar-group-label"] {
  color: color-mix(in oklab, var(--sidebar-foreground) 88%, var(--muted-foreground)) !important;
}
.skin-native-sidebar [data-slot="sidebar-menu-button"] {
  color: color-mix(in oklab, var(--sidebar-foreground) 88%, transparent);
}
.skin-native-sidebar [data-slot="sidebar-menu-button"] > span {
  opacity: 1;
}
.skin-system-brand + .skin-system-brand,
.skin-system-brand ~ .skin-system-brand {
  display: none !important;
}
/* 概览操作区：只调整账户面板，按钮保持原尺寸。 */
body[data-skin-page="overview"] .skin-account-head > .skin-hero-actions {
  min-height: 70px;
  align-items: center;
}

/* 时间刻度跟随原生近 24 小时折线。 */
.skin-usage-time-axis {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  margin-top: 0.35rem;
  color: var(--muted-foreground);
  font-size: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.skin-usage-time-axis > span { white-space: nowrap; }
body[data-skin-page="overview"] .skin-status-wide { grid-template-columns: minmax(0, 1fr) !important; }
body[data-skin-page="overview"] .skin-uptime-empty { display: none; }

/* 手机端用量趋势：沿用原生 sm 分界，单列保留完整标题、折线和日期刻度。 */
@media (max-width: 639px) {
  body[data-skin-page="overview"] .skin-usage-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
  body[data-skin-page="overview"] .skin-usage-card { padding: 0.75rem; }
  body[data-skin-page="overview"] .skin-usage-card > .group { gap: 0.5rem; }
  body[data-skin-page="overview"] .skin-usage-card .line-clamp-1 {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  body[data-skin-page="overview"] .skin-usage-chart { display: block; }
  body[data-skin-page="overview"] .skin-usage-chart > [aria-hidden="true"] { height: 3rem; }
}

/* Pricing groups use the original filter and price calculation. */
aside > div > .skin-pricing-native-group { display: none; }
.skin-pricing-groups {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
  color: var(--foreground);
}
.skin-pricing-groups h2 { margin: 0; font-size: 1rem; font-weight: 650; }
.skin-pricing-group-note { margin: 0.4rem 0 0.85rem; font-size: 0.8rem; line-height: 1.6; color: var(--muted-foreground); overflow-wrap: anywhere; }
.skin-pricing-group-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.skin-pricing-group-options button {
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--background);
  color: var(--foreground);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.skin-pricing-group-options button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.skin-pricing-group-options button:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.skin-pricing-group-options button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Restore monochrome vendor marks without recolouring multicolour SVGs or controls. */
.skin-model-card svg[data-skin-provider="Claude"] { color: #D97757; }
.skin-model-card svg[data-skin-provider="DeepSeek"] { color: #4D6BFE; }
.skin-model-card svg[data-skin-provider="Qwen"] { color: #615ced; }
/* Mobile catalogue: inline group choices and 110px cards; desktop stays native. */
.skin-pricing-group-toggle, .skin-pricing-filter { display: none; }
@media (max-width: 639.98px) {
  .skin-pricing-heading { padding-top: 0.5rem; margin-bottom: 0.75rem; }
  .skin-pricing-heading h1 { font-size: 1.5rem; }
  .skin-pricing-heading > p { margin-top: 0.4rem; }
  .skin-pricing-heading > p + p { font-size: 0.7rem; line-height: 1.4; }
  .skin-pricing-heading > div { margin-top: 0.65rem; }
  .skin-pricing-groups { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.5rem; }
  .skin-pricing-groups h2, .skin-pricing-group-options, .skin-pricing-toolbar { display: none; }
  .skin-pricing-groups.is-expanded .skin-pricing-group-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; }
  .skin-pricing-group-options button { padding: 0.5rem; font-size: 0.75rem; }
  .skin-pricing-group-note { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skin-pricing-group-toggle, .skin-pricing-filter { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; min-width: 0; min-height: 44px; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--background); color: var(--foreground); font-family: var(--font-ui-sans); font-size: 0.8rem; cursor: pointer; }
  .skin-pricing-group-toggle > span:first-child { text-align: left; overflow-wrap: anywhere; }
  .skin-pricing-filter { font-weight: 600; }
  .skin-pricing-group-toggle:focus-visible, .skin-pricing-filter:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  .skin-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; align-items: stretch; }
  .skin-model-card { position: relative; display: grid; grid-template-rows: 56px auto minmax(0, 1fr); width: 100%; min-width: 0; height: auto; min-height: 218px; padding: 8px; gap: 6px; border-radius: 0.65rem; }
  .skin-model-card [data-slot="card-header"] { display: grid; grid-template-columns: minmax(0, 1fr) 24px; grid-template-rows: 24px 32px; gap: 0; align-items: center; padding: 0; }
  .skin-model-card [data-slot="card-header"] > [aria-hidden="true"] { width: 20px; height: 20px; }
  .skin-model-card [data-slot="card-header"] > [aria-hidden="true"] svg { width: 18px; height: 18px; }
  .skin-model-card [data-slot="card-header"] > div.min-w-0 { grid-column: 1 / -1; grid-row: 2; }
  .skin-model-card [data-slot="card-header"] > button { position: relative; z-index: 1; grid-column: 2; grid-row: 1; width: 24px; height: 24px; padding: 0; }
  .skin-model-card h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 0; max-height: 32px; margin: 0; overflow: hidden; font-family: var(--font-ui-sans); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
  .skin-model-card [data-slot="card-content"] { min-height: 0; padding: 0; gap: 0; }
  .skin-model-card [data-slot="card-content"] > div:first-child:not([aria-label="定价"]),
  .skin-model-card [data-slot="card-content"] > dl,
  .skin-model-card [aria-label="定价"] > [data-slot="status-badge"],
  .skin-model-card [aria-label="定价"] > .grid > div:only-child > span:first-child:not(.font-mono) { display: none; }
  .skin-model-card [aria-label="定价"] { margin-top: 0; gap: 0; }
  .skin-model-card [aria-label="定价"] > .grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .skin-model-card [aria-label="定价"] > .grid > div { flex-direction: row; align-items: baseline; gap: 2px; }
  .skin-model-card [aria-label="定价"] > .grid > div > .text-muted-foreground { font-size: 9px; line-height: 11px; }
  .skin-model-card [aria-label="定价"] .font-mono { flex-wrap: nowrap; font-size: 10px; line-height: 11px; gap: 1px; }
  .skin-model-card [aria-label="定价"] .font-mono > .text-muted-foreground { font-size: 9px; line-height: 11px; }
  .skin-model-card [data-slot="card-footer"] { min-width: 0; margin: 0; padding: 0; }
  .skin-model-card [data-slot="card-footer"] > div { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 6px; padding-top: 0; border-top: 0; }
  .skin-model-card [data-slot="card-footer"] dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .skin-model-card [data-slot="card-footer"] dl > div { min-width: 0; }
  .skin-model-card [data-slot="card-footer"] dl > div:first-child { grid-column: 1 / -1; width: 100%; }
  .skin-model-card [data-slot="card-footer"] dt { font-size: 10px; line-height: 14px; }
  .skin-model-card [data-slot="card-footer"] dd { margin: 0; font-size: 11px; line-height: 16px; }
  .skin-model-card [data-slot="card-footer"] button { position: static; width: 100%; min-width: 0; height: 24px; min-height: 24px; padding: 0; font-size: 10px; justify-content: space-between; }

}

/* Match the native md sidebar breakpoint; mobile still needs its drawer button. */
@media (min-width: 768px) {
  .skin-shell > header [data-slot="sidebar-trigger"],
  .skin-shell [data-slot="sidebar-rail"] { display: none !important; }
}

/* LinkAI wordmark follows the existing site font at every viewport size. */
header .skin-system-brand span { font-family: var(--font-ui-sans); font-weight: 700; letter-spacing: -0.025em; }
header .skin-system-brand img { border-radius: 0.5rem; box-shadow: none; }

/* The local app has no bundled docs page; hide links to the external docs site. */
body[data-skin-home="true"] a[href*="docs.newapi.pro"],
body[data-skin-page="store"] a[href*="docs.newapi.pro"] { display: none !important; }

/* The homepage only needs the product pitch and its primary actions. */
body[data-skin-home="true"] .landing-animate-fade-up.mt-10 { display: none !important; }

/* Public pricing has no dashboard inset to reserve space for the mobile navigation. */
@media (max-width: 639.98px) {
  body[data-skin-page="store"]:has(> .skin-tabbar) > #root {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Modal forms own mobile navigation until they close. */
@media (max-width: 639.98px) {
  body:has([data-slot="sheet-content"][data-open]) > .skin-tabbar,
  body:has([data-slot="dialog-content"][data-open]) > .skin-tabbar {
    visibility: hidden;
    pointer-events: none;
  }
}

/* Per-model admin connectivity checks; native dialog stays above mobile navigation. */
.skin-model-test-entry { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.skin-model-test-button { border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; background: var(--background); color: var(--foreground); font-size: 12px; line-height: 18px; cursor: pointer; }
.skin-model-test-button:hover { background: var(--muted); }
.skin-model-test-result { font-size: 12px; }
.skin-model-test-result[data-state="success"], .skin-model-test-feedback[data-state="success"] { color: #15803d; }
.skin-model-test-result[data-state="error"], .skin-model-test-feedback[data-state="error"] { color: #dc2626; }
.dark .skin-model-test-result[data-state="success"], .dark .skin-model-test-feedback[data-state="success"] { color: #4ade80; }
.dark .skin-model-test-result[data-state="error"], .dark .skin-model-test-feedback[data-state="error"] { color: #f87171; }
.skin-model-test-dialog { box-sizing: border-box; width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 20px; overflow-y: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--background); color: var(--foreground); box-shadow: 0 20px 60px #0003; }
.skin-model-test-dialog::backdrop { background: #0007; }
.skin-model-test-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.skin-model-test-heading h2 { margin: 0; font-size: 18px; font-weight: 650; }
.skin-model-test-heading button { padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; }
.skin-model-test-name { margin: 8px 0; font-family: monospace; overflow-wrap: anywhere; }
.skin-model-test-warning { margin: 12px 0; font-size: 13px; line-height: 1.6; color: var(--muted-foreground); }
.skin-model-test-label { display: grid; gap: 7px; font-size: 13px; }
.skin-model-test-channel { width: 100%; min-width: 0; min-height: 42px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); color: var(--foreground); font-size: 14px; }
.skin-model-test-feedback { min-height: 42px; margin: 14px 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; white-space: normal; }
.skin-model-test-run { width: 100%; min-height: 42px; border-radius: 8px; padding: 9px 12px; background: var(--primary); color: var(--primary-foreground); cursor: pointer; font-size: 14px; font-weight: 600; }
.skin-model-test-dialog button:disabled { opacity: .55; cursor: wait; }
.skin-model-test-button:focus-visible, .skin-model-test-dialog button:focus-visible, .skin-model-test-channel:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (max-width: 639px) { .skin-model-test-button { min-height: 36px; } .skin-model-test-dialog { padding: 16px; } }
/* 手机端密钥卡片只跟随页面纵向展开，避免卡片内部再出现一层滚动。 */
@media (max-width: 639.98px) {
  body[data-skin-page="keys"] main .min-w-0.space-y-3 {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body[data-skin-page="keys"] main .bg-card.min-w-0 {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body[data-skin-page="keys"] main .bg-card.min-w-0 > * {
    max-height: none !important;
  }
  body[data-skin-page="keys"] main .bg-card.min-w-0 :where([class*="overflow-auto"], [class*="overflow-y-auto"], [class*="max-h-"]) {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* 密钥页手机端只保留页面级滚动，避免后台壳层和卡片各自裁剪内容。 */
@media (max-width: 639.98px) {
  body[data-skin-page="keys"] [data-skin-hidden-api-filter-wrap="true"],
  body[data-skin-page="keys"] [data-skin-hidden-api-filter="true"] {
    display: none !important;
  }

  body[data-skin-page="keys"] #root,
  body[data-skin-page="keys"] .skin-shell,
  body[data-skin-page="keys"] .skin-shell-content,
  body[data-skin-page="keys"] main[data-slot="sidebar-inset"],
  body[data-skin-page="keys"] main[data-slot="sidebar-inset"] > div,
  body[data-skin-page="keys"] main[data-slot="sidebar-inset"] > div > main,
  body[data-skin-page="keys"] main[data-slot="sidebar-inset"] main > div:nth-child(2) {
    height: auto !important;
    min-height: max-content !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-skin-page="keys"] main[data-slot="sidebar-inset"] main > div:nth-child(2) {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important;
  }

  body[data-skin-page="keys"] [data-skin-key-pagination],
  body[data-skin-page="keys"] [data-slot="pagination"],
  body[data-skin-page="keys"] nav[aria-label*="pagination" i] {
    margin-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}