:root {
  --cfv-bg: #f3f7f6;
  --cfv-panel: rgba(255, 255, 255, 0.94);
  --cfv-ink: #17211f;
  --cfv-muted: #64736f;
  --cfv-line: #dbe5e1;
  --cfv-brand: #087f68;
  --cfv-brand-dark: #056653;
  --cfv-brand-soft: #e5f5f0;
  --cfv-shadow: 0 18px 45px rgba(21, 54, 46, 0.08);
}

html { background: var(--cfv-bg); }
body {
  background:
    radial-gradient(circle at 12% 0%, rgba(27, 155, 124, 0.11), transparent 30rem),
    radial-gradient(circle at 92% 12%, rgba(69, 111, 187, 0.08), transparent 28rem),
    var(--cfv-bg) !important;
  color: var(--cfv-ink) !important;
}

main { width: min(1280px, calc(100vw - 40px)) !important; padding: 38px 0 64px !important; }
header { margin-bottom: 28px !important; align-items: center !important; }
h1 { font-size: clamp(2.1rem, 4vw, 3.55rem) !important; letter-spacing: -0.045em !important; }
h2 { letter-spacing: -0.02em; }
.subtitle, .tagline, .muted, .empty, .status-line { color: var(--cfv-muted) !important; }

.section, section, .tile, .toolbar, .card {
  border-color: var(--cfv-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--cfv-shadow) !important;
  background: var(--cfv-panel) !important;
}
.section { overflow: hidden; }
.section h2 { padding: 18px 20px !important; }
.section-body { padding: 20px !important; gap: 17px !important; }
.section-tools { padding: 15px 20px !important; background: #f8fbfa !important; }
.tile { min-height: 112px !important; padding: 18px !important; }
.tile-label { letter-spacing: .07em !important; }
.tile-value { letter-spacing: -.025em; }

input, textarea, select {
  border-color: var(--cfv-line) !important;
  border-radius: 10px !important;
  padding: 12px 13px !important;
  background: #fbfdfc !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:hover, textarea:hover, select:hover { border-color: #adc2bb !important; }
input:focus, textarea:focus, select:focus {
  background: #fff !important;
  border-color: var(--cfv-brand) !important;
  box-shadow: 0 0 0 4px rgba(8, 127, 104, .12) !important;
  outline: none !important;
}
input[readonly] { color: #53635f; background: #f1f5f3 !important; }

button, .secondary-button, .secondary {
  min-height: 44px !important;
  border-radius: 10px !important;
  padding: 0 17px !important;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
button:not(:disabled):hover, .secondary-button:hover, .secondary:hover { transform: translateY(-1px); }
button:not(.secondary-button):not(.secondary) {
  background: var(--cfv-brand) !important;
  box-shadow: 0 8px 18px rgba(8, 127, 104, .17);
}
button:not(.secondary-button):not(.secondary):hover { background: var(--cfv-brand-dark) !important; }
button:disabled { cursor: not-allowed !important; opacity: .55 !important; transform: none !important; box-shadow: none !important; }
.secondary-button, .secondary { border-color: var(--cfv-line) !important; background: #fff !important; color: var(--cfv-ink) !important; }

.badge { padding: 5px 10px !important; }
.badge.ok { color: #08704b !important; background: #ddf6e9 !important; }
.badge.warn { color: #8a5300 !important; background: #fff0ce !important; }
.badge.bad { color: #a82b22 !important; background: #fee8e6 !important; }
th { background: #f5f9f7 !important; letter-spacing: .06em !important; }
td, th { border-color: var(--cfv-line) !important; }
pre { border: 1px solid var(--cfv-line); border-radius: 12px !important; background: #f4f7f6 !important; }

.workflow-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #cce4dc;
  border-radius: 10px;
  background: var(--cfv-brand-soft);
  color: #315d52;
  font-size: 13px;
}
.field-hint { color: var(--cfv-muted); font-size: 12px; font-weight: 500; }

@media (max-width: 720px) {
  main { width: min(100% - 24px, 1280px) !important; padding-top: 22px !important; }
  header { align-items: start !important; }
  h1 { font-size: 2.25rem !important; }
}