html { scroll-behavior: smooth; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.hero-bg-container{
  position:fixed; top:0; left:0; width:100%; height:100vh; z-index:-1;
  background-image:url('../img/UIU.webp');
  background-size:cover; background-position:center; background-attachment:fixed;
}

.hero-overlay{
  position:fixed; top:0; left:0; width:100%; height:100vh; z-index:-1;
  background:linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(249,115,22,0.1));
  backdrop-filter:blur(2px);
}
.dark .hero-overlay{
  background:linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.8));
}

.glass-card{
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.3);
}
.dark .glass-card{
  background:rgba(17,24,39,0.85);
  border:1px solid rgba(255,255,255,0.1);
}

.input-group:focus-within label{ color:#f97316; }

.modal{
  opacity:0; visibility:hidden; transition:all 0.3s ease-in-out;
}
.modal.active{ opacity:1; visibility:visible; }
.modal.active .modal-content{ transform:scale(1) translateY(0); }
.modal-content{
  transform:scale(0.95) translateY(10px);
  transition:all 0.3s ease-in-out;
  max-height:90vh; display:flex; flex-direction:column;
}
.modal-body{ overflow-y:auto; flex-grow:1; }
.modal-body::-webkit-scrollbar{ width:6px; }
.modal-body::-webkit-scrollbar-thumb{ background-color:rgba(156,163,175,0.5); border-radius:3px; }

@media print{
  @page { size: A4 portrait; margin: 10mm; }
  body *{ visibility:hidden; }
  #printArea, #printArea *{ visibility:visible; }
  #printArea{
    position:fixed; left:0; top:0; width:100%;
    display:block !important; background:white !important; color:black !important;
    padding:15px; font-size:12px;
  }
  #printArea table{ width:100%; font-size:11px; }
  #printArea td, #printArea th{ padding:6px !important; }
  header, main, footer, .hero-bg-container, .hero-overlay, #exportModal, #resetModal{ display:none !important; }
}

#modalPreview{ background-color:#ffffff !important; color:#000000 !important; }
#modalPreview *{
  color:#000000 !important;
  border-color:#e5e7eb !important;
  background-color:transparent !important;
}
#modalPreview tr[style*="background-color: #f3f4f6"]{ background-color:#f3f4f6 !important; }
#modalPreview tr[style*="background-color: #fff7ed"]{ background-color:#fff7ed !important; }