:root {
  --gz-primary: #00b42a;
  --gz-primary-hover: #009a24;
  --gz-primary-active: #00891f;
  --gz-primary-light: #e8ffea;
  --gz-primary-dark: #006c22;

  --gz-bg: #f2f3f5;
  --gz-surface: #ffffff;
  --gz-text: #1c1f23;
  --gz-text-secondary: #4e5969;
  --gz-text-tertiary: #86909c;
  --gz-border: #e5e6eb;
  --gz-border-strong: #c9cdd4;

  --gz-success: #00b42a;
  --gz-warning: #f7ba1e;
  --gz-warning-light: #fffae5;
  --gz-danger: #f53f3f;
  --gz-danger-light: #ffece8;
  --gz-info: #3370ff;
  --gz-info-light: #eff4ff;
  --gz-neutral: #86909c;

  --gz-radius-sm: 4px;
  --gz-radius-md: 8px;
  --gz-radius-lg: 12px;
  --gz-shadow-sm: 0 1px 4px rgba(28, 31, 35, 0.08);
  --gz-shadow-md: 0 4px 12px rgba(28, 31, 35, 0.12);
  --gz-gap-sm: 8px;
  --gz-gap-md: 12px;
  --gz-gap-lg: 20px;
  --gz-font-size-sm: 12px;
  --gz-font-size-md: 14px;
  --gz-font-size-lg: 16px;
  --gz-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--gz-bg);
  color: var(--gz-text);
  font-family: var(--gz-font-family);
  font-size: var(--gz-font-size-md);
}

button {
  font-family: var(--gz-font-family);
}

.gz-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.gz-block-overlay {
  position: fixed;
  inset: 0;
  background: var(--gz-bg);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gz-block-box {
  background: var(--gz-surface);
  border: 1px solid var(--gz-danger);
  border-radius: var(--gz-radius-lg);
  padding: var(--gz-gap-lg) calc(var(--gz-gap-lg) * 2);
  box-shadow: var(--gz-shadow-md);
  max-width: 480px;
}

.gz-block-box h2 {
  color: var(--gz-danger);
  margin: 0 0 var(--gz-gap-md);
}

.gz-messages {
  position: fixed;
  top: var(--gz-gap-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: var(--gz-gap-sm);
  align-items: center;
}

.gz-message {
  background: var(--gz-surface);
  border-radius: var(--gz-radius-md);
  padding: var(--gz-gap-sm) var(--gz-gap-lg);
  box-shadow: var(--gz-shadow-md);
  font-size: var(--gz-font-size-md);
  max-width: 560px;
}

.gz-msg-info { border-left: 4px solid var(--gz-info); }
.gz-msg-success { border-left: 4px solid var(--gz-success); }
.gz-msg-warning { border-left: 4px solid var(--gz-warning); }
.gz-msg-danger { border-left: 4px solid var(--gz-danger); }

.gz-topbar {
  display: flex;
  align-items: center;
  gap: var(--gz-gap-lg);
  background: var(--gz-surface);
  padding: var(--gz-gap-md) var(--gz-gap-lg);
  box-shadow: var(--gz-shadow-sm);
  flex-wrap: wrap;
}

.gz-title { display: flex; align-items: center; gap: var(--gz-gap-sm); }
.gz-logo {
  font-size: var(--gz-font-size-lg);
  font-weight: 700;
  color: var(--gz-primary);
}
.gz-subtitle { color: var(--gz-text-secondary); }

.gz-badge {
  display: inline-block;
  font-size: var(--gz-font-size-sm);
  padding: 1px 6px;
  border-radius: var(--gz-radius-sm);
  border: 1px solid var(--gz-border);
  color: var(--gz-text-secondary);
  background: var(--gz-surface);
  margin-left: var(--gz-gap-sm);
}
.gz-badge-static { border-color: var(--gz-info); color: var(--gz-info); }
.gz-badge-cdp { border-color: var(--gz-primary); color: var(--gz-primary); }
.gz-badge-cal { border-color: var(--gz-warning); color: var(--gz-text-secondary); }
.gz-badge.warn { border-color: var(--gz-warning); color: var(--gz-warning); }

.gz-style-switch button {
  border: 1px solid var(--gz-border);
  background: var(--gz-surface);
  color: var(--gz-text-secondary);
  padding: 6px var(--gz-gap-lg);
  cursor: pointer;
  font-size: var(--gz-font-size-md);
}
.gz-style-switch button:first-child { border-radius: var(--gz-radius-md) 0 0 var(--gz-radius-md); }
.gz-style-switch button:last-child { border-radius: 0 var(--gz-radius-md) var(--gz-radius-md) 0; }
.gz-style-switch button.active {
  background: var(--gz-primary);
  border-color: var(--gz-primary);
  color: var(--gz-surface);
}

.gz-actions { display: flex; gap: var(--gz-gap-sm); align-items: center; flex-wrap: wrap; }
.gz-actions button, .gz-btn-file, .gz-btn-primary {
  border: 1px solid var(--gz-border);
  background: var(--gz-surface);
  color: var(--gz-text);
  padding: 6px var(--gz-gap-md);
  border-radius: var(--gz-radius-sm);
  cursor: pointer;
  font-size: var(--gz-font-size-md);
}
.gz-btn-primary { background: var(--gz-primary); border-color: var(--gz-primary); color: var(--gz-surface); }
.gz-btn-danger { color: var(--gz-danger); border-color: var(--gz-danger); }
.gz-btn-file { display: inline-block; }
.gz-btn-file.highlight { border-color: var(--gz-primary); box-shadow: 0 0 0 2px var(--gz-primary-light); }
.gz-actions button:hover, .gz-btn-file:hover { border-color: var(--gz-primary); }

.gz-mode-badge {
  margin-left: auto;
  font-size: var(--gz-font-size-sm);
  color: var(--gz-text-secondary);
  background: var(--gz-bg);
  border-radius: var(--gz-radius-md);
  padding: var(--gz-gap-sm) var(--gz-gap-md);
}

.gz-main {
  display: flex;
  gap: var(--gz-gap-lg);
  padding: var(--gz-gap-lg);
  flex: 1;
  align-items: flex-start;
}
.gz-left { flex: 1 1 46%; display: flex; flex-direction: column; gap: var(--gz-gap-md); }
.gz-right { flex: 1 1 54%; display: flex; flex-direction: column; gap: var(--gz-gap-md); }

.gz-video-note {
  color: var(--gz-text-tertiary);
  font-size: var(--gz-font-size-sm);
  background: var(--gz-surface);
  border-radius: var(--gz-radius-md);
  padding: var(--gz-gap-sm) var(--gz-gap-md);
}

.gz-banner {
  border-radius: var(--gz-radius-md);
  padding: var(--gz-gap-sm) var(--gz-gap-md);
  font-size: var(--gz-font-size-sm);
}
.gz-banner-warning { background: var(--gz-warning-light); color: var(--gz-text); border: 1px solid var(--gz-warning); }
.gz-banner-danger { background: var(--gz-danger-light); color: var(--gz-danger); border: 1px solid var(--gz-danger); }
.gz-banner-info { background: var(--gz-info-light); color: var(--gz-text); border: 1px solid var(--gz-info); }

.gz-debug {
  background: var(--gz-surface);
  border-radius: var(--gz-radius-lg);
  padding: var(--gz-gap-md);
  box-shadow: var(--gz-shadow-sm);
}
.gz-debug-tabs { display: flex; gap: var(--gz-gap-sm); flex-wrap: wrap; }
.gz-debug-tabs button {
  border: 1px solid var(--gz-border);
  background: var(--gz-surface);
  padding: 4px var(--gz-gap-md);
  border-radius: var(--gz-radius-sm);
  cursor: pointer;
  color: var(--gz-text-secondary);
  font-size: var(--gz-font-size-sm);
}
.gz-debug-tabs button.active { background: var(--gz-primary-light); border-color: var(--gz-primary); color: var(--gz-primary-dark); }
.gz-debug-canvas-wrap { margin-top: var(--gz-gap-md); min-height: 300px; display: flex; justify-content: center; }
.gz-debug-canvas { max-width: 100%; border: 1px solid var(--gz-border); border-radius: var(--gz-radius-sm); }

.gz-timing-bar { margin-top: var(--gz-gap-md); display: flex; flex-direction: column; gap: 4px; }
.gz-timing-item { display: flex; align-items: center; gap: var(--gz-gap-sm); font-size: var(--gz-font-size-sm); }
.gz-timing-name { width: 48px; color: var(--gz-text-secondary); }
.gz-timing-track { flex: 1; height: 8px; background: var(--gz-bg); border-radius: 4px; overflow: hidden; }
.gz-timing-fill { height: 100%; background: var(--gz-primary); transition: width 0.2s; }
.gz-timing-ms { width: 52px; text-align: right; color: var(--gz-text-tertiary); }

.gz-result, .gz-align {
  background: var(--gz-surface);
  border-radius: var(--gz-radius-lg);
  padding: var(--gz-gap-md);
  box-shadow: var(--gz-shadow-sm);
}
.gz-result-empty { color: var(--gz-text-tertiary); text-align: center; padding: var(--gz-gap-lg); }

.gz-status-bar {
  display: flex;
  gap: var(--gz-gap-lg);
  padding: var(--gz-gap-sm) var(--gz-gap-md);
  border-radius: var(--gz-radius-md);
  font-weight: 600;
  margin-bottom: var(--gz-gap-md);
  flex-wrap: wrap;
}
.gz-status-bar.success { background: var(--gz-primary-light); color: var(--gz-primary-dark); }
.gz-status-bar.warning { background: var(--gz-warning-light); color: var(--gz-text); }
.gz-status-bar.danger { background: var(--gz-danger-light); color: var(--gz-danger); }

.gz-baseline-line {
  font-size: var(--gz-font-size-sm);
  color: var(--gz-text-secondary);
  margin: var(--gz-gap-sm) 0;
}

.gz-table { width: 100%; border-collapse: collapse; font-size: var(--gz-font-size-sm); }
.gz-table th, .gz-table td { border: 1px solid var(--gz-border); padding: 4px 8px; text-align: left; }
.gz-table th { background: var(--gz-bg); color: var(--gz-text-secondary); }
.gz-table tr.invalid td { background: var(--gz-danger-light); }

.gz-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--gz-radius-sm);
  font-size: var(--gz-font-size-sm);
  border: 1px solid var(--gz-border);
}
.gz-tag-success { border-color: var(--gz-success); color: var(--gz-success); }
.gz-tag-warning { border-color: var(--gz-warning); color: var(--gz-text); background: var(--gz-warning-light); }
.gz-tag-neutral { border-color: var(--gz-neutral); color: var(--gz-text-secondary); }
.gz-tag-danger { border-color: var(--gz-danger); color: var(--gz-danger); }

.gz-params { background: var(--gz-surface); border-radius: var(--gz-radius-lg); padding: var(--gz-gap-md); }
.gz-param-group { border: 1px solid var(--gz-border); border-radius: var(--gz-radius-md); margin-bottom: var(--gz-gap-sm); }
.gz-param-group-head {
  display: flex;
  align-items: center;
  gap: var(--gz-gap-sm);
  padding: var(--gz-gap-sm) var(--gz-gap-md);
  cursor: pointer;
  font-weight: 600;
  color: var(--gz-text);
}
.gz-arrow { transition: transform 0.15s; display: inline-block; }
.gz-arrow.open { transform: rotate(90deg); }
.gz-style-tabs { margin-left: auto; display: flex; gap: var(--gz-gap-sm); }
.gz-style-tabs button {
  border: 1px solid var(--gz-border);
  background: var(--gz-surface);
  padding: 2px 10px;
  cursor: pointer;
  font-size: var(--gz-font-size-sm);
  color: var(--gz-text-secondary);
}
.gz-style-tabs button.active { background: var(--gz-primary-light); border-color: var(--gz-primary); color: var(--gz-primary-dark); }
.gz-param-body { padding: var(--gz-gap-sm) var(--gz-gap-md) var(--gz-gap-md); }
.gz-param-row { display: flex; align-items: center; gap: var(--gz-gap-sm); padding: 3px 0; }
.gz-param-label { flex: 1 1 55%; font-size: var(--gz-font-size-sm); color: var(--gz-text-secondary); }
.gz-param-note { color: var(--gz-warning); cursor: help; }
.gz-param-row input[type="number"], .gz-param-row input[type="text"], .gz-param-row select {
  border: 1px solid var(--gz-border);
  border-radius: var(--gz-radius-sm);
  padding: 4px 8px;
  font-size: var(--gz-font-size-sm);
  width: 160px;
  color: var(--gz-text);
}
.gz-cal-record { font-size: var(--gz-font-size-sm); color: var(--gz-text-secondary); padding: 2px 0; }
.gz-layout-actions { display: flex; gap: var(--gz-gap-sm); margin-bottom: var(--gz-gap-sm); }
.gz-layout-actions button { border: 1px solid var(--gz-border); background: var(--gz-surface); padding: 4px 12px; border-radius: var(--gz-radius-sm); cursor: pointer; color: var(--gz-text); }
.gz-layout-text { width: 100%; font-family: monospace; font-size: var(--gz-font-size-sm); border: 1px solid var(--gz-border); border-radius: var(--gz-radius-sm); padding: var(--gz-gap-sm); color: var(--gz-text); background: var(--gz-bg); }
.gz-layout-error { color: var(--gz-danger); font-size: var(--gz-font-size-sm); margin: var(--gz-gap-sm) 0; }
.gz-align-report { margin-top: var(--gz-gap-md); display: flex; flex-direction: column; gap: var(--gz-gap-sm); align-items: flex-start; }

.gz-footer { padding: 0 var(--gz-gap-lg) var(--gz-gap-lg); }