:root {
  --pm-brand: #00A650;
  --pm-brand-dark: #008F47;
  --pm-brand-light: #E8F5E9;
  --pm-bg: #EBEBEB;
  --pm-bg-page: #EBEBEB;
  --pm-surface: #FFFFFF;
  --pm-surface-raised: #FFFFFF;
  --pm-input-bg: #F8F9FA;
  --pm-text: #333333;
  --pm-text-muted: #666666;
  --pm-border: #D1D5DB;
  --pm-danger: #EF4444;
  --pm-warning: #F59E0B;
  --pm-info: #3483FA;
  --pm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --pm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --pm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --pm-radius: 8px;
  --pm-radius-lg: 12px;
  --pm-header-h: 64px;
}

.pm-container { max-width: 1200px; margin: 0 auto; padding: 0 16px; width: 100%; }
.pm-card { background: var(--pm-surface); border: 1px solid var(--pm-border); border-radius: var(--pm-radius-lg); box-shadow: var(--pm-shadow-sm); }
.pm-card-raised { background: var(--pm-surface-raised); border: 1px solid var(--pm-border); border-radius: var(--pm-radius-lg); box-shadow: var(--pm-shadow-md); }
.pm-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; background: var(--pm-brand); color: #fff; border: none; border-radius: var(--pm-radius); font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; transition: background 0.15s; }
.pm-btn-primary:hover:not(:disabled) { background: var(--pm-brand-dark); }
.pm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.pm-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; background: var(--pm-surface); color: var(--pm-text); border: 1px solid var(--pm-border); border-radius: var(--pm-radius); font-weight: 500; font-size: 15px; cursor: pointer; text-decoration: none; }
.pm-btn-secondary:hover { border-color: var(--pm-brand); background: var(--pm-brand-light); }
.pm-input { width: 100%; padding: 10px 14px; border: 1px solid var(--pm-border); border-radius: var(--pm-radius); font-size: 15px; color: var(--pm-text); background: var(--pm-input-bg); }
.pm-input:focus { outline: none; border-color: var(--pm-brand); box-shadow: 0 0 0 3px rgba(0, 166, 80, 0.15); }
.pm-input.invalid { border-color: var(--pm-danger); }
.pm-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; background: var(--pm-brand-light); color: var(--pm-brand-dark); }
.pm-skeleton { background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%); background-size: 200% 100%; animation: pmShimmer 1.2s infinite; border-radius: var(--pm-radius); }
@keyframes pmShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (min-width: 768px) {
  .pm-container { padding: 0 24px; }
}