*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* Buttons */
.sf-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, transform .1s;
  text-decoration: none;
}
.sf-btn-primary:hover { background: var(--accent-dk); text-decoration: none; color: var(--bg); }
.sf-btn-primary:active { transform: scale(.97); }

.sf-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  padding: 10px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.sf-btn-secondary:hover { background: rgba(0,200,150,.1); text-decoration: none; }

.sf-btn-danger {
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: .85rem;
  cursor: pointer;
}
.sf-btn-block { display: flex; width: 100%; }
.sf-btn-sm { padding: 6px 14px; font-size: .85rem; }

/* Alerts */
.sf-alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; }
.sf-alert-error { background: rgba(239,68,68,.1); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.sf-alert-success { background: rgba(0,200,150,.1); color: var(--accent); border: 1px solid rgba(0,200,150,.3); }

/* Forms */
.sf-form { display: flex; flex-direction: column; gap: 16px; }
.sf-form-group { display: flex; flex-direction: column; gap: 6px; }
.sf-form-group label { font-size: .85rem; font-weight: 500; color: var(--text-muted); }
.sf-form-group input,
.sf-form-group select,
.sf-form-group textarea {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: .95rem;
  outline: none;
  transition: border-color .15s;
  width: 100%;
}
.sf-form-group input:focus,
.sf-form-group select:focus,
.sf-form-group textarea:focus { border-color: var(--accent); }
.sf-form-row { display: flex; gap: 12px; }
.sf-form-row .sf-form-group { flex: 1; }
.sf-form-row .sf-form-group--sm { flex: 0 0 100px; }
.sf-form-hint { font-size: .82rem; color: var(--text-muted); }
.sf-form-section { font-family: var(--font-display); font-size: 1rem; font-weight: 700;
                   color: var(--accent); margin-top: 8px; }

/* Badges */
.sf-badge { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: .75rem; font-weight: 600; }
.sf-badge-succeeded, .sf-badge-freigegeben, .sf-badge-ok { background: rgba(0,200,150,.15); color: var(--accent); }
.sf-badge-pending, .sf-badge-offen { background: rgba(245,158,11,.15); color: var(--warn); }
.sf-badge-failed, .sf-badge-abgelehnt { background: rgba(239,68,68,.15); color: #f87171; }
.sf-badge-inactive { background: var(--bg3); color: var(--text-muted); }

/* Tables */
.sf-table-wrapper { overflow-x: auto; }
.sf-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sf-table th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border);
               color: var(--text-muted); font-size: .8rem; text-transform: uppercase; }
.sf-table td { padding: 10px 12px; border-bottom: 1px solid rgba(30,45,69,.5); }

.sf-empty { color: var(--text-muted); font-style: italic; }
.sf-divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }