#workexcusepage *,
#workexcusepage *::before,
#workexcusepage *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}
 #workexcusepage {
    --accent: #2563EB; --accent-bg: #EFF6FF;
    --text: #1E293B; --muted: #64748B;
    --card: #FFFFFF; --bg: #F8FAFC;
    --border: #E2E8F0; --border-strong: #CBD5E1;
    --green: #059669; --green-bg: #D1FAE5; --green-border: #6EE7B7; --green-light: #ECFDF5;
    --orange: #D97706; --orange-bg: #FEF3C7; --orange-border: #FCD34D;
    --red: #DC2626; --red-bg: #FEE2E2; --red-border: #FCA5A5;
  }
  @media (prefers-color-scheme: dark) {
 #workexcusepage {
      --accent: #60A5FA; --accent-bg: #1E3A5F;
      --text: #F1F5F9; --muted: #94A3B8;
      --card: #1E293B; --bg: #0F172A;
      --border: #334155; --border-strong: #475569;
      --green: #34D399; --green-bg: #064E3B; --green-border: #065F46; --green-light: #022C22;
      --orange: #FBBF24; --orange-bg: #78350F; --orange-border: #92400E;
      --red: #F87171; --red-bg: #7F1D1D; --red-border: #991B1B;
    }
  }
#workexcusepage {
  font-family: 'DM Sans', sans-serif;
  color: #1E293B;
  min-height: 100vh; 
  padding: 0 16px 60px;
  text-align: center;
    padding: 20px 20px 72px;
    background: radial-gradient(100% 70% at 50% -10%, rgb(204, 238, 221) 0px, transparent 65%);

}

#workexcusepage .container { 
  max-width: 580px; 
  margin: 0 auto; 
}

#workexcusepage .sticky-top {
  position: sticky; 
  top: 0; 
  z-index: 9999;
  backdrop-filter: blur(10px);       /* blur content behind header */
  -webkit-backdrop-filter: blur(10px);

  padding: 20px 0 16px;
}

#workexcusepage .header { 
  text-align: center; 
  margin-bottom: 16px; 
}

#workexcusepage .header-tag { 
  font-size: 13px; 
  font-weight: 600; 
  color: #2563EB; 
  text-transform: uppercase; 
  letter-spacing: 0.08em; 
  margin-bottom: 4px; 
}

#workexcusepage .header h1 { 
  font-size: 22px; 
  font-weight: 700; 
  letter-spacing: -0.02em; 
}

#workexcusepage .progress-bar { 
  height: 6px; 
  border-radius: 3px; 
  background: #E2E8F0; 
  overflow: hidden; 
}

#workexcusepage .progress-fill { 
  height: 100%; 
  border-radius: 3px; 
  background: #059669; 
  transition: width 0.4s ease; 
}

#workexcusepage .progress-meta { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  margin-top: 6px; 
}

#workexcusepage .progress-label { 
  font-size: 12px; 
  color: #64748B; 
}

#workexcusepage .progress-step { 
  font-size: 12px; 
  color: #64748B; 
  font-weight: 600; 
}

#workexcusepage .progress-msg {
  margin-top: 8px; 
  font-size: 13px; 
  line-height: 1.5;
  padding: 10px 14px; 
  border-radius: 8px;
  transition: all 0.3s ease; 
  font-weight: 500;
}

#workexcusepage .q-card {
  background: var(--card);
  border: 2px solid var(--accent); 
  border-radius: 14px;
  padding: 24px 24px 28px; 
  margin-top: 8px; 
  animation: slideIn 0.3s ease;
}

#workexcusepage .q-card-header { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  margin-bottom: 18px; 
}

#workexcusepage .q-badge {
  width: 28px; 
  height: 28px; 
  border-radius: 50%; 
  background: var(--accent);
  color: white; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 13px; 
  font-weight: 700; 
  flex-shrink: 0;
}

#workexcusepage .q-card-header h2 { 
  font-size: 16px; 
  font-weight: 700; 
  letter-spacing: -0.01em; 
}

#workexcusepage .q-subtitle { 
  font-size: 13px; 
  color: #64748B; 
  margin: -12px 0 16px 38px; 
}

#workexcusepage .option {
  display: flex; 
  align-items: flex-start; 
  gap: 10px;
  padding: 12px 14px; 
  border-radius: 10px;
  cursor: pointer; 
  transition: all 0.15s ease;
  font-size: 14px; 
  margin-bottom: 6px; 
  line-height: 1.4;
}

#workexcusepage .option:hover { 
  border-color: #CBD5E1; 
}

#workexcusepage .option.selected { 
  border-color: #2563EB; 
  background: #EFF6FF; 
}

#workexcusepage .option.selected.sel-orange { 
color:#FBBF24;
  background: #78350F; 
  border: 1px solid #92400e;
}

#workexcusepage .option.selected.sel-red { 
  border-color: #DC2626; 
  background: #FEE2E2; 
}

#workexcusepage .risk-tag {
  display: inline-block; 
  font-size: 10px; 
  font-weight: 700; 
  text-transform: uppercase;
  letter-spacing: 0.05em; 
  padding: 2px 7px; 
  border-radius: 4px; 
  margin-left: 8px;
  vertical-align: middle; 
  position: relative; 
  top: -1px;
}

#workexcusepage .risk-tag-orange { 
  background: #FEF3C7; 
  color: #D97706; 
  border: 1px solid #FCD34D; 
}

#workexcusepage .risk-tag-red { 
  background: #FEE2E2; 
  color: #DC2626; 
  border: 1px solid #FCA5A5; 
}

#workexcusepage .option-none {
  display: flex; 
  align-items: center; 
  gap: 10px;
  padding: 14px 18px; 
  border-radius: 12px;
  border: 2px solid #6EE7B7; 
  background: #D1FAE5;
  cursor: pointer; 
  transition: all 0.15s ease;
  font-size: 15px; 
  font-weight: 600; 
  margin-bottom: 10px; 
  line-height: 1.4; 
  color: #059669;
}

#workexcusepage .option-none:hover { 
  border-color: #059669; 
  opacity: 0.92; 
}

#workexcusepage .separator-or {
  text-align: center; 
  font-size: 12px; 
  color: #64748B; 
  margin: 4px 0 8px;
  text-transform: uppercase; 
  letter-spacing: 0.06em;
}

#workexcusepage .confirm-check {
  display: flex; 
  align-items: center; 
  gap: 10px;
  padding: 14px 18px; 
  border-radius: 12px;
  border: 2px solid #6EE7B7; 
  background: #D1FAE5;
  cursor: pointer; 
  transition: all 0.15s ease;
  font-size: 15px; 
  font-weight: 600; 
  line-height: 1.4; 
  color: #059669;
}

#workexcusepage .confirm-check:hover { 
  border-color: #059669; 
  opacity: 0.92; 
}

#workexcusepage .confirm-summary {
  margin-top: 16px; 
  padding: 12px 16px; 
  border-radius: 10px;
  background: #F8FAFC; 
  border: 1.5px solid #E2E8F0;
  font-size: 13px; 
  color: #64748B; 
  line-height: 1.5;
}

#workexcusepage .confirm-summary strong { 
  color: #1E293B; 
  font-weight: 600; 
}

#workexcusepage .confirm-edit {
  display: inline; 
  margin-left: 8px; 
  font-size: 12px; 
  color: #2563EB;
  cursor: pointer; 
  text-decoration: underline; 
  background: none; 
  border: none;
  font-family: 'DM Sans', sans-serif; 
  font-weight: 600;
}

#workexcusepage .btn-done {
  width: 100%; 
  padding: 13px 24px; 
  border-radius: 10px; 
  border: 2px solid #059669;
  background: #D1FAE5; 
  color: #059669; 
  font-size: 14px; 
  font-weight: 700;
  cursor: pointer; 
  font-family: 'DM Sans', sans-serif; 
  margin-top: 16px;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 8px;
  transition: all 0.15s ease;
}

#workexcusepage .btn-done:hover { 
  background: #059669; 
  color: white; 
}

#workexcusepage .radio-dot {
  width: 18px; 
  height: 18px; 
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-shrink: 0; 
  margin-top: 1px;
}

#workexcusepage .option.selected .radio-dot { 
  border-color: #2563EB; 
}

#workexcusepage .option.selected.sel-orange .radio-dot { 
  border-color: #D97706; 
}

#workexcusepage .option.selected.sel-red .radio-dot { 
  border-color: #DC2626; 
}

#workexcusepage .radio-dot-inner { 
  width: 10px; 
  height: 10px; 
  border-radius: 50%; 
  background: #2563EB; 
  display: none; 
}

#workexcusepage .option.selected .radio-dot-inner { 
  display: block; 
}

#workexcusepage .check-box {
  width: 18px; 
  height: 18px; 
  border-radius: 5px;
  border: 2px solid #CBD5E1; 
  background: transparent;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-shrink: 0; 
  margin-top: 1px;
}

#workexcusepage .option.selected .check-box { 
  border-color: #2563EB; 
  background: #2563EB; 
}

#workexcusepage .option.selected.sel-orange .check-box { 
  border-color: #D97706; 
  background: #D97706; 
}

#workexcusepage .option.selected.sel-red .check-box { 
  border-color: #DC2626; 
  background: #DC2626; 
}

#workexcusepage .check-box svg { 
  display: none; 
}

#workexcusepage .option.selected .check-box svg { 
  display: block; 
}

#workexcusepage .alert {
  margin-top: 12px; 
  padding: 14px 16px; 
  border-radius: 10px;
  font-size: 13.5px; 
  line-height: 1.55;
  display: flex; 
  gap: 10px; 
  align-items: flex-start; 
  animation: slideIn 0.25s ease;
}

#workexcusepage .alert-danger { 
  background: #FEE2E2; 
  border: 1.5px solid #EF4444; 
  color: #991B1B; 
}

#workexcusepage .alert-orange { 
  background: #FEF3C7; 
  border: 1.5px solid #D97706; 
  color: #92400E; 
}

#workexcusepage .alert-icon { 
  font-size: 16px; 
  flex-shrink: 0; 
}

#workexcusepage .btn-primary {
  width: 100%; 
  padding: 14px 24px; 
  border-radius: 12px; 
  border: none;
  background: #1b7a49; 
  color: white; 
  font-size: 15px; 
  font-weight: 600;
  cursor: pointer; 
  font-family: 'DM Sans', sans-serif; 
  margin-top: 8px;
}

#workexcusepage .btn-primary:hover { 
  opacity: 0.92; 
}

#workexcusepage .btn-secondary {
  padding: 12px 24px; 
  border-radius: 10px; 
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF; 
  color: #1E293B; 
  font-size: 14px; 
  font-weight: 600;
  cursor: pointer; 
  font-family: 'DM Sans', sans-serif;
}

#workexcusepage .hidden { 
  display: none; 
}

#workexcusepage .success-screen { 
  text-align: center; 
  padding: 40px 20px; 
}

#workexcusepage .success-screen h2 { 
  font-size: 22px; 
  font-weight: 700; 
  margin-bottom: 12px; 
}

#workexcusepage .success-screen p { 
  color: #64748B; 
  font-size: 14px; 
  line-height: 1.6; 
  max-width: 460px; 
  margin: 0 auto 24px; 
}

#workexcusepage .care-box {
 
  border: 1.5px solid #E2E8F0; 
  border-radius: 12px;
  padding: 20px 24px; 
  text-align: left; 
  max-width: 460px; 
  margin: 0 auto 28px;
}

#workexcusepage .care-box h3 { 
  font-size: 14px; 
  font-weight: 600; 
  margin-bottom: 10px; 
}

#workexcusepage .care-box ul { 
  padding-left: 18px; 
  color: #64748B; 
  font-size: 13.5px; 
  line-height: 1.7; 
}

/* Animation */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}