html, body { margin: 0; padding: 0; }

body.fb-body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  line-height: 1.6;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

@media (max-width: 640px) {
  html { font-size: 17px; }
}

/* Header */
.fb-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

/* Cards */
.fb-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
}

/* Buttons */
.fb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
}

.fb-btn:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.fb-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.fb-btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}
.fb-btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }

.fb-btn-success { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.fb-btn-success:hover { background: #2e7d4f; color: #fff; }

.fb-btn-danger { background: var(--color-error); border-color: var(--color-error); color: #fff; }
.fb-btn-danger:hover { background: #a93226; color: #fff; }

.fb-btn-subtle { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-primary); }
.fb-btn-subtle:hover { background: var(--color-primary-light); }

/* Links */
.fb-link { color: var(--color-primary); text-decoration: none; }
.fb-link:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* Inputs */
.fb-input, .fb-textarea, .fb-select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 0.65rem;
  background: var(--color-white);
  color: var(--color-text-primary);
  padding: 0.65rem 0.85rem;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fb-input:focus, .fb-textarea:focus, .fb-select:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(83, 74, 183, 0.15);
}

.fb-textarea { resize: vertical; }

/* Labels */
.fb-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.35rem;
}

/* Help text */
.fb-help {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.fb-error-text { color: var(--color-error); font-size: 0.875rem; }

/* Badges */
.fb-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.fb-badge-success { background: var(--color-success-light); color: var(--color-success); border-color: rgba(45,138,78,0.25); }
.fb-badge-warning { background: var(--color-warning-light); color: var(--color-warning); border-color: rgba(212,130,10,0.25); }
.fb-badge-error   { background: var(--color-error-light);   color: var(--color-error);   border-color: rgba(192,57,43,0.25); }
.fb-badge-info    { background: var(--color-info-light);    color: var(--color-info);    border-color: rgba(36,113,163,0.25); }
.fb-badge-muted   { background: var(--color-surface);       color: var(--color-text-muted); border-color: var(--color-border); }

/* Tables */
.fb-table { width: 100%; border-collapse: collapse; }
.fb-table thead { background: var(--color-surface); color: var(--color-text-secondary); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.fb-table th, .fb-table td { padding: 0.85rem 1rem; border-top: 1px solid var(--color-border); text-align: left; }
.fb-table-row:hover { background: #fafbff; }

/* Flash messages */
.fb-flash {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  border: 1px solid transparent;
}

/* Toggle switch */
.fb-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.fb-toggle input { opacity: 0; width: 0; height: 0; }
.fb-toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #D1D5DB; border-radius: 24px;
  transition: 0.2s;
}
.fb-toggle-slider:before {
  content: ""; position: absolute;
  width: 18px; height: 18px; left: 3px; bottom: 3px;
  background: white; border-radius: 50%;
  transition: 0.2s;
}
.fb-toggle input:checked + .fb-toggle-slider { background: var(--color-primary); }
.fb-toggle input:checked + .fb-toggle-slider:before { transform: translateX(20px); }

/* Progress bar */
.fb-progress-bar {
  height: 6px;
  background: var(--color-surface);
  border-radius: 999px;
  overflow: hidden;
}
.fb-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Rating buttons */
.fb-rating-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 2px solid var(--color-border);
  border-radius: 0.5rem;
  font-weight: 600; font-size: 0.9rem;
  cursor: pointer; background: var(--color-white);
  transition: all 0.1s ease;
}
.fb-rating-btn:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.fb-rating-btn.selected { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }

/* Yes/No buttons */
.fb-yn-btn {
  flex: 1; padding: 14px;
  border: 2px solid var(--color-border);
  border-radius: 0.75rem;
  font-weight: 600; font-size: 1rem;
  cursor: pointer; background: var(--color-white);
  text-align: center; transition: all 0.15s ease;
}
.fb-yn-btn:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.fb-yn-btn.selected { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }

/* Stat cards */
.fb-stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-soft);
}
.fb-stat-value { font-size: 2rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.fb-stat-label { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }