:root{
  --km-radius: 12px;
  --km-gap: 16px;
  --km-border: #e5e7eb;
  --km-bg: #ffffff;
  --km-text: #111827;
  --km-muted: #6b7280;
  --km-primary: #0ea5e9;
  --km-primary-600: #0284c7;
  --km-success: #10b981;
  --km-danger: #ef4444;
}
.km-form{ max-width: 940px; color: var(--km-text); font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
.km-form .km-grid{ display:flex; flex-wrap:wrap; gap: var(--km-gap); }
.km-col{ flex: 0 0 auto; }
.km-col-12{ width:100% } .km-col-9{width:calc(75% - var(--km-gap)/2)} .km-col-8{width:calc(66.66% - var(--km-gap)/2)} .km-col-6{ width:calc(50% - var(--km-gap)/2) } .km-col-4{ width:calc(33.33% - var(--km-gap)/2) } .km-col-3{ width:calc(25% - var(--km-gap)/2) }
@media (max-width: 820px){ .km-col-6,.km-col-4,.km-col-3,.km-col-8,.km-col-9{ width:100% } }

.km-field{ background: var(--km-bg); border: 1px solid var(--km-border); border-radius: var(--km-radius); padding:12px 14px; box-shadow: 0 1px 1px rgba(0,0,0,.02); }
.km-label{ font-weight:600; margin-bottom:6px; display:inline-block; }
.km-req{ color: var(--km-danger); margin-left:4px }
.km-field input[type=text], .km-field input[type=email], .km-field input[type=number], .km-field input[type=date], .km-field textarea, .km-field select {
  width:100%; padding: 10px 12px; border: 1px solid var(--km-border); border-radius: 10px; background:#fff;
}
.km-field input:focus, .km-field textarea:focus, .km-field select:focus{ outline: 3px solid rgba(14,165,233,.25); border-color: var(--km-primary); }
.km-inline{ display:inline-block; margin-right:12px; margin-top:6px; }

.km-nav .button, .km-form button.button, .km-form .button { 
  background: var(--km-primary); border:none; color:#fff; padding:10px 16px; border-radius: 10px; cursor:pointer;
}
.km-nav .button:hover { background: var(--km-primary-600); }

.km-steps{ margin-bottom:10px; }
.km-step-indicator{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.km-step-dot{ width:10px; height:10px; border-radius:999px; background:#d1d5db }
.km-step-dot.active{ background: var(--km-primary); }
.km-progress{ height:6px; background:#f3f4f6; border-radius:999px; overflow:hidden; margin:8px 0 16px }
.km-progress > span{ display:block; height:6px; background: var(--km-primary); width:0% }

.km-upload{ margin-top:8px; font-size:13px }
.km-up-ok{ color: var(--km-success) }
.km-up-err{ color: var(--km-danger) }

.km-view .km-table-view{ width:100%; border-collapse:collapse; font-size:15px }
.km-view .km-table-view th, .km-view .km-table-view td{ border:1px solid var(--km-border); padding:10px }
.km-cards{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px }
.km-card{ border:1px solid var(--km-border); border-radius: var(--km-radius); background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04) }
.km-card-body{ padding:14px } .km-card-title{ font-weight:700; margin-bottom:6px } .km-card-footer{ font-size:12px; color: var(--km-muted) }

.km-form.preset-compact .km-field{ padding:10px } 
.km-form.preset-compact input, .km-form.preset-compact select, .km-form.preset-compact textarea{ padding:8px; border-radius:8px; }
.km-form.preset-cards .km-field{ background: #fafafa }

.km-success{ background:#ecfdf5; border-left:4px solid var(--km-success); padding:10px 12px; border-radius:8px }