/* 智采·创作系统 portable component primitives.
 * Import tokens.css before this file. Components intentionally stay native
 * CSS so they can be used in static HTML, Vue, React or any other stack.
 */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--zc-ink); background: var(--zc-canvas); font-family: var(--zc-font-sans); font-size: var(--zc-text-md); line-height: 1.45; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.zc-shell { min-height: 100vh; display: grid; grid-template-columns: var(--zc-sidebar-width) minmax(0, 1fr); }
.zc-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 21px 15px 17px; border-right: 1px solid var(--zc-line); background: var(--zc-surface); }
.zc-main { min-width: 0; }
.zc-topbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--zc-space-4); padding: 0 28px; border-bottom: 1px solid var(--zc-line); background: rgba(255,255,255,.93); }
.zc-page { min-width: 0; padding: 22px 26px 46px; }
.zc-panel { min-width: 0; padding: 15px; border: 1px solid var(--zc-line); border-radius: var(--zc-radius-card); background: var(--zc-surface); box-shadow: var(--zc-shadow-card); }
.zc-panel__head { min-height: 20px; display: flex; align-items: center; justify-content: space-between; gap: var(--zc-space-3); margin-bottom: 11px; }
.zc-panel__title { margin: 0; color: #22364d; font-size: var(--zc-text-lg); line-height: 1.3; }

.zc-grid { display: grid; min-width: 0; gap: 14px; }
.zc-grid > * { min-width: 0; }
.zc-grid--metrics { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.zc-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zc-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zc-metric { min-width: 0; min-height: 88px; display: flex; align-items: center; gap: 7px; padding: 12px 8px; border-right: 1px solid var(--zc-line); background: var(--zc-surface); }
.zc-metric__copy { min-width: 0; }
.zc-metric__copy > * { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.zc-metric__label { color: var(--zc-muted); font-size: var(--zc-text-sm); }
.zc-metric__value { margin: 1px 0 2px; color: var(--zc-ink); font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.04em; }
.zc-metric__delta { color: var(--zc-teal); font-size: var(--zc-text-sm); font-weight: 700; }

.zc-status { display: inline-flex; align-items: center; gap: 5px; color: var(--zc-teal); font-size: var(--zc-text-xs); white-space: nowrap; }
.zc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(18,184,165,.12); }
.zc-status--warning { color: var(--zc-orange); }
.zc-status--danger { color: var(--zc-danger); }
.zc-status--offline { color: var(--zc-muted-2); opacity: .65; }
.zc-btn { min-height: 30px; padding: 0 12px; border: 1px solid var(--zc-line-strong); border-radius: var(--zc-radius-control); color: #55728f; background: var(--zc-surface); font-size: var(--zc-text-sm); font-weight: 700; }
.zc-btn--primary { border-color: var(--zc-blue); color: #fff; background: var(--zc-blue); box-shadow: 0 6px 14px rgba(22,119,255,.16); }
.zc-btn:hover { transform: translateY(-1px); box-shadow: var(--zc-shadow-float); }
.zc-btn:active { transform: translateY(1px); }

@media (max-width: 1450px) {
  .zc-topbar { padding-inline: 20px; }
  .zc-page { padding-inline: 20px; }
  .zc-grid--metrics { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .zc-panel { overflow: hidden; }
}