/* Modern Refined Enterprise UI for LMS TIK BPVP Belitung */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg-app: #FAFAFA;
  --surface: #FFFFFF;
  --surface-alt: #F4F4F5;
  --border-light: #E4E4E7;
  --border-medium: #D4D4D8;
  
  --text-main: #18181B;
  --text-muted: #71717A;
  --text-subtle: #A1A1AA;
  
  --brand-navy: #0F172A;
  --brand-blue: #0284C7;
  --brand-blue-hover: #0369A1;
  --brand-bg-soft: #F0F9FF;

  --shadow-flat: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  background-color: var(--bg-app) !important;
  background: var(--bg-app) !important;
  color: var(--text-main) !important;
  line-height: 1.6;
}

/* Titles with Editorial Typography */
h1, h2, .brand {
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
}

.mview h2 {
  font-family: 'Newsreader', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  color: #09090B !important;
}

/* Card Improvements */
.card, .box, .mitem, .login-box, .certCard {
  background: var(--surface) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-card) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.card:hover, .mitem:hover {
  border-color: var(--border-medium) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Button Refinements */
button {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
  padding: 9px 16px !important;
  border: 1px solid var(--border-light) !important;
  background: var(--surface) !important;
  color: var(--text-main) !important;
  transition: all 0.15s ease !important;
}

button:hover {
  background: var(--surface-alt) !important;
  border-color: var(--border-medium) !important;
}

button.primary {
  background: var(--brand-navy) !important;
  color: #FFFFFF !important;
  border: none !important;
}

button.primary:hover {
  background: #27272A !important;
}

/* Form Inputs */
input, select, textarea {
  border-radius: 8px !important;
  border: 1px solid var(--border-light) !important;
  background: var(--surface) !important;
  color: var(--text-main) !important;
  font-size: 14px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
}