/* hidden-override */
[hidden] { display: none !important; }

/* 新手上手：演示站说明条、三步清单、克制的空状态 —— 只引用 --tk-* */

/* ---- 演示站说明条：正式站不渲染；可折叠但不能关掉 ---- */
.tk-demo-bar { position: sticky; top: 0; z-index: calc(var(--tk-z-sticky) + 10); display: flex; align-items: flex-start; gap: var(--tk-space-3); padding: 10px var(--tk-space-6); background: var(--tk-bg-warning-subtle); color: var(--tk-text-primary); border-bottom: 1px solid var(--tk-border-warning, color-mix(in srgb, var(--tk-text-warning) 28%, var(--tk-border-default))); font-size: var(--tk-font-size-sm); line-height: 1.55; }
.tk-demo-bar .tk-icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--tk-text-warning); }
.tk-demo-bar__body { flex: 1; min-width: 0; }
.tk-demo-bar__body b { font-weight: 600; }
.tk-demo-bar__toggle { flex: none; height: 32px; margin-top: -2px; }
.tk-demo-bar.is-min { align-items: center; padding: 6px var(--tk-space-6); font-size: var(--tk-font-size-xs); color: var(--tk-text-secondary); }
.tk-demo-bar.is-min .tk-icon { margin-top: 0; }
.tk-demo-bar.is-min .tk-demo-bar__more { display: none; }
body.c-body:has(.tk-demo-bar) .c-top { top: 0; }
@media (max-width: 1023px) { .tk-demo-bar, .tk-demo-bar.is-min { padding-left: var(--tk-space-4); padding-right: var(--tk-space-4); } }

/* ---- 三步上手清单 ---- */
.ob { border: 1px solid var(--tk-border-default); border-radius: var(--tk-radius-xl); background: var(--tk-bg-surface); overflow: hidden; }
.ob.is-accent { border-color: var(--tk-bg-brand); box-shadow: 0 0 0 1px var(--tk-bg-brand); }
.ob__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tk-space-4); padding: var(--tk-space-5) var(--tk-space-6) var(--tk-space-4); }
.ob__title { font-size: var(--tk-font-size-lg); font-weight: var(--tk-font-weight-semibold); display: flex; align-items: center; gap: var(--tk-space-2); }
.ob__sub { color: var(--tk-text-secondary); font-size: var(--tk-font-size-sm); margin-top: 4px; }
.ob__progress { display: inline-flex; align-items: center; gap: var(--tk-space-2); font-size: var(--tk-font-size-sm); color: var(--tk-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ob__dots { display: inline-flex; gap: 6px; }
.ob__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--tk-bg-muted); }
.ob__dots i.is-done { background: var(--tk-text-success); }
.ob__dots i.is-now { background: var(--tk-bg-brand); }
.ob__steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ob-step { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--tk-space-4); align-items: start; padding: var(--tk-space-5) var(--tk-space-6); border-top: 1px solid var(--tk-border-default); }
.ob-step__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: var(--tk-font-size-xs); font-weight: 600; background: var(--tk-bg-subtle); color: var(--tk-text-secondary); }
.ob-step.is-done .ob-step__n { background: var(--tk-bg-success-subtle); color: var(--tk-text-success); }
.ob-step.is-now .ob-step__n { background: var(--tk-bg-brand); color: var(--tk-text-on-brand); box-shadow: 0 0 0 3px var(--tk-bg-brand-subtle); }
.ob-step__n .tk-icon { width: 16px; height: 16px; }
.ob-step__t { font-weight: 600; font-size: var(--tk-font-size-md); }
.ob-step.is-done .ob-step__t { color: var(--tk-text-secondary); font-weight: 500; }
.ob-step__d { color: var(--tk-text-secondary); font-size: var(--tk-font-size-sm); margin-top: 4px; max-width: 48em; }
.ob-step__act { display: flex; flex-direction: column; align-items: flex-end; gap: var(--tk-space-2); padding-top: 2px; }
.ob-step.is-now { background: var(--tk-bg-brand-subtle); }
.ob-step__body { grid-column: 2 / -1; margin-top: var(--tk-space-4); }
.ob-code { display: flex; flex-direction: column; gap: var(--tk-space-3); padding: var(--tk-space-4); background: var(--tk-bg-surface); border: 1px solid var(--tk-border-default); border-radius: var(--tk-radius-lg); }
.ob-code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--tk-space-3); flex-wrap: wrap; }
.ob-code .tk-code { font-size: 13px; line-height: 1.7; overflow-x: auto; max-height: 280px; }
.ob-code .tk-code [hidden] { display: none !important; }
.ob-step__ok { display: inline-flex; align-items: center; gap: 6px; color: var(--tk-text-success); font-size: var(--tk-font-size-sm); font-weight: 500; }
.ob.is-done-all { border-color: var(--tk-border-default); box-shadow: none; }
.ob.is-min { display: flex; align-items: center; gap: var(--tk-space-3); padding: var(--tk-space-3) var(--tk-space-5); }
.ob.is-min .ob__steps, .ob.is-min .ob__sub { display: none; }
.ob.is-min .ob__head { padding: 0; flex: 1; align-items: center; }
.ob.is-min .ob__title { font-size: var(--tk-font-size-sm); font-weight: 500; color: var(--tk-text-secondary); }

/* ---- 空状态：一句话 + 一个主按钮，不用插画 ---- */
.tk-state--page { padding: var(--tk-space-12, 64px) var(--tk-space-8); min-height: 360px; justify-content: center; }
.tk-state--page .tk-state__icon { width: 48px; height: 48px; }
.tk-state--page .tk-state__title { font-size: var(--tk-font-size-lg); }
.tk-state--page .tk-state__desc { max-width: 28em; }

/* 新用户首页：用量区改成一句提示，不做假数据图 */
.ob-quiet { padding: var(--tk-space-8); text-align: center; color: var(--tk-text-secondary); font-size: var(--tk-font-size-sm); }
.ob-welcome { padding: 0 0 var(--tk-space-2); }

@media (max-width: 1023px) {
  .ob-step { grid-template-columns: 28px minmax(0, 1fr); }
  .ob-step__act { grid-column: 2; align-items: stretch; width: 100%; }
  .ob-step__act .tk-btn { width: 100%; }
  .ob-step__body { grid-column: 1 / -1; }
  .ob__head { padding: var(--tk-space-4); flex-wrap: wrap; }
  .ob-step { padding: var(--tk-space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .ob, .tk-demo-bar { transition: none; }
}

/* Application shell integration; source design remains read-only. */
#view > .ob { padding: 0; margin: var(--tk-space-5) 0; }
.ob-home-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--tk-space-5); }
.ob-home-grid > section { padding: var(--tk-space-6); }
.ob-balance { position: relative; }
.ob-balance > .tk-btn { float: right; }
.ob-mobile { display: none !important; }
.ob-code { margin-top: var(--tk-space-4); }
.tk-code { white-space: pre; background: var(--tk-bg-code); color: var(--tk-color-neutral-100); padding: var(--tk-space-4); border-radius: var(--tk-radius-md); }
.tk-segmented button[aria-selected='true'] { background: var(--tk-bg-surface); color: var(--tk-text-primary); box-shadow: var(--tk-shadow-sm); }
.empty-next.tk-state--page { border: 0; background: transparent; margin: 0; }
body:has(.tk-demo-bar) > aside { padding-top: 100px; }
@media (max-width: 1023px) {
  .ob-home-grid { grid-template-columns: 1fr; }
  .ob-desktop { display: none !important; }
  .ob-mobile { display: block !important; }
  .ob-step__act .ob-mobile { display: inline-flex !important; }
}
@media (min-width: 1280px) {
  body > .c-side { width: var(--tk-size-sidebar); }
  .c-main.shell { margin-left: var(--tk-size-sidebar); }
}
@media (max-width: 1023px) {
  body > .c-side { width: var(--tk-size-sidebar); }
}
@media (max-width: 700px) {
  .c-top { gap: var(--tk-space-3); }
  #breadcrumb { display: none; }
  #identity { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c-top .c-menu, #logout { flex: none; white-space: nowrap; }
}
#view > .ob.is-min { padding: var(--tk-space-3) var(--tk-space-5); }