/* Shared macOS-inspired material. Presentation only; keep role and data logic in JS. */
body.mac-glass {
  --card-bg: rgba(24, 43, 69, .78);
  --card-border: rgba(224, 237, 255, .2);
  --input-bg: rgba(9, 23, 42, .82);
  --text-primary: #f4f7ff;
  --text-secondary: #c1cee0;
  --text-muted: #a6b7cd;
  --navy-border: rgba(212, 227, 249, .18);
  --gold: #ebca7c;
  --gold-light: #f5dca2;
  --radius-lg: 22px;
  --shadow-md: 0 16px 40px rgba(2, 10, 25, .24);
  color: var(--text-primary);
  background: radial-gradient(ellipse at 8% 5%, #344c76 0, transparent 52%),
    radial-gradient(ellipse at 94% 78%, #254964 0, transparent 48%),
    linear-gradient(140deg, #111e35, #172b43 58%, #101c30);
  min-height: 100vh;
  min-height: 100dvh;
  font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
}
.mac-glass :is(.login-card, .card, .kpi-card, .year-stat-card, .modal-content, .crystal-card) {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--shadow-md);
}
.mac-glass :is(.navbar, .top-nav, .sidebar, .topbar) {
  background: rgba(16, 31, 51, .94);
  border-color: var(--card-border);
  box-shadow: 0 8px 28px rgba(0, 8, 24, .18);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mac-glass :is(.login-card, .card, .kpi-card, .year-stat-card, .modal-content, .crystal-card) {
    background: rgba(24, 43, 69, .62);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    backdrop-filter: blur(24px) saturate(135%);
  }
  .mac-glass :is(.navbar, .top-nav, .sidebar, .topbar) {
    background: rgba(16, 31, 51, .78);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
  }
}
.mac-glass .login-card { padding: clamp(22px, 5vw, 36px); }
.mac-glass .tab-bar {
  padding: 5px;
  gap: 5px;
  background: rgba(5, 17, 34, .4);
  border: 1px solid rgba(224,237,255,.13);
  border-radius: 15px;
  flex-wrap: wrap;
}
.mac-glass .tab-btn { border: 0; border-radius: 11px; margin-bottom: 0; min-height: 44px; color: #c7d4e5; }
.mac-glass .tab-btn.active {
  color: #fff2cf;
  background: rgba(221, 233, 252, .15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 3px 10px rgba(0,0,0,.12);
}
.mac-glass :is(.form-input, .form-select, .form-textarea) {
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid rgba(203, 224, 251, .28);
  border-radius: 12px;
  min-height: 44px;
}
.mac-glass input::placeholder, .mac-glass textarea::placeholder { color: #a6b7cd; opacity: 1; }
.mac-glass select option { background: #15283e; color: #f4f7ff; }
.mac-glass .btn { border-radius: 12px; min-height: 44px; }
.mac-glass .btn-primary { background: linear-gradient(145deg, #f3d996, #d5b267); color: #172339; text-shadow: none; }
.mac-glass :is(button, a, input, select, textarea):focus-visible { outline: 3px solid #9ed3ff; outline-offset: 3px; }
.mac-glass .mac-traffic-lights { border-bottom: 1px solid var(--card-border); padding-bottom: 16px; }
.mac-glass .mac-title { color: #c1cee0; letter-spacing: .02em; }
.mac-glass :is(th, td) { border-color: rgba(220,235,255,.13); }
@media (max-width: 600px) {
  .mac-glass .tab-btn { padding: 10px 12px; }
  .mac-glass .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mac-glass .kpi-card { padding: 14px 12px; gap: 8px; }
  .mac-glass .year-stats-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mac-glass *, .mac-glass *::before, .mac-glass *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .mac-glass :is(.login-card, .card, .kpi-card, .year-stat-card, .modal-content, .crystal-card, .navbar, .top-nav, .sidebar, .topbar) {
    background: #182b45; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #92a6c2;
  }
}
@media print {
  body.mac-glass { background: white !important; color: black !important; }
  .mac-glass :is(.login-card, .card, .kpi-card, .year-stat-card, .modal-content, .crystal-card) {
    background: white !important; color: black !important; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}